whatisthis?

1 / gh-pages 패키지 설치 npm i gh-pages 2 / package.json 수정 , "homepage": "https://thisisyjin.github.io/ReactJSPractice" 끝부분에 이렇게 추가하고, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "deploy": "gh-pages -d build", ❗❗ "predeploy": "npm run build" ❗❗ }, scripts 부분에 deploy와 predeploy 를 추가함. 3 / 터미널에 npm run deplo..

> id라는 이름의 prop 새로 만듬 Home.js import { useEffect, useState } from "react"; import Movie from "../components/Movie"; function Home() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const json = await ( await fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year` ) ).json(); setMovies(json.data.movies)..

React JS - Movie App project (part 2) { fet.." data-og-host="mywebproject.tistory.com" data-og-source-url="https://mywebproject.tistory.com/355" data-og-url="https://mywebproject.tistory.com/355" data-og-image="https://scrap.kakaocdn.ne.. mywebproject.tistory.com 🔺 지난시간 진행사항 - props 이용 - component 구분 (App.js / Movie.js / Home.js / Detail.js) - 디렉터리 구분 (components / route) 1/ 우선 React Router을 설치해..

React JS - Movie App project (part 1) React JS Movie App (part 1) step1. API fetch 하고 / loading창 만들기 import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); useEffect(() => { fet.. mywebproject.tistory.com 🔺 지난번 진행사항 - fetch(async-await 이용) API - Arr.map() 으로 각 요소 렌더링 지금까지의 코드 🔻 App.js import { useEffect, useState } from "react"; function App()..

React JS Movie App (part 1) step1. API fetch 하고 / loading창 만들기 import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year` ) .then(response => response.json()) .then(json => console.log(json)); }, []); return {loading ? loading... : null}; } export defau..

Coin Tracker - 암호화폐와 그 가격을 나열함 - useEffect practice - 페이지 들어왔을 때 로딩메시지가 보이고, 코인들이 나열되면 로딩을 숨김. App.js import { useState } from "react"; function App() { const [loading, setLoading] = useState(true); return ( The Coins {loading ? Loading... : null} ); } export default App; API 가져오기 🔻 fetch("https://api.coinpaprika.com/v1/tickers"); API는 웹사이트 로드시 맨처음 한 번만 실행해야 하므로이전에 배웠던 useEffect를 사용하자. useEffect..

To Do List App - React JS 연습용 - create-react-app 사용 part1. 1 / 기본 틀 + 이벤트리스너 만들기 App.js import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const onChange = e => { setToDo(e.target.value); }; const onSubmit = e => {// form 제출시 e.preventDefault(); if (toDo === "") {// toDo가 공백이면 함수를 끝내버림 return; } setToDo("");// submit후 input의 value를 공백으로 }; return ( Add To Do..