Day 39 (12/11) - React 프로젝트 GitHub Pages 배포

🚀 React 프로젝트 GitHub Pages 배포 가이드

핵심 요약: gh-pages 패키지를 사용하여 특정 프로젝트의 빌드 파일을 별도 브랜치에 자동으로 푸시하고 배포하는 최적화 프로세스

 

1. gh-pages 패키지 개념 및 역할

• 패키지 정의: dist나 build 폴더의 결과물을 gh-pages 브랜치로 자동 업로드하는 배포 도우미 툴
• 작동 원리: npm run deploy 실행 시 빌드 폴더 생성 및 브랜치 푸시 후 GitHub Pages를 통한 호스팅 연동

2. 단계별 환경 설정

• 패키지 설치: 프로젝트 루트 경로에서 개발 의존성으로 추가Bash
• npm install --save-dev gh-pages
• package.json 스크립트 구성: 빌드와 배포를 한 번에 처리하는 자동화 설정
  • "predeploy": "npm run build"
  • "deploy": "gh-pages -d build"
• Homepage 경로 지정: 배포될 사이트의 최종 URL 명시
  • "homepage": "https://[ID].github.io/[Repository-Name]/"

3. 배포 실행 및 활성화

• 소스 동기화: 로컬 변경 사항 커밋 및 원격 저장소 푸시
• 명령어 실행: 터미널에서 배포 스크립트 가동Bash
• npm run deploy
• 최종 활성화: GitHub 저장소 Settings > Pages 메뉴에서 배포 브랜치(gh-pages) 및 루트 폴더 설정 확인

---

📙 React & Spring 개발 핵심 강의 요약

1. React: 성능 최적화 및 라우팅

• useState 지연 초기화 (Lazy Initialization):
  • 기법: useState(() => { ... })와 같이 초기값으로 함수 전달
  • 용도: 로컬 스토리지 데이터 파싱 등 복잡한 연산이 필요한 경우 컴포넌트 첫 렌더링 시에만 실행하도록 최적화
  • 조건문 처리: JSON.parse 결과값 유무에 따른 예외 처리 로직 구현
• 라우팅 컴포넌트:
  • <Link to>: 페이지 전환 시 브라우저 새로고침 없이 경로 이동
  • <Outlet>: 중첩 라우팅 구조에서 하위 컴포넌트가 렌더링될 위치 지정

2. Spring 6 Legacy: 데이터 처리 고도화

• 동적 쿼리: 검색 조건 및 필터에 따라 SQL 문이 가변적으로 생성되도록 구현
• 서비스 계층 설계: BoardListPagingDTO를 활용한 페이징 처리 로직 고도화 및 데이터 전달 효율성 증대

---

🗂️ 개념 정리 및 실무 메모

• 프로젝트 일지: 2025-12-11 리액트 쇼핑몰 기능 구현 및 스프링 레거시 동적 검색 학습
• 핵심 체크포인트: 배포 전 homepage URL 오타 확인 및 useState 함수의 실행 시점 명확히 인지
• 향후 과제: 서비스 계층의 DTO 변환 로직 최적화 및 동적 쿼리 성능 테스트 진행

---