일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- JS setTimeout
- JS 스코프
- JS typeof연산자
- JS 삼항연산
- JS classList
- JS redirection
- JS 숫자
- JS null undefined
- JS clearInterval
- JS 형변환
- JS 기초
- JS appendChild
- JS 타이머기능
- JS 화살표함수
- git 협업셋팅
- JS form action
- CSS속성정리
- JS localStorage
- CSS기초
- JS 데이터타입
- JS 연산
- JS value속성
- JS preventDefault
- JS form
- js 변수
- JS prompt
- JS append
- JS 함수
- HTML기초
- JS setInterval
목록📚강의록📚/노마드)React (13)
공부기록용
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..