개발 일지

2-1. 의도를 분명히 밝혀라. 코드의 함축성 주석이 필요하다면 변수/함수/클래스명이 그 의도를 분명히 드러내지 못했다는 것이다. 아래 예시를 보자 [before] const success = (position: {= coords: { longitude: number; latitude: number }; }) => { setPos({ ...pos, longitude: position.coords.longitude, latitude: position.coords.latitude, }); }; 코드상으로는 문제가 없어 보인다. success -> 성공인 건 알겠는데, 그래서 뭐가 성공했을 때인데? [after] const findUserLocation = (position: { coords: { longit..

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..

한 대의 PC로 회사 계정과 개인 계정을 사용하다보니 ssh로 설정을 해두었다. 그러다가 개인 계정의 아이디를 바꾸면서 config 설정도 변경해주고, 로컬환경에서 작업 후 push를 시도했는데, 아래와 같은 오류가 발생하였다. Could not resolve hostname github.com nodename nor servname provided, or not known [해결 방법] 1. remote 주소 확인 git remote -v 2. 주소 변경 (이때 config 설정과 동일하게 해야함) git remote set-url origin https://github.com/레포지토리명.git // ssh로 접속하도록 설정한 경우 git remote set-url origin git@github.c..

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..

체크박스를 커스텀하는 과정에서, 체크박스의 상태에 따라 보여지는 스타일이 달라져야 하기 때문에, props로 체크박스의 상태를 넘겨줘야 했다. 필자는 CRA with Typescript Template에 Emotion을 적용해서 개발 중에 있었음. React + style-component 사용할 때 처럼 그냥 props로 넘겨주면 오류가 남 (변경 전) index.tsx const [checked] = useState(false) style.ts export const checkBoxStyle = css` background: ${(props) => props.checked ? `url(${active}) no-repeat 100%/contain` : "#ffff"}; `; (변경 후) 👉 방법 : s..

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

1. 함수의 타입 설정 파라미터도 일종의 변수, 타입 설정이 가능하다 return 되는 값 의 타입 지정도 가능하다, function multipleTwice(x:number) :number { return x*2; } 2. 함수의 특징 - void 타입 return이 없을 경우 void 타입 선언 가능 return 문이 없어야 하는데 return될 때, 이를 방지해준다. function multipleTwice(x:number) :void { } 3. 파라미터 옵션 파라미터를 지정해두고 함수 호출시 파라미터를 사용하지 않을 경우에는, 타입스크립트의 경우 에러를 뱉는다. (자바스크립트에서는 상관없다.) function multipleTwice(x?:number) :void { } multipleTwice..