Dev Notes
& Snippets
코드 중심 기술 글
브라우저는 HTML을 어떻게 화면에 그릴까?
DOM, CSSOM, 리플로우, 리페인트 — 브라우저가 화면을 그리는 과정을 쉽게 풀어봅니다.
자바스크립트 엔진은 코드를 어떻게 실행할까?
콜 스택, 이벤트 루프, 비동기 처리 — 자바스크립트가 돌아가는 원리를 알아봅니다.
jQuery에서 React로 — 화면을 다루는 방식이 완전히 달라집니다
명령형 DOM 조작과 선언적 UI의 차이를 이해하면 React가 왜 필요한지 보입니다.
JSX — HTML인 듯 HTML이 아닌 그 문법
React에서 처음 마주치는 JSX, HTML과 뭐가 다른지 핵심만 정리합니다.
컴포넌트 — 레고 블록처럼 UI를 조립합니다
React의 핵심 단위인 컴포넌트, 왜 UI를 쪼개야 하는지 알아봅니다.
Props — 컴포넌트끼리 데이터를 주고받는 방법
부모에서 자식으로 데이터를 전달하는 Props의 개념을 알아봅니다.
children과 합성 — 컴포넌트 안에 컴포넌트를 넣습니다
children props와 컴포넌트 합성 패턴으로 유연한 레이아웃을 만드는 방법입니다.
상태(State) — 화면이 바뀌는 진짜 이유
React에서 화면이 업데이트되는 핵심 원리, 상태(State)의 개념을 설명합니다.
useState — 가장 많이 쓰는 훅, 이것만 알면 절반은 끝납니다
React에서 가장 기본이 되는 useState 훅의 사용법을 알아봅니다.
useEffect — 화면이 그려진 다음에 할 일을 정합니다
컴포넌트가 화면에 나타난 후 실행할 작업을 관리하는 useEffect를 알아봅니다.
훅(Hook)의 규칙 — 왜 조건문 안에서 쓰면 안 될까?
React Hook을 사용할 때 반드시 지켜야 하는 두 가지 규칙을 알아봅니다.
가상DOM — React가 화면을 빠르게 바꾸는 비밀
가상DOM이 무엇이고, 왜 React가 이 방식을 선택했는지 쉽게 설명합니다.
리렌더링 — 언제, 왜 컴포넌트가 다시 그려질까?
React 컴포넌트가 리렌더링되는 조건과 그 과정을 이해합니다.
key가 필요한 이유 — 리스트 렌더링의 숨은 함정
React에서 리스트를 그릴 때 key를 왜 넣어야 하는지, 안 넣으면 무슨 일이 생기는지 알아봅니다.
불변성 — 왜 직접 바꾸면 안 되고 새로 만들어야 할까?
React에서 상태를 업데이트할 때 불변성을 지켜야 하는 이유를 알아봅니다.
Server Component vs Client Component — 경계를 어디에 그을 것인가
use client를 어디에 붙일지 고민해본 적 있으신가요? 단순한 문법이 아니라 컴포넌트 트리 설계의 문제입니다.
Next.js App Router에서 데이터 흐름 설계 — fetch는 어디서 해야 하는가
Page에서? Layout에서? 컴포넌트 안에서? 데이터를 어디서 가져오느냐에 따라 캐싱, 성능, 유지보수가 전부 달라집니다.
Next.js의 캐싱 레이어를 전부 해부해봅니다
Request Memoization, Data Cache, Full Route Cache, Router Cache. 4개 레이어가 각각 언제 작동하고 언제 무효화되는지 정리했습니다.
컴포넌트 설계: 에이전시 납품용 vs 자체 서비스용, 구조가 다르다
같은 카드 컴포넌트라도 납품용과 자체 서비스용은 설계 기준이 다릅니다. 맥락에 따라 '좋은 코드'의 정의가 바뀝니다.
layout.tsx 하나로 프로젝트 구조가 결정된다
Nested Layout, Route Group, 에러/로딩 바운더리 배치까지. Next.js 폴더 구조는 곧 아키텍처 의사결정입니다.
Middleware로 할 수 있는 것과 하면 안 되는 것
인증, 리다이렉트, i18n까지 — Middleware의 역할과 한계를 정확히 알아야 삽질을 줄입니다.
HTML vs TSX: 에이전시 납품 시나리오 비교
같은 UI를 HTML/CSS로 짤 때와 TSX 컴포넌트로 짤 때의 실제 코드 차이—에이전시 납품 관점에서 비교합니다.
유지보수 가능한 퍼블리싱 구조란 무엇인가
납품 후에도 수정이 쉬운 퍼블리싱 구조의 기준을 코드 사례와 함께 설명합니다.
백엔드 협업 시 가장 많이 발생하는 충돌 포인트
퍼블리셔와 백엔드 개발자 사이에서 반복적으로 발생하는 충돌 지점을 코드와 함께 정리합니다.