진짜 오랜만에 블로그 포스팅을 올리게 되는 것 같습니다. 왜이렇게 오래 쉬었냐고 물어보시면.. 너무 바빠서..
공부를 안한건 아닌데 블로그 포스팅 올릴 의욕까지는 안나더라구요..

결국 다 핑계라는 이야깁니다 공부할건 엄청 많았고 그동안 지원한 것도 많았거든요.
오늘을 기점으로 다시 포스팅을 올려보려고 합니다. 회고록도 너무너무 밀려있어서 이건 한번에 다 써야할 것 같기도 하구요 ㅋㅋ

오늘은 지금 현재 제가 개발중인 프로젝트에서 만나게 된 문제들에 대해서 적어보려고 합니다.

이번 문제중에서 가장 머리를 지끈지끈하게 하는 문제였습니다.

현재 진행중인 프로젝트에서는 모노레포 구조를 채택하여 개발을 이어나가고 있는데, 이상하게 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간의 충돌이 발생하고 있음을 알 수 있었습니다.
시간이 되면 이를 분석해서 기여를 좀 해보고싶은데.. 일단 프로젝트 개발을 끝내고 생각해봐야겠습니다.

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

위의 lint 문제와 연계되는 사항이었는데, next lint를 찍었는데 문제가 발생하지 않는걸 확인했음에도 불구하고 eslint 커맨드를 사용하면 린트 에러가 발견되었습니다.
분명 확인했는데? 라고 생각하고 해당 내용을 찾아봤는데..

아뿔ㅅ ㅏ... next lint의 경우에는 기본적으로 pages/, app/, components/, lib/, src/ 만을 검사한다는 것 이었습니다.
현재 폴더구조를 FSD 아키텍쳐를 적용중이고, src 디렉토리도 사용하지 않는 저희들에겐 아무것도 해당하지 않았던 것입니다..

해당 내용을 확인하고 부랴부랴 커맨드를 변경했더니 정상적으로 eslint를 검사하기 시작했습니다.. 여러분들도 DOCS를 꼭 한번씩 읽어보시길 바랍니다.