Next.js와 FSD 아키텍처

저는 백엔드 개발자이고, 프론트엔드 개발은 처음임을 밝힙니다.

며칠간 FSD에 대한 학습을 이어왔지만 이해의 어려움과 경계의 명확성을 제대로 못잡은 상태입니다. FSD 아키텍처를 먼저 사용해보신 선배님들이나, 학습중인 분들께 제가 궁금했던 내용에 대한 인사이트를 얻을 수 있길 바라며 글을 적습니다.

1. 같은 Layer - 같은 Slice 하위의 Slice 파일들간의 import는 허용되는가? entities/user라는 디렉토리를 만들었다고 가정하겠습니다. (커스텀은 가능하지만 FSD 기술문서의 가이드라인에 따라) ui, model, lib, config, api의 Segment가 생성될 수 있을 것이고, 하위에 파일들이 만들어질 수 있을 텐데요. 일반적인 개발 흐름으로 생각해본다면, ui Segment 하위 파일은 model Segment를 Import하여 사용하는게 적합하다고 생각합니다. 따라서, ui segment의 파일은 model segment 파일을 import하는 것이 필연적이라고 생각하고 있는데요. 이는 FSD아키텍처의 규칙에 허용되는지에 대한 질문입니다.

이러한 질문을 드린 이유는, slice간 의존성은 "엄격하게 금지"되어 있는데 그 하위의 Segment도 확장해야하는지의 궁금증이 있었고 공식문서를 아무리 찾아봐도 관련해 찾아볼 수 없어서 여쭤보게되었습니다.

2. Next.js에서의 app louter의 책임 범위 app router가 작동하는 app 디렉토리에서의 책임 범위는 "라우팅만 해야한다"라고 생각하고 있습니다. 따라서, pages layout에서 모든 레이아웃과 스타일링이 적용되어진 파일을 app router가 받아서 사용할 수 있도록 해야한다고 생각하고 있는데요. 이러한 목적을 달성하기 위해 골조를 이루는 단순 /app/layout.tsx를 작성하고, 각 pages layout에서 import해와 사용하는 방식이면 어떨까? 라는 생각해봤습니다.

예시 코드는 다음과 같습니다.

• src/app/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
    {children}
    </>
  );
}

• src/app/pages.tsx
  • views의 경로는 pages로 생각해주시면 감사하겠습니다.

import { HomeBaseLayout, HomePage } from "@views/index"; 

export default function Home() {
  return (
    <HomeBaseLayout>
      <HomePage />
    </HomeBaseLayout>
  );
}

이러한 방식에 대해서 어떻게 생각하시는지 궁금합니다.

질문이 잘 전달 되었길 바랍니다...! 감사합니다.