공부기록용

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co gh-pages설치_결과물을 github pages에 업로드 할 수 있게 해주는 패키지 gh-pages설치 # yarn 설치 yarn add gh-pages​ # or npm 설치 npm install gh-pages 터미널 창에 yarn build 혹은 npm build 입력 > 압축된거얌! package.json 파일에서 제일 하단에 다음과 같이 적어주고, }, "homepage": "http://miinxxi.github.io/nomard_movieAppPratice" } http:/..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 받아온 url의 data대로 title를 클릭하면 알맞은 내용이 보이도록 하겠다. // App.js import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Detail from "routes/Detail"; import Home from "routes/Home"; function App() { return ( ); } export default App; // Home.js import Movie fr..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 영화의 세부정보 보기_페이지 전환하기02_Router // Movie.js import PropTypes from "prop-types" function Movie({coverImage, title, summary, genres }) { return {title} {summary} {genres.map(g => ( {g}))} } Movie.propTypes = { coverImage: PropTypes.string.isRequired, title: PropTypes.string.isReq..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co fetch로 데이터 받아오기 import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); // 영화의 정보를 담음 const[movies, setMovies] = useState([]) useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year` ..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co toDo를 입력하고 제출할 기본 UI구성 import { useEffect, useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const onChangeInput = (event) => { setToDo(event.target.value); }; const onSubmitInput = (event) => { event.preventDefault(); console.log(toDo); } return..

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 특정 코드의 실행을 제한하고 싶을때 useEffect를 사용하자. import { useState } from "react"; function App() { const [counter, setCounter] = useState(0); function onBtnClick() { return setCounter((prev)=>{ return prev +1 }) } console.log('i run all the time') return ( {counter} Click me! ); } expor..