[React] Module not found

문제 상황 파악

팀 작업 중, 최신화 된 리액트 프로젝트를 실행시켰는데 Module not found 에러가 발생.

문제 발생 조건 파악

node_modules 디렉토리는 기본적으로 gitignore 처리 되어있는데 다른 팀원이 필요해서 로컬로 다운받은 라이브러리가 나에게는 없어서 발생한 not found module 상황이었다.

결과 검증, 해결

그렇다면 개인이 다운받은 모듈을 모든 팀원들에게 다운 받아주세요~ 라고 공지를 띄워야하나? 그건 뭔가 번거롭고 수동적인 방식 같았다. 검색 결과, 리액트는 package.json 이라고 하는 파일에서 의존 관리를 하고 있었다.

1. package.json란?
   Node.js 및 JavaScript 프로젝트에서 사용하는 중요한 파일로, 프로젝트의 메타데이터와 의존성을 관리하는 역할이다. 스프링 프로젝트의 build.gradle과 같다고 생각했다. package-lock.json라는 파일도 존재하는데 이것은 package.json에서는 “이정도 버전 이하로는 동작할 수 없어”라는 범위성 버전을 여기에는 정확한 버전이 명시되어 있다고 한다.

2. npm i <모듈이름> —-save 혹은 npm i <모듈이름> —S
   개인 작업 중 필요한 모듈을 다운 받을 때에는 package.json에도 의존주입을 해놓아야 한다. 수동으로 직접 수정하지 않고 다운을 받으면서 의존 주입 코드를 입력하는 —-save 옵션을 추가해주면 된다. 단, npm 버전 5 이상에서는 --save 옵션이 기본값으로 설정되므로 생략해도 된다.
   

3. npm install
   해당 파일들을 머지한 최신화된 브랜치를 당겨 온 팀원들은 앱 실행 전, npm install 명령어를 실행한다. 이는 스프링 프로젝트의 build.gradle에 새로운 라이브러리를 의존 주입한 후 re-build 해주는 과정과 닮았다고 생각했다.

4. 앱이 정상적으로 실행됨을 확인할 수 있다.