Nx 17에 대응하여 스코프 이전하기
Nx 버전 16부터 모든 Nx 공식 플러그인들의 npm scope가 @nrwl
에서 @nx
로 이전됐다. 개인 프로젝트 레포는 Nx 뿐만 아니라 대부분의 의존성 패키지를 최신 버전으로 유지하려고 노력하고 있기에 Nx 16이 올라왔을 때 빠르게 업데이트했다.
![@nrwl](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fc8a354b0-691b-4727-b444-11483e828bbe%252FUntitled.png%3Ftable%3Dblock%26id%3Da33f9708-7a85-4a26-903d-df0fe9904ba1%26cache%3Dv2&w=3840&q=75)
@nrwl
스코프를 사용하고 있어도 버전 16까진 문제가 없다.Nx 16까지는 @nrwl
스코프를 사용해도 큰 문제가 없었다. Nx 측에서 호환성을 위해 @nrwl
스코프를 사용한 플러그인들도 함께 업데이트 해주었기 때문이다.
![글 작성자가 업로드 한 이미지](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fa8366716-f2c4-4cb1-b4a0-f71ba4b32cbe%252FUntitled.png%3Ftable%3Dblock%26id%3De2f68956-eed2-4bf7-87f0-2ac491273d7a%26cache%3Dv2&w=3840&q=75)
하지만 다음 버전부턴 문제가 생긴다. 바로 버전 17부터는 @nrwl
스코프를 버리기로 선언한 것이다. 혼자 관리하고 있는 레포이기 때문에 귀찮아서 스코프 이전까진 차일피일 밀어두고 있었는데, 당장 발등에 불이 떨어진 격이라 결국 스코프 이전 작업을 하기로 결정했다.
자 근데, 뭘 해야할까요?
문제가 생겼지만 무엇을 해야할 지 모르는 나 같은 사람들을 위해 친절하게도 Nx에서 Rescope 가이드를 제공하고 있다.
nx migrate
실행하기
먼저 Nx에서 해당하는 버전으로 업그레이드 할 수 있도록 도와주는 기능인 nx migrate latest
명령을 실행했다.
yarn nx migrate
결과:
Fetching meta data about packages.It may take a few minutes
...
> NX The migrate command has run successfully.
- package.json has been updated. - migrations.json has been generated.
> NX Next steps:
- Make sure package.json changes make sense and then run 'yarn', - Run 'yarn nx migrate --run-migrations' - To learn more go to https://nx.dev/core-features/automate-updating-dependencies - You may run 'yarn nx connect-to-nx-cloud' to get faster builds, GitHub integration, and more. Check out https://nx.ap
Next step으로 알려준 단계를 진행했다. 먼저 업데이트 된 package.json
에 맞는 패키지를 설치하기 위해 yarn
을 실행해줬다.
yarn
패키지 설치가 끝나고, 다음 migrate 단계를 진행한다.
yarn nx migrate --run-migrations
직접 @nrwl 스코프 바꿔주기
원래 그런건지는 모르겠지만 나는 파일들에 있는 @nrwl 스코프들이 거의 바뀌지 않았다. 그래서 일일이 직접 바꿔주어야 했는데… 이건 또 손이 많이 가는 작업이지 않는가? 그래서 내가 찾은 방법은 바로 ‘찾아 바꾸기’다.
![글 작성자가 업로드 한 이미지](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fd172fc1f-adf8-4a76-96fb-79f1992afb0f%252FUntitled.png%3Ftable%3Dblock%26id%3D7a2beb3b-9c0c-4a2d-8b69-a11efe5635f1%26cache%3Dv2&w=3840&q=75)
여기서 바꿔야할 것들을 검토하며 모두 바꿔주었다.
![글 작성자가 업로드 한 이미지](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fe3963975-b3c9-4e41-8cd5-21ef26a42c2a%252FUntitled.png%3Ftable%3Dblock%26id%3Db9c9af8b-7645-4c5f-b3e5-9eee95374b8e%26cache%3Dv2&w=3840&q=75)
그리고 package.json
에 있는 @nrwl
스코프를 사용하는 패키지를 제거했다.
yarn remove '@nrwl/*'
스코프 삭제 기능은 패키지 매니저가 지원하는 경우에만 가능하다. Yarn 참고 링크
작업 후 테스트
![글 작성자가 업로드 한 이미지](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F4d1ad843-26bc-4000-8ad1-43966e4bbf15%252FUntitled.png%3Ftable%3Dblock%26id%3Db666ca24-7970-4637-8779-b4b96ce3f375%26cache%3Dv2&w=3840&q=75)
모두 바꿔주고 나서, lint
와 build
, test
등의 작업을 run-many
를 통해 실행하여 문제가 없는지 확인했다.
![글 작성자가 업로드 한 이미지](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fb78b927c-feda-4b65-9838-bb3dfe931b88%252FUntitled.png%3Ftable%3Dblock%26id%3Dd9f22dcd-0859-4476-8df6-90fb5857f4b4%26cache%3Dv2&w=3840&q=75)
또한 당연히 실제 프로덕션 배포도 해보았고, 결과는 성공이었다.
마치며
이렇게 성공적으로 @nrwl
스코프와 이별하는 작업은 성공했다. 글엔 담지 못한 eslint 문제도 있었는데, 이는 공식 nx-examples 저장소를 참고하여 해결했다.