니꼬의 뽀나스 강의 조금 심심한 페이지를 react를 이용하여 좀 더 꾸며보자. navigation바를 만들기위해 react-router-dom 을 이용하자. npm install react-router-dom 파일들을 위 사진처럼 정리하자. App.js에 있는 내용들을 모두 Home.js로 옮기고 App.css를 Home.css로 변경 경로를 위와 같이 변경 후 아래를 작성하자. App.js import React from "react"; import { HashRouter, Route } from "react-router-dom"; import About from "./routes/About"; function App() { return ( ); } export default App; path라면 A..

Styling the Movies App.js와 Movies.js를 좀 html스럽게 수정해보자. App.js import React from "react"; import axios from "axios"; import Movie from "./Movies"; class App extends React.Component { state = { isLoading: true, movies: [], }; getMovies = async () => { const { data: { data: { movies }, }, } = await axios.get("https://yts-proxy.now.sh/list_movies.json"); this.setState({ isLoading: false, movies }); ..

Fetching Movies from API 일반적으로 javascript에서 data를 가져올때 fetch를 사용한다. 하지만 여기서는 fetch가 아닌 Axios를 이용할 것이다. npm install axios 를 이용하여, axios를 설치하자. API는 YTS의 API를 이용할 건데 이곳은 토렌트 사이트이다. 그래서 재공하는 API가 매번 변하는데, 이를 해결하기 위해 니꼬가 만든 yts proxy라는걸 만들었는데 이를 이용할 것이다. YTS API API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts...

우선 npx를 이용하여 react app을 만들어보자. app을 만들 디렉토리로 이동하고 아래를 입력하자. https://github.com/facebook/create-react-app facebook/create-react-app Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub. github.com npx create-react-app movie_app_2020 package.json 파일을 열어보면 Debug 부분의 test와 eject를 지워주자. (나중에는 사용할지 몰라도, 지금은 사용하지 않는다) app을 ..