Handling Assets

Assets는 프로젝트에서 사용하는 정적 파일입니다. FSD에서는 assets도 코드와 같은 기준으로 배치합니다.
파일 유형별로 모으지 말고, 사용하는 곳을 기준으로 묶어야 합니다. 그리고 해당 assets를 사용하는 컴포넌트 가까이에 두는 것이 좋습니다.

Slice 내부의 Assets

asset이 하나의 page, widget, feature 에서만 사용된다면, 그 slice 내부에 두는 것을 권장합니다.
이렇게 하면 캡슐화를 유지할 수 있고, 그 asset이 어디에 속하는지도 분명해집니다.

디렉터리pages/
- 디렉터리home/
  - 디렉터리ui/
    hero-image.jpg
    HomePage.tsx
  - index.ts

UI에서 이미지처럼 정적 파일을 많이 사용한다면 ui segment 안에 하위 폴더를 만들어 정리할 수 있습니다.

디렉터리pages/
- 디렉터리home/
  - 디렉터리ui/
    디렉터리previews/
    cake.jpg
    pizza.jpg
    …
    HomePage.tsx
  - index.ts

UI가 아닌 Assets

UI에 직접 표시되지 않는 asset이라도 특정 비즈니스 로직과 함께 사용된다면 model segment에 둡니다.
예를 들어, 아래 구조에서 invoice-template.pdf는 UI 요소는 아니지만 create-invoice.ts와 함께 사용되는 asset입니다.

디렉터리features/
- 디렉터리billing/
  - 디렉터리model/
    invoice-template.pdf
    create-invoice.ts
  - index.ts

이렇게 관련 파일을 가까이 배치하면 함께 변경하거나 검토하기 쉬워지고, 변경 영향도도 더 쉽게 추적할 수 있습니다.

Shared Assets

정적 asset을 여러 곳에서 재사용한다면 shared/ui로 옮길 수 있습니다.
이렇게 하면 프로젝트의 다른 부분에서도 같은 asset을 공통으로 사용할 수 있습니다.

디렉터리shared/
- 디렉터리ui/
  - 디렉터리placeholders/
    cake.jpg
    pizza.jpg
    …

이 방식은 shared layer의 컴포넌트가 사용하는 정적 asset에도 동일하게 적용할 수 있습니다.

디렉터리shared/
- 디렉터리ui/
  - Dropdown.tsx
  - chevron.svg

Global Assets

Global assets에는 전역 스타일시트(CSS reset 등)와 폰트가 포함됩니다.
이런 파일은 프로젝트 전체에서 공통으로 사용되며, 보통 진입 지점에서 설정됩니다. 따라서 app layer에 두는 것이 적절합니다.

디렉터리app/
- 디렉터리styles/
  - reset.css
  - global.css
- main.ts

Public 폴더

대부분의 bundler와 framework는 프로젝트 루트에 public 폴더를 제공합니다.
이 폴더에 있는 파일은 별도의 처리 없이 그대로 제공됩니다.

Vite처럼 public 폴더 위치를 바꿀 수 있는 도구도 있고, Astro처럼 이를 지원하지 않는 도구도 있습니다. 빌드 도구가 이 위치 변경을 지원하지 않아도 문제는 없습니다. public 폴더는 FSD 구조의 일부가 아니므로 이름 충돌도 일으키지 않습니다.

요약

Asset 종류	위치
Slice별 assets	해당 slice 내부 (예: `pages/home/ui/`)
재사용하는 아이콘, 이미지	`shared/ui/`
전역 스타일	`app/styles/`
폰트	`app/fonts/`, `public/` 또는 `app/public`
정적 파일, favicon	`public/` 또는 `app/public`

원칙은 단순합니다. asset은 사용하는 slice에 배치하고, 여러 slice에서 재사용하는 경우에만 shared로 옮깁니다.