Enjoy Programming

앞서 기본 파일들을 만들었고 이제 홈컨테이너를 작성한다. 컴포넌트가 마운트 되면 nowPlaying, upcoming, popualr를 찾고 그게 끝나면 state값을 설정해준다. 에러가 있으면 loading을 false로 변경하게된다. try,catch,finally구문으로 finally에서는 error가 생기든 성공적으로 데이터를 받아오든 loading은 false로 바꿔준다. 그리고 catch에서는 error가 발생시 출력할 문구를 만들어줬고 try구문에서는 moviesApi를 import해주고 moviesApi에 nowplaying을 async await을 활용해 받아오고 콘솔창에 찍어주면 성공적으로 data가 온다. async await을 안쓰면 언제나 그랬듯 promise pending상태가..

이제 할 일은 만들어 놓은 api들의 데이터를 화면에 뿌려줘야 한다. 이번에 접근 방식은 리액트 컴포넌트 코딩패턴인데... container presenter pattern이라고 불린다. 앞서 배운 class컴포넌트와 state방식은 작은 데이터의 경우 잘 되지만 data의 양이 많아지면 힘들다고 한다. 이 방식은 컨테이너는 데이터를 가지고, state를 갖고 api를 불러온다. 모든 로직을 처리후 프레젠터는 데이터들을 보여주는 역할을 한다. 프레젠터는 state도 없고 api에 대해 모르고 클래스도 없는 just function component이다. 프레젠터는 스타일이고 컨테이너는 data! 이제 모든 컨테이너와 프레젠터를 생성하자. 각 라우터에 맞게 먼저 Routes 폴더에 각 라우터명의 폴더를 생..

이미 promise에 대해 포스팅을 한적이 있지만 다시 한번 짚고 넘어가자. promises에 대해 알아보기 전에 먼저 비동기성과 동기성에 대해 생각해보자 & Synchronous 동기식 동기.. 참 어려운 말인듯 하다. 검색을 하다보면 정말 각양각색으로 풀이를 해놨다. 대부분 현재 작업의 요청과 응답이 동시에 발생하는 것이라고 기술하고 있는데 필자가 이해하기에는 동시라고 하기엔 같은 시간에 함께 이루어져야 하므로 혼동이 올 수 밖에 없을 것 같다. 필자가 이해하기에는 현재 요청에 대한 응답이 발생함과 동시에 다음 작업을 요청하는 것? 그렇기에 전 후 순서가 있게 이루어지는 것이 동기식이라 생각된다. & Asynchronous 비동기식 비동기란 다수의 작업이 동시에 일어날 수 있다는 의미이다. 동기와 다..

이번에는 새로 추가된 반복문인 For ...of를 살펴보자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of for...of - JavaScript | MDN for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 developer.mozilla.org mdn - for ...of명령문은 반복가능한(iterable) 객체(array, map, set, string. typedarray, arguments 등등)에 대해서..

자 api를 이용해 데이터를 가져올텐데~~ fetch대신 axios를 사용한다. 앞서 movie-app을 만들때도 사용해봤고~ express로 youtub클론할때도 써본 axios 먼저 fetch를 remind해보자. fetch란 무엇인가 ?~ ajax 방식중의 하나인 fetch fetch는 api를 불러오고, 정보를 내보내 주기도 하는 함수이다. fetch함수에 쓰여지는 method는 get&&post가 있고 설정을 따로 안하면 언제나 그랬듯이 get이 default이다. 또한 fetch는 promise방식이기 때문에 then을 사용해 함수 실행이 끝나고 다음 할일을 정해준다. fetch는 비동기이기 때문에 api를 호출하는 과정이 끝나지 않더라도 다음이 진행이 된다. 그리고 쉽게 생각해 업그레이드된 ..

이제 사이트에 필요한 영화와 tv show 데이터를 어디서 가져오느냐~~ 인데. 니코의 소개로 알게 된 곳인 https://www.themoviedb.org/?language=ko The Movie Database (TMDb) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 무료로 api를 쓸 수 있다. 가입하자~ 가입후 설정페이지에 보면 API가 있는데 API 키를 얻어야 하는데 먼저 api생성해야한다 각종정보를 입력하고 생성하면 버전3 api key가 뜬다 이걸로~~ doc에 가서 https://developers.themoviedb.org/3 API Docs Hosted API d..