[번역] 거의 모든 면접에서 받은 프론트엔드 아키텍처 질문들
Soshy·
원문: I Got Asked These Frontend Architecture Concepts in Almost Every Interview
현대 프론트엔드 개발은 더 이상 프레임워크에 관한 것이 아닙니다. 아키텍처 선택에 관한 것입니다.
CSR, SSR, SSG, 하이드레이션, 캐싱, 오프라인 지원, 이것들은 단순한 유행어가 아닙니다. 이것들은 트레이드오프입니다.
모든 점들을 연결해 보겠습니다.
Client-Side Rendering (CSR)
CSR의 동작 방식
- 브라우저가 빈 HTML을 로드합니다.
- JavaScript를 다운로드합니다.
- React/Vue가 UI를 렌더링합니다.
<div id="root"></div>
<script src="app.js"></script>
장점
- 로드 후 빠른 페이지 이동
- 풍부한 인터랙션
- 단순한 백엔드 API
단점
- 느린 첫 화면 렌더링
- 낮은 SEO 성능
- JS 로드 전까지 빈 화면
적합한 사용 사례
- 대시보드
- 관리자 패널
- 로그인이 필요한 앱
Server-Side Rendering (SSR)
SSR의 동작 방식
- 브라우저가 페이지를 요청합니다.
- 서버에서 React를 실행합니다.
- HTML이 생성됩니다.
- 브라우저가 즉시 콘텐츠를 표시합니다.
- 이후 JS가 로드됩니다.
장점
- 빠른 첫 화면 렌더링
- SEO 친화적
- 동적 콘텐츠 지원
단점
- 높은 서버 비용
- 요청당 응답 속도 저하
적합한 사용 사례
- 이커머스 페이지
- 인증 기반 페이지
- 사용자별 맞춤 콘텐츠
Static Site Generation (SSG)
SSG의 동작 방식
- 빌드 시점에 HTML을 생성합니다.
- CDN을 통해 제공됩니다.
- 요청마다 서버 로직이 실행되지 않습니다.
장점
- 가장 빠른 속도
- 매우 낮은 비용
- 탁월한 SEO 성능
단점
- 실시간 데이터 미지원
- 변경 시 재빌드 필요
적합한 사용 사례
- 블로그
- 마케팅 사이트
- 문서 페이지
하이드레이션: 빠진 연결 고리
하이드레이션은 JavaScript가 서버에서 렌더링된 HTML을 활성화하는 방법입니다.
동작 순서
- HTML이 화면에 표시됩니다.
- JS 번들이 다운로드됩니다.
- React가 DOM과 매칭됩니다.
- 이벤트 리스너가 연결됩니다.
- 페이지가 인터랙티브 상태가 됩니다.
비유 🧠
SSR/SSG는 인쇄된 신문을 제공하고,
하이드레이션은 그것을 터치스크린 태블릿으로 변환시켜 줍니다.
하이드레이션이 없다면:
- UI는 정상적으로 보입니다.
- 클릭이 동작하지 않습니다.
- 페이지가 "죽은" 상태입니다.
빠른 비교표
오프라인 우선 전략: 실제 동작 방식
오프라인 지원은 마법이 아닙니다.
다음 기술들을 조합하여 구현됩니다.
- Service Workers
- Cache API
- IndexedDB
Service Workers: 트래픽 컨트롤러
Service Worker는:
- 네트워크 요청을 가로챕니다.
- 캐시 또는 네트워크 중 하나를 선택합니다.
- 백그라운드에서 실행됩니다.
- 오프라인 동작을 가능하게 합니다.
브라우저 내부에 있는 프로그래밍 가능한 프록시라고 생각하시면 됩니다.
브라우저 스토리지 옵션
| 스토리지 | 사용 사례 |
|---|---|
| localStorage | 테마, 플래그 |
| sessionStorage | 임시 탭 상태 |
| IndexedDB | 대용량 구조화된 오프라인 데이터 |
| Cache API | 정적 에셋 및 응답 |
캐싱 전략
Cache First
- 캐시에서 먼저 제공합니다.
- 이후에 업데이트합니다.
- 정적 에셋에 적합합니다.
Network First
- 네트워크를 먼저 시도합니다.
- 실패 시 캐시로 폴백합니다.
- 최신 데이터가 필요한 경우에 적합합니다.
Stale-While-Revalidate 🔥
- 캐시된 데이터를 즉시 표시합니다.
- 백그라운드에서 업데이트를 요청합니다.
- 가장 균형 잡힌 전략입니다.
실제 사례: WhatsApp Web
- IndexedDB → 메시지 저장
- Service Worker → 오프라인 지원
- Cache → 이미지 캐싱
- localStorage → 테마 설정
이것이 바로 프로덕션 수준의 아키텍처입니다.
마치며 🎯
프론트엔드 아키텍처는 의도적인 트레이드오프에 관한 것입니다.
- 인터랙션이 중요하다면 → CSR
- SEO가 중요하다면 → SSR
- 속도가 중요하다면 → SSG
- 사용성을 높이려면 → 하이드레이션
- 안정성을 높이려면 → Service Workers
왜 그런지를 이해한다면, 어떤 프레임워크든 쉽게 다룰 수 있게 될 것입니다.