[React] Redux toolkit Reducers에서 배열 변경하는 방법

기존 배열(state)을 새 배열(action)로 교체해야 하는데 처음엔 아래 처럼 해보기도 하고 그냥 action.payload만도 넣어보고 [...action.payload] 이렇게도 넣어보고 했지만... 에러는 안 나지만 작동이 안 됐다. 결국 공식 사이트에서 해결 방법 찾음... 역시 모든 답은 공식 사이트에. 리액트에서는 불변성이 중요한데 배열을 사용할 때에는 카피본을 만들어서 수정해야한다 정도로 가볍게만 알고있다가 리덕스툴킷에서 제대로 당한거다. One of the primary rules of Redux is that our reducers are never allowed to mutate the original / current state values! -https://redux-toolk..

• format_list_bulleted SW공부/React
• · 2023. 6. 22.
• textsms

[Error Note] tsconfig.json에서 파일을 찾을 수 없는 에러

File 'X 'not found. The file is in the program because: Matched by include pattern './src' in the program because : ... 아무것도 건드리지 않았는데 tsconfig.json 파일의 첫 번째 줄 { 하나만 있는 부분에 에러가 났다. 인터넷을 찾아보니 vscode를 껐다 켜거나 src 폴더에 ts파일을 추가해보라고...(https://velog.io/@heony/tsconfig.json-input-error) 실제로 vscode를 껐다 켜니 바로 없어졌다... 조금 허무하지만(?) 나중에 다시 찾게 될 수도 있으니 적어놓는다.

• format_list_bulleted SW공부/Error Note
• · 2023. 6. 18.
• textsms

[Error Note] typescript에서 set state를 props로 보내는 방법

모달로 뜨는 작은 검색창을 만들던 중 typescript를 사용해 set state를 보내려고 하니 에러가 났다. const [miniSearch, setMiniSearch] = useState(false); 보내려 한 것은 useState의 setMiniSearch 부분이다. 처음엔 props 받는 컴포넌트 파일에 아래와 같이 setMiniSearch 타입을 miniSearch와 똑같이 boolean으로 지정했더니 에러 문구가 바뀌었다. 'Dispatch'타입은 boolean에 할당할 수 없다고 친절하게 타입을 알려준다. 아래와 같이 props 받는쪽에서 타입을 Dispatch으로 바꾸면 에러 해결. Dispatch, SetStateAction은 import해와야 한다.

• format_list_bulleted SW공부/Error Note
• · 2023. 6. 18.
• textsms

[Error Note] typescript props 전달시 IntrinsicAttributes 에러

Type 'X' is not assignable to type... Property 'X' does not exist on type 'IntrinsicAttributes' 다른 컴포넌트로 props를 전달하려 하니 이런 에러가 떴다. 인터넷을 좀 뒤지면서 아래 사진처럼 props 전달 받는 부분을 이래저래 바꿔서 넣어보기도 하고 type지정을 따로 빼서 해주기도 했는데 아무리해도 소용이 없었다. 인터넷 뒤지길 그만두고 이전에 봤던 typescript관련 영상 중 관련 내용이 있을까 싶어 뒤지다가 해답을 찾았다. typescript를 사용할 때 컴포넌트를 리턴하는 경우에 React.FC 라는 타입을 지정해줄 수 있는데 이렇게 리액트 펑션 컴포넌트를 사용할 때에는 props를 전달 받을 때 제네릭 지정이 필..

• format_list_bulleted SW공부/Error Note
• · 2023. 6. 18.
• textsms

[사담] 머쓱이 획득

사실 저번 달 얘기지만 프로그래머스 코딩테스트 입문 100문제를 모두 풀어 머쓱이를 받았다. 99문제까지 풀었을 때 솔로 프로젝트에 들어가는 바람에 2주나 지나서 마지막 남은 한 문제를 풀 수 있었다. 문제 100개 푸는게 생각보다 오래 걸리는 작업이었지만 목표를 이루니 좋다. 앞으로도 화이팅.

• format_list_bulleted Diary/사담
• · 2023. 6. 14.
• textsms

Solo - Coz Shopping

Coz-Shopping 개요 React를 사용해 주어진 요구사항을 만족하는 상품리스트 페이지와 사용자가 북마크 한 상품들을 조회할 수 있는 북마크 페이지를 포함하는 SPA 앱을 구현한다. 프로젝트 요구사항 사용스택 react axios redux toolkit react-router-dom react-toastify styled-components 제작기간 5/12(金) : 프로젝트 요구사항 분석 및 플래닝 5/15(月) - 5/21(日) (7일간) : 프로젝트 구현 src 디렉토리 구조 📦src ┣ 📂Pages ┃ ┣ 📜Bookmark.js ┃ ┣ 📜Main.js ┃ ┗ 📜ProductList.js ┣ 📂components ┃ ┣ 📜Footer.js ┃ ┣ 📜HambergerModal.js ┃ ┣ 📜H..

• format_list_bulleted ToyProject/Coz' Shopping
• · 2023. 6. 11.
• textsms