feat:10주차 1,2미션

[kimdoyeon1234]

📌 작업 내용

• TMDB 영화 검색·필터 구현, 모달 성능 최적화 및 Vercel 배포 완료

✨ 상세 작업 내용

1번째 미션 (영화 검색 기능 & 상세 정보 모달 및 최적화)

• 영화 검색 및 Form 구현
  • 상단 검색 UI 배치 및 <form> 태그로 엔터 키 검색 구현 함
  • 검색어는 useState 상태로 실시간 관리 함
• 성인 콘텐츠 및 다국어 필터 추가
  • 체크박스 상태로 API의 include_adult 파라미터 연동 함
  • ko-KR, en-US, ja-JP 선택 가능한 <select> 박스로 API 쿼리 스트링 설계 함
• 상세 정보 모달 및 IMDb 연동
  • 카드 클릭 시 영화 객체를 상태로 받아 중앙 모달창 렌더링 구현 함
  • 포스터·정보 배치 및 window.open으로 IMDb 새 탭 검색 버튼 추가 함
• React DevTools 활용 성능 최적화
  • 검색·필터링 시 전체 컴포넌트 트리 불필요 리렌더링 문제 확인 함
  • 모달에 React.memo 적용 및 객체·함수 재생성 방지로 성능 개선 함

2번째 미션 (Vercel 배포 및 설정)

• Vercel CLI 배포 및 프로젝트 연동
  • Vercel CLI 구축 및 독립 프로젝트로 배포 완료 함
• react-router-dom 라우팅 추가
  • 요구사항에 맞춰 src/main.tsx에 /movies/:movieId 테스트 경로 추가 함
• SPA 새로고침 404 에러 방지
  • 최상단에 모든 경로를 index.html로 보내는 vercel.json 설정 적용 함
• 환경변수 보안 설정
  • .env 유출 방지를 위해 .gitignore 등록 및 Vercel 대시보드에 API Key 결합 함

베포 링크 : https://week10-359syse1b-kimdoyeons-projects-ab8b8e9e.vercel.app/

📸 스크린샷

기본	상세

✅ 체크리스트

• 기능 정상 작동 확인
• 불필요한 주석 삭제
• 해당 주차 키워드 내용 이해

[yewon20804]

10주차 미션 확인했습니다 ! React.memo, useCallback, useMemo를 활용해서 성능 최적화를 진행해주셨습니다 ☺️ 아래 코멘트 확인해 주시고 10주차 동안 수고 많으셨습니다 !

---

1. constants/movie.ts — 사용되지 않는 import

// 현재 (week10/src/constants/movie.ts)
import { MovieLanguage } from '../types/movie';

export const LATEST_LANGUAGE_OPTIONS = [
  { value: 'ko-KR', label: '한국어' },
  { value: 'en-US', label: '영어' },
  { value: 'ja-JP', label: '일본어' }
] as const;

1번째 줄에서 MovieLanguage 타입을 import 했지만, 코드 내에서 실제로 사용되지 않고 있습니다. 불필요한 import는 제거하는 것이 좋습니다 !