Web

한 윈도우에서 다른 윈도우를 참조하고, 데이터를 주고 받는 등의 통신이 필요할 때가 있다. 대표적으로 소셜 로그인을 위해 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 컴포넌트가 있다고 해보자. (편의..

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

node.js 환경에서 외부 의존성 패키지를 추가할 때, 보통 다음과 같이 버전을 명시할 수 있다. # yarn을 사용한다면 yarn add package-name@version # npm을 사용한다면 npm install package-name@version 그런데 버전 뿐 아니라, 다음과 같이 특별한 태그를 지정할 수도 있다. (이걸 dist-tag 라고 부른다.) 가장 많이 쓰이는 태그는 latest다. # yarn yarn add package-name@latest # npm npm install package-name@latest 이렇게 설치를 하면 프로젝트의 디펜던시는 특정 버전이 아닌, 배포된 패키지의 최신 버전을 자동으로 바라보게 된다. // next 의존성을 latest로 설치한 결과 {..