코딩기록

❤️리액트❤️ 🌟프로젝트 생성 npx create-react-app 폴더명 🌟깃허브 - 깃허브 프로젝트 생성 **깃허브 연동 1. git init 2. git remote add origin https://github.com/아이디/프로젝트명.git 3. git remote -v (깃허브 잘 연결됐나 확인) 4. git branch (브랜치가 main인지 확인) 4-1. main이 아니면 main으로 바꿔줌 git branch -m master main 5. git push origin main ** 오류가 뜨면 git pull origin main --allow-unrelated-histories git push origin main ** 깃허브 잘 못 연결했으면 git remote remove ori..

* 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); 위 아래 코드 모두 동일하게 작동되지만 아래 코드로 사용해야함 위 코드를 사용하면 상태가 예상과 다르게 업데이트 될 수 있으므로 이전 상태를 사용하는 게 좋음