React Native - pnpm으로 해도 되긴합니다만...

요즘 정말 많이 쓰고 있는 패키지 매니저 pnpm

출처 : https://dev.to/andreychernykh/yarn-npm-to-pnpm-migration-guide-2n04

React, Next.js 등 프론트 프로젝트에서 큰 문제없이 사용해왔다.

당연하게 React native 프로젝트에서 pnpm을 사용하려고 했다.

하지만 문제점을 부딪혀버렸다.

사건의 발단

React native에 Storybook을 설치해보려고 간단한 프로젝트를 진행하려고 했다.

npx create-expo-app@latest

 

일단 프로젝트를 설치해준다.

rm -rf node_modules
rm -rf package-lock.json

 

node_modules와 package-lock.json을 삭제해주고 pnpm install을 진행했다.

그리고 expo-go로 잘 실행되는지 확인했다.

pnpm start!

문제없이 expo go의 QR 코드가 떴다. 떳따떴따 비행기 날라라 날아라ㅏㅏ

그리고 맞닥들인 문제

 

뭐야 나 아무것도 안했어...

 

 

당연히 GPT는 저 문제를 해결해주지 못했고

expo github에 올라온 이슈글을 보게 되었다.

https://github.com/expo/expo/issues/27720

Running web version, getting an error: Metro error: Unable to resolve module @babel/runtime/helpers/interopRequireDefault · Iss

 

.npmrc에 node-linker=hoisted를 추가해주면 된다.

이는 공식 문서에도 나와있다.

https://docs.expo.dev/more/create-expo/#pnpm

create-expo-app

 

루트 폴더에 .npmrc 파일을 생성해주고

node-linker=hoisted

 

작성해주면 된다.

이상태에서 다시 바로 실행하면 안되고 node_modules를 삭제해준다음 pnpm install을 진행해줘야한다.

rm -rf node_modules
rm -rf pnpm-lock.yaml
pnpm install
pnpm start

그리고 expo go에서 확인해보면 무사히 성공적으로 빌드가 됨을 확인할 수 있다.

 

그럼 왜 저 node-linker를 hoisted모드로 설정해줘야 하는걸까???? 답은 공식문서에 나와있다...

React Native 프로젝트는 일반적으로 호이스팅된 node_modules를 사용해야만 작동합니다.

 

그러니까 pnpm의 장점인 isolated를 사용하지 못하고 npm, yarn과 같은 node_modules 방식을 사용해야한다는 것이다. 

 

pnpm isolated 모드가 몬데!!

pnpm의 isolated 모드는 의존성을 격리하여 관리하는 기능으로, 여러 프로젝트에서 동일한 패키지를 사용할 때 발생할 수 있는 충돌을 방지하는 데 유용합니다. 이 모드의 주요 장점은 다음과 같습니다:

1. 의존성 충돌 방지

각 프로젝트가 독립적으로 의존성을 관리하므로, 서로 다른 버전의 패키지를 사용할 수 있습니다. 이는 특히 여러 프로젝트가 동일한 패키지를 사용할 때 유용합니다.

2. 더 나은 성능

pnpm은 symlink를 사용하여 패키지를 공유하므로, 디스크 공간을 절약하고 설치 속도를 향상시킵니다. isolated 모드에서는 각 프로젝트의 의존성이 격리되어 있어, 필요할 때만 패키지를 설치합니다.

3. 명확한 의존성 트리

각 프로젝트의 의존성이 명확하게 구분되므로, 어떤 패키지가 어떤 프로젝트에 속하는지 쉽게 파악할 수 있습니다. 이는 디버깅과 유지보수를 용이하게 합니다.

4. 개발 환경의 일관성

여러 개발자가 동일한 프로젝트를 작업할 때, 각자의 환경에서 의존성이 격리되어 있어 일관된 개발 환경을 유지할 수 있습니다. 이는 팀워크를 향상시키는 데 도움이 됩니다.

5. 전역 패키지와의 충돌 방지

전역으로 설치된 패키지와의 충돌을 방지하여, 프로젝트가 의존하는 패키지의 버전이 전역 패키지에 영향을 받지 않도록 합니다.

 

이러한 장점들 덕분에 pnpm의 isolated 모드는 특히 대규모 프로젝트나 여러 프로젝트를 동시에 관리하는 경우에 유용하게 사용될 수 있습니다.

 

결론

제 개인적인 생각은 pnpm의 장점인 node_modules 경량화를 사용하지 못한다는 단점이 생겨버려서 pnpm보다는 yarn berry를 사용하는게 마음이 편하지 않을까 싶습니다.

pnpm으로 개발은 할 수 있는데!! 근데!! pnpm의 매력이 하나 사라지는 것 같습니다. 그래도 팀에서 쓰기도 하고 빠르니까 계속 쓰려고요.

나란 사람. 굳이 어려운 길을 가려는 사람.

+) 흠... pnpm을 많이 사용하는데 왜 지원을 못하는걸까?

https://reactnative.dev/blog/2023/06/21/0.72-metro-package-exports-symlinks

0.72 버전에서 Symlink을 서포트한다고 발표했었다!!

오~ 이건 여유가 되면 알아내보겠습니다.