공부한 내용/React JS (15) 썸네일형 리스트형 [React JS] Building for production (With GITHUB) 드디어 완성이 되었다. 정말 맨 마지막에 컴포넌트를 잘못 다운받아, 오류가 나서 멘붕 터졌지만, node_module 폴더를 삭제후에 yarn add react-lines-ellipsis 이 명령어로 다시 설치했다. 그랬더니, 정상적으로 작동한다~^^ 이제 이것을 깃허브페이지에 올릴 것이다. 깃허브페이지는 static file을 올릴 수 있는 서비스다. static file은 자바스크립트,css,html과 같은 프론트엔드 파일을 뜻한다. 아쉽게도 백엔드는 안된다. 깃허브 페이지는 이런 static file을 공짜로 호스팅할 수 있게 해준다. 이걸 사용하려면, 첫째 깃허브 계정이 필요하고, 두번째 깃허브 프로젝트가 필요하며, 세번째 깃허브 프로젝트의 브랜치를 만들어야한다. 그 이름은 gh-pages 여야 .. [React JS] Updating Component 우리가 만들 것을 이미지로 살펴보면,(이 자료는 노마드코더 동영상에서 캡쳐하여 가져온 것입니다) 이런 형식이다. 데이터를 가져올 것을 살펴보자. 일단 콘솔 로그를 확인하여 보자. _renderMovies = () => { const movies = this.state.movies.map((movie) => { console.log(movie) return }) return movies } 이 콘솔을 살펴보면, 결론적으로 포스터,제목,장르,설명까지 갖고 있다. 이제 업데이트를 해보자. 제목의 경우 'title-english'를, 포스터는 'small-cover-image'를 입력하고, 장르는 'genres'를, synopsis를 추가입력한다. 그리고 이제 우리의 props를 업데이트하면 된다. 우리의 mo.. [React JS] Await Async in React 지난 시간에 작성한 코드▼ Await,Async는 지난 시간에 작성한 코드들을 좀 더 분명하게 작성해주는 도구이다. 우리가 영화들을 state에 올리려면, 아래와 같은 작업을 해야한다. 애플리케이션이 크면, then 안에 then으로 이어지면서 세련되지 않는다. .then이 많아지면서 CALLBACK HELL 이 되버린다. 즉 then,then,then.. 많아져서 길을 잃어버리는 것이다. 그래서 여기서 sync,await 이라는 것을 쓸것이다. 이 강좌에서는 어떻게 쓰는지만 알려줄 것이다. 이것 대신에 새로운 function을 만들거다.(getMovies) 그리고 새로운 function을 쓸꺼다.(call api) 그리고 기존에 componentDIdMount 에서 사용된 코드들을 복사해서 _calla.. [React JS] Promises promise는 새로운 자바스크립트 컨셉이다. 이게 쿨한 이유는 asynchronous programming 때문이다. synchronous가 뭐냐면, 예를 들자면, componentDidMount(){ console.log(fetch('https://yts.ag/api/v2/list_movies.json?sort_by=rating')) console.log('hello') } 라고 실행을 하면, 첫번째 줄이 먼저 실행이 되어야만 두번째 줄이 실행이 된다는 것이다. 이걸 synchronous(동기)라고 한다. 이 기능은 좋을 때도 있지만, 별로일때도 있다. 왜냐하면, 예를 들면 내가 영화를 불러오고 싶고, 동시에 set state,call component,..등등을 하고 싶을 때 이 모든 작업을 할 수.. [React JS]Ajax in React Ajax는 Asynchronous JavaScript and XM의 약자이다. 요즘은 XML 별로 신경안쓰고, 우리가 신경쓰는 포멧은 JSON이다. JSON은 JavaScript Object Notation의 약자이다. 오브젝트를 자바스크립트로 작성하는 기법이다. 에이작스를 리액트에 적용하는건 간단하다. fetch를 이용하면 아주 간단함 자! 그러면 fetch request를 만들어보자. 우리가 만든 fetch request는 url로 갈꺼다. 우리는 FETCH를 이용해서 url에서 뭔가를 GET하는 방법을 배울 것이다. https://yts.ag/api/v2/list_movies.json 이걸 리액트에서 불러올 것이다. 그러기 전에, 해당 api의 문서를 살펴보면 평점순으로 불러오기 sort_by=ra.. [React JS]똑똑한 컴포넌트와 멍청한 컴포넌트 모든 컴포넌트가 state가 있는 것은 아니다. 어떤 컴포넌트는 state이 없는 stateless functional 컴포넌트다. 이 두개의 컴포넌트는 큰 차이점이 있다. 한개는 state이 있고, 나머지 한개는 state이 없고, 필요하지도 않는다. 이걸 dumb(멍청한) 컴포넌트 그리고 smart(똑똑한) 컴포넌트라고 해. 그들이 갖고 있는 것은 props 뿐이다. state이 없고 props밖에 없을때는 클래스 컴포넌트를 쓰는 대신에 예를 들어보자 위 코드를 아래와 같이 바꿔보았다. 1개의 props만 있고, 1개의 html 태그만 필요하다({poster}를 뜻함) 이렇게 functional 컴포넌트를 만드는 것이다. 기억해야할 규칙은 이들은 state가 없고, function render 없고,.. [React JS] Loading states Loading states란? 너가 필요한 데이터가 항상 바로 즉시 존재하지 않을 것이다. 데이터 없이 컴포넌트가 로딩을 하고, 데이터를 위해 api를 불러서, api가 데이터를 주면, 너의 컴포넌트 state를 업데이트한다. api콜을 타임아웃 기능으로 유사하게 구현해보자 일단 소스를 전반적으로 바꾸었다. state 부분을 빈공간으로 만들고 기존에 있는 데이터를 did mount에 옮기고 새로운 function을 만들어줬다. 현재 작업한 것이 무엇이냐면movies라는 variable에 데이터를 저장했다.그래서 데이터가 없을 떄 '로딩'을 띄우고,있으면 영화정보가 보이도록 하였다 그리고 우리는 데이터가 있는지 물어본다 데이터가 있으면, render movies! 만약 데이터가 없으면 '로딩 중'이라고 출.. [React JS] state 연습하기 일단 컴포넌트 외부에 있는 무비리스트를 state 안으로 옮겨보자.! 기존에 있는 const movies를 state 안으로 옮길 것이다. 이 코드를 복사한 후 삭제한다. 그리고 이 코드를 state 안으로 넣어주며, 약간 코드를 수정을 한다. state 코드에 맞게 요런 형식으로 바꿔준다. (이때 greeting : "Hello" , 콤마를 꼭 찍어줘라, 스크린샷은 안찍혀있다. 꼭 찍어줘야 한다. ) 이렇게 바꾸면 아마 터미널에서 movies를 찾을 수 없다고 뜰것이다. 그러므로, 기존의 {movies.map((movie, index) => { return })} 이 코드를 요렇게 바꿔준다. {this.state.movies.map((movie, index) => { return })} 이전 시간에 배.. 이전 1 2 다음
