Stack & Tool/React6 react.js로 영화 웹 서비스 만들기 -5 [ fetch 사용하기 ] fetch대신 axios를 사용할 것인데 npm i axios로 다운받아야 된다. 다음 yts.am 에서 api를 받아볼 것이다. 근데 주소가 자주 바뀌기 때문에 학습자들을 위해서 api주소를 따로 떼주셨다. https://yts-proxy.now.sh/list\_movies.json 비동기를 사용해서 처리한다. 비동기를 사용하는 이유는 간단하게 서버가 동시에 여러작업이 가능하게 하려는 이유. 혹은 사용자들 기준에서봤을 때 한 사용자가 요청하면 다른 사용자들은 기다려야 되는데 동시 다발적으로 조회가 가능하게 하는 등 여러 유용한 점이 있다. https://okky.kr/article/866436 비동기를 사용하려면 해당 함수에 async를 반드시 넣어줘야 한다. 그래야 await를 사용해서 비동기를 가능.. 2021. 7. 5. react.js로 영화 웹 서비스 만들기 -4 [동적data를 위한 class컴포넌트, state사용] 이제 api는 지우고 동적으로 data를 변화시켜본다. react에서 동적으로 data를 다루기 위해서는 먼저 function 컴포넌트가 아니라 class 컴포넌트를 사용한다. 그리고 state안에 변화시킬 값을 넣고 setState를 사용하면 react는 setState 부분이 작동할 때마다 render 함수 부분을 refresh 해준다. 하나의 공식이라고 생각하자. this.setState({count : this.state.count += 1}) 이렇게 매번 this.state를 호출하는 것은 성능에 좋지 않다. react는 이것에 대한 훌륭한 해결책을 제공해주는데 this.setState(current => {(count : current.count += 1 )} 이렇게 가능하다. 외우자. 유의해.. 2021. 7. 4. react.js로 영화 웹 서비스 만들기 -3 [prop.types로 검사하기] 복습도 할 겸 전체 다 코드로 쳐보자. import React from 'react'; import PropTypes from "prop-types"; const foodApi = [ { index :1, name : "kimchi", link : "http://image.dongascience.com/Photo/2016/11/14787526584108[1].jpg" }, { index : 2, name : "kkakdugi", link : "https://shop.hansalim.or.kr/im/is/activeDesigner/100101004_content1.jpg" } ] function Food({name, image}) { return ( {name} ) } // Food 컴포넌트.. 2021. 7. 3. JSX, Component 에 대한 이해 https://ko.reactjs.org/docs/introducing-jsx.html 해당 링크로 접속해서 아래 3개의 목차에 대해서 한번씩 읽었다. 무슨느낌인지 이해하는데 약간 더 도움을 준 듯 하나 공식문서 말고 사람들이 받아드리고 좀 더 쉽게 설명한 것 이 있는지 찾아본다. JSX 소개 Element 랜더링 Component와 Props [https://ssungkang.tistory.com/entry/React-JSX-%EC%99%80-Component] 여기서 이해를 조금 더 한 것 같다. 한마디로 JSX는 react를 하면서 추가된 새로운 문법이라고 이해하면 된다. Component는 UI를 독립적이고 재사용가능하게 해주는 역할을 한다. 2021. 7. 2. react.js로 영화 웹 서비스 만들기 -2 [컴포넌트 만들기~] 컴포넌트 만들기 potato.js 파일을 만들고 내부에 아래와 같이 소스를 작성한다. import React from 'react'; // 최신 버전 리액트에서는 사용하지 않아도 되는 듯 하나 구 버전에서는 이렇게 작동했으므로 일단 쓴다. function Potato() { // 대문자로 Potato를 써줬다. return ( // return 으로 시작하는 것 기억하자. this is new component ) } export default Potato; // 컴포넌트를 선언해줬으면 밖에서 사용할 수 있게 해야한다. 혹은 potato.js 파일을 따로 만들지 않고 이렇게 할수도 있다. 즉, 컴포넌트를 한 파일안에 두개를 만든 것이다. 이렇게 하면 index.js에서 만 해도 두가지 컴포넌트를 불러오는.. 2021. 7. 2. react.js로 영화 웹 서비스 만들기 -1 1. node.js를 설치한다. (확인하는 방법은 터미널에서 node -v) 2. node.js를 설치하면 자동으로 npm이 깔려있을 것이다. (확인하는 방법은 터미널에서 npm -v) 3. npx를 설치한다. (npm install npx -g)만약 여기서 오류가 난다면 sudo rm -r /usr/local/bin/npx를 해서 지워주고 다시 sudo npm install npx -g로 설치해준다. 4. git을 설치한다. (설치되어있는지 확인하기 위해서 터미널에서 git --version) 5. react 설치한다. 공부하기 위해 이것저것 함축해놓은 것을 다운받는다. webpack, babel 등을 포함 (npx create-react-app)여기서 오류가 나서 많이 고생했다.. 마지막에 이 블로그.. 2021. 7. 1. 이전 1 다음
