전체 글

JWT 토큰 기반의 인증을 프로젝트에 적용할 때, 클라이언트 사이드에서 신경써야 할 부분 중 하나가 바로 토큰 로테이션이다. JWT 토큰은 만료 기한이 반드시 존재하고, 토큰이 만료된 경우 새 토큰을 발급받기 위한 로직이 필요하다. 특히 Access 토큰과 Refresh 토큰을 함께 쓴다면 상황이 조금 더 복잡해진다. 이번 포스팅에서는 HTTP 클라이언트로 Axios를 사용하는 환경에서, Axios의 HTTP Interceptor 라는 괜찮은 미들웨어를 통해 어떻게 토큰 로테이션을 구현할 수 있을지 소개해보고자 한다. 만약 JWT, Access Token 과 Refresh Token 이 생소하다면 다음 블로그를 참고해보자. 보통 유저 인증이 필요한 API는 제한되어 있으나, 인증을 처리하는 로직은 공통으..

최근 프로젝트에서 모바일에서만 노출되던 화면을 PC 환경에서 그대로 띄워줘야 할 일이 생겼다. 이때 신경써야 할 부분 중 하나가 바로 좌우스크롤이었다. 기존 모바일 브라우저 환경에서는 터치로 스크롤이 가능했지만, 터치가 아닌 마우스를 사용하는 PC 환경에서는 스크롤바로만 스크롤이 가능한 구조였기 때문이다. 즉 유저들은 스크롤바를 직접 움직이거나, 좌우 스크롤이 가능한 마우스, 트랙패드 등의 입력장치를 통해서만 스크롤이 가능하다는 것이었는데, 모바일과 동일한 유저 경험을 줄 수 없다는 문제가 있었다. 따라서 모바일에서 터치로 좌우 스크롤을 조작하는 것처럼, 마우스와 같은 입력장치로도 드래그가 가능하게끔 개선이 필요했다. 다음과 같이 요소들을 수평으로 랜더링해주는 React 컴포넌트가 있다고 해보자. (편의..

다양한 기기에서 돌아가는 FE 어플리케이션을 개발하고 있다면, 사파리, 삼성 인터넷, 모바일 기기에서만 발생한다는 버그에 고통받아본 적이 반드시 있을 것이다. 브라우저의 사용 범위는 점점 넓어지고, 유저들은 더욱 다양한 브라우저와 기종으로 내가 만드는 웹 사이트에 접속한다. 심지어 글로벌 서비스라면 말할 것도 없다. 그런데 내 개발환경은 오직 최신 업데이트된 크롬 뿐이라면? 유저들이 모두 PC 환경의 최신 크롬을 쓸 것이라고 기대해선 당연히 안 된다. 특히 모바일의 시대가 도래하면서 PC와는 다르게 동작하는 모바일 브라우저에 대한 테스트는 필수가 되었다. 따라서 이번에는 웹 개발자들이 놓치기 쉽지만 매우 중요한, 모바일 디바이스 환경의 브라우저 디버깅 방법을 간단히 소개하고자 한다. 아이폰 Safari ..

브라우저 환경에서 UI 마크업을 하다 보면 가장 헷갈리는 지점 중 하나가 바로 줄바꿈이다. 언어 별로 줄바꿈이 동작하는 방식도 다르고, 공백 문자가 줄바꿈에 적용되게 하기 위한 방식도 가지각색이다. 줄바꿈에 대한 요구사항이 들어올 때마다 매번 대충 구글링해서 쓰던 white-space: pre 뭐시기 속성, word-break, 태그 등… 이번에는 과연 이 속성들이 어떻게 동작하는 것이고, 어떤 상황에서 어떤 줄바꿈 전략을 사용해야 하는지 알아보고자 한다. 줄바꿈을 적용하는 방법을 알아보기 위해, 먼저 줄바꿈에는 어떤 종류의 것들이 있고, User Agent에 의한 콘텐츠 래핑은 어떻게 발생하는지 짚고 넘어가보자. 줄바꿈은 어떻게 발생할까 인라인 성격의 텍스트가 줄로 배치되는 경우, 박스 영역을 기준으로..

추첨으로 선발했던 이번 우아콘. 한 번의 배달을 위해 필요한 모든 기술들 이 테마였던 만큼, 이번엔 정말 테크니컬한 경험들을 많이 들을 수 있겠다는 기대가 있었다. 꽤나 추첨 경쟁이 치열했다고 알고 있다. 다만 뽑는 모수가 적었던 것인지 주변에 당첨된 사람이 거의 없었다. 운좋게 기회가 되어 참석하게 되었는데, 개발자로 일하고 난 뒤 경험해본 첫 컨퍼런스였어서 더욱 두근거리는 마음으로 입장했다. 우아한 형제들에서 주최하는 개발자 행사가 꽤나 많은데, 이번 우아콘 역시 배민다운 개성을 파르나스몰 곳곳에서 느낄 수 있었다. 수많은 인파를 뚫고 첫 번째 세션 장소로 겨우 이동할 수 있었다. 웰컴 굿즈와 이름표를 받고, 호다닥 부스를 구경한 뒤 발표장으로 이동했다. 이전에 우아한 스터디에 참여했던 적이 있어서인..