목적
두 개의 프로젝트에서 공통으로 사용하는 함수 및 타입을 담아두기 위해 shared라는 프로젝트를 생성해서 불러오며 유지보수를 편하게 하자.
이유
- 각 프로젝트에서 한쪽에 만들어놓고 불러오든 양쪽에 다 만들든 정리도 유지보수도 제대로 안되는 느낌을 받았습니다.
- 프로젝트 개발 초기부터 이러한 구조를 원했는데 pnpm 문서에 나와있는대로 작업을 해도 nextjs에서 프로젝트 외부의 함수를 제대로 불러오질 못하는 이슈때문에 적용을 못하고 미뤄왔습니다.
pnpm 적용
1. pnpm 프로젝트 생성
2. monorepo 설정
3. package.json name 설정
각 프로젝트에서 pnpm init 을 해줘도되고 직접 package.json을 생성해도 됩니다.
- (filter) : 특정 패키지에 대해서만 스크립트를 실행하는것을 의미합니다.
- (recursive) : 모든 패키지에 대해 스크립트를 실행합니다.
4. pnpm-workspace.yaml 생성
5. 공통 모듈 공유
shared 사용
- shared/src 에 공통으로 사용할 함수및 타입을 export로 자유롭게 생성해 줍니다.
- shared/index.ts 에 생성한 함수 및 타입을 export 해줍니다.
shared/index.ts 예시
- 사용 예시
이슈 해결
프로젝트 중에 다음과 같이 진행을 하였는데 nextjs에서 import 를 제대로 못하는 이슈가 있었습니다.
다행히 해결방법을 찾을 수 있었는데,
stackoverflow 참고 - How to fix "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."
ts loader가 제대로 동작을 못해서 그렇다하지만 현재 nextjs swc 트랜스파일러를 사용하는게 디폴트로 되있는데 왜 안되는건지 이해는 잘 안되었습니다. 그래도 next.config.js 에 설정을 추가하니 다행히 잘 되긴했습니다.