개발자
micro repo 세팅하면서 격은 문제(같은 문제 격는 분들 댁글)
이번 프로젝트에서 하나의 레포지토리에서 client, server, admin, common 4가지 패키지를 만들었습니다. client, server, admin은 common을 의존하도록 모노레포로 만들었고, client는 admin을 의존할 수 있게 micro로 만들었습니다. 간단한 패키지 설명: - client: 메뉴 헤더 등 구현, 페이지는 admin을 remote 해서 사용, React로 구현 - admin: 페이지에 나오는 콘텐츠의 전반적인 부분이 컴포넌트로 되어있음, React로 구현 - server: Node.js로 되어있고 실제 Spring 서버에서 준 데이터를 포맷하는 형태 - common: 공통 컴포넌트, 라벨 등 문제1: 다른 프로젝트에서 expose 되어있는 Next.js 프로젝트(scss로 스타일 구현)를 client에서 사용할 때 의존성 관련 오류가 생깁니다. client의 package.json에서 peerDependencies로 next를 설정해줘야 하는지, 양쪽 패키지(다른 프로젝트와 client)에서 Next.js와 React를 share 설정을 해야 되는지 잘 모르겠습니다. 여러 방법으로 시도는 해봤지만 의존성 오류나 Next.js에서 훅을 사용 못하는 오류 때문에 해결하지 못하고 있습니다. 문제2: 빌드 최적화를 위해 트리쉐이킹이나 코드 스플리팅을 해야 합니다. 웹팩에서 아래와 같이 코드 스플리팅을 하면 청크 파일 이름이 겹치기 때문에 filename을 해시값으로 설정해야 합니다. 여기서 문제가 생기는데, micro의 client처럼 remote 하는 부분에서 remote.js, app.js 청크가 필요하기 때문에 이름이 해시값으로 바뀌면 해당 청크를 찾을 수 없습니다. 또한 ModuleFederationPlugin이 빌드 시 자동으로 코드 스플리팅을 해준다는 이야기도 있는데, 이 부분은 정확하지 않습니다. 저와 같은 문제를 격고 있거나 해결하신 분들 같이 나눴으면 합니다.
1filename: '[name].[contenthash].js',
2optimization: {
3 splitChunks: {
4 chunks: 'all',
5 name: false, //이름 충돌 방지
6 },
7 runtimeChunk: 'single', //single'로 설정하여 런타임 청크를 단일 파일로 분리.
8},
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 08월 09일
문제1에 대한 해결책으로는, 의존성 오류가 발생하는 경우 보통 모듈이 중복으로 설치된 것이 원인일 수 있습니다. 이런 경우 package.json에서 peerDependencies를 설정하면 문제가 해결될 수 있지만, 모든 상황에 적합한 방법은 아닙니다. `npm dedupe`을 실행하여 중복 의존성을 제거해보시기 바랍니다. 또 다른 방법으로는 Yarn 2의 Plug'n'Play(PnP) 기능을 사용하는 것입니다. 이 기능은 Node.js의 require() 함수를 재정의하여 패키지들이 서로를 접근할 때 항상 일관된 버전을 쓸 수 있도록 합니다. 문제2에 대한 해결책으로는, webpack에서 외부로 노출하는 모듈 이름이 변경되지 않도록 설정파일을 수정하는 것입니다. 이렇게 하면 내부적인 청크 파일 이름은 해시값으로 바뀌어 최적화가 가능하고 동시에 외부에서 정상적으로 접근할 수 있습니다. Webpack의 output.library 옵션과 ModuleFederationPlugin의 name 옵션을 활용해야 합니다. ```javascript output: { filename: '[name].[contenthash].js', library: '[name]', }, plugins: [ new ModuleFederationPlugin({ name: 'app', // ... }), // ... ], ``` 위 예제의 경우 app.js라는 이름을 가진 외부 모듈은 항상 동일한 이름을 유지하므로 micro frontends에서 정상적으로 가져와 사용할 수 있습니다. 이렇게 설정되면, webpack 내부 최적화 기능인 코드 스플리팅을 자유롭게 활용할 수 있습니다. 다만, 이 설정은 모든 청크에 대해 작동하기 때문에 필요한 청크만 선택하여 적용하는 것이 필요할 수 있습니다. 이를 위해서는 output.library와 함께 SplitChunksPlugin의 test 옵션 등을 적극 활용하시기 바랍니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!