[React] Movie App 만들기 (개인 프로젝트) - 1

John Ahn님의 인프런 강의를 따라가면서 진행중입니다.
개인 공부 용도로 기록합니다. 문제 시 삭제

 

1. Mongodb

몽고디비 가입 후 클러스터 0 디비 생성까지 해놨다.

나중에 로그인 기능을 위해 가입해놓는듯.

 

Wow ! Cluster 0 is free. thank you

 

2. Movie API

 

https://www.themoviedb.org/

The Movie Database (TMDB)

이 사이트에서 영화 api를 제공해준다고 합니다. (일단 순위가 한국 기준은 아닌듯..? 아님말고)

가입 후 api를 받음.

 

api 문서

친절하게 API 문서도 다 있네요.

아쉽게도 현재까지는 영어만 지원한다고 합니다

 

 

3. 진행 사항 (현 포스팅 기준)

 

무비앱 템플릿 만들기,

movie api 가져오기,

최신영화 1위를 보여주는 MainImage 컴포넌트 만들기.

 

강의 스크린샷

 

4. 기억할 내용

 

1) 일단 API 문서에서 필요한 걸 긁어온 뒤, 공통되는 부분은 const 변수로 만들기

like this

2) fetch

 

 

리액트에서 API를 사용하는 방법은 크게 두 가지이다.

    - Axios(Promise 기반 HTTP 클라이언트)

    - Fetch API(자바스크립트 내장 Web API)

 

fetch는 아래와 같이 사용한다.

fetch(myRequest)
	.then(response => response.json())
    .then(response => {
    	// data 응답 이후 실행할 코드
    });

 

 

3) props

함수 호출 후 오른쪽 MainImage(props) 함수로 props.~~ 인자들을 넘기면 됨

컴포넌트끼리 값을 전달할 수 있는데 여러 값을 한번에 전달하여 간편하게 사용할 수 있는 듯 하다.

 

 

 

5. 결과물

 

순위가 1위인 영화의 image, title, 내용 설명이 사이트 메인으로 뜬다.