Front-end/React.js

4. Making the Movie App - 웹 서비스 만들기 | 노마드코더

AGAL 2020. 3. 14. 17:29
반응형

[출처 : https://academy.nomadcoders.co]

0. Fetching Movies from API

> npm i axios  axios 설치   

 *aixos : node.js와 브라우저를 위한 http통신 javascript 라이브러리

 *javascript에서 data를 fetch 하는 방법 중 하나인 fetch() 달리 크로스 브라우징에 최적화

 

※ JSONView (크롬 확장 프로그램)

getMovies = async () => {
  // axios.get(url[, config]) : url[, config]로 부터 데이터(값)을 가져온다(불러온다)
  const moives = await axios.get("https://yts-proxy.now.sh/list_movies.json")
  console.log(movies)
};

※ async & await

 - 비동기 처리를 동기식으로 처리하는 기법

 - function 키워드 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여준다

 *주의할 점, await 뒷부분이 반드시 promise 를 반환해야 한다는 것과 async function 자체도 promise 를 반환한다

1. Rendering the Movies

# ES6 객체 디스트럭처링을 활용

: 객체의 각 프로퍼티를 객체로부터 추출하여 변수 리스트에 할당한다. 할당 기준은 프로퍼티 이름(키)이다.

const {data:{data:{moives}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json")
console.log(moives)
 

// ES5의 경우 (위 코드와 동일하게 작동)
const moives = await axios.get("https://yts-proxy.now.sh/list_movies.json")
console.log(movies.data.data.moives)

# ES6 프로퍼티 축약 표현 사용

: 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 이름을 생략할 수 있다. 프로퍼티 이름은 변수의 이름으로 자동 생성

state = {
  isLoading : true,
  movies: []
}

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

// ES5의 경우
  this.setState({movies:movies})

2. Styling the Movies

※ style components 강의

3. Adding Genres

# PropTypes에서 Array를 isRequired 하는 코드

genre : PropTypes.arrayOf(PropTypes.string).isRequired 

 

※ JSX 문법

JSX는 HTML보다는 자바스크립트에 가깝기 때문에, React DOM은 HTML 속성 이름 대신 camelCase 속성 이름 컨벤션을 사용

 *ex) class ⇒ className, tabindex ⇒ tabIndex, for ⇒ htmlFor

반응형