코딩기록

* useEffect() useEffect(() => { console.log("chchchch") }); - 상태 값이 변경 되서 다시 렌더링 된 다음에 호출 - 불필요한 실행을 막기 위해 두번째 매개변수로 배열을 전달 useEffect(() => { console.log("change") }, [count]); - 이 경우엔 count (의존성 배열) 가 변경될 때만 실행 useEffect(() => { console.log("change") }, []); - 렌더링이 된 후 최초에 한 번만 실행하려면 빈 배열로 실행

npm install -g json-server json-server --watch ./src/db/data.json --port 3001 ./src/db/data.json --port 3001 < - 여기는 경로설정

리액트 강의를 따라하던 중 react-router-dom에서 오류가 나는 것을 확인하고 찾아봤더니 강의는 버전 5로 제작되었고 지금은 리액트가 버전 6으로 업데이트 되면서 생긴 문제 - Switch -> Routes 로 바꿔주고 elment에 컴포넌트 파일을 넣음 - 하란대로 했지만 그래도 안되고 계속 빨갛게 이런 오류가 발생 ERROR in ./node_modules/react-router-dom/dist/index.js 13:0-812 -! node_modules 폴더 지워준 다음에 다시 npm i 해서 설치했더니 해결

리액트 강의 듣는데 다운로드 받은 파일 실행시키려면 npm install --save --legacy-peer-deps 하고 npm start 하면 실행됨!

return ( {Error && } 이름 나이 ) function Wrapper(props) { return props.children; } export default Wrapper 리액트에서 불필요한 div를 덜 생성하기 위해서 Wrapper로 컴포넌트를 감싸줌 import React, { useState, Fragment } from 'react'; return ( ); 를 사용하면 더 간단하게 가능!

1. 먼저 깃허브에서 new repository 생성 2. vscode 터미널에서 연동해주기 git init git remote add origin https://github.com/깃허브아이디/프로젝트명.git git remote -v git branch git push origin main 아래 코드는 깃허브가 잘 연결됐는지 확인하는 거라 생략 가능 git remote -v (깃허브 잘 연결됐나 확인) git branch(브랜치가 main인지 확인) 혹시나 push 하는 과정에서 오류가 뜬다면 git pull origin main --allow-unrelated-histories git push origin main 로 시도하기 3. gh-pages 설치 npm install gh-pages 4. p..

const [counter, setCounter] = useState(1); ... setCounter(counter + 1); const [counter, setCounter] = useState(1); // ... setCounter(prev => prev + 1); 위 아래 코드 모두 동일하게 작동되지만 아래 코드로 사용해야함 위 코드를 사용하면 상태가 예상과 다르게 업데이트 될 수 있으므로 이전 상태를 사용하는 게 좋음

영화 등장인물 api를 받아와서 슬라이드로 만들었다. 원래 슬릭은 사용해본적이 없어서 swiper를 이용해서하려다가 화살표 바깥으로 빼는게 리액트로하기엔 좀 번거로울 것 같아서 슬릭을 사용해봤다. 슬릭을 설치해주고,, import React from 'react'; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import styled from 'styled-components'; import { API_IMG } from '../../API' import empryIcon from '../../image/icon/empty.png' ..

뭐라고 해야할지,, 하트 아이콘,, 찜,, import React from 'react' import { useState } from "react" import styled from 'styled-components'; import icon1 from '../../image/icon/icon_heart_1.png' import icon2 from '../../image/icon/icon_heart_2.png' function Addwish() { const [Wish, setWish] = useState(true); const wishClick = () => { setWish(!Wish); } return ( ) } export default Addwish const WishIcon = styled.bu..

function StarRating(props) { const AVR_RATE = Math.round(props.voteAverage * 10) ; // 평점 const STAR_IDX_ARR = ['first', 'second', 'third', 'fourth', 'last']; //별의 고유 아이디 const [ratesResArr, setRatesResArr] = useState([0,0,0,0,0]); //별점 리스트 상태 const calcStarRates = () => { let tempStarRatesArr = [0,0,0,0,0]; //임시리스트 let starVerScore = (AVR_RATE * 70) / 100;//별의 width가 14이므로 14*5=70, 100점 만점인 현재와 ..