React Movies 기록 - 1. 개요, 구조

1. 개요

https://nomadcoders.co/react-masterclass

React JS 마스터클래스 – 노마드 코더 Nomad Coders

 얼마 전에 들었던 노마드 코더의 React JS 마스터클래스라는 강의를 수강하고 이와 연동된 챌린지를 수행하였다. 챌린지의 마지막 과제는 영화와 tv 정보가 담긴 API(https://www.themoviedb.org/)를 이용하여 이 정보들을 보여주는 웹사이트를 만드는 것이었다. 하지만 이 챌린지의 마지막 과제를 제출할 시점에는 이해하는 것만으로도 벅찼기 때문에 강의의 레퍼런스 코드와 큰 차이가 없었다. 그렇기 때문에, 다시 복습을 한 후에 조금 다듬어 보았다. 하지만 나의 미적 감각이 너무나 별로인지라 조금 더 깔끔히 보이는 데에 중점을 두었으며, 나중에 더 좋게 고칠 예정이다.

 

2.  구조

.
├── package.json
├── src	
	├── index.js 		
	├── App.ts	
	├── api.ts		
	├── styled.d.ts		
	├── theme.ts		
	├── utils.ts		
	├── Components
   	│	└── genres.tsx
   	└── Routes
            ├── Movies
            |	├── movies.tsx=
            |	└── movie.tsx	
            ├── Tvs
            |	├── tvs.tsx	
            |	└── tv.tsx		
            ├── Header.tsx    
            ├── Home.tsx		
            ├── latest.tsx		
            └── Search.tsx

 원래 styled 요소는 전부 Styles라는 폴더에 따로 저장하였다. 하지만 코드스테이츠 부트캠프를 참여하면서, 이렇게 따로 작성하는 것이 틀릴 수도 있다고 생각하여 다시 각 파일마다 styled를 작성하였다.