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 메시지가 뜨고 ..

노마드코더 영상을 보면서 React를 공부해보자!nomadcoders.co/react-fundamentals ReactJS로 영화 웹 서비스 만들기 - 노마드 코더 Nomad CodersReact Fundamentalsnomadcoders.co Requirements1. Node.js2. npm3. npx4. git CMD에서..Node.js + npm설치node -vnpm -v(node.js 는 npm이랑 같이 옴 -> 따로 설치 안 해도 됨) npx 설치(npm instal npx -g)npx -v  git --version없으면 설치 VSCode 설치(다른 코드 에디터도 가능)  HTML, CSS, Jnode.js, package.json 도 알면 좋지만 몰라도 강의에서 설명해줌Why React?거..