전체 글

개발자 커뮤니티 글또의 도움을 받아, 우연한 기회로 유데미 알고리즘 강의를 후원받아 수강하게 되었다.수강하게 된 계기프론트엔드 개발자로서 3년 가량 실무에서만 일을 하다 보니, 자연스레 자료구조나 알고리즘에 대한 감을 완전히(..!) 잃어버리게 되고 말았다. 알고리즘은 비록 실무에서 자주 쓰이는 분야는 아니지만, 개발자로서의 커리어, 특히 취업과 이직을 위해서는 필수적으로 요구되는 지식인 만큼 주기적으로 연습을 해둘 필요가 있다. 당장 취업을 해야 하는 상황이 아닐지라도, 연차가 쌓일수록 동료들의 채용과 면접 과정에 참여하게 되는 경우도 생기기 때문에 코딩테스트 준비는 해놔서 나쁠 게 없다고 판단했다. 약점이기만 했던 알고리즘을 보완하기 위해 좋은 기회로 JavaScript 알고리즘 & 자료구조 마스..

한 윈도우에서 다른 윈도우를 참조하고, 데이터를 주고 받는 등의 통신이 필요할 때가 있다. 대표적으로 소셜 로그인을 위해 OAuth 처리를 해주는 팝업을 새 윈도우로 띄우고, 인증이 완료되면 다시 본래 창으로 돌아와야 할 때. 인증 관련 정보를 탭 간에 공유하여 로그인 처리를 일관성있게 유지해야 할 때. 어플리케이션의 상태를 윈도우/탭/iframe 사이에 맞춰야 하는 경우가 있을 수 있겠다. 따라서 이번에는 페이지에서 팝업을 열어서 데이터를 주고받아보며, 서로 다른 브라우징 컨텍스트 간에 통신하는 몇 가지 방법들을 살펴보고자 한다. window.postMessage Window 오브젝트 사이에서 cross-origin 통신을 하기 위해 가장 많이 쓰이던 API다. 페이지와 생성된 팝업 간의 통신, 또는 ..

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

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

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