# 당신이 안 보는 사이 프론트엔드에 무슨 일이 있었나

> Clean Markdown view of GeekNews topic #31587. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=31587](https://news.hada.io/topic?id=31587)
- GeekNews Markdown: [https://news.hada.io/topic/31587.md](https://news.hada.io/topic/31587.md)
- Type: news
- Author: [kciter1](https://news.hada.io/@kciter1)
- Published: 2026-07-20T02:12:58+09:00
- Updated: 2026-07-20T02:12:58+09:00
- Original source: [davidpoblador.com](https://davidpoblador.com/deep-dives/what-happened-to-the-frontend/)
- Points: 39
- Comments: 4

## Topic Body

- 2008년경 프론트엔드를 떠난 개발자를 대상으로, 지난 20년간의 변화를 설명하는 글  
- 모든 도구는 실제 문제(상처) 위에 생긴 흉터 조직이며 각 레이어의 해결책이 다음 레이어의 문제를 만들며 쌓였다는 것이 전체 논지  
- 글 전체에서 `<button>` 하나를 표본으로 삼아 각 시대에 버튼이 어떻게 변했는지 추적함  
---  
- Layer I — jQuery (2006–2010)  
  - 전체 페이지를 새로고침하지 않고 일부만 바꾸고 싶다는 요구에서 시작됨  
  - jQuery가 브라우저 간 차이를 없애고 AJAX를 대중화했으나, 데이터가 JS 변수와 화면 양쪽에 존재해 개발자가 직접 동기화해야 하는 문제가 생김  
  - 이 수동 DOM 조작이 이후 모든 레이어가 해결하려는 "원죄"임  
- Layer II — 프레임워크 (2010–2015)  
  - 선언적 UI: 화면을 갱신하는 절차 대신 데이터에 따른 화면의 모습을 기술하면 프레임워크가 갱신을 처리함  
  - React가 컴포넌트 + JSX + Virtual DOM으로 시대를 주도했고, Vue/Angular/Svelte/Solid가 뒤를 이음  
  - 현재 모든 프레임워크는 의존 관계를 추적해 필요한 곳만 갱신하는 signal 개념으로 수렴 중  
  - htmx, Alpine.js, Hotwire 등 서버에서 HTML을 보내는 방식으로 회귀하는 진영도 존재함  
- Layer III — 빌드 (2012–2018)  
  - JS에 모듈 시스템이 없어 CommonJS와 ES Modules가 경쟁했고, 구형 브라우저 호환을 위해 Babel 트랜스파일과 webpack 번들링이 필요해짐  
  - 빌드는 minify, tree-shaking, 코드 분할, 소스맵 생성을 포함함  
  - 대가로 node_modules가 생겼으며, 빈 스타터 프로젝트도 25만 개가량의 파일을 설치함  
- Layer IV — 툴링 경쟁 (2018–2024)  
  - 느린 빌드와 복잡한 webpack 설정 문제를 Go/Rust로 재작성해 해결한 시대  
  - esbuild(Go)가 번들링을 10–100배 빠르게 만들었고, SWC(Rust)가 Babel을 대체함  
  - Vite가 기본 도구로 자리잡았고, 프로덕션 번들러는 Rust 기반 Rolldown으로 교체 중이며 관련 스택이 VoidZero(최근 Cloudflare가 인수) 아래로 통합되는 중  
  - 패키지 매니저도 pnpm, Bun 등으로 같은 흐름을 따름  
- Layer V — 서버 렌더링의 귀환 (2014–2026)  
  - SPA는 서버가 빈 div만 보내므로 초기 로딩 시 빈 화면이 뜨고 검색엔진에도 빈 페이지로 보이는 문제가 있었음  
  - 해결책은 서버에서 HTML을 다시 렌더링하는 것으로, 2008년 방식으로의 회귀임  
  - SSR(요청마다 렌더링), SSG(빌드 시 사전 렌더링), ISR(자동 갱신되는 SSG)이 등장했고 Next.js, Astro, SvelteKit, Nuxt 등 메타 프레임워크가 이를 담당함  
  - 서버 HTML을 브라우저에서 다시 살리는 hydration 비용이 새로운 문제가 되었고, Islands(Astro), Resumability(Qwik), React Server Components가 hydration을 줄이는 방식으로 등장함  
- Layer VI — 엔지니어링 도구 (2015–2026)  
  - TypeScript가 타입 시스템으로 리팩터링 안정성을 확보했고 사실상 표준이 됨  
  - Tailwind가 유틸리티 클래스 방식으로 스타일링을 주도하는 한편, 네이티브 CSS도 nesting, 변수, container query 등으로 발전해 기존 툴링의 필요가 줄어듦  
  - shadcn/ui는 컴포넌트를 설치하는 대신 소스를 복사해 소유하는 방식을 정착시켰고, TanStack Query, Zustand, Zod, Vitest, Playwright가 2026년 앱의 기본 어휘를 구성함  
- Layer VII — 배포 (2015–2026)  
  - FTP 업로드 대신 Git 저장소를 Vercel/Netlify/Cloudflare에 연결하면 push마다 자동 빌드·배포되고 PR마다 라이브 프리뷰 URL이 생성됨  
  - 서버리스 함수와 엣지(사용자 근처 수백 개 데이터센터에서 코드 실행) 개념이 정착함  
- Layer VIII — AI (2023–2026)  
  - v0, Lovable, Bolt에 자연어로 설명하면 동작하는 프론트엔드가 생성되고, Cursor, Claude Code, Copilot이 코드를 대신 작성함  
  - 백엔드/시스템 엔지니어도 하루 만에 프론트엔드를 만들 수 있게 되어 엔지니어링 분야 간 경계가 흐려짐  
  - 다만 생성된 코드는 위 8개 레이어의 지식을 전제하며, 이 격차를 메우는 것이 이 글의 목적임  
- Bedrock — 결론  
  - 2026년 최전선의 방향은 서버에서 HTML을 렌더링하고, JS를 거의 보내지 않고, 웹 플랫폼을 활용하는 것임  
  - 업계가 20년간 큰 원을 그린 끝에 FTP로 올리던 파일과 닮은 지점으로 돌아왔다고 정리함

## Comments



### Comment 62075

- Author: aer0700
- Created: 2026-07-20T11:49:28+09:00
- Points: 2

정말 어지럽네요...

### Comment 62073

- Author: hmmhmmhm
- Created: 2026-07-20T11:15:57+09:00
- Points: 2

Nodejs 0.8 버전 쓰던게 엊그제 같은데....

### Comment 62081

- Author: kankala
- Created: 2026-07-20T13:49:16+09:00
- Points: 1

프론트도 배포는 컨테이너 nginx 위주 아닌가...

### Comment 62076

- Author: ng0301
- Created: 2026-07-20T11:53:38+09:00
- Points: 1

재밌게 잘 읽었네요 ㅋㅋㅋ