개발 일지

next 버전이랑 typescript 버전이 안맞아서 발생하는 문제 build 파일, node_modules, .d.ts 타입 정의 파일 삭제하기, npm 캐시 삭제하기. (npm cache clean 명령어 사용) 그리고 다시 재설치하였더니 해당 오류는 없어졌다..

Link Component에 조건부 인라인 스타일링(color 값 주기)을 해줬을 때 나타는 오류이다. Server 측에서 초기 렌더링 될 때 color 속성이 없어서 (null로 설정되어있기 때문) Client 측과 일치하지 않아 발생하는 문제. → Hydration Error 라고 console에서 알려주고 있다. https://nextjs.org/docs/messages/react-hydration-error react-hydration-error | Next.js Text content does not match server-rendered HTML While rendering your application, there was a difference between the React tree tha..

RTK configureStore 사용중에 다음과 같은 에러가 발생하였다. `Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.` [내가 작성한 코드] reducer.tsx import { configureStore } from "@reduxjs/toolkit"; import { persistReducer } from "redux-persist"; import storage from "redux-persist/lib/storage"; import userSlice from "./user"; import productSlice from..

https://velog.io/@jay/it-is-nothing-but-static-file-cache#cra-%EB%B9%8C%EB%93%9C-%EB%B0%A9%EC%8B%9D 별 건 아니지만 빌드 파일 배포 시 업데이트가 안되는 건에 대해 정적 파일 캐쉬로 인해 배포 업데이트가 적용이 안될 때 velog.io webpack cra 설정 https://velog.io/@kmlee95/CRA%EB%A1%9C-%EC%9B%B9%ED%8C%A9%EC%84%A4%EC%A0%95 CRA로 웹팩설정(재 설정) CRA프로젝트로 웹팩을 설정하는 방법에 대해 확인해본다. velog.io https://likelionsungguk.github.io/22-03-23/react-rewired-%EC%82%AC%EC%9A%A..

Uncaught SyntaxError: expected expression, got '

serializableStateInvariantMiddleware.ts:194 A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) ... redux-persist 사용시 middleware 설정을 해줘야 한다. serializableCheck 를 false로 할 수도 있는데, 공식문서에서 다음과 같이 설정해주라고 나와있다. import { configureStore } from '@reduxjs/toolkit' import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, } fro..

npm run build시 발생하는 경고, compile이 최신이 아니라고 경고하는 의미인거 같았다. > react-scripts build Creating an optimized production build... Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating [BABEL] Note: The code generator has deoptimised the styling of D:\brpark\dev\monster-fro..

CRA로 타입스크립트와 emotion을 사용하고 있는데, public 디렉토리에서 이미지들을 import 하지 않고, src/assets 디렉토리에서 이미지를 import 하려고 했다. 🤔 public vs assets - public : 정적 디렉토리, 컴파일 시 경량화 되지 않음. 웹팩이 아니라 build 폴더에 복사 되므로 경로 오입력 등의 이유로 에러가 났을 경우, 위치를 찾기 힘들다. 경로에 '%PUBLIC_URL%' 사용 - assets : 웹팩으로 처리됨. 컴파일 에러시 경로 추적가능. 대부분의 이미지들은 여기에서 관리한다. 기존에 public/images 폴더에서 이미지 경로를 호출할 때는 아무 문제 없이 잘 되었다. (너무나도 당연함) 그런데... src/assets 으로 이미지 경로를 ..

https://velog.io/@corner3499/Node-sass-%EC%84%A4%EC%B9%98-%EC%97%90%EB%9F%AC 1. node-sass 버전 지정 설치 npm i node-sass@4.14.1 or npm i node-sass@4.9.0 2. window build tools 사용해서 패키징 설치 npm install --global --production windows-build-tools 3. yarn upgrade로 패키지 업데이트 & yarn add node-sass yarn upgrade yarn add node-sass yarn add node-sass@4.0.0 으로 버전지정 재설치 package.json에 설정된 node-sass 버전이 로컬에 설치된 node 버전..

emotion 설정이 제대로 되지 않았을 때 발생하는 오류 👉해결 방법 : babel 설정이 따로 필요하다고 한다. (왜? 🤔) 1. 일단 필요한 패키지들을 설치 해준다. npm i @emotion/core @emotion/react @emotion/styled @emotion/babel-preset-css-prop 2. 약간의 설정이 필요하다. webpack.config.ts(x) 파일 루트 경로에 생성 3.