정도영 Tech-Blog 정도영 Tech-Blog

redux-toolkit으로 전역 상태 객체를 사용하다가 발생한 이슈입니다. 문제의 발생 배경은 rtk 라이브러리로 특정 객체를 전역 상태로서 사용하고 있었고 프로그램이 시작될 때, 해당 객체의 초기값에 존재하는 속성(빈 배열 내부)에 class와 new 연산자로 다른 타입의 객체를 만들어 초기 상태를 만들어주고 있었습니다. export const surveySlice = createSlice({ name: 'test', initialState: { value: { head: { title: 'test', desc: '' }, body: [ new Test() ] } }, reducers: {} } 그리고 그 클래스의 정의는 아래의 형식으로 제작했습니다. class Test { title: string;..

프로젝트를 수행하면서 겪었던 문제입니다. import { useState, useCallback } from "react"; import Child from "./Child"; function App() { const [count, setCount] = useState(0); const callSetCount = useCallback(() => { setCount(count + 1); console.log('callSetCount has just been called.'); }, []); return ( Parent {count} callSetCount in Parent ); } export default App; 일단 현재 컴포넌트에서는 자식 컴포넌트인 Child에 callSetCount 함수를 pro..

이 글에는 제가 프로젝트를 수행하면서 StompJs를 통한 이진 데이터 전송 방법 및 겪은 어려움을 제 방식대로 해결한 내용을 담았습니다. 제 방법보다 더 나은 방법을 알고계시면 댓글 등으로 공유해주시면 감사하겠습니다. StompJs의 공식 문서를 참고하면 StompJs는 5버전 이상부터 이진 데이터 전송을 지원한다고 합니다. Starting version 5, sending binary messages is supported. To send a binary message body, use the binaryBody parameter. It should be a Uint8Array. const binaryData = generateBinaryData(); // This need to be of type ..

프로젝트를 수행하면서 부모 컴포넌트의 state가 변경되어도 재렌더링이 되지않았으면하는 자식 컴포넌트가 있었습니다. 특히 해당 자식 컴포넌트에 재렌더링이 부담스러운 복잡한 로직이 있으며, 변경된 부모 컴포넌트의 state가 해당 자식 컴포넌트의 jsx에 반영되지않는 경우가 특히 그럴것입니다. 구글링을 해 본 결과 예전 리액트버전에서 제공하는 class 컴포넌트 안에 shouldComponentUpdate 함수를 선언하여, 그 함수가 반환하는 boolean값으로 자식 컴포넌트의 업데이트 여부를 설정할 수 있음을 파악했습니다. React.Component – React (reactjs.org) 위의 공식문서 링크에서 설명하는 shouldComponentUpdate 함수의 예시입니다. import React,..

보통 css를 위해 styled-components를 활용했지만, 간편한 복붙으로 css작성을 위해 남이 작성한 css파일을 긁어와 사용할 때가 있습니다. 그럴때는 일일히 styled-components문법으로 바꿔주는것보다 간편하며 네스팅이 가능한 module파일로 바꿔주는것이 낫다고 생각합니다. 그래서 복붙한 css파일을 module파일로 바꿔 사용해줬는데 저러 에러가 발생했습니다. typescript가 module에대한 정의를 알 수 없어 발생하는 에러입니다. 따라서 typescript에게 module이란 것이 어떤 타입인지 정의해줄 필요가 있습니다. 아래는 해결 방법의 순서입니다. 1. 해당 프로젝트의 패키지에 npm install -D typescript-plugin-css-modules 를 설..