콛 다이어리

Home.jsx에 있는'포켓몬 도감 시작하기' 버튼을 클릭했을 때Dex.jsx 컴포넌트로 이동하는 작업을하고싶었다. 어제 강의를 본걸 기억해서 하려고했는데잘 기억이 안 나서공식문서 보다는 블로그가 더 잘 설명되어있을 것 같다는 생각에여러 블로그를 찾아봤는데 도저히 안 되서결국 다시 강의를 보고 하게 되었다.   App.jsximport { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./pages/Home";import Dex from "./pages/Dex";const App = () => {  return (    BrowserRouter>      Routes>        Route path="/" element..

오늘은 좀 빠른 시간에 TIL을 써보려고 한다.잊어버릴까봐,, 배치 업데이트(Batch Update):리액트가 더 나은 성능을 위해여러개의 state 업데이트를 하나의 리렌더링으로 묶는 것 어떤 state를 변경시킬 때 모아서 한꺼번에 처리하는React만의 알고리즘 사용하는 이유1. 불필요한 리렌더링 방지 (렌더링 최적화)  button        onClick={() => {          setCount(count + 1);          setCount(count + 1);          setCount(count + 1);        }}      >        증가      button>나는 분명히 count를 세 번 써줬다. 게다가const [count, setCount] = use..

전에 팀플 할 때는앞에 동사를 넣기도 했거나'Func'를 넣기도 했는데튜터님이나 강의를 하는 사람들 대다수는'handle', 'set' 이나 'get'을 넣어서호기심에 검색해 보았다. 사실 전에 같은 조였던 분이변수/ 함수명 추천 사이트를 알려주시긴 했는데아무래도 내가 직접 만드는 게 좋을 것 같아서지운지 오래다.베이직반에 있던 노션 내용을 추가해서정리해보았다.   1. 동작을 설명하는 이름을 사용한다.함수명은 함수가 수행하는 동작이나 작업을 잘 설명해야코드를 읽는 사람이 함수가 어떤 일을 수행하는지쉽게 이해할 수 있음    ex1) displayErrorMessage(message)           오류 메시지를 표시하는 함수    ex2) updateUserProfile(userData)      ..

노트북에 로컬 계정 로그인하고,사용자 폴더 이름 바꾼다고 이것저것 만졌더니노트북이 이상해졌다..기존에 쓰던 데이터가 폭삭 날아가버려서VSCode를 다시 설치하게 되는 일이 발생했다. yarn을 설치했는데 컴퓨터가 yarn의 위치를읽지 못한다는 에러가 자꾸 떴고,해결 방법으로는환경변수에서 경로를 변경해줘야 하는 것이었다. 전에 JAVA배울 때 eclipse 설치하면서환경변수 잘못 만지면 큰일 난다고 들어서불안했지만 다행이 그런 일 없이 잘 연결됐다. 내가 환경변수를 설정했어야 했던 이유는노트북이 내가 설치했던 yarn의 경로를 몰라서그랬던 것이다. 그래서 도대체 환경 변수가 뭔가 하고 알아봤다.  환경 변수:운영체제가 참조하는 변수 윈도우는 파일을 현재 디렉토리에서 찾고,현재 디렉토리에서 아무 파일을 열고..

자바스크립트에서는 배열 변경이 가능하지만state로 저장할 때는 변경할 수 없도록 해야한다.객체와 마찬가지로,state에 저장된 배열을 업데이트하고 싶을 때는새 배열을 생성하거나기존 배열의 복사본을 생성한 뒤,이 배열을 state로 두어 업데이트 해야함 변경하지 않고 배열 업데이트하기arr[1] = 'maltese' 처럼 재할당하면 안 됨push( ), pop( ) 같은 함수 사용하면 안 됨filter( ), map( ) 같은 함수로 새 배열 만들고새 배열들을 state에 설정  비선호(배열 변경)선호(새 배열 반환)추가push, unshiftconcat, [...arr] 전개 연산자제거pop, shift, splicefilter, slice교체splice, arr[i] = ... 할당map정렬rever..

문자const [herName, setHerName] = useState('미소'); function MyDogNameChanged( ) {setHerName('은동이');}// herName은 '미소'  숫자const [herAge, setHerAge] = useState(0); function MyDogAgeChanging( ) {setHerAge(6);}// herAge는 0

변수데이터 저장 공간사용하는 방법: 적절한 변수 이름 = 할당해 줄 데이터; 1. 암시적 선언자바스크립트에서 제공하는 변수 선언 키워드 (var, let, const)를 사용하지 않고 선언하는 것- 권장하지 않음 2. 명시적 선언자바스크립트에서 제공하는 변수 선언 키워드 (var, let, const)를 사용하여 선언하는 것   var초창기 변수 선언 키워드변수의 중복 선언/ 재정의 가능대규모 프로젝트 시, 위험성이 발생할 가능성이 높음같은 프로젝트를 진행하는 개발자 A와 B가 있다.개발자 A가 var 키워드로 num변수를 사용했는데B개발자가 var 키워드로 똑같은 num 변수를 재정의를 했다.... var num1 = 5; console.log(num1); // 5 var num1 = 10; conso..