Yarn Berry로 React Native 프로젝트 시작하기

Yarn Berry로 React Native 프로젝트를 관리해보자.

https://dev-yakuza.posstree.com/ko/react-native/install-on-mac/

맥(Mac)에 react native 개발 환경 구축하기

기본적으로 위 글을 참고했다. Yarn Berry라는 특수성이 더해졌을 뿐이다.. 🫐

 

🫐 Yarn Berry 간략하게 이해하기

• Yarn 2.0 이후부터 Yarn Berry라고 지칭한다.
• Plug'N'Play(PnP) 라는 방식을 사용한다.
• node_modules 폴더 대신 .yarn/cache 폴더와 .pnp.cjs를 사용한다.
• 내 프로젝트가 Yarn Berry로 관리되고 있는지를 확인하기 위해서는, .yarn/cache 폴더가 있는지 확인하면 된다. 그 안에 의존성들이 zip 형식으로 저장되어 있다.

 

❌ Yarn Berry PnP가 React Native와 호환되지 않는 문제

 

Yarn 공식 사이트의 Compatibility Table을 확인해보면, React Native는 PnP 방식과 호환이 되지 않는다는 것을 확인할 수 있다. 이 경우 node_modules 플러그인을 사용해야 한다고 명시되어 있다. 참고로 PnP 방식과 호환이 되지 않는 이유는 React Native가 node_modules의 구조에 많이 의존하기 때문이라고 한다.

 

✅ node_modules plugin 사용하기

node_modules 폴더 대신 .yarn/cache와 .pnp.cjs를 사용하는 Yarn Berry에서, 기존 node_modules 방식을 사용할 수 있게 해주는 플러그인이다. 적용 방법은 간단하다.

 

yarn install 이전에 프로젝트 최상단에 .yarnrc.yml 파일을 생성한다. 파일 안에는 다음 내용을 작성한다.

nodeLinker: node-modules

해당 설정으로 인해, Yarn Berry 이전의 방식대로 프로젝트를 설치하게 된다. 결과는 다음과 같다. 

 

결과적으로 다음 네 가지가 프로젝트 폴더 내에 존재한다.

• .yarn/cache 폴더
• node_modules 폴더
• yarn.lock 파일
• package.json 파일

 

🤷🏻‍♀️ Zero-Install 은?

내가 궁금했던 점은 node_modules 플러그인 사용 시에도 Zero-Install이 적용될 수 있는지였다. 참고로 Zero-Install이란, Yarn Berry에서 의존성을 버전 관리에 포함하는 것을 뜻한다. 결론적으로 이야기하자면 가능하다고 한다.

 

 

(번역하자면) yarn install 시 .yarn/cache를 체크해서 node_modules 폴더를 생성한다. 의존성을 새로 다운 받는 건 아니기 때문에(there's not network fetching) 순수 PnP와 비교했을 때 시간 차이는 크지 않다. 

그래서 기존과 동일하게 .yarn/cache는 Github에 올리고, node_modules는 gitignore에 추가했다. 

 

References

PnP compatibility table
react-native-community : yarn PnP 지원 관련 issue
How to use Yarn 3 with React Native