fsd 아키텍처을 사용해보자 1 - memo app

프로젝트 개요

fsd 아키텍처에 대한 고려

메모 앱을 구성하면서 fsd 아키텍처의 내용을 학습

 

 

 

pnpm을 사용하여 Next.js 프로젝트 시작

 

> pnpm create next-app

...

✔ What is your project named? … test-fsd
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

 

app라우터를 사용하고 src 디렉터리를 사용한다.

 

 

 

src/에 fsd 아키텍처의 layouts를 구성한다.

그리고 next.js이므로 /src/app을 routing 폴더로 사용한다.

src/

--app

--features

--widgets

--shared

----ui

----style

----config

----lib

 

 

 

css를 사용하기 위해 tailwindcss를 사용

그리고 1픽셀 단위로 spacing을 사용하기 위해 아래 사이트를 참고하여, theme를 설정한다.

https://tailwindcss.com/docs/padding#customizing-your-theme

@theme {
  --spacing: 1px; 
}

 

tailwindcss에서 컴포넌트를 구성하기 위해 cva를 사용한다.

cva는 tailwindcss의 스타일을 유연하게 관리할 수 있도록 도와주는 유틸리티 라이브러리로, 컴포넌트의 variant를 지정할 수 있다.

그리고 이와 동시에 className과 cva의 tailwindcss의 클래스 명 중복과 충돌을 방지하기 위해 clsx와 tailwind-merge를 사용하여 cn함수를 구성한다.

 

또한 fsd 아키텍처를 만족시키기 위해 /shared/lib/utils.js 에 선언한다.

import clsx from "clsx";
import { twMerge } from "tailwind-merge";

// className 병합 + Tailwind 우선순위 충돌 방지
export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

 

shared 레이어의 요소들은 모든 레이어에서 사용이 가능하다.

따라서 아키텍처 전반적인 소스코드에서 사용하기 위한 유틸리티 함수이기에 cn함수는 shared의 레이어에 있는 것이 좋을 것 같다.

 

 

여기까지 프로젝트 시작을 위한 기본적인 구성을 마련했다.