index.js:21 [MSW] The currently registered Service Worker has been generated by a different version of MSW (2.4.1) and may not be fully compatible with the installed version. It's recommended you update your worker script by running this command: • npx msw init You can also automate this process and make the worker script update automatically upon the library installations. Read more: https://ms..

RTK만 쓰다가 사내 스터디를 하게돼서 Zustand랑 TanStack Query 자료를 준비하게되었다. 회사에서 시연용으로는 포켓몬 API (무료 API중 제일 재밌 ㅇ_ㅇㅋㅋ)를 준비해서 가져갔다. 아래는 설명용으로 만든거! 블로그에도 쪄놔야지 히히 React + Zustand + Tanstack Query Zustand? Redux, Recoil 등과 함께 전역 상태를 관리할 수 있는 라이브러리. Redux와 개념적으로 비슷(Flux패턴을 채택)하기 때문에 Redux, RTK사용자가 학습하기 쉽다. Flux Pattern? 2014년 facebood F8컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기위해 사용하는 디자인 패턴 사용자 입력을 기반으로 Action을 만들고..

처음 리액트를 할때는 CRA를 하다가, 회사에서는 하나하나 프로젝트를 만들다가, 지금은 개인 공부는 Vite를 사용하게 되었다.. Vite? Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev 사용하지않는 모듈까지 설치해야했던 CRA과 달리 확실히 가볍고 실행이 빠르다. Vite로 리액트 환경 구성하기 npm init vite npm init vite 입력후 프로젝트명, 프레임워크선택, 타스 vs 자스 중 선택 하면 끝 그리고 밑에서 설명하는대로 cd #내 프로젝트명 npm i #npm install npm run dev #scripts 실행 폴더 경로 이동하고, npm 설치하고 scripts 실행하면 짜잔 하고 Vite로 만든 프로젝트를 실행할 수 있다.

Eslint 설정을 마치고나니 'React' must be in scope when using JSX 오류가 떴다. Eslint가 없을때는 React를 임포트 해주지않아도 Next 에서 알아서 인식을 해줬는데, Eslint 설정이 들어가고 나서는 스코프 오류가 생긴다. 해결방법1 import React from 'react' 상단에 react를 임포트를 해준다 해결방법 2 "rules": { "react/react-in-jsx-scope": "off" } eslintrc에 해당 규칙을 추가해준다

[오류 발생 상황] axios .get( `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURI( enteredAddress )}=${process.env.REACT_APP_GOOGLE_GEO_API}` ) .then((response) => console.log(response)) .catch((err) => console.error(err)); API 키를 .env에 저장하고 사용하려고 하니 process가 정의되지 않았다는 오류가 떴다. 웹팩5부터는 직접 설정을 해줘야 한다고 적혀있었다. (스택오버플로우 짱짱) [해결방법] //webpack.config.js const path = require('path'); const dot..