클론코딩을 하는 주였다.
일주일동안 한 웹페이지를 정해서 부분의 기능을 구현하는 과정이었는데 우리는 '마켓컬리'를 선택했다.
우리가 선택한 기능은 로그인, 회원가입, 메인페이지, 선택한 상품 디테일 페이지, 장바구니 담기, 회원한정 장바구니(get,delete), 리뷰(crud)였다.
일단 일주일동안 구현을 해야했기 때문에 선택적으로 기능에 더 신경을 쓰는 방향으로 진행했고, 나는 로그인과 회원가입 그리고 장바구니 기능을 맡았다.
기본 ui는 팀원과 함께 진행했다. 짧은 시간 내에 완성해야했기 때문에 하루 반나절만에 ui를 완성하자는 계획으로 나머지 5일은 기능에 시간을 투자했다.
결과적으로 장바구니 기능까지 구현할 수 있었고 마지막으로 수정기능은 서버가 주는 데이터 형식이 우리가 받는 형식과 달라서 시간 내에 구현하지 못한 점이 아쉽다! 완벽한 장바구니가 될 수 있었는뎁..
내가 가장 신경 쓴 부분
- 서버에서 받는 토큰 속에서 디코딩을 통해 유저의 이름을 찾아내는 법을 새로 배울 수 있었다. 서버에서는 토큰 속에 유저의 정보를 담을 수 있었고 우리는 그 중에 빼서 사용할 수 있었다.
따라서 로그인한 유저의 토큰 안에 포함 된 이름을 활용하여 헤더에 "**님 환영합니다." 라는 문구를 심을 수 있었고 구현해낼 수 있었다.- 마켓컬리 장바구니 페이지를 보면 주소를 입력할 때 다음우편번호찾기 라이브러리를 활용하고 있었다. 나도 그 기능을 그대로 구현하고 싶었고 검색을 통해 라이브러리를 활용하는 법을 찾을 수 있었고 나 또한 그 글들을 통해 그 기능을 구현해낼 수 있었다.
- 장바구니 기능 중 물품을 - + 할 때마다 수량을 변경하고 또 그 수량만큼 가격이 변동되는 것을 구현하고 싶었는데 useState와 props를 주고 받으며 구현해 낼 수 있었다
기술에 대한 정리
Access Token, Refresh Token
위의 방식으로 받은 토큰은 언급했듯이 서버측 리소스에 접근할 때 클라이언트 본인을 인증할 수 있는 액세스 토큰으로 동작한다. 그런데 이 JWT는 Stateless한 방식이기 때문에 서버측에서는 이 토큰을 갖고 있는 클라이언트가 정말 클라이언트 본인이 맞는지 확인할 수 없다는 문제점이 있다.
그래서 이에 대한 보안 대책으로 리프레쉬 토큰이라는 추가적인 토큰을 활용할 수 있다. 이 리프레쉬 토큰은 사용자 인증이 아닌 새로운 액세스 토큰을 생성하는 용도로만 사용된다. 그러면 왜 굳이 별도의 토큰을 두고 새로운 액세스 토큰을 발급받도록 한 것일까? 이는 위의 JWT 유출 문제를 다음처럼 해결하기 위한 것이다.
Access Token의 유효 기간을 짧게 설정한다.
Refresh Token의 유효 기간은 길게 설정한다.
사용자는 Access Token과 Refresh Token을 둘 다 서버에 전송하여 전자로 인증하고 만료됐을 시 후자로 새로운 Access Token을 발급받는다.
공격자는 Access Token을 탈취하더라도 짧은 유효 기간이 지나면 사용할 수 없다.
정상적인 클라이언트는 유효 기간이 지나더라도 Refresh Token을 사용하여 새로운 Access Token을 생성, 사용할 수 있음.
즉 OTP 인증처럼 짧은 시간 동안에만 사용할 수 있도록 하고 주기적으로 재발급받도록 하여 토큰이 유출되더라도 그 피해를 최소화한다는 방식이다. 단순히 Access Token 만으로는 일일히 IP 주소의 위치를 파악해서 비교하는 게 아닌 이상 토큰의 탈취를 검증하기 어렵기 때문에 토큰이 탈취되더라도 그 피해(attack window)를 줄이기 위해 토큰의 사용 시간 자체를 줄이는 것이다.
하지만 그렇다면 정상적인 클라이언트도 짧은 주기마다 다시 로그인해서 Access Token을 발급받아야 한다는 단점이 있다. 그래서 여기서 유효 기간이 긴 Request Token을 사용하는데 정상적인 사용자는 Access Token이 만료됐다면 서버측에 Request Token을 전송하여 다시 로그인할 필요 없이 Access Token을 발급받을 수 있다. 당연히 이 Request Token이 없는 공격자는 다시 토큰을 발급받을 수 없기 때문에 보안 측면에서 좀 더 안전하다고 할 수 있다.
또 같은 사용자가 여러 디바이스(스마트폰, 태블릿, PC 등)에서 접근하는 경우 각 디바이스 타입에 맞는 Access Token, Refresh Token 쌍이 필요할 것이다.
마켓컬리 클론코딩 시연 영상
