
## 서론

웹 프론트엔드를 연습할 토이프로젝트에 사용할 api를 찾아보다가 [Bored API](http://www.boredapi.com/), [API-Football](https://www.api-football.com/)등 재미있어 보이는 api들을 찾았다. 재미는 있어 보였지만, 연습용으로 적합하지 않거나, 가격을 지불해야해서 시작하기가 꺼렸다. 남들 다 한번씩은 만들어보는 Movie App은 괜히 하기가 싫었지만(홍대병 맞음), [TMDB API](https://developer.themoviedb.org/docs)만큼 잘 만들고 학습용으로 적당한 api도 없어서 간단한 영화앱을 만들어보기로 했다.

## 프로젝트 소개

[조성민머리Flix](https://josungminmeoriflix.vercel.app/home)

> 나의 소중한 넷플릭스 중독자 친구, 민머리 헤어스타일이 매력적인 조성민의 이름을 따서 "_조성민머리Flix_"이다.

영화, TV프로그램들을 나열해주는 웹사이트이다. 세부정보를 확인할 수 있으며, 검색기능도 지원한다.

[https://github.com/jindun619/movie-app](https://github.com/jindun619/movie-app)

## 🔥 프로젝트를 통해서 배우고 싶은 것들

- React를 더 유연하게 사용하고, Next.js의 개념을 잘 익히기.
- Typescript 프로그래밍 연습하기.
- TailwindCSS, DaisyUI를 이용해서 괜찮은 UI 만드는 연습하기.
- Axios를 이용해 api 다루는 연습하기.

## 💡 주요 기능

### 영화

- Daily Trending 영화 추천
- 현재 상영중, 인기 영화, 평점높은 영화 나열

### TV 프로그램

- Daily Trending TV프로그램 추천
- 오늘 방영, 현재 방영중, 인기 프로그램, 평점높은 프로그램 나열

### 상세 정보

- 포스터 클릭 시 영화/TV프로그램 상세정보 표시

### 검색

- 영화/TV프로그램 검색 기능 구현

### UX/UI

- 디바이스 크기에 따라 변하는 반응형 웹

## 소감

Typescript, Recoil 등 처음 사용해보는 스택이 익숙하지 않아서 구조적으로 많이 미흡하지만, 새로운 것을 배웠다는 점에서 뿌듯하다. Axios 비동기 처리에 대해서 아직 모르는 부분이 많지만 프로젝트 시작전에 비해 많이 알게 되었다. Next.js의 주요 기능 중 하나인 SSR, CSR과 Routing 방식에 대해서 기본적으로 이해하고 사용할 수 있게 되었다. 내 코드에 많은 문제점들이 존재하겠지만, 확실한건 이번 프로젝트를 통해서 많은것을 배웠다.


참고 자료