먼저 저자가 만들어놓은 index 페이지를 아래의 기텁주소를 따라 변경하여보자. https://github.com/nomadcoders/react-for-beginners/commit/58aca2193a50ff21663ed4fb06b0785a8480c05e 6.8 Styles · nomadcoders/react-for-beginners@58aca21 Show file tree Showing 8 changed files with 408 additions and 17 deletions. github.com 그리고 flexbox와 grid가 어렵다면 아래의 링크를 통해 한번 공부해보길 바란다 https://www.youtube.com/watch?v=eprXmC_j9A4 https://studiomeal.com..

자 오늘은 github page에 deploy를 해보자. 먼저 gh-pages라는 툴을 설치해보자. npm i gh-pages gh-pages는 github에 결과물을 업로드 할 수 있게 해주는 페키지이다. html, css, javascript를 웹사이트로 만들어서 전 세계에 도메인도 가지고 무료로 배포를 해준다. 가장 먼저 package.json에 있는 scripts를 확인해보자. build라는 script가 있다. 이를 실행하면 웹사이트의 production ready code를 생성하게 된다, production ready는 코드가 압축되고 모든게 최적화 된다는 의미다. 아래와 같이 build(압축, 최적화)를 실행시키면 npm run build 아래와 같이 build폴더가 생성된다. 그리고, c..

React Router는 다이나믹(동적) url을 지원해주기도한다. 다이나믹 - url에 변수를 넣을 수 있다는 의미 다음과 같이 id를 입력해서 detail페이지로 넘어갈 수 있게! 이는 유저를 /movie/변수 의 경로로 보내기 위해 이렇게 설정한다. ":"를 쓰는것이 아주 중요하다! "/:id"를 꼭 써라! 자 그럼 prop으로 id를 받을 수 있도록 해보겠다! Home.js Movie.js 컴포넌트를 렌더링한다는것은 실질적으로는 함수를 불러오는 것인데 그래서 다음과 같이 object를 전부 넘겨주는것이다. props는 object일 뿐이고, 우리는 그것을 열어서 item을 꺼내쓰는것이다. 그래서 url을 더 좋게 만들 수 있다. localhost로 이동하여 각 영화를 클릭하게 되면, url에 클릭..

이번에는 react-router-dom 사용법에 대해서 배울것이다. 먼저 아래의 명령어를 통해 설치해보자 npm i react-router-dom@5.3.0 먼저 다음과 같이 import하고 Router로 감싸고 Switch를 사용해보자. Switch는 Route를 찾는 것인데 Route는 localhost:3000/뒤에있는 /movies/123 같은 것이다. (이것은 한번에 하나의 Route만 렌더링하기 위해서 사용한다!) - (React Router에서는 원하면 두개의 Route를 한번에 렌더링할 수 있기 때문) 그리고 Route를 찾으면 컴포넌트를 렌더링한다. 그렇게 Home을 렌더링하된다. Detail페이지도 추가해주면 Browser Router랑 다른 하나의 차이점은 url의 생김새에 있다. B..

자 그럼 페이지 전환하는 방법을 배워보자. 먼저 컴포넌트를 사용해 코드를 좀 정리하자~! Movie.js 컴포넌트를 만들고, 각 항목들은 prop으로 받아보자~! 자 그럼 App.js로 와서 movie를 렌더하자 우선 prop 이름은 변경되어도 되니 아래와 같이 바꿔주자. 잘 출력이 되지만 계속 경고가나는데 img에는 alt처리를 해주면된다~! 그리고 다음의 에러는 다음과 같이 key를 주면된다. App.js import { useEffect, useState } from "react"; import Movie from "./Movie"; function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = us..

이제 영화 프로젝트를 진행해보자~! 먼저 영화들을 다 보여주자! 먼저 아래 사이트에 접속하여 API를 가져오자. https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year https://yts.mx/api API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx 그럼 로딩을 만들어주고, API 값에 대해 fetch로 받아오면 아래와같이 Console에 찍히는 것을 확인할 수 있다. 그럼 이 movies를 출력해보자 그럼 다음과 같이 출력된다. ..