Sumin's Blog

6.4 Redirecting function Detail({location}){ console.log(location); return Hello ; } 문제 location의 props들이 console에 나타나지만 poster를 눌러서 movie-detail에 들어간 경로가 아닌 url에 /movie-detail이라고 쳐서 들어간 경우, state가 undefined라고 뜸 해결 방법 import React from 'react'; class Detail extends React.Component{ componentDidMount(){ const{location,history}=this.props; if(location.state===undefined){ history.push("/");..

6.3 Sharing Props Between Routes route props function About(props){ console.log(props); } About console에서 4개의 props를 볼 수 있음 (history, location, match, staticContext) 아직 about으로 전송되지 않은 react-router에 의해서 넣어진 props들 Route에 있는 모든 router들은 props를 가짐 function Movie({year,title,summary,poster,genres}){ return ( {% raw %}{% endraw %} {title} {year} {genres.map((genre,index)=>( {genre} ))} {summary.slic..

6.2 Building the Navigation 목표 : 네비게이션 (버튼) 만들기 할 일 import Navigation from "./components/Navigation"; 추가 function App 안에 추가 import React from "react"; function Navigation(){ return Home About } // href는 HTML로 페이지를 새로고침시킴 // Home 과 About을 눌러보면 페이지가 새로고침됨 // 리액트가 죽고 새 페이지가 새로고침 export default Navigation; link를 사용해야함 페이지 새로고침 대신 About과 Home페이지 들어가짐 Link를 사용할 경우, Link는 라우터 안에 있어야함 import React from ..

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에..