create-react-app 실행 후 무한로딩에 걸렸다

문제 상황

create-react-app을 설치하고 신나게 포트폴리오 작업 중이었는데 어느 순간 로컬서버가 무한로딩이 걸렸다...

터미널에서 오류도 안떠서 원인 파악이 힘든 상황인데
node_module폴더를 삭제하고 다시 npm i, npm start를 입력하고나니 아래와 같은 오류메세지가 간헐적으로 보였다가 사라진다!!

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.
  

급하게 경고메세지를 복사해서 확인해본 결과,
프로젝트 종속성이나 설정에 문제가 있을 때 보여질 수 있는 메세지라고 한다.
하지만 방금 막 설치한 create-react-app이기 때문에
별도의 모듈 설치하거나 설정 파일을 수정하지 않은 상태였다.

문제 해결

npm과 create-react-app의 버전 호환성으로 인한 충돌이 의심되었고
두 가지 모두 최신버전으로 업데이트 해주었다.

npm install -g npm@latest

npx create-react-app my-app

npx로 설치할 경우 실행 되고 난 뒤 디스크에서 지워지기 때문에 사용할 때마다 재 설치 해야하지만 최신 버전을 유지할 수 있다.

그리고 드디어 무한로딩이 멈추었다.

💭 프로젝트를 시작할 때 마다 구글링해서 나온 코드를 복붙해서 생각없이 설치했던 것 같은데, 그래서 항상 해왔던 것인데도 조금만 시간이 지나면 버벅거리게 되는 것 같다. 지금 실행하는 코드에 어떤 의미가 있고 어떻게 동작하는지 확인하면서 작업하는 습관을 가져야겠다.