Next, MSW 그리고 ESlint

 

모노레포 구조에서 세팅된 ESLint 오류가 화면에 보이지 않는 문제

---

현재 진행중인 프로젝트에서는 모노레포 구조를 채택하여 개발을 이어나가고 있는데, 이상하게 ESlint 오류가 보이지 않았습니다.

근데 또 다 안보이는 것도 아니고, 몇개는 보이고 몇개는 보이지 않는 문제도 발생했구요.

또 화면에는 다 안잡히지만 eslint 명령어를 통해 확인하면 보이지 않던 오류가 다 발견되었습니다.

이 부분에서 저는 eslint 기능의 문제라기보단 IDE를 의심하기 시작했습니다.

근데 보통 IDE를 의심하게되면 '내 IDE 설정의 잘못'으로 이해하지, 다른 사람들까지 그럴거라고는 생각하지 않잖아요.

저를 더 혼란스럽게 만들었던 건, 다른 팀원들도 ESlint 오류가 보이지 않았습니다. 모두 같은 증상이었다는 것이죠.

그냥 무시하고 넘어가고 싶었으나 해당 프로젝트에 추가적으로 적용되어있던 husky에서 lint-staged 에서 계속 잡으니 커밋 자체가 되지 않아 해결하지 않고서는 넘어갈 수 없었습니다.

그러다 발견한 글이 하나 있었습니다. 바로 모노레포 구조에서 VSCODE의 eslint extension에 문제가 있다는 이야기였습니다.

• turborepo와 vscode, 그리고 eslint

작성자분게서는 turborepo를 사용중에 문제를 발견하셨지만 비단 turborepo의 문제만은 아니고 모노레포를 사용하면 겪을 수 있는 문제일 거라고 하셨는데 맞았습니다.

저는 pnpm을 통해 모노레포를 구성하고 있었거든요.

저 글이 기니 요약을 해보자면,

• 모노레포 환경에서 특정 eslint의 config를 extension에 넣고 추가적으로 @typescript-eslint/parser를 사용하며, parserOptions.project를 설정해줘야 할 때 오류가 발생합니다.
• 이를 해결하기 위해서는 VSCODE상의 eslint 옵션에서 workingDirectories의 값을 auto로 설정해주어야 합니다.

이 글을 보면서 추가적으로 인지할 수 있었던 사실은, 이분과 내가 모두 airbnb 린트 설정을 사용하고 있었다는 점입니다.

또, airbnb 린트 설정을 하기 전에는 eslint 에러가 정상적으로 표시되었다는 점 (이분도 turborepo 기본값에서는 정상적으로 동작했다고 해요)

위의 이유를 미루어보아 airbnb lint 설정 내지 plugin간의 충돌이 발생하고 있음을 알 수 있었습니다.

시간이 되면 이를 분석해서 기여를 좀 해보고싶은데.. 일단 프로젝트 개발을 끝내고 생각해봐야겠습니다.

 

MSW - Next간의 충돌 문제

---

API 모킹을 하기 위해 사전에 next 프로젝트에서 msw 세팅을 해주었는데, 제 환경에서 다음과 같은 오류가 발생했습니다.

⨯ SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON    at JSON.parse (<anonymous>)    at AsyncResource.runInAsyncScope (node:async_hooks:206:9)

