6.0 Getting Ready for the Router 이전에 만든 사이트를 좀 더 interactive하게 해보자. react-router-dom npm install react-router-dom components, routes 폴더 js와 css를 옮긴다. 기존 App.js의 내용을 Home.js로 옮긴다. (App -> Home 수정 필요) About.js는 아직 작성 안 된 상태 6.1 Building the Router App.js에서 Router 만들기 Router는 url을 가져다가 보고 우리가 라우터에게 명령한 것에 따라 component(page)를 불러온다. import React from "react"; import { HashRouter, Route } from "react-..

5.0 Deploying to Github Pages gh-pages 설치 github page에 페이지를 올리기 위해 npm i gh-pages packages.json homepage 주소를 추가 주소는 모두 소문자여야 한다. 띄어쓰기 X npm run build 실행 - deploy할 폴더를 얻는다. 좌측 탐색기에 build 폴더가 생성됨 -> deploy할 폴더! scripts 추가 Directory build를 deploy 추가 predeploy 추가 : 매 순간 우리가 deploy를 호출할 때마다, npm은 predeploy를 호출한다. predeploy는 npm run build를 한다. build는 build script를 호출하고, 그 script는 folder를 줄 것이다. 완료되면, ..

4.0 Fetching Movies from API fetch axios : fetch위에 있는 작은 layer axios 설치 npm i axios 더보기 사용할 API : YTS-proxy API (by nomad coder) yts.mx/api/v2/list_movies.json JsonView - json파일을 예쁘게 보여주는 크롬 확장프로그램 : https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related axios로 가져온 data를 변수에 저장 axios가 우리에게 data를 주지만, 우리는 그 데이터를 잡아야 한다. 그래야 state에 사용 가능. componentDidMount(){ c..

3.0 Class Components and State State 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 변하는 데이터, 조재하지 않는 데이터 생겨나고선 사라지고 변경되는 데이터, 하나에서 2개 또는 0이 되는 그런 종류의 데이터들 -> state가 필요하다. function component VS class component function component : function/ 무언가 return/ screen에 표시O class component : class/ react component로부터 확장/ screen에 표시O - render method 내부에 넣어야만 ㅎ나다. 📌 react는 자동적으로 모든 class component의 render method를 실행한다. - cl..

2.0 Creating your first React Component Component : HTML을 반환하는 함수이다. ex) react는 component를 사용하여 HTML처럼 작성하려는 경우에 필요하다. javascript와 HTML 사이의 이러한 조합을 JSX라고 한다. 새로운 component Potato를 만들어보자 index.js에서 한 번에 둘 이상의 component를 rendering하려하면, 오류가 발생한다. ⛔ react application은 하나의 component만을 rendering해야 한다. -> 올바르게 사용한 예시 react는 Component를 가져와 Browser가 이해할 수 있는 평범한 일반 HTML로 만든다. 📌 react application은 하나의 com..

💡 #0 Introduction에 Requirements가 포함되어 있으니 꼭 읽고 넘어오세요. 1.0 Creating your first React App npx create-react-app movie_app_2020 VSCode로 해당 폴더를 Open한다. code movei_app_2020 package.json scripts 원래는 test, eject도 있지만 remove 나머지 config들은 신경 안 써도 된다. 파일들 중 yarn.lock은 default로 생성된다. 노마드코더에서는 필요없기 때문에 Delete yarn은 npm과 같은 역할을 한다. VSCode의 terminal에서 npm start를 입력한다. (본인 기준 시간이 좀 걸렸음) server starting 메시지가 뜨고 ..