문제발생
기존의 순수 JS 로 페이지를 만들다가 리액트로 넘어가려고 했다.
원격 리포지토리에서 리액트 앱 초기화만 해둔걸 로컬로 가지고 와서 npm run start 로 실행해보았다.
하지만 결과는 아래와 같았다.

문제해결
아직 npm 에 익숙하지 않아서 겪은 문제라고 생각한다.
우선 무엇이 문제인지 확인해보기 위해 npm ls 를 입력해보고 패키지를 확인해보았다.
아래와 같은 결과가 나왔고 어떤게 문제인지 살짝 감이 오기 시작했다.
1. npm ls 입력

라이브러리를 다운받아야하는데 npx create-react-app 로 설치했다면 문제가 없었겠지만,
깃허브에서 pull 받았기 때문에 패키지 모듈이 안깔린거 같았다.
그래서 package.json 파일에서 안쓸거같은 web-vitals 같은 라이브러리는 지우고 npm install 로 나머지 패키지를 다운받았다.
2. npm install 후 npm ls 로 재확인

패키지 모듈들도 잘 설치된걸 확인했고 실행해보니 문제가 해결됐다.
앞으로 이런 문제를 많이 만날텐데 npm 에도 익숙해져야겠다.
'프론트엔드 > 트러블 슈팅' 카테고리의 다른 글
axios 에러 핸들링 with TypeScript (0) | 2024.03.15 |
---|---|
Failed to load plugin 'prettier' declared in '.eslintrc.cjs': Cannot find module 'eslint-plugin-prettier' (0) | 2024.01.12 |
자식 컴포넌트에서 부모 컴포넌트의 비동기 데이터 사용 시 렌더링 할 수 없는 현상 (0) | 2023.12.28 |
로그인 페이지 리팩토링하기 (0) | 2023.12.21 |
git revert 커맨드 사용기 (0) | 2023.12.12 |