[Pre-project] StackOverFlow clone 일지 6 : 비동기 작업을 위한 Redux-toolkit 익히는 중

오늘 한 일

• 각종 에러 잡기
• 비동기 작업을 위한 Redux-toolkit 학습

Redux-toolkit을 사용할 때 props를 사용해도 된다

정말 사소해서 구글링 할때 이 내용에 대한 글을 찾지 못했다. 한참 고민하다가 잘하시는 분들께 물어보니까 상태 관리를 사용하더라도 props를 사용하는게 기피되는 방법은 아니라고 했다. 나만 쓰면 안된다고 생각했던건가?? props 드릴링을 피하기 위해서 그냥 props도 피할 거라고 생각했는데...

문제 발생 : props 없이 컴포넌트 재활용하는 방법은..?

어제 이거 때문에 재활용 관련해 토글 문제를 해결 못했는데, props로 사용해도 된다고 해서 추후 DB 데이터 적용하면서 수정할 것이다.

code ERESOLVE 에러 처리

fetch 대신 axois를 사용하기로했는데, 공식문서의 설치코드가 안먹어서 경고창을 보니 --force 나 --legacy-peer-deps 를 같이 사용해보라고 안내되어 있었다.

npm install axios --legacy-peer-deps

로 설치는 했는데 뭔지 찾아보니 충돌이 발생해서 강제로 설치하는 방법인데 방식이 살짝 다르다고한다. 호히려 레거시보다 --force 를 먼저 사용해보고 안되면 후자를 선택하라는 것 같다.
npm install --force and --legacy-peer-deps 차이점

CORS 오류 해결: 재실행...

Access to XMLHttpRequest at 'http://.../questions/1' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

package.json에 proxy 설정을 변경하고 vscode 까지 완전히 다시 끄고 npm start 시작했더니 해결되었다. 애먼 header 변경, url 앞에 다 쓰기 등 해봤는데 재실행이 답이었다. 오늘 계속 이런 오류가 발생해서 난감했다.
아무튼 install이나, 설정 변경 후에는 다 종료해보고 실행해야겠다.

오늘 총평

에러에 지치지 말자. toast 텍스트 에디터 적용 후에 뭔가 왔다갔다하는 에러가 발생한다. npm start 할때마다, eslint로 달라지는 오류로 한참 고생했다. 결국 컴퓨터 끄고 다시 키고, 클론 받고 다시 받고, npm 에러도 계속나고. 서버 데이터 거의 완성되서 바로 뿌려야하는데 eslint 오류로 테스트 하기가 너무 힘들었다.