React Server Components를 위한 컴포넌트 아키텍처2026.06.01React Server Components를 위한 컴포넌트 아키텍처ReactNext.js번역 및 정리#suspense#architecture#react-server-components2026.06.01React Server Components를 위한 컴포넌트 아키텍처ReactNext.js번역 및 정리#suspense#architecture#react-server-components이 포스트는 Vercel의 Next.js 팀 소속 개발자 Aurora Scharff가 자신의 블로그에 올린 Component Architecture for React Server Components 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는…
차트는 멈췄는데 윈도우가 움직인다2026.05.26차트는 멈췄는데 윈도우가 움직인다ReactTypescriptError Case#error-case#debugging#hooks2026.05.26차트는 멈췄는데 윈도우가 움직인다ReactTypescriptError Case#error-case#debugging#hooks상황 어느날 서비스를 살펴보시던 팀장님께서 이런 말씀을 slack에 남기셨다. 진호님, 예측 차트에서 zoom을 계속하면 어느 순간 라인 차트가 아니라 단일 스캐터 차트처럼 보이는 데, 이거 수정하면 좋을 거 같아요. 어느정도 zoom을 하면 그 이후로는 zoom이 안 되도록 할 수 없…
렌더링 전략 정리2026.03.01렌더링 전략 정리ReactNext.js2026.03.01렌더링 전략 정리ReactNext.js리액트와 Next.js에서 렌더링 전략은 단순한 옵션 선택이 아니다. 이는 서비스의 초기 로딩 속도, 서버 비용, 캐싱 전략, SEO 노출, 개발 복잡도까지 동시에 좌우하는 아키텍처 결정이다. 프로젝트 규모가 커질수록 “어디에서 HTML을 생성하는가”, “언제 자바스크립트를 실행하는가”…
View Transition API2026.02.22View Transition APIReactJavascriptCSS2026.02.22View Transition APIReactJavascriptCSS웹 애플리케이션에서 전환 품질은 기능 완성도와 동등한 수준으로 중요하다. 사용자가 목록에서 항목을 선택해 상세 화면으로 이동할 때, 화면이 자연스럽게 이어지면 서비스는 빠르고 안정적으로 느껴진다. 반대로 동일한 기능이라도 전환이 끊기면 체감 성능과 신뢰도는 동시에 하락한다. 전환은 부가…
Activity 컴포넌트2025.10.09Activity 컴포넌트React#conditional-rendering#performance-optimization#component#component-lifecycle2025.10.09Activity 컴포넌트React#conditional-rendering#performance-optimization#component#component-lifecycle리액트로 UI를 구성하다 보면, 특정 컴포넌트를 조건부로 렌더링해야 하는 상황이 자주 발생한다. 일반적으로는 삼항 연산자 등을 활용해서 컴포넌트를 렌더링하는데, 내 경우에는 이런 조건 렌더링을 반복적으로 작성하는 게 싫어 라는 특별한 컴포넌트를 만들어 사용하고 있다. 하지만 어떤 방식으…
useEffectEvent2025.10.08useEffectEventReact#readability#stale-closure#hooks2025.10.08useEffectEventReact#readability#stale-closure#hooksReact를 사용하면서 useEffect 안에서 상태를 참조할 때 의외로 자주 겪는 문제가 있다. 바로 stale closure 문제다. 예를 들어 어떤 값이 변경되었는데, useEffect 내부의 콜백에서는 여전히 이전 값을 읽고 있는 현상이다. 이는 React의 클로저 구조상 자연스…
모달과 팝오버, 그리고 앵커 포지셔닝2025.05.31모달과 팝오버, 그리고 앵커 포지셔닝ReactCSS#accessibility#web-standards#frontend2025.05.31모달과 팝오버, 그리고 앵커 포지셔닝ReactCSS#accessibility#web-standards#frontend모달과 팝오버를 칼로 베듯 명확히 구분해본 적은 없었다. 그저 화면 한가운데에 떠서 다른 작업을 막으면 모달, 특정 버튼을 눌렀을 때 앵커를 기준으로 나타나면 팝오버라는 정도로 느슨하게 생각해왔다. 하지만 두 개념은 단순한 위치나 동작의 차이를 넘어, 그 목적과 사용 방식에서 뚜렷한 차…
3. SharedWorker로 멀티탭 소켓을 하나로 묶기2025.05.263. SharedWorker로 멀티탭 소켓을 하나로 묶기ReactJavascriptNext.jsWorker API in Next.js#Web Worker#SharedWorker2025.05.263. SharedWorker로 멀티탭 소켓을 하나로 묶기ReactJavascriptNext.jsWorker API in Next.js#Web Worker#SharedWorker같은 서비스를 10개의 탭으로 열었을 때 서버에 소켓 연결도 10개가 생긴다면, 문제는 실시간 기능 자체가 아니라 브라우저 컨텍스트마다 연결을 새로 만드는 구조에 있을 수 있다. 채팅, 알림, 협업 상태처럼 페이지가 열려 있는 동안 유지되는 연결은 탭 수만큼 늘어날 때 서버와 클라이언트…
2. Dedicated Worker를 Next.js에서 안전하게 쓰기2025.05.262. Dedicated Worker를 Next.js에서 안전하게 쓰기ReactJavascriptNext.jsWorker API in Next.js#Web Worker#SharedWorker2025.05.262. Dedicated Worker를 Next.js에서 안전하게 쓰기ReactJavascriptNext.jsWorker API in Next.js#Web Worker#SharedWorkerWorker를 만들 수 있다는 사실보다 더 중요한 것은, Next.js가 서버와 브라우저를 오가는 동안 그 Worker 생성 코드가 언제 평가되는지 통제하는 일이다. Dedicated Worker는 하나의 호출자와 연결되는 구조라서 이미지 처리나 대용량 데이터 변환처럼 특정 화면의 작업…
1. 왜 Next.js에서 Worker가 필요한가2025.05.261. 왜 Next.js에서 Worker가 필요한가ReactJavascriptNext.jsWorker API in Next.js#Web Worker#SharedWorker2025.05.261. 왜 Next.js에서 Worker가 필요한가ReactJavascriptNext.jsWorker API in Next.js#Web Worker#SharedWorker이미지 하나를 처리했을 뿐인데 버튼 hover가 끊기고 입력창이 늦게 반응한다면, 문제는 React 렌더링보다 자바스크립트가 어디에서 실행되고 있는지에 있을 수 있다. 브라우저 화면은 HTML과 CSS만으로 움직이는 것처럼 보이지만, 사용자의 입력을 받고 레이아웃을 계산하고 JavaSc…
Worker API in Next.js — 시리즈 안내2025.05.26Worker API in Next.js — 시리즈 안내ReactJavascriptNext.jsWorker API in Next.js#Worker API#Web Worker2025.05.26Worker API in Next.js — 시리즈 안내ReactJavascriptNext.jsWorker API in Next.js#Worker API#Web Worker#SharedWorker브라우저에서 실행되는 JavaScript가 많아질수록 이상한 순간이 찾아온다. 비동기 처리를 했는데도 화면은 멈추고, 탭을 몇 개 열었을 뿐인데 서버에는 같은 소켓 연결이 여러 개 생기고, Next.js에서는 코드가 서버에서 평가될지 브라우저에서 평가될지 계속 의식해야 한다. Worke…
@property와 동적 스타일링2025.05.13@property와 동적 스타일링ReactCSS#design-system#dynamic#ui#frontend2025.05.13@property와 동적 스타일링ReactCSS#design-system#dynamic#ui#frontend#styling프론트엔드 개발자들 모인 자리에 가서 '어떤 스타일링 라이브러리 좋아하세요?'하고 물어보면 못해도 30분은 할 이야기가 생긴다. 내 경우에는 여러번 밝힌 바와 같이 TailwindCSS와 ModuleCSS를 선호한다. 하지만 내 선호를 밝히면 늘 돌아오는 질문이 있다. '그것들은 동적…
타입스크립트에서의 컴포넌트 추론2024.11.10타입스크립트에서의 컴포넌트 추론ReactTypescriptNext.js#component2024.11.10타입스크립트에서의 컴포넌트 추론ReactTypescriptNext.js#component나는 꽤 오래 전부터 타입스크립트를 사용해 특정한 컴포넌트만을 걸러낼 수 있을지 궁금했다. 만약 이게 가능하다면 특정한 컴포넌트만을 children으로 받게 만들 수 있어 프로젝트의 전체적인 구조가 단단해질 거라 생각했다. 실제로 특정 컴포넌트를 걸러내기 위해서 나는 타입스크립트를 가지…
당신은 리액트 쿼리가 필요하지 않을 지도 모른다2024.11.05당신은 리액트 쿼리가 필요하지 않을 지도 모른다React번역 및 정리#server-components#data-fetching#tanstack-query#architecture2024.11.05당신은 리액트 쿼리가 필요하지 않을 지도 모른다React번역 및 정리#server-components#data-fetching#tanstack-query#architecture이 포스트는 Dominik Dorfmeister가 자신의 블로그에 올린 You Might Not Need React Query 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다. 리액트 서버 컴포넌트와 함께라면 리액트 쿼리…
모든 것을 재귀적으로 구현한 댓글 기능2024.10.15모든 것을 재귀적으로 구현한 댓글 기능ReactTypescriptNext.jsNest.js2024.10.15모든 것을 재귀적으로 구현한 댓글 기능ReactTypescriptNext.jsNest.js내가 개인적으로 사용하는 독후감 기록 및 공유 서비스가 하나 있다. 이름은 onef다. 홍보에는 거의 신경 쓰지 않았기 때문에 실제 사용자는 나와 몇몇 후배들 정도에 불과하다. 하지만 전혀 문제는 없다. 이 서비스는 사용자 수를 늘리기 위한 제품이라기보다는, 구현해보고 싶은 기능을 부담…
에러도 테크닉이 될 수 있다2024.09.05에러도 테크닉이 될 수 있다ReactTypescriptError Case#debugging#component2024.09.05에러도 테크닉이 될 수 있다ReactTypescriptError Case#debugging#component상황 Button과 Link 및 여러 컴포넌트를 인자로 받아서 통일된 스타일을 처리해주는 Clickable 컴포넌트를 만들고 난 직후의 일이다. 로그인 페이지에서 Clickable 컴포넌트가 문제 없이 동작하는 걸 확인한 뒤 코드를 커밋했고, github action이 동작하며 라이브…
tailwind config와 남의 코드 갖다 쓰기2024.02.03tailwind config와 남의 코드 갖다 쓰기ReactCSSError Case#debugging#tailwindcss2024.02.03tailwind config와 남의 코드 갖다 쓰기ReactCSSError Case#debugging#tailwindcss상황 진행중인 프로젝트에서 기존에 사용하던 module css가 아닌 tailwind를 사용하기로 결정되었다. 작업 빨리 쳐내야 할 때 클래스 검색하는 거로 시간을 쓰는 게 싫어서 공식문서도 읽고 카카오FE의 사용 후기도 읽어보면서 이것저것 테스트해보는 시간을 가지고 있었다. tailw…
Intersection Observer API2023.12.10Intersection Observer APIReactJavascript#intersectionobserver#webapi#scroll#viewport2023.12.10Intersection Observer APIReactJavascript#intersectionobserver#webapi#scroll#viewportIntersection Observer API는 웹 페이지의 특정 요소가 뷰포트(Viewport) 또는 지정한 컨테이너 요소와 교차(intersect) 하는지를 비동기적으로 감지할 수 있는 방법을 제공한다. 이 API는 스크롤 이벤트를 직접 처리하지 않고도 요소의 가시성 변화를 감지할…