카테고리 소개글 & 목차

🧱 SPA(Single Page Application) 는 단순히 페이지를 하나로 구성하는 것이 아니라,
📐 라우팅, 렌더링, 상태관리, 코드 분할 등 다양한 요소가 유기적으로 설계되어야 하는 구조 중심의 아키텍처입니다.

이 카테고리에서는 다음과 같은 주제들을 다룹니다:

 

📘 1단계: SPA 구조 기초 & 기반 개념

순번	글 제목	비고
1	모듈 시스템 (CommonJS vs ESModules) 완전 정리	import/export 기반 이해
2	프레임워크 없이 바닐라 JS로 SPA 만들기	라우터 + 렌더링 직접 구현
3	SPA 구조 설계(모듈화): 라우터/스토어 모듈 분리와 파일 구조 구성법	기본 구조화 방식 정리
4	상태 관리 전략: 중앙화 vs 컴포넌트 로컬화	store 구조 선택 기준 정리
5	컴포넌트 중심의 SPA 아키텍처 설계 패턴	구조 설계 철학 & 방식 비교

 

🚀 2단계: 실전 코드 분할 & 라우터 연동

6	React/Vue 라우터와 코드 스플리팅 연동	import() 기반 route chunk 구성
7	preload/prefetch를 라우터와 자동 연동하는 패턴	UX 개선용 사전 로딩 전략
8	Vite + React/Vue에서 lazy import에 대한 SEO 대응	CSR 환경에서의 검색 대응

 

🌐 3단계: SSR/CSR 환경 통합 설계

9	CSR 기반 라우터 설계 vs SSR 기반 라우팅 차이	history API vs server render
10	SSR/CSR 혼합 환경에서 코드 분할 제어 전략	hydration 대응, 클라이언트 전용 처리
11	접근성(A11y) & 로딩 UX 최적화	로딩 중 사용자 경험 처리 전략

 

🌟 4단계: 렌더링 최적화 및 사용자 경험 개선

12	브라우저 렌더링 구조와 성능 최적화	DOM → Render Tree → Paint 흐름과 최적화 포인트
13	Web Vitals(LCP, CLS, FID)과 Lighthouse 성능 측정 실전	측정 지표 기반 실전 최적화 전략

📌 초보자도 접근할 수 있게 설명하면서도,
실제 서비스를 설계하는 개발자들이 고려해야 할 구조 설계 관점에 집중합니다.