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

최근 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

브라우저는 어떻게 화면을 그릴까? - 렌더링 파이프라인부터 Compositing Layer까지

최근 scale 애니메이션이 적용된 컨테이너 내부에서 absolute 요소가 마운트 시점에 다시 그려지는 버그가 있었는데, 레이어 합성 타이밍 문제로 원인을 파악하면서 브라우저가 화면을 그리는 과정을 제대로 이해해보자는 생각이 들었다 이 글은 Parse부터 composite까지의 렌더링 파이프라인과 헷갈리는 개념이었던 Reflow/Repaint, 합성 레이어까지 이해하는 과정을 정리했다 브라우저 렌더링 파이프라인 1) Parse- 브라우저는 HTML 파일을 파싱해 DOM tree, CSS 파일을 파싱해 CSSOM tree를 생성한다 2) Layout- DOM + CSSOM 트리를 조합해 렌더 트리를 생성하고, 렌더트리를 활용해 레이아웃을 계산한다- 즉, 각 요소의 위치와 크기를 계산해 화면의 어디에 위치..

• format_list_bulleted Web Fundamentals
• · 2026. 3. 4.
• textsms

[WebSocket] React + express 스트리밍 챗봇 만들어보기

최근 실시간 기능에 대한 이해가 필요해져서 WebSocket을 학습하며,React와 Express를 사용해 스트리밍 방식의 간단한 챗봇 예제를 만들어봤다. WebSocket- 클라이언트와 서버가 한 번 연결되면, 양방향으로 지속적인 데이터 교환이 가능한 프로토콜- HTTP는 요청/응답 구조의 단방향 통신이며, 매번 연결이 필요함 스트리밍 전송- 데이터를 한번에 보내지 않고 여러 조각으로 나누어 순차적으로 전송하는 방식- 사용자가 일부 데이터를 받아 즉시 처리할 수 있도록 활용할 수 있음ex. 유튜브에서 영상 파일 전체를 받지 않아도 곧바로 재생을 시작할 수 있음, chatGPT같은 챗봇 서비스에서 한문장씩 응답 출력 등 목표- 사용자가 버튼으로 질문 전송- 서버는 전송된 질문에 맞는 답변을 스트리밍 방..

• format_list_bulleted 실험실
• · 2025. 7. 28.
• textsms