Skip to content

Commit f45b03d

Browse files
Gaic4o김
andauthored
docs(kr): add Korean translation for Astro integration guide (#918)
* docs(kr): add Korean translation for Astro integration guide * docs(kr): refine intro wording in Astro guide * docs(kr): improve wording in Next.js App Router conflict section * docs(kr): improve wording in Next.js App Router conflict section --------- Co-authored-by: 김 <minsu@gim-ui-Macmini.local>
1 parent 3a77d5e commit f45b03d

2 files changed

Lines changed: 81 additions & 3 deletions

File tree

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: Usage with Astro
3+
sidebar:
4+
order: 10
5+
---
6+
7+
import { FileTree } from '@astrojs/starlight/components';
8+
9+
Astro와 FSD는 모두 `pages`라는 명칭을 사용하지만, 의미는 다릅니다.
10+
Astro에서 `📁 src/pages`는 파일 기반 라우팅을 위한 폴더이고, FSD에서 `pages`는 페이지 단위를 나타내는 layer입니다.
11+
FSD의 `pages` layer를 Astro 폴더 구조에 반영하면 `📁 src/pages`를 사용하게 되는데, Astro도 같은 경로를 파일 기반 라우팅에 사용하므로 두 구조가 충돌합니다.
12+
이를 구분하기 위해 FSD의 `pages` layer는 `📁 src/_pages`에 두고, `📁 src/pages`는 Astro의 파일 기반 라우팅 전용으로 유지합니다.
13+
14+
15+
<FileTree>
16+
- src
17+
- pages Astro 라우트
18+
- 404.astro
19+
- index.astro
20+
- _pages FSD pages layer
21+
- home
22+
- ui
23+
- HomePage.astro
24+
- index.ts
25+
</FileTree>
26+
27+
`src/pages`의 파일은 FSD Layer의 페이지 컴포넌트를 불러와 렌더링하는 역할만 합니다.
28+
29+
```astro title="src/pages/index.astro"
30+
---
31+
import { HomePage } from '@/_pages/home';
32+
---
33+
34+
<HomePage />
35+
```
36+
37+
## Setting up path aliases
38+
39+
`src` 아래 파일을 `@/`로 불러오려면 `tsconfig.json`에 경로 별칭을 추가합니다.
40+
41+
```json title="tsconfig.json"
42+
{
43+
"extends": "astro/tsconfigs/strict",
44+
"compilerOptions": {
45+
"paths": {
46+
"@/*": ["./src/*"]
47+
}
48+
}
49+
}
50+
```
51+
52+
## Integration과 함께 사용하기
53+
54+
[Starlight](https://starlight.astro.build/) 같은 일부 Astro integration은 Markdown이나 MDX로 작성한 문서를 구조화해 다루는 **Content Collections** 기능을 사용합니다. 이런 integration은 보통 `📁 src/content/docs`처럼 정해진 위치에 파일이 있어야 동작합니다.
55+
56+
Integration이 요구하는 폴더 위치는 바꾸지 않고 그대로 둡니다. Content Collections 폴더는 FSD Layer와 이름이 겹치지 않는 경우가 대부분이라, `_pages``shared` 같은 FSD Layer를 이 폴더들과 나란히 둘 수 있습니다.
57+
58+
<FileTree>
59+
- src
60+
- _pages FSD pages layer
61+
- ...
62+
- content Integration이 사용하는 폴더 (Starlight docs 등)
63+
- docs
64+
- getting-started.md
65+
- shared FSD shared layer
66+
- ...
67+
</FileTree>
68+
69+
라우팅과 렌더링은 integration에 맡기고, 프로젝트에서 만드는 나머지 화면과 기능은 FSD 구조로 관리합니다.
70+
71+
## 참고 자료
72+
73+
- [Astro Routing](https://docs.astro.build/en/guides/routing/)
74+
- [Astro Project Structure](https://docs.astro.build/en/basics/project-structure/)

src/content/docs/kr/docs/guides/tech/with-nextjs.mdx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,15 @@ FSD는 Next.js의 App Router와 Pages Router 양쪽에 적용할 수 있습니
1313

1414
### `app` layer에서 FSD와 Next.js의 충돌 \{#conflict-between-fsd-and-nextjs-in-the-app-layer\}
1515

16-
App Router에서는 `app` 폴더 구조가 곧 라우트 구조가 됩니다. 반면 FSD에서 `app`은 라우트 폴더가 아니라 애플리케이션 전역 구성을 위한 layer입니다. 두 구조가 같은 `app` 폴더를 서로 다른 용도로 사용하기 때문에 충돌이 발생합니다.
16+
App Router에서 `app` 폴더는 라우트 구조로 사용됩니다. 반면 FSD에서 `app` 폴더는 애플리케이션 전역을 담당하는 layer입니다.
17+
두 구조는 `app` 폴더의 역할이 다르고, 같은 위치에 둘 경우 구조 충돌이 발생합니다.
1718

18-
이 충돌을 피하려면 Next.js의 `app` 폴더는 프로젝트 루트에 두고, 여기에는 라우트 파일만 둡니다. 실제 페이지 파일은 `src` 하위의 FSD 구조에 유지합니다. 루트 `app`의 각 라우트 파일은 `src/pages`의 페이지 파일을 가져와 연결합니다.
19+
이 충돌을 피하려면 Next.js의 `app` 폴더는 프로젝트 루트에 두고, 라우팅에 필요한 파일만 배치합니다.
20+
페이지는 `src` 하위의 FSD pages layer에 두고, 루트 `app` 폴더의 각 라우트 파일에서 이를 가져와 연결합니다.
21+
22+
프로젝트 루트에는 빈 `pages` 폴더도 함께 두어야 합니다. 그렇지 않으면 App Router를 사용하더라도 Next.js가 `src/pages`를 Pages Router로 인식하므로 빌드가 실패합니다.
23+
또한 비어 있는 폴더이더라도 왜 필요한지 설명하는 `README.md`를 이 루트 `pages` 폴더 안에 함께 두는 것이 좋습니다.
1924

20-
프로젝트 루트에는 빈 `pages` 폴더도 함께 두어야 합니다. App Router를 쓰더라도 Next.js는 `src/pages`를 Pages Router로 사용하려 하므로 빌드가 실패합니다. 루트의 빈 `pages` 폴더가 이 동작을 막습니다. 폴더 안에는 왜 비어 있어야 하는지 설명하는 `README.md`를 두는 것이 좋습니다.
2125

2226
<FileTree>
2327
- app App folder (Next.js)

0 commit comments

Comments
 (0)