package.json / package-lock.json 주의점

React Native로 개발을 하면서 내가 겪었던 package.json / package-lock.json 에 관한 주의점을 설명하고자 한다.

package-lock.json 파일의 중요성

프로젝트에 사용될 npm package들은 package.json 파일로 관리된다.
이때 npm install 명령어로 package들이 설치가 되면 package-lock.json 파일이 생성된다.

package-lock.json 파일은 작업자의 개발환경에서 npm install 할 때 종속성 관련 정보가 package-lock.json 파일에 반영된다. npm 을 이용하여 개발을 하다보면 이 종속성 문제가 상당히 골치가 아플때가 많다.

예를 들어 A란 package의 최신 버전이 릴리즈 되어서 A package를 사용하려고 해도 다른 package에서 종속성에 문제가 발생하면 A package를 쓰지 못하거나 A package와 종속성이 관련된 package들를 찾아서 같이 버전업 해줘야 사용 가능하다.

따라서, Git 과 같은 코드 형상 관리 시스템을 이용한다면 package-lock.json 파일도 함께 Commit 해 주어야 다른 개발 환경에서도 동일한 버전의 npm 라이브러리 관리가 가능해진다.

package-lock.json 파일 누락으로 발생되는 예시

박대리 : 강과장님 이번에 새로 추가된 npm 라이브러리 추가해서 커밋했습니다. checkout 받아서 확인해 주세요.
강과장 : 박대리, 방금 checkout 받아서 확인 중인데 내 개발 환경에서는 잘 안되는데 package-lock.json 파일이 빠진거 같은데 확인좀 해줘.
박대리 : package-lock.json 파일이 누락 되었는데요. 다시 커밋했습니다.

package.json / package-lock.json 주의점

1. 버전 종속성 이슈로 꼭 해당 버전을 사용하고자 한다면 캐럿(^)을 제거하자.
   캐럿이 포함되어 있다면 minor 버전이 새로 나왔다면 package-lock.json 파일이 존재하지 않는 상태에서 npm install 시 신규 minor 버전으로 설치가 된다.
   캐럿을 제거함으로써 고정된 버전의 package 버전이 설치 된다.
   예) "react-native-reanimated": "2.2.4",

※ React Native react-native-reanimated 관련 Mobile 빌드 에러 내용

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
 ERROR  TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions')
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

package.json 파일 react-native-reanimated 캐럿(^) 제거 후 npm install로 해결

2. 특별한 사유가 없다면 package-lock.json 파일을 제거한 뒤 npm install로 새로운 package-lock.json 파일이 생성되는 것을 피해야 한다. 새로운 package-lock.json 파일이 생성되면 package.json 파일에서 캐럿(^) 가 포함된 버전은 자동으로 버전업이 되어 원치 않는 문제가 발생될 수 있다.

3. 특히 React Native 개발시에는 Web에서는 잘 작동하나 Mobile 환경에서 package 종속성 문제로 인해 빌드가 정상적으로 되지 않는 경우 package-lock.json 파일에서 버전의 변경이 발생되었는지를 살펴 봐야 한다.