영화 웹사이트 - 1단계 (API 데이터 불러오기)

개발 환경 및 기술 스택

• 프레임워크: React(Vite)
• 언어: TypeScript
• 스타일: Tailwind CSS
• HTTP 클라이언트: Axios
• API: TMDB 

구현 내용

1. API 데이터 fectching
   TMDB의 /movie/popular 엔드포인트를 활용하여 데이터를 불러왔다. 보안을 위해 나의 API토큰은 .env 를 추가하여 환경 변수로 관리했고, axios.create를 사용해서 공통 인스턴스 만들어서 코드의 재사용성을 높였다.
   • 역할 분리: API호출 로직은 src/api/axios.ts에, 데이터 구조 정의는 src/types/movie.ts에 분리하였다.
   • 데이터 로딩: useEffeect 훅의 의존성 배열을 비워서 컴포넌트 마운트 시 최초 1회만 호출되도록 설계하였다. 
2. 반응형 그리드UI (TailWind CSS)
   다양한 기기에서 최적의 화면 제공하기 위해 반응형 레이아웃을 적용하였다. 사용자가 마우스 올렸을 때 영화의 제목과 상세 줄거리가 부드럽게 나타나도록 구현하였다. 
3. 상세 정보 효과 (UX) 
   사용자가 마우스 올렸을 때 영화 제목과 상세 줄거리가 부드럽게 나타나도록 구현 

구현 화면 

트러블슈팅

내용: verbatimModuleSyntax - 상단에서 타입을 일반 import처럼 가져오면 에러가 발생

원인: TypeScript 환경에서 interface 가져올 때 발생한 에러

해결: import type { Movie } from ... 과 같이 type 을 앞에 추가하여 사용하여 해결