Longest Common Subsequence | 알고달레
알고달레
Next.js에서 Feature Sliced Design(FSD)을 적용할 때 폴더 구조에 어려움이 있었습니다. FSD의 레이어 중 하나인 pages 폴더 이름을 사용해야 하는데, Next.js에서도 pages 폴더 이름을 사용하고 있기 때문이에요. (Next.js는 내부적으로 pages 폴더 하위의 파일 이름을 엔드포인트로 라우팅을 구현함)
이 문제를 해결하기 위해 FSD 공식 홈페이지에서는 최상위에 app 폴더를 만들어 Next.js의 app routing을 사용하고, src/pages 폴더를 만들어 FSD의 pages 네이밍 컨벤션을 지키도록 권장하고 있어요. 이렇게 하면 FSD와 Next.js의 네이밍 컨벤션을 모두 지킬 수 있어요.
하지만 또 다른 진짜 문제가 생겼습니다. 클라이언트 컴포넌트에서 서버 액션을 사용하는 경우, next build를 하면 아래와 같은 에러가 발생했어요.
./node_modules/next/dist/client/components/router-reducer/reducers/server-action-reducer.js
Module not found: Can't resolve 'react-server-dom-webpack/client'
추측컨대, Next.js pages 라우터에서는 src/pages 하위의 파일을 모두 클라이언트 컴포넌트로 취급하기에, 'use server' 실행 위치 때문에 발생하는 문제가 아닌가 싶어요. 폴더 이름을 src/pages에서 src/views로 변경했더니 빌드가 성공했어요. 또한 'use server'를 삭제해도 빌드가 성공했습니다.
FSD와 Next.js app router를 함께 사용하시는 분들은 참고하시면 도움이 될 것 같아요!
위 에러의 정확한 원인을 아시는 분이 계시다면 설명해주시면 큰 도움이 될 것 같습니다. 😊
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 6월 5일 오후 12:41
코
... 더 보기IT 회사의 업무에서, 지금까지는 디자이너와 특히 개발자가 병목이었는데, 대 AI 시대에는 기획자가 병목이 될 수도 있겠다. 조금이라도 규모가 있는 기업에서의 가장 큰 병목은 보통 의사결정자라는 것을 생각해보면 그렇다.
즉, 실무보다 의사결정을 AI에게 맡기는 것이 병목을 해소할 수 있는 가장 확실한 방법이며, 그러므로 부장님과 사장님을 AI로 대체하는 것이야말로 인류의 번영을 위한 가장 빠른 지름길이다. (아님. 아니 맞나?!)