Day 41 (12/15) - 종일 프로젝트

🎨 Creative Archive: React 포트폴리오 프로젝트 정리

핵심 요약: React와 Redux Toolkit을 활용한 카탈로그형 포트폴리오 웹사이트 개발 과정 및 핵심 설계 전략 요약

 

---

📝 프로젝트 개요 및 목적

• 프로젝트명: Creative Archive (크리에이티브 아카이브)
• 한 줄 소개: React로 구현한 개인 디자인 포트폴리오 아카이빙 웹사이트
• 개발 기간: 2025-12-15 ~ 2025-12-19 (총 5일)
• 주요 목적:
  • React 컴포넌트 설계 및 상태 관리 실무 능력 배양
  • 카탈로그형 UI 패턴(목록 → 상세) 구현 및 반응형 레이아웃 적용
  • 필터링, 검색, 정렬 등 사용자 인터페이스 편의 기능 실습

🎯 주요 기능 및 특징

• 홈 페이지: 디자인 작업물 카드 그리드 레이아웃 구성
• 카테고리 필터: 뉴스레터, 브로슈어, 인포그래픽 등 분류 기능
• 검색 및 정렬: 제목/설명 기반 키워드 검색 및 최신순/제목순 정렬
• 상세 페이지: 대형 이미지 갤러리 및 프로젝트 상세 정보 제공
• 반응형 디자인: 모바일, 태블릿, 데스크톱 최적화 대응
• 추가 기능: 즐겨찾기(북마크) 기능 구현 (선택 사항)

---

🛠️ 기술 스택 및 개발 환경

• 기본 환경: Vite (Build Tool), React (Library)
• 상태 관리: Redux Toolkit, react-redux (전역 상태 관리 및 Props Drilling 방지)
• 라우팅: react-router-dom (페이지 전환 및 경로 관리)
• 라이브러리:
  • Axios: API 통신 및 데이터 요청
  • UUID: 각 포트폴리오 아이템의 고유 ID 생성
  • Date-fns: 날짜 포맷 및 정렬 로직 처리

---

📂 프로젝트 구조 및 설계 패턴

1. 디렉토리 구조 (src)

• components: 재사용 가능한 UI 조각 (Header, Footer, Hero, WorkCard 등)
• pages: 라우트 단위의 화면 구성 (Home, Detail, About, Contact 등)
• layouts: 공통 레이아웃 (Header/Footer + <Outlet />)
• store: Redux 전역 상태 및 Slice 정의
• routes: 라우팅 구조 정의 (AppRouter.jsx)

2. 컴포넌트 설계 전략

• Presentational & Container 패턴: UI 렌더링(Hero)과 데이터 로직 처리(Home) 역할 분리
• Pages/Components 분리: 라우트 매핑 화면과 재사용 UI 조각의 명확한 구분
• Pure Component: 비즈니스 로직 없이 UI만 그리는 순수 컴포넌트 적극 활용

---

💡 핵심 개념 및 트러블슈팅

1. React 개발 핵심 가이드

• Fragment 문법: 컴포넌트 return 시 최상위 요소는 반드시 하나의 태그로 묶음
• 컴포넌트 명명: 식별을 위해 반드시 대문자로 시작
• 상태 관리: 재렌더링이 잦은 UI나 반복 출현 요소는 컴포넌트화하여 관리

2. 정적 자원 관리 (public vs src)

• public 폴더: * 빌드 시 복사만 수행, 파일명 고정
  • 이름 변경이 안 되는 파일이나 대량의 이미지 동적 참조 시 활용
• src 폴더:
  • Webpack/Vite 최적화 대상, hash 파일명으로 캐싱 문제 해결
  • 소용량 이미지 및 컴포넌트 내 import 자산 관리에 최적화

3. JSX 문법 및 표현식

• JS 표현식: React 내에서 JavaScript 코드를 실행할 때는 {}로 감싸서 처리
• JSX 태그: 컴포넌트 호출 시 <ComponentName /> 형태의 태그 문법 사용

🚀 주요 이슈 해결 (Troubleshooting)

• 검색 파라미터 유지: 상세페이지에서 목록으로 이동 시 검색어 초기화 문제 해결을 위한 URL 쿼리 스트링 연동
• Git 배포 CSS 에러: 배포 환경에서의 스타일 시트 경로 및 렌더링 오류 수정 완료 (2025-12-23)
• Null 방어 로직: 검색 조건이 없는 상태에서 상세페이지 진입 시 발생하는 런타임 에러 예외 처리 적용