17. 간단한 영화 웹 서비스 만들기 12

promise는 새로운 자바스크립트 컨셉입니다.

promise가 좋은 이유는 asynchronous programming 때문입니다.

asynchronouse에 대한 예를 들어보겠습니다.

아래에 라인이 두개가 있습니다.

componentDidMount() {

console.log(fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count')

console.log('hello')

}

두번째 라인 hello 는 첫번째 라인 fetch가 끝나지 않으면 실행되지 않습니다.

이런 방식을 synchronous(동기)라고 합니다.

좋을 때도 있지만 좋지 않을 때도 있습니다.

왜냐하면 예를 들어서 내가 영화를 불러오고 싶고, 동시에 set state, call, component 등등을 하고 싶습니다.

하지만 이 모든 작업을 할 수 없습니다. 왜나하면 첫번째 라인 작업이 끝날때까지 기다려야 하기 때문입니다.

여러분이 두 개의 db를 불러온다고 생각보세요. 한 개는 영화, 나머지 한 개는 애니메이션입니다.

 synchronous(동기) 방식일 경우 영화 API작업이 끝나야 애니메이션 API를 불러올 수 있다는 것입니다.

이 방식이 안 좋은 이유는 만약 영화서버가 느리다면 애니메이션은 계속 기다려야 합니다.

이런 방식을 해결하기 위해서 promise를 사용합니다.

promise는 asynchronous 입니다. 첫번째 라인이 다 끝나지 않아도 두번째 라인이 작업을 할 수 있다는 뜻입니다.

이 방식이 좋은 이유는 계속 다른 작업을 스케쥴 해 놓을수 있기 때문입니다. 

또 다른 promise의 기능은 시나리오를 잡는 방법을 만들어 줍니다. 

좋은 시나리오 혹은 나쁜 시나리오 ,

두 가지 시나리오가 있고 이를 관리하는 것입니다. 

fetch , promise가 좋은 이유는 시나리오가 생기고 이를 관리할 수 있기 때문입니다.

 그럼 promise를 적용해 보겠습니다.

조금 어려우실 수도 있는데 일단 코드를 보시면 이해가 되실 겁니다.

componentDidMount() {

fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count')

.then()

.catch(err => console.log(err))

}

위의 fetch라인이 완료되면, 뭔가를 하라는 것입니다. 

그런데 위의 라인이 에러가 있으면 잡아서(catch) 알려달라는 것입니다.

then function은 1개의 attribute만 줍니다. 

아래와 같이 코딩을 한 후에 console 을 확인해보겠습니다.

componentDidMount() {

fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count')

.then(response => console.log(response))

.catch(err => console.log(err))

}

headers가 있고 ok:true, request가 성공적이었다는 뜻입니다.

그리고 redirected되지 않았고 status 200, '200'의 뜻은 ok라는 뜻입니다.

텍스트는 없고, 그리고 url을 확인합니다.

즉 , 여러분이 이 url을 불렀고 성공적이었으며, 다 좋다는 뜻입니다.

componentDidMount() {

fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count')

.then(response => response.json())

.then(json => console.log(json))

.catch(err => console.log(err))

}

위와 같이 json 방식으로 바꾸고 다시 console 창을 확인해보겠습니다.

위와 같이 메세지가 확인 되었습니다.

화살표를 누르면 조금 더 자세한 아래 화면을 확인하실 수 있습니다.

데이터를 확인해보겠습니다. 6678개의 영화, 20줄, 그리고 영화를 다 보실 수 있습니다.

영화id, code, title등이 다 확인됩니다. 

response로 체크하고, json으로 변환하고 console로 확인된 것입니다.

이번시간은 여기까지입니다. 고맙습니다.