TIL :: 상품등록시 시간설정 / 기술면접

보통은 시간을 표현할때 브라우저에서 콘솔을 찍어 createdAt 등 이렇게 표현을 한다. 그리고 프론트에서 불러와보면 2000-01-10 이런식으로 나온다. 이런 방법도 하나의 방법이 되겠지만, 현재 프로젝트를 진행하면서 중고거래플랫폼 사이트를 하다보니 아무래도 상품이 등록되었을때 ~~일전 , ~~분전 등.. 으로 표현하는게 더 괜찮을것 같아서 새로운 방법을 공부하고 적용해보았다.

우선 코드를 보면 이렇게 된다.

function timeAgo(dateParam){
    const now = new Date()
    const past = new Date(dateParam)
    const msPerMinute = 60 * 1000
    const msPerHour = msPerMinute * 60
    const msPerDay = msPerHour * 24

    const elapsed = now - past

    if(elapsed < msPerMinute) {
        return Math.round(elapsed/1000) + ' 초전'
    }
    else if(elapsed < msPerHour) {
        return Math.round(elapsed/msPerMinute) + ' 분전'
    }
    else if(elapsed < msPerDay){
        return Math.round(elapsed/msPerHour) +' 시간전'
    }
    else {
        return Math.round(elapsed/msPerDay) + ' 일전'
    }
}

우선 함수를 만들어주고 각 변수에 할당을 해준다. 그리고 조건을 걸어서 Math.round 를 해주었다. Math.round는 소숫점 첫번째 자리에서 반올림을 해준다. 그래서 ~일전, ~분전 으로 나타낼수 있다. 각 변수에 담긴 값들을 비교해서 조건을 걸고 해당하는 객체안의 키값들로 설정을 해주면 중고거래, 쇼핑몰, 유튜브 등에서 볼 수 있는 몇분전 처럼 나오게 된다.  이러한 방법은 상품등을 판매하거나 알려줄때 쓰면 괜찮은방법인것 같다. 오늘 새로운 방법에 대해 공부를하고 적용을 하게 되어서 내일 또 다른것들을 알아보고 적용해 봐야겠다.

---

OAuth란 무엇인가 ?

위와 같이 로그인을 하는 방식을 많이 봤을것이다. 그 특정 홈페이지에서 회원가입을 하지않고 다른 플랫폼의 아이디가 있다면 그 아이디로 로그인을 하여 서비스를 이용할 수가 있는데, 외부서비스임에도 불구하고 해당 서비스를 이용할 수 있게 하는것이 OAuth 라고 생각하면 된다. OAuth 2.0은 다양한 플랫폼 환경에서 권한부여를 위한 표준 프로토콜이다. 간단하게 인증과 권한을 획득하는 것으로 알면 된다.

 

처음엔 OAuth 1.0 버전이 있었는데 유저가 인스타그램에 로그인을 요청하면 사용자를 인스타그램 로그인화면으로 보여지게된다. 그리고나서 인스타그램 API에서는 유저를 로그인을 시켜주는것과 동시에 인증토큰도 컨슈머(consumer)에게 전달하게 된다. 이러한 방식을 구현이 복잡하고 웹이 아닌 어플리케이션에서의 지원이 부족해서 암호화를 하는 번거로운 과정을 겪는다. 그리고 인증토큰(access token) 또한 만료되지가 않는다. 이러한 단점들을 보완하기 위해서 OAuth 2.0이 나오게 되었는데, 달라진 점은 기능이 단순해졌고 https가 필수여서 보안도 좋고 간단해졌다. 암호화 또한 https에게 맡기고 다양한 인증방식을 지원한다.