프론트엔드 작업중 발생한 오류들

ERROR in ./src/components/ChatBotButton.jsx 6:0-44
Module not found: Error: You attempted to import ../../public/css/ChatBotButton.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

해당 에러는 public/css 디렉토리에 있는 CSS 파일을 직접 임포트하려고 할 때 발생하는 것으로, create-react-app 설정에서는 src/ 디렉토리 외부의 파일을 직접 임포트하는 것을 허용하지 않습니다. 이 문제를 해결하려면 CSS 파일을 src/ 디렉토리 안으로 옮겨야 합니다.

================================================

webpack compiled successfully
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

당신이 보고 있는 메시지는 프로젝트의 종속성 중 하나인 babel-preset-react-app이 명시적으로 선언하지 않은 다른 패키지(@babel/plugin-proposal-private-property-in-object)를 사용하고 있음을 경고하는 것입니다. 이 문제는 @babel/plugin-proposal-private-property-in-object 패키지가 다른 이유로 이미 당신의 프로젝트의 node_modules 폴더에 존재하기 때문에 현재는 문제가 되지 않지만, 언제든지 문제가 발생할 수 있습니다.

babel-preset-react-app은 더 이상 유지 관리되지 않는 create-react-app 프로젝트의 일부이므로 이 버그가 수정될 가능성은 거의 없습니다. 이 경고 메시지를 없애려면 @babel/plugin-proposal-private-property-in-object를 당신의 devDependencies에 추가해야 합니다. 이렇게 하면 안정성을 확보하고 앞으로 호환성 문제를 방지할 수 있습니다.

문제 해결 방법:

1. 의존성 수동 추가

   • @babel/plugin-proposal-private-property-in-object를 프로젝트의 devDependencies에 직접 추가해야 합니다. 이렇게 하면 다른 패키지에 의존하지 않고 항상 사용할 수 있습니다.

2. 의존성 설치

   • 프로젝트 디렉토리에서 다음 명령어를 실행합니다:

     npm install @babel/plugin-proposal-private-property-in-object --save-dev

   • 이 명령어는 @babel/plugin-proposal-private-property-in-object 패키지를 설치하고 package.json 파일의 devDependencies에 추가합니다. 이는 개발 및 빌드 과정에서 패키지가 사용 가능하도록 보장합니다.

3. 설치 확인

   • 설치 후 package.json을 확인하여 @babel/plugin-proposal-private-property-in-object가 devDependencies에 나열되어 있는지 확인합니다.

4. 프로젝트 재빌드

   • 다시 한번 빌드 과정을 실행하여(npm run build 또는 npm start) 모든 것이 정상적으로 컴파일되는지 확인합니다.

이 작업이 필요한 이유:

• 의존성 관리: 사용되는 모든 패키지를 package.json에 명시적으로 선언하는 것은 안정적인 빌드 환경을 유지하는 데 도움이 됩니다. 간접적으로 의존하는 패키지가 제거되거나 업데이트되어 더 이상 요구 사항을 충족하지 못하는 경우 발생할 수 있는 문제를 피할 수 있습니다.
• 프로젝트 안정성: 패키지를 명시적으로 추가함으로써, @babel/plugin-proposal-private-property-in-object가 node_modules 디렉토리에서 제거되거나 다른 패키지의 변경으로 인해 발생할 수 있는 장래의 오류를 방지할 수 있습니다.

이러한 단계를 따라서 잠재적인 빌드 실패를 피하고 프로젝트의 안정성을 유지할 수 있습니다.