다크 모드, 리덕스 및 명언 API: 단순한 랜딩 페이지를 넘어선 개발자 포트폴리오

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- React 및 Redux 기술 습득자

- 프로덕션 레벨 아키텍처 구현을 목표로 하는 개발자

- 난이도: 중급 (리덕스 툴킷, API 통합, 테마 관리 기술 요구)

핵심 요약

• 리덕스를 활용한 상태 관리: Redux Toolkit을 통해 명언 API(Quotable API) 데이터와 테마 상태를 전역적으로 관리
• 테마 동적 적용: Bootstrap 유틸리티 클래스(bg-dark, text-light)를 사용해 다크/라이트 모드 토글을 통해 전체 레이아웃 재구성
• 프로덕션 레벨 기술 스택: React (TypeScript), Axios, React Router, Bootstrap + Icons 사용

섹션별 세부 요약

1. 명언 API 통합

• Axios를 사용해 Quotable API에서 명언 데이터 가져오기
• Redux를 통해 명언 데이터 저장 후 푸터/메타태그 등 다른 영역에서 재사용 가능
• TypeScript 기반의 타입 정의 적용

2. 테마 관리 구현

• Redux를 통해 전역 상태로 테마(다크/라이트) 관리
• Bootstrap 유틸리티 클래스를 활용해 CSS 클래스 동적 적용
• 모든 페이지(카드 포함)가 테마 변경 시 자동 반응

3. 기술 스택 및 아키텍처

• React (TypeScript): 컴포넌트 기반 UI 구현
• Redux Toolkit: 상태 관리 효율성 향상
• React Router: 라우팅 기능 지원
• Bootstrap + Icons: 테마 일관성 유지 및 아이콘 활용
• 아키텍처 패턴: 모듈화된 상태 관리와 컴포넌트 재사용성 강조

결론

• 프로덕션 레벨 아키텍처 구현을 위한 핵심 팁:

- Redux Toolkit을 활용한 상태 관리 최적화

- Bootstrap 유틸리티 클래스를 통한 테마 일관성 유지

- TypeScript 적용으로 타입 안전성 확보

- 향후 확장성을 고려한 모듈화 설계 권장