전체 글

지난 글을 통해 i18n 프로젝트를 설정하고 Next.js, next-intl 라이브러리를 활용하여 실제 사용하는 방법에 대해 알아보았다. 이제 마음껏 기능 개발을 하면서 국제화된 텍스트를 앱에 적용해볼 수 있다. 그런데.. 어플리케이션 규모가 커지고 지원하는 언어/국가가 늘어날수록 뭔가 불편한 구석이 생겨날 것이다. 바로 다국어 텍스트를 수작업으로 관리하는 어려움이다. 개발자가 다국어 메세지 하나 추가하려면, 1. 언어 갯수만큼 존재하는 en.json 같은 파일에 들어가서, 2. namespace에 해당하는 적절한 위치를 찾아 중복되지 않는 key를 만들고, 3. 다국어 번역본을 복붙해줘야 한다. 지원 언어가 많아질수록, 텍스트와 도메인이 방대해질수록 이것은 보통 노가다가 아닐 뿐더러, 개발자의 실수가..

글로벌 서비스에 다국어 기능은 선택이 아닌 필수다. 그런데 단순히 한국어만을 고려한 어플리케이션과, 여러 개의 국가를 고려한 어플리케이션은 메세지를 화면에 띄워주는 구조부터 다르다. 따라서 글로벌 시장을 목표로 한다면, 초기 설계 단계부터 다국어를 고려하는 게 좋다. 이번 글에서는 다국어 웹사이트를 구성하기 위해서는 어떤 것들을 고려해야 하고, 어떻게 만들어야 할 지를 다뤄보고자 한다. 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는 제한되어 있으나, 인증을 처리하는 로직은 공통으..