개요

프레임워크를 배우기 전에 — 지도부터

Next.js 튜토리얼은 따라 했는데 pnpm install이 정확히 뭘 하는지는 모르는 사람, vite dev가 뜨는 건 봤는데 Vite가 무슨 물건인지는 설명 못 하는 사람, “요즘 뭘로 만들어요?”라는 질문에 지도 없이 단어만 주워섬기게 되는 사람을 위한 자료다.

특정 프레임워크를 가르치지 않는다. 그건 프론트엔드 덱과 Supabase 덱의 몫이고, 이 덱은 그 아래에 깔린 공통 기반 — 요청이 오가는 길, 도구 사슬, 배포 — 을 다룬다.

2026년 8월 기준으로 쓰였다 — Node 24 LTS · pnpm 11 · Vite 8 · TypeScript 6.x.

첫 장부터 읽기

구성

1. 0~2장웹의 뼈대

   요청의 일생 · 렌더링 전략

   브라우저에 주소를 치면 무슨 일이 일어나는가

2. 3장기술 스택 지형도

   무엇이 어느 층의 물건인가

   요즘 뭘 많이 쓰고, 각각 어느 층의 물건인가

3. 4~7장도구 사슬

   런타임 · 패키지 매니저 · 번들러 · Vite

   pnpm dev 한 줄 뒤에서 무엇이 도는가

4. 8~9장품질과 규모

   품질 도구 · 모노레포

   코드가 커져도 무너지지 않게 하는 장치들

5. 10~13장서비스가 되기까지

   백엔드와 데이터 · 브라우저 보안 · 배포 · Cloudflare

   내 코드는 어떻게 서비스가 되는가

6. 14~15장마무리

   용어 사전 · 마무리

전체를 관통하는 두 질문

“이 요청은 어디까지 갔다 오는가?” — 브라우저에서 멈추는가, CDN에서 끝나는가, 오리진 서버까지 가는가, DB까지 내려가는가. 성능 문제와 아키텍처 결정의 대부분이 이 질문 하나로 풀린다. (1·2·12·13장)

“이 도구는 무슨 통증에서 나왔는가?” — pnpm도 Vite도 TypeScript도 누가 멋으로 만든 게 아니라 실제로 아팠던 문제의 해법이다. 통증을 알면 도구가 왜 이렇게 생겼는지가 보이고, 다음 도구가 나와도 놀라지 않는다. (4~9장)

읽는 법

표시 약속

:::tip 박스는 핵심 원칙, :::caution 박스는 자주 겪는 함정이다. 장 첫머리의 “처음 나오는 말” 상자에서 새 용어를 먼저 푼다.

급하면 세 장만

1장 요청의 일생 · 5장 pnpm · 7장 Vite. 이 셋이 이 덱의 알맹이다.

깊이는 다른 덱에

Next.js·Tailwind·shadcn/ui는 프론트엔드 덱, DB·인증·RLS는 Supabase 덱이 이어받는다. 이 덱은 그 앞의 지도다.

버전에 민감하다

이 생태계는 빠르다. 검색으로 찾은 글이 이미 낡았을 수 있다 — webpack 설정법, npm install의 느린 속도 불평, “Vite는 dev만 빠르다” 같은 이야기는 전부 한 세대 이전의 것이다.

0. 시작하기 전에이 덱의 대상과 범위 — 무엇을 다루고 무엇을 다른 덱에 넘기는가.