⨯ TypeError: Cannot read properties of null (reading 'useContext')    at t.useContext (/Users/swarvy/Repository/attraction_fe/node_modules

 

일단 위의 내용부터 설명을 드리면, 저희 프로젝트에서는 msw 세팅을 server만 세팅하고 browser 세팅을 하지 않았으며, 이를 해결하기 위한 대책으로 Next의 reWrite 기능을 사용했습니다.

일종의 프록시 기능인데, 제가 생각했을 때 msw는 요청이 발생하면 해당 요청을 인터셉트하여 응답을 주는 것 이기 때문에 별도의 프록시는 필요하지 않다고 생각했습니다.

또, 제 환경에서 MSW로 향하는 api 요청에 파라미터가 2번씩 들어가는 문제를 발견, 이를 해결하기 위해 reWrite 기능을 지우고 실행을 시켰습니다.

reWrite를 통해 실행시켰을 때 정상적으로 동작하는가 싶었더니 위의 에러가 발생하며 간헐적으로 페이지 렌더링이 되지 않는 문제를 확인했습니다.

이슈를 확인해 본 결과 MSW에서 Next app router를 완벽하게 지원하고있지 않으며 + 사용하기 위해서는 browser worker와 server를 모두 설정해야 한다는 것 이었습니다.

아쉽게도 저희 프로젝트는 해당 해결 방법을 사용해도 문제를 해결할 수 없었습니다.

더 파보고싶었지만 애초에 MSW에서 아직 App router를 정식지원하지 않고 있으며, 위의 둘 에러는 Next 자체의 에러에 가까웠기때문에 저희 수준에서는 해결이 힘들다고 보았고,

방법이 없는 것 같진 않지만, 프로젝트 진행중이기때문에 msw에 이 이상 시간이 들어간다면 안될 것 같아 일단 해당 문제는 건너뛰고 다음에 찾아보기로 했습니다.

저는 아래 이슈를 학습한 뒤 다음 프로젝트 때 적용해볼 예정입니다.

• TypeError: Cannot read properties of null reading 'useContext'
• Next.js Project Fails to Compile due to Package path ./browser is not exported from package /node_modules/msw
• Support Next.js 13 App Router

 

next lint는 모두를 검사하지 않아

---

위의 lint 문제와 연계되는 사항이었는데, next lint를 찍었는데 문제가 발생하지 않는걸 확인했음에도 불구하고 eslint 커맨드를 사용하면 린트 에러가 발견되었습니다. 해당 내용에 대해서 더 찾아본 결과…

next lint의 경우에는 기본적으로 pages/, app/, components/, lib/, src/ 만을 검사한다는 것 이었습니다.

해당 내용을 확인하고 커맨드를 변경했더니 정상적으로 eslint를 통해 로직을 검사할 수 있었습니다.

 

모노레포 구조에서 세팅된 ESLint 오류가 화면에 보이지 않는 문제

---

현재 진행중인 프로젝트에서는 모노레포 구조를 채택하여 개발을 이어나가고 있는데, 이상하게 ESlint 오류가 보이지 않았습니다.

근데 또 다 안보이는 것도 아니고, 몇개는 보이고 몇개는 보이지 않는 문제도 발생했구요.

또 화면에는 다 안잡히지만 eslint 명령어를 통해 확인하면 보이지 않던 오류가 다 발견되었습니다.

이 부분에서 저는 eslint 기능의 문제라기보단 IDE를 의심하기 시작했습니다.

근데 보통 IDE를 의심하게되면 '내 IDE 설정의 잘못'으로 이해하지, 다른 사람들까지 그럴거라고는 생각하지 않잖아요.

저를 더 혼란스럽게 만들었던 건, 다른 팀원들도 ESlint 오류가 보이지 않았습니다. 모두 같은 증상이었다는 것이죠.

그냥 무시하고 넘어가고 싶었으나 해당 프로젝트에 추가적으로 적용되어있던 husky에서 lint-staged 에서 계속 잡으니 커밋 자체가 되지 않아 해결하지 않고서는 넘어갈 수 없었습니다.

그러다 발견한 글이 하나 있었습니다. 바로 모노레포 구조에서 VSCODE의 eslint extension에 문제가 있다는 이야기였습니다.

• turborepo와 vscode, 그리고 eslint

작성자분게서는 turborepo를 사용중에 문제를 발견하셨지만 비단 turborepo의 문제만은 아니고 모노레포를 사용하면 겪을 수 있는 문제일 거라고 하셨는데 맞았습니다.

저는 pnpm을 통해 모노레포를 구성하고 있었거든요.

저 글이 기니 요약을 해보자면,

• 모노레포 환경에서 특정 eslint의 config를 extension에 넣고 추가적으로 @typescript-eslint/parser를 사용하며, parserOptions.project를 설정해줘야 할 때 오류가 발생합니다.
• 이를 해결하기 위해서는 VSCODE상의 eslint 옵션에서 workingDirectories의 값을 auto로 설정해주어야 합니다.

이 글을 보면서 추가적으로 인지할 수 있었던 사실은, 이분과 내가 모두 airbnb 린트 설정을 사용하고 있었다는 점입니다.

또, airbnb 린트 설정을 하기 전에는 eslint 에러가 정상적으로 표시되었다는 점 (이분도 turborepo 기본값에서는 정상적으로 동작했다고 해요)

위의 이유를 미루어보아 airbnb lint 설정 내지 plugin간의 충돌이 발생하고 있음을 알 수 있었습니다.

시간이 되면 이를 분석해서 기여를 좀 해보고싶은데.. 일단 프로젝트 개발을 끝내고 생각해봐야겠습니다.

 

MSW - Next간의 충돌 문제

---

API 모킹을 하기 위해 사전에 next 프로젝트에서 msw 세팅을 해주었는데, 제 환경에서 다음과 같은 오류가 발생했습니다.

⨯ SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON    at JSON.parse (<anonymous>)    at AsyncResource.runInAsyncScope (node:async_hooks:206:9)

⨯ TypeError: Cannot read properties of null (reading 'useContext')    at t.useContext (/Users/swarvy/Repository/attraction_fe/node_modules

 

일단 위의 내용부터 설명을 드리면, 저희 프로젝트에서는 msw 세팅을 server만 세팅하고 browser 세팅을 하지 않았으며, 이를 해결하기 위한 대책으로 Next의 reWrite 기능을 사용했습니다.

일종의 프록시 기능인데, 제가 생각했을 때 msw는 요청이 발생하면 해당 요청을 인터셉트하여 응답을 주는 것 이기 때문에 별도의 프록시는 필요하지 않다고 생각했습니다.

또, 제 환경에서 MSW로 향하는 api 요청에 파라미터가 2번씩 들어가는 문제를 발견, 이를 해결하기 위해 reWrite 기능을 지우고 실행을 시켰습니다.

reWrite를 통해 실행시켰을 때 정상적으로 동작하는가 싶었더니 위의 에러가 발생하며 간헐적으로 페이지 렌더링이 되지 않는 문제를 확인했습니다.

이슈를 확인해 본 결과 MSW에서 Next app router를 완벽하게 지원하고있지 않으며 + 사용하기 위해서는 browser worker와 server를 모두 설정해야 한다는 것 이었습니다.

아쉽게도 저희 프로젝트는 해당 해결 방법을 사용해도 문제를 해결할 수 없었습니다.

더 파보고싶었지만 애초에 MSW에서 아직 App router를 정식지원하지 않고 있으며, 위의 둘 에러는 Next 자체의 에러에 가까웠기때문에 저희 수준에서는 해결이 힘들다고 보았고,

방법이 없는 것 같진 않지만, 프로젝트 진행중이기때문에 msw에 이 이상 시간이 들어간다면 안될 것 같아 일단 해당 문제는 건너뛰고 다음에 찾아보기로 했습니다.

저는 아래 이슈를 학습한 뒤 다음 프로젝트 때 적용해볼 예정입니다.

• TypeError: Cannot read properties of null reading 'useContext'
• Next.js Project Fails to Compile due to Package path ./browser is not exported from package /node_modules/msw
• Support Next.js 13 App Router

 

next lint는 모두를 검사하지 않아

---

 

위의 lint 문제와 연계되는 사항이었는데, next lint를 찍었는데 문제가 발생하지 않는걸 확인했음에도 불구하고 eslint 커맨드를 사용하면 린트 에러가 발견되었습니다. 해당 내용에 대해서 더 찾아본 결과…

next lint의 경우에는 기본적으로 pages/, app/, components/, lib/, src/ 만을 검사한다는 것 이었습니다.

해당 내용을 확인하고 커맨드를 변경했더니 정상적으로 eslint를 통해 로직을 검사할 수 있었습니다.