공부기록용

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

https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co prop type : 어떤 타입(number, string,,,,)의 prop을 받고 있는지 체크해준다. 각기 다른 타입들을 검사하는것이 가능하다. function App() { return ( ); } > 별 다른 오류 없이도 text에 number을 넣어도 fontSize에 string를 넣어도 괜찮았다. 다만 이게 오류로 인식되고 발견되어서 수정이 되면 좋지만 모르고 넘어갈 수 있기때문에 아예 값의 형태를 prop의 type을 지정하려고 한다. 말고 라이브러리를 설치해도 된다. // ..