금융권 개발 일지 블로그

■ 문제상황 경고는 오류가 아니기 때문에 해결하지 않아도 프로그램 동작에 문제는 없겠지만, 로그를 보기 힘들어서 해결하게 되었습니다. 경고는, 태그가 의 자식으로 존재할 수 없다는 내용입니다.경고: validateDOMNesting(...): 는 의 후손으로 나타날 수 없습니다. validateDOMNesting()은 아마 DOM의 중첩 구조를 검사하는 함수 같습니다. 로그의 형태를 보면 맨 아래 부분이 부모이고, 맨 윗 부분이 자식요소를 나타내고 있습니다. 위에서부터 p 태그를 찾은 뒤, 바로 위의 컴포넌트가 뭔지 확인해보니, SimSuccessAlert1 컴포넌트가 있습니다. 이 컴포넌트를 p 태그 안에서 부르고 있는 것 같습니다.■ 해결방법해당 컴포넌트를 msg라는 상태변수에 넣고 있는데, 그 부..

■ 에러설명 Minified React error #130의 전체 내용은 다음과 같습니다. [공식문서 바로가기]Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: [missing argument].[missing argument] 리액트 컴포넌트를 렌더링시킬 때 발생하는 에러로, components의 이름이 잘못되었다는 내용입니다. 이러한 상황으로는, 컴포넌트의 이름을 잘못 정의했거나 컴포넌트를 만들지 않고 import 시키는 경우가 있습니다.더보기🗨️Minified React error #31는 에러코드가 왜 직관적이지 않나요?Re..

■ 문제상황 searchBox 파일에서도 나지 않는 오류인데, 이 컴포넌트를 재사용하는 곳에서 오류가 발생했습니다. JSX에서 컴포넌트는 대문자로 시작해야 된다는 규칙이 있기 때문입니다.■ 해결방법컴포넌트의 이름을 규칙에 맞게 수정합니다. searchBox -> SearchBox 파일명까지 수정했는데, 에러가 사라지지 않는다면 VS Code를 껐다가 다시 키면 됩니다.감사합니다. :)

■ 문제상황typescript 기반의 react-app에서 아무 내용도 없는 빈 tsx 또는 ts 파일을 만들면, 다음과 같은 에러가 뜹니다.■ 문제원인TypeScript 컴파일러가 --isolatedModules 플래그(flag, 참/거짓을 나타내는 1비트의 값)에 따라서 컴파일을 하는 도중에 발생하는 오류입니다. --isolatedModules 플래그가 true일 경우, 프로젝트 내의 모든 ts나 tsx 파일을 모듈로 컴파일됩니다. TypeScript에서는 import나 export가 있으면 모듈로 인식됩니다. 그렇지 않을 경우 전역 파일(A global script file)로 인식하고 모듈로 컴파일하지 못하게 되면서 오류를 발생시킵니다.■ 해결방법✅ (추천) import 또는 export 추가im..