khakha's dev log

컴포넌트 렌더링 중에 상태를 업데이트하려고 시도했기 때문에 발생한 경고이다. 워닝 문구 마지막에 Github issue에서처럼 에러가 발생한 부분을 확인하라고 알려주고 있다. Kanban.tsx const { data, isLoading, isSuccess } = useQuery('fetchKanbanList', fetchKanbanList); if (!isLoading && isSuccess) { const kanbanList = data.data; dispatch(setApplications(kanbanList)); } useQuery훅이 렌더링중에 호출되고, 데이터가 잘 받아와지면 dispatch를 호출하여 스토어 상태를 업데이트하도록하였다. 이는 렌더링 중에 상태를 업데이트하는 것인데, 잘못된 패..

해당에러는 createSlice내의 reducer action함수를 작성하며 발생한 에러이다. 수정 전의 코드는 다음과 같다. updateProcess: ( state, { payload, }: PayloadAction, ) => { const { currentProcessName, target, nextProcessName } = payload; if (currentProcessName !== nextProcessName) { const currentProcessData = state.find( data => data.process === currentProcessName, ) as IkabanData; const nextProcessData = state.find(data => data.process..

컴포넌트 파일에는 문제가 없는데 모듈을 계속 못찾는 에러가 발생했다. 검색을 해보니, typescript를 사용할 때에는 webpack 설정을 수정해줘야된다는 글을 읽게되었다. webpack은 import구문에 확장자를 지정해주지 않으면, resolve.extensions의 기본 확장자인 ['.js', '.json', '.wasm'] 배열내에서 찾고, 없으면 module을 찾지 못한다. typescript는 .tsx 파일이 확장자이기 때문에 해당 확장자를 추가해주면 webpack이 module을 찾을 수 있다. 그러키 때문에 가장 상위 폴더에 두 파일을 추가해주면 된다. - tsconfig.json { "compilerOptions": { "jsx": "react", "lib": ["es6", "dom"..

⁉️ 문제 원인 1. getElementById는 다음과 같이 정의되어 있으며 null값을 반환할 수 있다. getElementById(elementId: string): HTMLElement | null; -> Typescript의 타입 추론 결과에서는 null 값과 같은 알 수 없는 타입에 대한 정보가 나타날 경우 Type assertion(타입 단언)을 통해 타입을 지정해줄 수 있다. ✅ 해결 방안 Type Assertion 컴파일러에게 변수의 타입을 알려주는 메커니즘으로, TypeScript의 타입 추론 결과가 실제와 다르게 추론되었다 생각하는 경우 사용할 수 있다. 또한, Type Assertion은 컴파일러에 의해 제거되기 때문에 코드의 런타임 동작에 영향을 미치지 않는다. 1) as - ty..