브라우저 창 사이의 메시지 통신: postMessage 이해하기

이전 글에서는 새 창을 열었을 때 부모 창과 자식 창 사이에 어떤 관계가 만들어지는지 살펴봤습니다. 부모 창은 window.open()의 반환값으로 자식 창을 가리킬 수 있고, 자식 창은 window.opener로 부모 창을 가리킬 수 있습니다. 하지만 서로를 가리킬 수 있다는 것만으로 한쪽의 변경 사항이 다른 쪽에 자동으로 전달되지는 않습니다. 예를 들어 A창에서 B창을 열어 작업한 뒤 서버 저장까지 완료해도 A창은 그 사실을 알지 못합니다. A창에 표시된 데이터를 갱신하려면 B창에서 작업이 끝났다는 신호를 보내야 합니다. 이때 사용할 수 있는 브라우저 API가 postMessage입니다. postMessage는 어떻게 동작할까postMessage는 현재 문서와 다른 브라우징 컨텍스트 사이에 메시지를 ..

• format_list_bulleted Web Fundamentals
• · 2026. 11. 14.
• textsms

새 창을 열면 브라우저에는 어떤 관계가 만들어질까?

최근 업무에서 기존 화면과 별도의 작업 창을 함께 사용하는 기능을 구현했습니다.관리 화면에서 버튼을 누르면 새로운 작업 창이 열리고, 사용자는 그곳에서 필요한 내용을 수정합니다. 서버에서 창별 세션을 따로 관리하지 않는 상황에서 프론트엔드가 여러 창의 관계와 각 창에서 일어나는 동작을 다뤄야 했습니다. 사용자가 여러 작업 창을 열어둔 경우, 기존 창을 먼저 닫은 경우, 작업 화면의 URL로 직접 들어온 경우까지 생각하기 시작하니 고려해야 할 점이 예상보다 많았습니다. 요구사항을 만족시키기 위해 상황별 예외 처리만 계속 덧붙이면 당장은 동작하더라도 전체 흐름이 어색해질 수 있었습니다. 사용자의 흐름을 해치지 않으면서도 특정 상황에만 맞춘 임시 처리로 남지 않게 하려면, 브라우저가 창 사이의 관계를 어떻게 ..

• format_list_bulleted Web Fundamentals
• · 2026. 11. 6.
• textsms

마이크로 프론트엔드 알아보기

최근 FEConf에 참석해 여러 세션을 듣던 중 마이크로 프론트엔드를 도입한 사례들을 접했습니다. 같은 프론트엔드 개발이지만, 팀과 서비스의 규모에 따라 고민하는 문제가 꽤 달랐습니다. 저는 모노레포 환경에서 여러 앱을 관리하고 있습니다. 마이크로 프론트엔드도 여러 앱을 다룬다는 점에서 익숙하게 느껴졌지만, 해결하려는 문제는 조금 다른 것 같았습니다. 각각 어떤 문제를 다루고, 어떻게 함께 활용할 수 있는지 궁금해졌습니다. 쇼핑몰을 예로 들어 마이크로 프론트엔드가 해결하려는 문제와 독립 배포의 의미, 앱끼리 소통하는 방법을 간단히 정리해 봤습니다. 마이크로 프론트엔드란?마이크로 프론트엔드(Micro Frontend, MFE)는 하나의 웹 서비스를 여러개의 영역별 프론트엔드 앱으로 나누고, 각 앱을 독립적..

• format_list_bulleted 프론트엔드 아키텍처 & 설계
• · 2026. 10. 27.
• textsms

access token은 어떻게 만들어질까?

JWT_SECRET에서 시작한 질문Next.js 웹과 NestJS API로 만든 서비스에 JWT 기반 로그인 인증을 적용했습니다. JWT(JSON Web Token)는 사용자 식별자나 만료 시간 같은 정보를 JSON으로 담아 전달하는 토큰 형식입니다. Access token은 API 요청에서 사용자를 인증할 때 제시하는 자격 증명이며, JWT는 이를 구현하는 데 사용할 수 있는 형식 중 하나입니다.이 글에서는 발급과 검증에 같은 비밀키를 사용하는 HS256을 예로 설명합니다. 다른 서명 방식도 있지만, 여기서는 이 방식으로 만든 access token의 흐름을 따라갑니다. JWT는 점(.)으로 구분된 세 부분으로 구성됩니다.헤더.페이로드.서명1) 헤더: 서명에 사용하는 알고리즘 등의 정보2) 페이로드: ..

• format_list_bulleted Web Fundamentals
• · 2026. 10. 21.
• textsms

여러 탭의 데이터를 안전하게 다루기 - Web Locks와 storage 이벤트

사용자가 가입 전에 글 하나를 작성하고 저장해볼 수 있는 체험 기능을 웹앱에 구현했습니다. 먼저 서비스를 경험한 뒤, 추가로 기록하고 싶을 때 가입하도록 유도하는 구조였습니다. 가입 전 기록은 브라우저의 localStorage에 보관하고, 가입할 때도 그 기록을 잃지 않고 이어갈 수 있도록 하고 싶었습니다. 그런데 저장할 수 있는 글이 하나라고 해서, 사용자가 탭도 하나만 열어두는 것은 아닙니다. 여러 탭에서 저장을 시도하더라도 기존 기록을 보호해야 했고, 한 탭의 저장 및 삭제 결과를 다른 탭의 화면에도 반영할 필요성이 따라왔습니다. 화면의 변경을 반영하는 데는 storage 이벤트를 사용하고, 저장 직전에는 현재 데이터를 다시 확인했습니다. 확인부터 쓰기까지의 작업 순서도 보호하기 위해 Web Loc..

• format_list_bulleted Web Fundamentals
• · 2026. 10. 14.
• textsms

iOS 렌더링 버그 탈출기 (ft. GPU 가속의 함정)

최근 프로젝트를 진행하며 iOS Safari와 Chrome 환경에서 화면이 깜빡이거나 요소가 사라지는 기묘한 버그들을 마주했습니다. 원인을 파악해 보니 모두 WebKit 엔진의 GPU 컴포지팅(Layer Compositing) 처리 방식과 관련이 있었는데요. 문제를 해결하며 배운 과정을 공유해 봅니다. 사례 1: 잘 보이던 요소가 갑자기 사라지는 현상문제 상황바텀시트 내 콤보박스에서 검색을 두번 이상 반복했을 때, 선택된 항목이 화면에서 갑자기 사라지는 현상이 발생했습니다. 과정1. 로직 확인처음엔 선택된 항목들이 의도치않게 초기화되는 등의 문제가 있을 거라고 생각했지만, 로그를 찍어 확인한 결과 데이터는 멀쩡한 것을 확인했습니다. 2. DOM 검사선택한 데이터는 제대로 관리되고 있다는 것을 확인한 후,..

• format_list_bulleted React
• · 2026. 4. 7.
• textsms