전체 글
React SSR Hydration 과정과 Hydration Mismatch 내부 동작 분석
지난 글에서 React가 hydrateRoot를 실행하며 DOM에 이벤트 리스너를 연결하는 과정을 살펴보았습니다. 다만 이 과정은 서버에서 내려온 HTML과 클라이언트의 로직이 완벽하기 일치해야 한다는 전제가 깔려있습니다 하지만 개발을 하다 보면 무조건 일치한다는 보장이 없습니다, SSR 개발을 하다보면 필연적으로 마주치는 에러인 Hydration Missmatch가 발생하면 React 내부에서는 무슨 일이 벌어질까요? 이번 글에서는 Mismatch 가 발생했을 때 React가 어떻게 동작하는지 MutationObserver를 통해 확인해 보고 React 가 Hydration 과정을 어떻게 선택적으로 Hydration을 하는지 알아보겠습니다 1. Hydration쉽게 오해하는 부분 중 하나는 Hydrat..
addEventListener를 후킹해서 React Hydration 과정을 시각화해 보았다
지난 글에서는 Vite와 Express를 사용해 프레임워크 없이 직접 SSR 환경을 구축해 보았습니다. 특히 hydrateRoot 실행을 인위적으로 지연시켰을 때, 화면에는 HTML이 이미 그려져 있어도 버튼 클릭 같은 상호작용이 전혀 동작하지 않는 부분을 확인하였습니다 단순히 "자바스크립트가 로딩되지 않아서"라고 넘기기엔 Hydration 과정 속에 숨겨진 디테일들이 많습니다. 이번 글에서는 React가 Hydration 과정에서 정확히 무엇을 연결하는지 실험을 통해 확인해 보겠습니다. 결론부터 말씀드리면, Hydration의 본질은 DOM을 새로 만드는 것이 아니라, 이미 존재하는 SSR DOM을 재사용하면서 React의 이벤트 시스템과 상태(State) 시스템을 덮어씌우는 과정입니다.그렇다면 이 '..
Vite + Express로 React SSR 구축 해보기
Next.js 나 Remix 같은 프레임워크를 사용하면 SSR(Server-Side Rendering)은 자연스럽게 동작합니다. 서버에서 렌더링 된 HTML이 내려오고, 브라우저에서는 자바스크립트가 실행되어 이벤트 리스너가 자동으로 등록되게 됩니다 하지만 대부분은 이러한 자연스러운 흐름을 내부적으로 어떻게 일어나는지 들여다보지 않습니다 특히 Hydration이라 불리는 SSR의 핵심과정 이자 성능 병목의 주원이기도 합니다. 이번 시리즈에서는 프레임워크가 아닌 Vite와 Express를 이용해 직접 SSR 환경을 구축해 보며 Hydration을 직적 확인해 보려 합니다 1. Hydration 이란 무엇인가?기술적인 정의로 Hydration은 서버에서 렌더링 된 정적인 HTML 구조에 클라이언트에 javas..
Grafana + Loki로 RUM 대시보드 만들기: Web Vitals/Navigation/Error 운영 세팅
지난 글(https://url.kr/2cyblh)에서 RUMKit(RUM SDK)를 만들고, 브라우저에서 수집한 데이터를 Loki에 쌓는 것까지는 끝냈습니다.그런데 수집만 해서는 아무것도 바뀌지 않습니다. 운영에서 중요한 건 "데이터가 있냐"가 아니라 지금 문제가 있는지, 어디가 문제인지, 무엇부터 손대야 하는지를 빠르게 답할 수 있느냐입니다. 그래서 이번 글에서는 RUMKit 로그를 기반으로 Grafana 대시보드를 어떻게 구성했는지, 그리고 한 달 동안 실제로 운영하면서 무엇을 관찰했는지 를 정리해보려고 합니다. 1. 전체 흐름이전글에서 설명한 거와 같이 전체적인 구성은 간단합니다 브라우저(RUMKit): Web Vitals / Navigation Timing / Error 이벤트 수집Loki: JS..
단방향 해시는 복호화 없이 어떻게 비밀번호를 맞출까?(bcrypt)
주말에 평화롭게 사이드 프로젝트를 하다가 인증 기능을 구현하면서 한 가지 의문이 들었습니다“bcrypt는 단방향 해시인데, 어떻게 bcrypt.compare()는 평문 비밀번호와 해시된 문자열을 비교할 수 있지?” 보통 Node.js에서 비밀번호를 저장할 때 bcrypt 라이브러리를 많이 사용합니다. 저도 당연한 듯이 bcrypt.hash()로 비밀번호를 해싱하고 로그인 시에는 bcrypt.compare()로 사용자가 입력한 비밀번호와 DB에 저장된 해시를 비교해 왔습니다 그런데 문득 이런 생각이 들었습니다, "단방향 해시는 복호화가 안되는데 어떻게 비교하는 거지?"라는 궁금점이 생겼습니다 이 글은 이 궁금증을 정리해 본 내용입니다 해싱 vs 암호화소프트웨어 보안 쪽은 보다 보면 해싱이랑 암호화를 섞어서..
React Fiber 아키텍처
React로 개발은 오래 해왔지만, 정작 React가 내부에서 어떻게 렌더링을 스케줄링하고 DOM을 업데이트하는지는 깊게 보지 않았던 것 같습니다. 이 글에서는 React Fiber가 왜 등장했고, Fiber 트리·Render/Commit·lanes 같은 핵심 개념이 실제 렌더링 모델을 어떻게 구성하는지 큰 흐름만 정리해보려고 합니다. React Fiber가 등장한 이유React Fiber를 이해하기 위해선 React Fiber가 등장한 이유를 알고 있는 게 좋습니다 React Fiber가 등장하기 이전엔 리액트는 Stack 기반에 재조정 방식을 사용하였습니다 Stack 기반 재조정 방식은 함수 호출 스택에 의존해서 재귀적으로 렌더 트리를 내려가며 렌더링 하는 구조였기 때문에 동기적으로 동작했었습니다 따..
브라우저 Performace API와 Web Vitals로 RUM SDK 만들기
지난번에 Log Gateway를 구축하고 나서, Grafana로 백엔드 로그를 모니터링하며 많은 인사이트를 얻을 수 있었습니다. 그러던 중 자연스럽게 이런 생각이 들었습니다."이미 잘 구축된 Grafana가 있는데, 여기서 프론트엔드 성능도 함께 볼 수 있지 않을까?" 마침 서비스를 운영하면서 이런 상황을 자주 겪고 있었습니다:"사용자들은 느리다고 하는데… 서버 로그 상으로는 다 정상인데요?" 서버 응답 시간은 100ms인데 사용자는 3초를 기다리는 상황. 서버/백엔드 모니터링만으로는 사용자가 실제로 느끼는 체감 성능을 파악하기 어렵습니다. 네트워크 지연, 리소스 로딩, 브라우저 렌더링 등 프론트엔드에서 일어나는 수많은 일들을 모두 알 수는 없었습니다 그래서 내부용 Real User Monitoring ..
Promtail 대신 직접 만든 로깅 라이브러리, Loki 로깅 시스템 구축기
이번 주는 새로운 회사에 입사한 후 맞이한 첫 주말입니다. 새로운 회사는 스타트업이다 보니 아직 체계가 완전히 잡히지 않아, 많은 부분을 새롭게 만들어야 하는 상황입니다. 그중에서도 제가 가장 우선순위를 높게 두고 진행한 로깅 시스템 구축에 대해 공유드리려고 합니다. 로깅 시스템에 필요성?입사 후 전체적인 업무 프로세스와 코드를 살펴보며 가장 심각하게 느낀 부분이 있었습니다. 바로 오류 발생 시 로그를 효율적으로 찾을 수 없는 점이었습니다. [현재 로깅 문제점]비효율적인 검색: 문제가 생기면 실제 서버 인스턴스에 직접 SSH 접속해서 로그 파일을 일일이 찾아야 했습니다.분석 시간 과다: 로그 포맷도 팀/서비스마다 제각각이라 분석하는 데 시간이 너무 많이 걸렸습니다.이러한 로그 지옥에서 벗어나기 위해, ..
다시 한 번, 스타트업으로 돌아가다.
2025년 10월 17일,저는 커리어 세 번째 회사를 1년 만에 퇴사했습니다. 짧지만 밀도 높았던 1년이었고,이번 글에서는 그 시간을 돌아보며 제가 어떤 문제를 마주했고, 무엇을 배웠는지를 정리해보려 합니다. 2024년 하반기 중심을 잡지 못하던 시기2024년 8월 말, 입사 후 바로 실무에 투입되었다. 6년 차 프론트엔드 개발자로서, “이제는 결과로 말해야 하는 시기” 라고 스스로 다짐했다. 첫 업무는 회사의 포털 사이트 유지보수였다. 기술 스택은 NestJS + Vue 조합이었는데, 프레임워크 없이 SSR(서버 사이드 렌더링)을 직접 구현해 둔 구조였다. 요즘은 Next.js나 Nuxt 같은 표준 프레임워크로 SSR을 해결하는 게 일반적이다. 하지만 해당 프로젝트는 NestJS의 서버 구조 위에 ..
React Compiler 톺아보기
React Compiler는 리액트 애플리케이션을 자동으로 최적화하는 새로운 빌드 타임 도구입니다.현재는 Release Candidate(RC) 단계이며, 2025년 10월 7일 React Compiler 1.0이 정식 출시 되었으며 React 19와 함께 도입되었습니다.https://react.dev/blog/2025/10/07/react-compiler-1 React Compiler v1.0 – ReactThe library for web and native user interfacesreact.dev React Compiler의 역할React Compiler는 빌드 시점에서 리액트 앱을 자동으로 최적화합니다.보통 우리는 애플리케이션의 성능을 유지하기 위해 useMemo, useCallback, ..