Intro
목표로 하는 연제의 마지막 React Native를 yarn workspace 적용 입니다.
React Native는 폴더 내부의 node_modules를 사용하도록 설정 해야 합니다.
yarn berry를 지원하지 않고, node_modules를 직접 참조할때가 많습니다.
root의 node_modules를 참조하도록 설정 할 수는 있지만, 경험상 복잡하고 오류가 많았습니다.
이번 yarn berry workspace는 별도의 nohoist 설정없이, 그나마 간단한 방법으로 구성이 가능하여, 다시한번 도전 하였습니다.
수정
- 2023.03.17 전반적인 변경
React Native 앱 생성
React Native 앱 생성
먼저 Yarn Berry(v3) Workspace #1 - workspace 설정으로 워크스페이스를 생성 합니다.
그리고 apps 폴더에 react native app을 생성 합니다.
cd apps
yarn dlx react-native@latest init RnSample --directory ./rn-sample --skip-install --npm yarn'--directory ...' 생성되는 폴더의 이름에 일관성을 주기위해서 입니다. '--skip-install'은 의존성 패키지 설치과정을 하지 않고 소스만 생성하는 옵션입니다. 이 옵션 없이 앱을 생성하면 pod 처리 과정에서 오류가 발생합니다. 관련 패키지들의 설치는 워크스페이스 설정 후 진행 합니다.
node_modules를 사용할 수 있도록 설정
rn-sample 폴더에 .yarnrc.yml 파일을 생성하고 nodeLinker 방식을 정의 합니다.
# apps/rn-sample/.yarnrc.yml
nodeLinker: node-modules 다음은 root 폴더의 .yarnrc.yml 파일에서 나머지 패키지들은 모두 pnp 모드를 사용하겠다고 명시적으로 지정합니다.
# .yarnrc.yml
plugins:
- path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
spec: "@yarnpkg/plugin-typescript"
yarnPath: .yarn/releases/yarn-3.4.1.cjs
nodeLinker: pnp 다음은 외부에서의 yarn 명령어에 영향받지 않도록 설정 합니다.
루트에 .yarnignore 파일을 생성합니다.
# .yarnignore
apps/rn-sample/**rn-sample 폴더에 비어있는 yarn.lock 파일을 생성 합니다.
cd apps/rn-sample
touch yarn.lock앱 생성 마무리
# rn-sample 폴더로 이동
cd apps/rn-sample
yarn install
cd ios
pod install이 과정이 마무리되면, rn-sample 폴더 안에 node_modules 폴더가 생성되는것을 볼 수 있습니다.
워크스페이스 루트 폴더에 node_modules 폴더가 생겼다면 어딘가 잘못 된 것 입니다. 위의 과정을 차근차근 다시 실행 하여 독립적인 node_modules를 사용할 수 있도록 설정 해야 합니다.
참고
- work space 설정을 변경하였으을 경우 워크스페이스를 다시 로드해야 할 수도 있습니다.
- yarn cache clean --all 과 yarn install 명령으로 워크스페이스의 패키지 종속성을 리셋할 수 있습니다.
다음은 package.json 파일을 수정 합니다.
{
"name": "rn-sample", // 이름 변경
...
}(네이밍 규칙을 맞추기 위해 이름을 변경 한 것입니다. 필수 사항은 아닙니다. )
이제 프로젝트가 생성되었는지 테스트 합니다.
yarn start
# 새로운 shell 에서
yarn ios # 또는 android
앱이 잘 실행되면 기본 설정은 완료 된 것 입니다.
공유 라이브러리 생성
라이브러리 폴더를 생성하고, 초기화를 합니다.
cd packages
mkdir -p common/utils/src
cd common/utils
yarn init -p -ypackage.json에 이름을 수정하고, tsconfig.json을 생성하여 typescrip 설정을 합니다.
// packages/common/utils/package.json
{
"name": "@pnds/common-utils",
"packageManager": "yarn@3.4.1",
"private": true,
"main": "dist/packages/common/utils/src/index.js",
"typings": "dist/packages/common/utils/src/index.d.ts",
"files": [
"dist/**/*"
],
"scripts": {
"build": "tsc"
},
"devDependencies": {
"@types/node": "^18.15.3",
"typescript": "^4.9.5"
}
}// packages/common/utils/tsconfig.json
{
"extends": "../../../tsconfig.base.json",
"compilerOptions": {
"outDir": "./dist",
"declaration": true,
"composite": true,
},
"include": ["./src/**/*"],
"exclude": ["node_modules", "dist"]
}샘플로 사용할 샘플 라이브러리 소스코드를 만듭니다.
// packages/common/utils/src/utils/hello.ts
export const hello = () => {
console.log('hello?');
return 'hello';
};// packages/common/utils/src/index.ts
export * from './utils/hello';완료가 되면 build !!!
yarn workspace @pnds/common-utils buildReact Native에 공유 라이브러리 설정
라이브러리 종속성을 추가 합니다.
yarn workspace rn-sample add ../../packages/common/utils종속성 설치를 상대 경로 방식을 사용 하였습니다. package name (@pnds/common-utils)을 사용하면 오류가 발생하고, 오류를 해결하기 위해 몇가지 설정을 더 해야 해서, 최소한의 설정~! 을 목표로 상대경로 방식을 사용 합니다.
다음은 tsconfig.json에 paths 와 references 설정을 합니다.
// packages/native-sample/tsconfig.json
{
"extends": "@tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"paths": {
"@pnds/common-utils": ["../../packages/common/utils/src"]
}
}
}
이제는 @pnds/common-utils 패키지를 정상적으로 사용할 수 있습니다. 주의할점은 라이브러리가 변경되면 해당 라이브러리를 build 하여야 합니다. 지속적으로 변경하고 변경된것을 적용해야 하는 상황이라면 라이브러리 폴더에서 tsc --watch 명령으로, 변경된 사항을 바로바로 빌드 할 수 있게 해야 합니다.
Conculution
React Native의 monorepo는 yarn class 모노레포부터 저를 괴롭혀 왔습니다.
nx workspace에서 처음에는 아무런 고민없이 편하게 사용하였지만, 폐쇠적인 환경 탓에 또다른 문제가 발생 하였습니다.
이번의 시도는, 워크스페이스를 사용하는 다른 패키지에 영향을 최소화 하고 최대한 간단한 방법으로 설정할 수 있게 하는것이 목표였습니다.
서술한 방법으로 어느정도 유연성과 안정성을 확보 했다고 생각 됩니다.
React Native의 yarn workspace 포팅을 마지막으로, 일차로 목표했던 연제를 마칩니다.
이전에 언급 했듯이 프로젝트를 진행 하면서 계속 수정되고 보완 될 예정 입니다.
더 나은 방법이나 틀린곳, 개선해야할 항목들을 많은 조언 부탁 드립니다.
