221212 TIL

날 그렇게 애먹이던 yarn 버전 ....

컴퓨터에선 잘 됐는데 노트북은 안돼서 노트북이 문젠가 했지만 역시나 해답은 공식 문서..!!!

yarn 버전이 자꾸 옛 버전으로 돌아간다면 터미널에 다음과 같이 작성해주면 된다. (node.js 18.6 이상이면!)

 

corepack prepare yarn@stable --activate

 

너 때문에 정말 애 많이 먹었다..그래도 해결해서 뿌듯!!

하지만 아직 넘어야 할 산이 하나 더 있다는 거..

엘리 언니 리액트 강의를 보고 yarn을 시작한 사람이라면 무조건 이 에러를 만날 것이다.

엘리 언니 말씀에 의하면 create react-app과 yarn에서 발생하는 충돌 때문에 이러한 에러가 발생한다고 한다.

그래서 [eslint] 관한 걸 우리가 수동적으로 설치해줘야 함!

일단 ctrl + c 로 터미널 중단해주고 yarn add -D eslint-config-react-app 적고 엔터!

그리고 최상위에 .yarnrc.yml 파일 만들어주기.

만든 파일 안에 다음과 같이 적어주고 저장!

packageExtensions:

    react-scripts@*:

        peerDependencies:

            eslint-config-react-app: "*"

 

 

그리고 App.jsx에 와서 글 수정하고 저장 하면 또 에러가 뜰것이다.

그러면 차례대로 적어주기!

 

yarn cache clean

yarn install

yarn start

 

여기까지 하고 나면 정상적으로 작동할것이다.

한 가지 불편한 점은 프로젝트를 만들 때 마다 이렇게 해줘야 한다는 거....

계속 하다보면 자연스럽게 하고 있다..ㅋㅋㅋㅋㅋ

---

후발대 - 투두 리스트

setTodos((prev) => prev.filter((t) => t.id !== id));

// t는 현재 state 상태인 객체들
// 그 객체를 돌면서 해당되는 객체의 id와 내가 클릭한 todo의 id가 같지 않으면!!!
// prev에는 현재 상태의 state가 들어있음!!!

 

클릭 이벤트 함수에는 event가 인자로 무조건 있지만 그 클릭 이벤트 함수 안에서 이벤트를 굳이 쓰지 않으면

인자에 생략해도 된다.

 

map과 filter의 차이

map은 무조건 결과를 반환함! 값이 없어도 undefined로 배열의 요소 개수만큼 무조건 반환한다.

그래서 값을 변경하고 싶을 때 유용!

filter는 조건에 맞는, 골라낸 값만을 반환함