Coding Story

Fetching Movies from API Axios 일반적으로 자바스크립트에서 data를 fetch하는 방식은 fetch()를 사용하는 것이지만 여기선 Axios를 사용한다. npm install axios Axios를 설치한다. API 가져오기 https://yts-proxy.now.sh/list_movies.json API를 가져올 YTS라는 사이트는 불법 토렌트 사이트라 도메인을 수시로 바꾸기 때문에 API URL 이 계속 변경된다. 그래서 니콜라스가 깃허브에 올린 YTS 사이트를 추적하는 주소를 사용한다. JSONView 라는 크롬 확장프로그램을 설치해서 보면 보기 좋게 바꿔준다. import React from "react"; import axios from "axios"; class App..

사전 준비 import React from "react"; class App extends React.Component { state = { isLoading: true }; render() { const { isLoading } = this.state; return {isLoading ? "Loading..." : "Ready"} } } export default App; mount(생겨나는 것) 되자마자 isLoading은 기본적으로 true 값을 갖는다. 삼항연산자를 사용해 isLoading이라면 "Loading" 텍스트를, 그렇지 않을 경우에는 "Ready"를 보여준다. 여기서 처음에 render()를 할 때 호출되는 life cycle 메서드는 componentDidMount()이다. impor..

노마드코더 - ReactJS로 영화 웹서비스 만들기 State는 보통 동적 데이터와 함께 작업할 때 만들어진다. import React from "react"; import PropTypes from "prop-types"; class App extends React.Component { state = { count: 0, }; add = () => { this.setState((current) => ({ count: current.count + 1 })); }; minus = () => { this.setState((current) => ({ count: current.count - 1, })); }; render() { return ( The number is: {this.state.count} Ad..

노마드코더 - ReactJS로 영화 웹서비스 만들기 prop-types: 내가 전달받은 props가 내가 원하는 타입의 props인지 확인해줌 터미널에 npm i prop-types 를 쳐 설치한다. 전달받을 prop들의 데이터 타입을 Food.propTypes안에 지정해 놓으면 타입이 다른 경우에 에러가 발생한다.

노마드코더 - ReactJS로 영화 웹서비스 만들기 foodILike라는 배열에 오브젝트들을 넣고, map 함수를 이용해 각각 원소에 접근한다. 컴포넌트를 동적으로 생성해 오브젝트의 name과 image를 Food함수의 인자로 받아 출력한다. function renderFood(dish) { return ; } function App() { return {foodILike.map(renderFood)}; } 이렇게 함수를 만들어 map함수에 넣을 수도 있다. 이 때 콘솔창에는 Each child in a list should have a unique "key" prop. 이러한 에러가 뜬다. 이 말의 뜻은 모든 리액트의 엘리먼트들은 유일해야만 한다는 것이다. 이를 해결하기 위해선 각각의 오브젝트에 구별할..

노마드코더 - ReactJS로 영화 웹서비스 만들기 여기서 는 HTML이 아닌 컴포넌트다. 컴포넌트란 HTML을 반환하는 함수다. 리액트는 컴포넌트와 함께 동작하고 모든것은 컴포넌트이다. 리액트는 컴포넌트를 가져와서 브라우저가 이해할 수 있는 일반 HTML으로 만든다. 자바스크립트안의 HTML을 리액트에선 JSX라고 부른다.(리액트에 특화된 유일한 개념) src폴더 안에 Potato.js 파일을 작성해보자. 리액트 앱은 한번의 하나의 컴포넌트만 렌더링 할 수 있다. 따라서 모든 것은 App안에 들어가야만 한다. App안에 많은 컴포넌트를 넣을 수 있고, 이러한 컴포넌트 안에 더 많은 컴포넌트를 import할 수 있다. App안에 Potato컴포넌트를 넣는다면 정상적으로 Hello와 I love Potat..

노마드코더 - ReactJS로 영화 웹서비스 만들기 리액트 홈페이지 https://reactjs.org/ 필요사항 Node.js / npm Node.js 설치 -> npm 자동 설치됨 설치 확인: node -v / npm -v npx node.js와 npm이 있는것을 확인 한 후 npx 설치하기 npm install npx -g React 앱 생성하기 create-react-app 하나의 명령으로 React Web app을 셋업할 수 있게 해준다. npx create-react-app movie_app_2021 Document안 movie_app_2021의 폴더 안에 생성한다. 완료 된 후, code movie_app_2021 -> 바로 vscode 열기 script부분의 test와 eject를 지워준다..