최종 프로젝트

아이디어 구상 및 기획: 여러분이 만들고 싶은 앱의 주제와 주요 기능을 스스로 정의합니다.

프로젝트 초기화: Vite(권장) 또는 여러분이 선호하는 다른 방식으로 프로젝트를 시작합니다.

컴포넌트 설계 및 구현: 앱의 구조를 컴포넌트 단위로 나누어 설계하고, 각 컴포넌트를 구현합니다.

• 함수형 컴포넌트와 훅(State, Effect, Context, Memo 등)을 적극적으로 활용합니다.

상태 관리: 앱의 복잡도에 따라 useState, useReducer, Context API 중 적절한 상태 관리 기법을 선택하여 적용합니다. (선택적으로 Redux, Zustand 등 외부 라이브러리 사용도 가능)

라우팅 구현: react-router-dom을 사용하여 여러 페이지 간의 내비게이션을 구현합니다.

데이터 페칭 및 관리: API 호출 등을 통해 외부 데이터를 가져오고 화면에 표시하는 기능을 구현합니다. (예: fetch, axios, React Query 등)

성능 최적화 적용: React.memo, useCallback, useMemo 등을 적절히 사용하여 불필요한 리렌더링을 방지하고 앱의 성능을 최적화합니다.

React Developer Tools의 Profiler를 사용하여 최적화 효과를 확인합니다.

배포: 빌드 과정을 거쳐 Netlify, Vercel, GitHub Pages 등 정적 호스팅 서비스에 앱을 배포합니다.

SPA 라우팅 문제를 해결하는 _redirects 파일 설정 등을 잊지 않습니다.

(선택) Git & CI/CD: GitHub/GitLab 저장소를 만들고, Netlify/Vercel의 자동 배포 기능을 활용하여 CI/CD 워크플로우를 경험합니다.

• 무엇을 만들고 싶은가요?
• 주요 기능은 무엇인가요? (최소 3~5가지 핵심 기능 정의)
• 어떤 데이터가 필요한가요? (정적 데이터, 외부 API?)
• 어떤 페이지들이 필요한가요? (라우팅 경로 정의)

npm create vite@latest my-final-project -- --template react
cd my-final-project
npm install

또는 선호하는 Next.js 등으로 시작해도 좋습니다.

• react-router-dom 설치: npm install react-router-dom
• 외부 API를 사용할 경우, axios 또는 fetch 준비
• index.css에 기본적인 전역 스타일링 추가 (Chapter 9의 스타일을 활용해도 좋습니다).

• src/components/, src/pages/, src/hooks/, src/utils/ 등으로 폴더를 나누어 코드의 응집도를 높입니다.
• 각 컴포넌트의 역할과 프롭스, 상태를 간략하게 스케치합니다.

• 가장 중요한 기능부터 차례로 구현합니다.
• 각 기능을 구현할 때마다 useState, useEffect 등 적절한 훅을 사용합니다.
• UI와 로직을 분리하는 연습을 합니다.
• React Developer Tools로 컴포넌트 트리와 상태 변화를 확인합니다.

• App.js 또는 index.js에 BrowserRouter를 설정합니다.
• Routes와 Route 컴포넌트를 사용하여 페이지 라우팅을 구현합니다.
• Link 컴포넌트나 useNavigate 훅으로 페이지 이동을 구현합니다.

• useEffect를 사용하여 컴포넌트 마운트 시 데이터를 가져옵니다.
• 로딩 상태, 에러 상태를 처리하여 사용자에게 피드백을 줍니다.
• React Query나 SWR을 사용해보는 것을 강력히 추천합니다.

• Profiler 탭에서 불필요한 리렌더링이 발생하는 지점을 찾습니다.
• React.memo로 렌더링 비용이 높은 컴포넌트를 감쌉니다.
• useCallback으로 자식 컴포넌트에 전달되는 콜백 함수를 메모이제이션합니다.
• useMemo로 고비용 계산 결과나 참조가 중요한 객체/배열을 메모이제이션합니다.
• 적용 후 다시 프로파일링하여 개선 효과를 확인합니다. 과도한 최적화는 피합니다.

• 프로젝트 코드를 GitHub/GitLab 등 원격 저장소에 푸시합니다.
• public 폴더 안에 _redirects 파일을 생성하고 /* /index.html 200 내용을 추가하여 SPA 라우팅 문제를 해결합니다.

• npm run build 명령어를 실행하여 빌드합니다.
• Netlify, Vercel 등 선호하는 정적 호스팅 서비스에 접속하여 Git 저장소와 연동하고 dist 폴더를 배포합니다.
• 배포된 URL을 통해 앱에 접속하고 모든 기능이 정상적으로 작동하는지 확인합니다.