TIL: 2023년 웹 개발 트렌드
하드 스킬을 보완하고 일을 시작하려면, 트렌드를 파악할 필요가 있다고 느꼈다. 한번 써먹어 볼까 하는데, Resume-Driven Development라고 하던가? 언제 할지는 모르겠다.
프레임워크와 렌더링 패턴
- 압도적 점유율의 React에 뒤이어 Solid, Svelte가 뜨고 있다. Vue.js는 점유율은 높지만 가라앉는 중.
- 따라서 Next.js와 Remix, SolidStart, SvelteKit이 대세.
- 주로 CSR, SSR, SSG 패턴이 쓰이는데, 요즘은 CRS 보단 SSR이 기본이 되어가는 추세(규모 있는 회사들의 서비스만 봐도…). 필요하면 일부 페이지나 서비스 전체를 SSG 패턴으로 렌더링하기도 한다.
- 요즘은 Partial Hydration, Streaming SSR, ISR(Incremental Static Regeneration) 등 더 많은 패턴이 있단다. 골치 아프다. UX와 DX를 모두 충족하는 게 이렇게 어렵다.
자바스크립트 런타임
- Ryan Dahl의 Node.js를 시작으로 9년이 지난 2018년, Deno를 발표.
- 요즘은 클라우드 기업들이 자체 인프라에 최적화된 런타임을 구현하고 있는데, 파편화로 발생하는 문제를 막고자 Deno, Vercel, Cloudflare 등의 기업들이 WinterCG(Web-interoperable Runtimes Community Group)에 합류했다.
- Bun이란 것도 있단다. 이게 반응이 좋네.
CSS
- Styled Components와 Emotion은 여전히 인기가 많지만, 번들 크기 증가와 CSS 직렬화로 인한 오버헤드는 해결되지 않고 있다. SSR이나 엣지 컴퓨팅 등의 트렌드와는 반대의 길을 걷는 게 아이러니.
- 때문에 일부 개발자들은 Zero-Runtime CSS로 이전하고 있다. Tailwind CSS, UnoCSS, vanilla-extract, linaria, astroturf, compiled 등.
- Utility-First CSS는 여전히 호불호가 갈리지만, 컴포넌트 기반 개발과 디자인 시스템이라는 개념 덕에 뛰어난 DX로 패러다임 시프트에 성공했다. Zero-Runtime CSS 라이브러리 중에서는 Traditional CSS나 CSS-in-JS보다 유독 많이 사용되는 편(특히 Tailwind CSS).
모노레포
- 애플리케이션의 규모와 상관없이 모노레포는 유용하다. 관심사에 따라 모듈을 패키지로 분리하고, 이를 여러 앱에서 재사용할 수 있다.
- Turborepo, Nx, Rush, (죽어서 인수되었지만) Lerna 등.
- 그리고 Turborepo의 장점을 이야기하는데, 내가 CI/CD를 제대로 다룬 적이 없어 얼마나 대단한 건지 모르겠다. 이건 프로젝트 하면서 학습하는 걸로.
E2E 타입 안정성
- 타입스크립트로 작성된 풀스택 애플리케이션의 모든 과정(E2E)에서 타입 안정성을 보장하자. 안 하면 일 두 번 하게 되는데, 역체감이 장난 아니다.
- OpenAPI(REST), GraphQL Code Generator, tRPC, Zod, Prisma, TanStack Router
엣지(Edge) 컴퓨팅 + 서버리스(Serverless)
- 엣지 서버, 사용자의 컴퓨터, IoT 디바이스 등, 사용자와 더 가까운 서버나 디바이스를 엣지라고 한다. (엣지 서버는 리전과 개념이 유사해보여 검색하니, AWS는 리전마다 하나의 데이터 센터와 다수의 엣지 로케이션을 가지는 듯)
- 성능 향상과 비용 절감을 목적으로, 서버리스 기능을 사용자와 가장 가까운 엣지에 배포한다고.
- Cloudflare Workers, Deno Deploy, Vercel 등.
데이터베이스
- 서버리스 개념의 등장으로 너무 많은 DB Connection이 발생하게 되었다. Connection Pooling이 이 문제를 해결할 수 있지만 번거롭다고 한다.
- PlanetScale(MySql), Neon(PostgreSQL), Xata(PostgreSQL), Fly.io, Railway, Supabase 등(이 이걸 쉽게 해주어서 적어둔 거겠지?).
- 모르겠다. 나는 DB라면 이전 직장에서 쿼리 때릴 때마다 손이 벌벌 떨렸던 기억 밖에 없다.
그 외
- 빌드 도구: Vite, esbuild, Turbopack
- E2E 테스트: Playwright
- 웹 기반 데스크탑 애플리케이션: Tauri
- 터미널: Warp, Fig
- AI 주도 개발: GitHub Copilot, ChatGPT
