목차

1. 상태 관리 전략

역량 구체적 구현
서버/클라이언트 상태 분리 SWR(서버 데이터) + Redux Toolkit(클라이언트 상태)로 역할 분리
SWR 캐싱 전략 블로그 데이터 자동 재검증, mutate로 수동 갱신
Redux 슬라이스 설계 도메인별 분리 (login, posts, categorySearch)
폼 상태 관리 react-hook-form으로 유효성 검사 및 에러 처리

2. 컴포넌트 설계 패턴

역량 구체적 구현
Lazy Loading React.lazy + Suspense로 코드 스플리팅
컴포넌트 분리 Container/Presentational 패턴 적용
재사용 컴포넌트 Pagination, Loading, Error, NotFound 공통화
스타일 캡슐화 SCSS Modules로 클래스명 충돌 방지

3. 라우팅 & 네비게이션

역량 구체적 구현
선언적 라우팅 React Router v6 Routes/Route 구조
동적 라우팅 useParams로 postId, categoryName 추출
활성 메뉴 표시 NavLink isActive로 현재 페이지 하이라이트
인증 보호 조건부 navigate로 비인증 사용자 리다이렉트

4. 데이터 패칭 & API 연동

역량 구체적 구현
SWR 활용 자동 재검증, 에러 핸들링, 로딩 상태 관리
Axios 인스턴스 프록시 설정으로 CORS 해결
검색 API 쿼리스트링 기반 복합 조건 검색
에러 처리 로딩/에러/성공 상태별 UI 분기

5. 반응형 웹 디자인

역량 구체적 구현
모바일 네비게이션 햄버거 메뉴 + 드롭다운 토글
조건부 스타일링 classnames 라이브러리로 동적 클래스 바인딩
미디어 쿼리 SCSS 변수 활용 브레이크포인트 관리

6. SEO & 성능 최적화

역량 구체적 구현
메타태그 관리 react-helmet-async로 페이지별 SEO 설정
이미지 최적화 로고 이미지 조건부 로드 (데스크톱/모바일)
코드 스플리팅 페이지별 Lazy Loading으로 초기 번들 사이즈 감소
스크롤 최적화 페이지 이동 시 scrollTop 자동 실행