Sumin's Blog

6.0 Getting Ready for the Router react-router dom : 네비게이션을 만들어주는 패키지 npm install react-router-dom -components 폴더에 , 넣기 routes 폴더에 ,, 넣기 코드 로 옮기기 import React from 'react'; function App(){ return something; } export default App; something이라는 문자만 나옴 react-router dom을 통해 와 에 접근하는 방법 알아야함

6.1 Building the Router 라우터 : url을 확인하고 우리가 라우터에게 무엇을 명령했느냐에 따라 알맞은 component를 불러옴 import { HashRouter,Route} from "react-router-dom"; 추가 import { HashRouter,Route} from "react-router-dom"; import Home from "./routes/Home"; import About from "./routes/About"; function App(){ return ; } HashRouter 먼저 만들고 Route 넣어줌 Route에는 스크린을 넣어주는 것 , 원하는만큼 path를 만들 수 있음 기본 url 들어오면 Home component 보여줌 path about..

5.0 Deploying to Github Pages gh-pages 설치 npm i gh-pages 웹사이트를 guthub의 github page 도메인에 나타나게 해줌 에서 home page 추가 "homepage":"https://suminRoh.github.io/movie_app_2021/"} scripts에 deploy 추가 "deploy":"gh-pages " 명령어 만들기 deploy : build 폴더를 upload predeploy: npm run build 에서 title 바꾸기 -Movie App https://suminroh.github.io/movie_app_2021/ 링크로 내가 만든 Movie app 사이트 접속 가능 !! 5.1 Are we done? state를 갖기 위해 ..

4.4 Styles Timelapse * { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: #eff3f7; height: 100%; } html, body, #potato, .container { height: 100%; display: flex; justify-content: center; } .loader { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-weight:300; } .movies { display: flex; justify-content: space-between; align-item..

4.3 Adding Genres genres를 props에 포함시키기 에서 할 일 Movie.propTypes에 genres:PropTypes.arrayOf(PropTypes.string).isRequired}; 포함시키기 function Movie 인자로 genres 포함시키기 에서 할 일 value 설정 -> genres={movie.genres} HTML에서는 태그 내 class는 class로 사용해도 되지만 Javascript는 component class와 혼란스러워해서 태그 내 class는 className으로 사용 genres 디자인하기 {genres.map(genre=>( {genre} ))} Warning: Each child in a list should have a unique "ke..

4.2 Styling the Movies function Movie({year,title,summary,poster}){ return ( {title} {year} {summary} ); } -> function Movie를 통해 style 만들기 style component style={{ }} javascript 위의 CSS

4.1 Rendering the Movies const movies= await axios.get("https://ytsproxy.now.sh/list_movies.json"); console.log(movies); console.log(movies) 결과 , console에서 movies가 data-> data ->movies에 있는 것 알 수 있음 console.log(movies.data.data.movies); movies에 바로 접근 가능 || const { data:{ data:{movies} } }= await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); } movies에 바로 접근 가능 axios에..

4.0 Fetching Movies from API Axios fetch위에 있는 작은 layer 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 axios.get() axios로부터 온 data를 잡아야함 axios는 느려서 javasscript에게 componentDidMount함수가 끝날떄까지 기다려야한다고 전해야함 asyncasync componentDidMount(){ const movies= axios.get("https://yts-proxy.now.sh/list_movies.json"); } function 따로 만들고 async await 이용getMovies=async()=>{ //async: 함수가 비동기라는 것 const movies= ..

3.3 Planning the Movie Component class App extends React.Component{ state={ //지금의 isLoading 상태는 true isLoading:true }; componentDidMount(){ //component가 생성되면 호출 함수 setTimeout(() => {// delay function (6초 후 실행) this.setState({isLoading : false}); },6000); } render(){ const{isLoading}=this.state; //isLoading앞에 this.state 매번 붙일 필요 없어짐 return {isLoading ? "Loading...":"We are ready"}; // isLoading==..

#3.0 Class Components and State state 는 보통 우리가 동적데이터와 함께 작업할 떄 만들어짐 class component와 function component 차이 function component function이고 뭔가를 return 하고 screen에 표시 class component class이지만 react component로부터 확장되고 screen에 표시되며 render method안에 넣어야함 react는 자동적으로 모든 class component의 render method를 실행하고자 함 state를 가지고 있음 state object component의 data를 넣을 공간이 있고 그 data는 변함 (state를 사용하는 이유) class App exten..