Yarn Berry + Workspace 도입, 프론트엔드 패키지 모노레포 전환 (행록 서비스 + 디자인시스템 + 어드민 통합)

[dladncks1217]

📄 Summary

행록 서비스 + 행록 디자인 시스템 + 행록 어드민(예정)

대공사 였습니다 허허 삽질하느라 좀 걸렸네요
yarn berry + workspace써서 pnp로 구축했는데 의존성이 참 많이 터지더군요...
언젠가 모노레포 또 구축할 일이 있다면 어지간해서는 pnpm 쓸 것 같습니다.

+ File changed 2194개인거는 PnP 도입해서 그런거라 정상적인 pr 맞습니다. 기존 코드들 수정은 거의 없었기에 피알 어케읽나 걱정 안하셔도 됩니다.

변경사항이 참 많습니다. 하나하나 적어볼게요

---

패키지들 추가 및 버전 변화

PnP때문에 버전관리 이슈가 조금 많았는데요, 개인적으로 연락해서 상관없는지 물어본것들도 좀 있지만, 버전 문제들 터질 우려가 조금 있기도 하고, 추가한것들도 몇개 더 있어서 여기에 쭉 쓰겠습니다.

1. typescript: "^5.1.6" -> "4.9.5": typescript 버전5 이상부터 yarn typescript sdk생성이 불가능한 문제로 인해 4버전으로 내림.
2. ts-pattern: "^5.0.6" -> "^4": typescript 버전 내리고 버전이슈로 인해 4버전으로 내림.
3. @cypress/webpack-preprocessor: (추가) : npm쓸 때는 웹팩 5버전 + cypress 에서 문제가 전혀 없었는데, PnP 도입하면서 문제 발생. webpack과 cypress를 묶는 과정에서 문제가 있다고 확인 후 도입. cypress.config.mjs에서 사용
4. sentry: "7.94.1" -> "7.93.0" : Module not found: Error: Can't resolve '@sentry/utils' getsentry/sentry-javascript#10266 3일전쯤 갑자기 pnp에서 utils못찾는문제 발생, 해결 위해 다운그레이드
5. @babel/core: (추가): npm쓸 때는 peerDependency로 포함돼서 잘 돌아갔던 것 같은데, pnp로 오고나서 import를 못해오는 문제 발생. 직접 추가해줬음.
6. @types/express: (추가) : npm쓸 때는 peerDependency로 포함돼서 webpack devserver 가 돌아갔던듯. pnp 오고나서 express쪽 타입 못찾는다고 자꾸 오류내길래 추가해줌.
7. pnp-webpack-plugin : (추가) : pnp에서 webpack 쓰려하니 제대로 번들링 못하는 문제 있어서 webpack common부분 config에 넣어줘야 돌아가서 추가해줌.
8. eslint-plugin-prettier : (제거) : 사용중이 아닌듯 하여 제거했습니다.

---

프로젝트 구조

---

변경점

어드민 서비스 추가로 인해서 도입한것도 있긴 하지만,
가장 핵심적인 부분입니다. 이제 디자인시스템 배포 후 설치 후 사용 안해도 됨.
조금 불편해진 부분도 있을 수는 있지만, 이것만으로도 충분히 도입의 가치가 있다고 생각되더군요.

디자인시스템 빌드돌리고 그냥 쓰면 됩니다. 디자인시스템쪽 매핑 되어있어서 빌드돌리고 사용하면 바로 적용됨
npm 배포는 계속 별도로 하고싶으면 하면 똑같이 됩니다.

해야 하는 작업 수가 많이 줄었어요

기존 : 디자인시스템 코드 수정 -> 피알작성 -> 머지 -> npm배포 -> 배포코드 피알작성 -> 머지 -> 본프로젝트 와서 install 후 사용
모노레포 적용 후 : 디자인시스템 코드 수정 -> 빌드 -> 사용
모노레포 적용 후 npm 배포 : 디자인시스템 코드 수정 -> 빌드 -> 배포

원래 디자인시스템에 번들러로 rollup 도입하려 했었는데 당장은 아니지만 도입해도 사용하는 프로세스는 똑같을테니 상관 없지 않을까 싶습니다

---

사용 방법

pnp라서 세팅해야 할 게 조금 있습니다.

1. ZipFS 설치하기

Extensions 보면 ZipFS라고 있어요
어차피 다 vscode쓰니깐 그대로 익스텐션 받으면 됩니다.

2. workspace typescript 버전 세팅하기

위에 open workspace 누르면 워크스페이스가 켜지는데요,
들어가면 아래처럼 타입들이 다 터지는게 정상입니다.

여기서 cmd +shift + p 누르고 Typescript: Select Typescript Version을 치면 TS 버전을 선택할 수 있는데, 여기서 아래처럼 워크스페이스 버전으로 클릭해주시면 됩니다.
sdk파일 집어넣어서 아마 될거에요

2-1. 제대로 동작하지 않는다면?

monorepo root부분에 .code-workspace 코드에 "typescript.tsdk": "../../.yarn/sdks/typescript/lib",로 잘 적혀있는지 확인해주세요.
VSCode 문제인건지, 자꾸 지맘대로 얘를 수정하는 경우가 있더군요.

3. zero install에 대해

좀 골때리긴 한데 yarn을 한번 터미널에 쳐 주기는 해야하더군요? install을 하는 것은 아니지만, resolution등의 과정이 필요해 해주긴 해야합니다.

4. 프론트엔드 라벨

라벨 FE 만 있던거 FE-DesignSystem, FE-Service, FE=Admin으로 분류했습니다.
라벨 기반으로 github action CI 돌아가게 해뒀으니 피알 쓸 때 도메인에 맞게 라벨 넣으면 됩니다.

5. pnp 사용 시 prettier관련 VSCode 버전문제

prettier 쓸 때 formatOnSave 상황에서 제대로 돌아가지 않는 문제 때문에 삽질을 좀 많이 했는데, 버전업하니깐 잘 돌아가더군요.

저는 1.85.2 쓰고있습니다. 1.7x쓰고있을 때 안돼서 고생좀 했는데 잘 안되면 vscode 버전업 해보세요

---

🙋🏻 More

아직 작업 안된게 조금 있긴 한데 크리티컬한 이슈는 아닌지라 일단 피알 마무리하고 차차 고쳐나갈게여
이오가 어드민 백엔드 열심히 만들고 있길래 모노레포 전환하는거 더 끌기에는 조금 그런듯
이오햄이 프론트도 짜줄거니깐!?

생각나는대로 써봤는데 변경사항이 꽤 컸던지라 다 쓴건지 살짝 애매하긴합니다.
더 생각나면 추가하긴 할텐데, 보고 오동작하는거나 잘못된거 있으면 말해주세여

close #777

[github-actions]

로컬 cypress 테스트가 실패했습니다. 테스트 결과 자세히 보기

[github-actions]

로컬 cypress 테스트가 실패했습니다. 테스트 결과 자세히 보기

[github-actions]

로컬 cypress 테스트가 실패했습니다. 테스트 결과 자세히 보기

[jjongwa]

플젝 다시만드나요?

[dladncks1217]

플젝 다시만드나요?

어어 아닙니다

[jjongwa]

다시 만들어줘요