`프론트엔드 개발자` 개형이의 벽돌집

🤔 프로젝트를 진행하다가 무분별하게 useEffect가 많이 사용된 곳을 본 적이 있다. 한 컴포넌트 안에 여러개의 useEffect가 있고 deps가 모두 달라 어떤 값의 변경에 따라 어떻게 동작이 수행되는지 추적하기 까다로웠던 경험도 있다. useEffect를 보통 언제 사용할까 고민해 봤다. - state 값이 변경될 때마다 특정 동작을 수행하고 싶을 때 - 초기 Mount시 data fetching 할 때 - 그 외 컴포넌트 mount시 단 한번 수행하고 싶은 동작을 넣을 때 문득 개발 중에 위처럼 쓰는 게 맞을까? 고민했고 서치를 통해 좋은 자료를 발견했다. https://www.youtube.com/watch?v=SrPebT4VBYc 위 자료의 예시를 직접 해보며 useEffect가 어떻게 동..

프로젝트 빌드 과정 중에 에러가 또 발견됐다. 위 코드에서 'Component' cannot be used as a JSX component 에러가 잡히며 빌드가 되지 않았다. 원인을 찾아보니 react 버전이 18로 업데이트되면서 @type/react도 18로 업데이트 됐을 텐데, 해당 버전에 발생할 수 있다며 17 버전으로 변경해줘야 한다고 하여 바꿨지만 해결되지 않았다. 씁...! 초기에 nextjs 앱 생성을 create-next-app 로 해줬는데, package.json에 dependencies안에 "@types/react": "^18.2.46", "@types/react-dom": "^18.2.18" 위 항목들이 포함되어 있었다. 혹시 해당 타입 라이브러리들이 devDependencies 안..

프로젝트를 빌드하려고 했더니 계속해서 에러가 발생하는 고충을 겪는 중이다. 그 중, "Expression produces a union type that is too complex to represent" 에러가 발생하며 vs code에서 mui의 Box에 에러를 표시했다. 그래서 "Expression produces a union type that is too complex to represent"를 서치하여 1. > typescript: Select Typescript Version 옵션에서 Use Workspace Version 2. tsdk에 node_modules/typescript/lib 명시 위 옵션을 vscode에 적용했지만, 문제는 해결되지 않았다. 씁! 문제를 해결하기 위해 Box에 c..

현재 내가 담당한 프로젝트에서는 React를 사용하고 있는데, 특정 컴포넌트를 사용할 때 콘솔에 아래 에러가 나오고 있었다. Warning: React does not recognize the `{넘겨준 props}` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `{넘겨준 props를 소문자로한 이름}` instead. If you accidentally passed it from a parent component, remove it from the DOM element. 동작엔 문제가 없었고 콘솔에만 에러가 찍혔지만 찝찝하니까 해결을 하기..