전체 글

글로벌 서비스에 다국어 기능은 선택이 아닌 필수다. 그런데 단순히 한국어만을 고려한 어플리케이션과, 여러 개의 국가를 고려한 어플리케이션은 메세지를 화면에 띄워주는 구조부터 다르다. 따라서 글로벌 시장을 목표로 한다면, 초기 설계 단계부터 다국어를 고려하는 게 좋다. 이번 글에서는 다국어 웹사이트를 구성하기 위해서는 어떤 것들을 고려해야 하고, 어떻게 만들어야 할 지를 다뤄보고자 한다. i18n이란Internationalization(국제화) 의 준말. 비슷한 용어로 Localization(현지화) 도 있다. 일반적으로 다음과 같은 것들을 의미한다. 언어에 맞는 다국어 번역 및 최적화된 UI를 제공하는 것은 기본이다. 번역본을 관리하고, 언어 설정에 맞게 번역된 텍스트를 UI에 노출시켜야 하며, 텍스트 ..

개발자 커뮤니티 글또의 도움을 받아, 우연한 기회로 유데미 알고리즘 강의를 후원받아 수강하게 되었다.수강하게 된 계기프론트엔드 개발자로서 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 컴포넌트가 있다고 해보자. (편의..