Next.js에서 FSD 네이밍 적용 시 발생하는 build 문제?!

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

 • 

저장 7조회 1,433

댓글 0

    함께 읽은 게시물

    Longest Common Subsequence 자바스크립트 풀이

    ... 더 보기

    Longest Common Subsequence | 알고달레

    알고달레

    Longest Common Subsequence | 알고달레

    앱 개발 개척시대

    A

    ... 더 보기

    앱 개발 개척시대

    K리그 프로그래머

    앱 개발 개척시대

     • 

    저장 2 • 조회 866


    <일이 많다> 스타트업의 CTO는 해야하는 일이 정말 많다. 어떤 때는 인프라를 다루기도 하고, 어떤 때는 플랫폼을 만들기도 하고, 어떤 때는 프론트엔드 개발을, 어떤 때는 백엔드 개발을, 어떤 때는 모바일 개발을 하기도 한다. 여러 사람을 채용할 수 있다면 좋겠지만, 작은 회사에서 채용이란 쉽지 않은 의사결정이다. <일 할 시간 벌기> 매니저가 해야 하는 일이 여러가지가 있는데, 주된 일 중 하나는 아무래도 미팅일 것이다. 의미있는 미팅도 있지만 당연히 그냥 들어가야만 하는 미팅도 존재하고, 내가 그 자리에 앉아있는 것만으로도 효과가 발생하는 미팅도 있다. 그러나 그렇게 하다보면 자연스럽게 실제 업무를 할 시간, 그러니까 내가 일을 할 시간이 부족해지는데 그런 케이스를 방지하기 위해 Block 일정을 만들어 둘 필요는 있다. <야근에 대해서> 나도 처음에 가장 못하던 일이 아닐까 싶은데, 디테일에 과도하게 매몰되다가 자연스럽게 야근을 하게 되었다. 예를 들어 2주 정도를 야근하면, 1주 정도는 그냥 내리 쉬어야만 했고, 그 뒤로 2주는 그에 대한 여파로 업무 효율이 떨어지는 식이 많았다. 단순히 체력적인 피로도 뿐만 아니라, 2주간의 야근으로 인한 정신적인 피로도가 잘 회복이 안되더라. 그래서 내가 야근한 건 2주였지만, 실제로는 3주를 손해본 거나 다름없었다. 간혹 일정이 급할 때 그렇게 할 때가 있기는 하지만, 그럼에도 만약 야근을 해야만 해결할 수 있는 문제가 있다면, 애초에 플래닝이 잘못된 건 아닐 지 고민해보면 좋겠다. 특히 매니저라면 더욱 그런 시야가 필요하다. '지금 당장 필요한 기능인 지' 체크해보는 게 의미가 있다고 생각한다. <신뢰 자산의 관리> 조직에서 신뢰 자산은 그 무엇보다 중요한 자산이라고 생각한다. 나와 팀원간의 신뢰, 나와 다른 매니저간의 신뢰, 경영진 사이의 신뢰 등 다양한 신뢰 관계를 잘 맺어두는 것이 업무의 효율을 높이는 데 큰 도움을 준다. 신뢰도가 낮아질 수록 조직은 불신을 기반으로 한 조직 관리를 하게 되는데, 그렇게 하게 될 경우 조직 구성원들의 만족도가 떨어지게 된다. 특히 조직에 대한 애정도가 높았던 구성원일 수록 더 그렇게 되는 듯 하다. 일을 잘 할 수 있는 인재가 신뢰를 받고 일을 잘 할 수 있게 만들어 주는 것이, 어떻게 보면 관리자의 주된 역할이라고 할 수 있다. 신뢰를 잃는 순간 모든 걸 잃는다.

     • 

    댓글 3 • 저장 37 • 조회 7,842


    📰 OpenAI가 ChatGPT의 커넥터 기능을 업데이트하면서 MCP 지원을 추가했네요.

    ... 더 보기

    IT 회사의 업무에서, 지금까지는 디자이너와 특히 개발자가 병목이었는데, 대 AI 시대에는 기획자가 병목이 될 수도 있겠다. 조금이라도 규모가 있는 기업에서의 가장 큰 병목은 보통 의사결정자라는 것을 생각해보면 그렇다.


    즉, 실무보다 의사결정을 AI에게 맡기는 것이 병목을 해소할 수 있는 가장 확실한 방법이며, 그러므로 부장님과 사장님을 AI로 대체하는 것이야말로 인류의 번영을 위한 가장 빠른 지름길이다. (아님. 아니 맞나?!)

     • 

    저장 1 • 조회 2,205


    <ChatGPT를 사용해본 프론트엔드 개발자의 후기>

    <인공지능은 과연 개발자를 대체할 수 있을까?> 요즘 세상이 인공지능 이야기, 챗지피티(chatGPT)와 관련된 이야기로 떠들썩하다. 어떤 사람은 드디어 인공지능에 있어서 특이점이 왔으며 이제 곧 머지 않아 많은 직업들이 대체될 것이라고 전망했으며, 어떤 사람은 어차피 있는 데이터들을 모아서 학습을 시키는 것일 뿐, 완벽하거나 인력을 대체할 만한 수준은 아니며 분명한 한계가 존재한다고 한다. 누구의 말이 맞을까? 나는 개발자로써, 이에 대해 생각을 해보았다. 우선, 정답은 아니더라도 나의 판단에 따른 ... 더 보기

    ChatGPT를 사용해본 프론트엔드 개발자의 후기

    Brunch Story

    ChatGPT를 사용해본 프론트엔드 개발자의 후기

     • 

    댓글 3 • 저장 56 • 조회 12,322