[React] Making the Movie App

#12 Making the Movie App / #13 Conclusions

 

• Axios

fetch 위에 있는 작은 layer

HTTP 요청을 간편하게 할 수 있게 도와주는 라이브러리

 

axios 설치

npm install axios

 

 

  getMovies = async () => {
    const movies = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json");
  }

➣ async

함수 앞에 붙여서 해당 함수가 *Promise 반환하도록 만든다

*Promise: 비동기 작업의 완료 or 실패 나타내는 객체

 

➣ axios.get

URL 데이터 가져오고 변수에 저장

 

➣ await

비동기 함수 내에서 Promise가 해결될 때까지 기다리게 한다

async 함수 내에서만 사용 가능!

(axios.get 완료되기까지 시간이 필요하기 때문에 사용)

 

es6 

ECMA script의 새로운 버전, 개발자들이 더 효과적으로 코드 작성할 수 있도록 돕는 것

 

<es6 사용 전>

getMovies = async () => {
    const movies = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json");
    console.log(movies.data.data.movies);
  };

 

<es6 사용 후>

  getMovies = async () => {
    const {data:{data:{movies}}} = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json");
    console.log(movies);
  };

 

 

 

• Deploying to Github Pages

 

1. package.json 마지막 중괄호 전에 추가

 "homepage": "https://hyeeeeon.github.io/movie-app-2024/"

 

2. package.json "scripts"에 추가

"deploy": "gh-pages -d build",
"predeploy": "npm run build"

 

3. Terminal에서 npm run build

4. Terminal에서 npm run deploy

 

---

Loading 페이지

 

 

Movie App 실행 페이지

 

 

이승현 Movie App 2024