[영화 앱] 새 프로젝트 , 초기 설정 및 부트스트랩 적용

 

 

https://www.omdbapi.com/

OMDb API - The Open Movie Database

 

위의 주소로 영화 정보를 API로 받아온다

 

free로 함

 

 

이메일로 키를 보내줌

 

 

포스트맨으로 테스트해봄 

 

 

 

 

 

 

---

 

새 프로젝트 생성

 

 

 

 

 

실행하기 

 

 

 

파일 정리하기

 

 

 

 

 

 

---

 

App.js에서 

useState를 사용해서  포스트맨에서 가져온 영화 초기값을 가져온다.

한 3개정도 

 

 

 

 

 

 

 

components 폴더 생성 후 MovieList.jsx 생성

 

컴포넌트를 사용할 수 있도록 rafc로 함수형 컴포넌트로 설정한다

 

 

영화정보를 props로 내려주면 movieList에서 그 정보를 가져와서

 

 

 

 

 

map. 반복문임

foreach와 틀린점이 

리턴을 시켜준다는 점임

 

 

---

부트스트랩 설치

 

 

부트스트랩 디펜더시 추가 

 

 

 

 

 

app.js에 import해줌

 

주소는 여기 안에 위치함

 

 

App.css추가

body {
  background: #141414;
  color: white;
}

.movie-app > .row {
  overflow-x: auto;
  flex-wrap: nowrap;
}

.movie-app > .row > div {
  width: fit-content;
}

 

 

 

 

App.js에 부트스트랩 추가

 

MovieList에도 부트스트랩 추가