From 45668d28866a5df961c539e3e8dd319691e22bd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80?= Date: Fri, 24 Apr 2026 00:23:20 +0900 Subject: [PATCH] docs(kr): add Korean translation for Handling Assets guide --- .../docs/guides/examples/handling-assets.mdx | 118 ++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 src/content/docs/kr/docs/guides/examples/handling-assets.mdx diff --git a/src/content/docs/kr/docs/guides/examples/handling-assets.mdx b/src/content/docs/kr/docs/guides/examples/handling-assets.mdx new file mode 100644 index 0000000000..5b4870f1d0 --- /dev/null +++ b/src/content/docs/kr/docs/guides/examples/handling-assets.mdx @@ -0,0 +1,118 @@ +--- +title: Handling Assets +sidebar: + order: 5 +--- + +import { FileTree, Aside } from '@astrojs/starlight/components'; + +Assets는 프로젝트에서 사용하는 정적 파일입니다. FSD에서는 assets도 코드와 같은 기준으로 배치합니다. +파일 유형별로 모으지 말고, 사용하는 곳을 기준으로 묶어야 합니다. 그리고 해당 assets를 사용하는 컴포넌트 가까이에 두는 것이 좋습니다. + + + +## Slice 내부의 Assets \{#slice-specific-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 \{#non-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 \{#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} + +Global assets에는 전역 스타일시트(CSS reset 등)와 폰트가 포함됩니다. +이런 파일은 프로젝트 전체에서 공통으로 사용되며, 보통 진입 지점에서 설정됩니다. 따라서 `app` layer에 두는 것이 적절합니다. + + +- app/ + - styles/ + - reset.css + - global.css + - main.ts + + +## Public 폴더 \{#public} + +대부분의 bundler와 framework는 프로젝트 루트에 `public` 폴더를 제공합니다. +이 폴더에 있는 파일은 별도의 처리 없이 그대로 제공됩니다. + +[Vite](https://vite.dev/config/shared-options#publicdir)처럼 `public` 폴더 위치를 바꿀 수 있는 도구도 있고, [Astro](https://docs.astro.build/en/basics/project-structure/#public)처럼 이를 지원하지 않는 도구도 있습니다. 빌드 도구가 이 위치 변경을 지원하지 않아도 문제는 없습니다. `public` 폴더는 FSD 구조의 일부가 아니므로 이름 충돌도 일으키지 않습니다. + +## 요약 \{#summary} + +| Asset 종류 | 위치 | +|------------|----------| +| Slice별 assets | 해당 slice 내부 (예: `pages/home/ui/`) | +| 재사용하는 아이콘, 이미지 | `shared/ui/` | +| 전역 스타일 | `app/styles/` | +| 폰트 | `app/fonts/`, `public/` 또는 `app/public` | +| 정적 파일, favicon | `public/` 또는 `app/public` | + +원칙은 단순합니다. asset은 사용하는 slice에 배치하고, 여러 slice에서 재사용하는 경우에만 `shared`로 옮깁니다.