Skip to content

Commit 392a334

Browse files
lumirlumirlumirlumir
authored
docs: fix some typos
1 parent fece64c commit 392a334

File tree

1 file changed

+21
-14
lines changed

1 file changed

+21
-14
lines changed

‎src/content/learn/creating-a-react-app.md‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ React로 새로운 앱이나 웹사이트를 구축하려면 프레임워크부
1616

1717
<Note>
1818

19-
#### 전체 스택 프레임워크에는 서버가 필요하지 않습니다. {/*react-frameworks-do-not-require-a-server*/}
19+
#### 풀스택 프레임워크에는 서버가 필요하지 않습니다 {/*react-frameworks-do-not-require-a-server*/}
2020

2121
이 페이지의 모든 프레임워크는 클라이언트 측 렌더링([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)), 단일 페이지 앱([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), 정적 사이트 생성([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG))을 지원합니다. 이러한 앱은 서버 없이 [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) 또는 정적 호스팅 서비스에 배포할 수 있습니다. 또한 이러한 프레임워크를 사용하면 사용 사례에 적합한 경우 경로별로 서버 측 렌더링을 추가할 수 있습니다.
2222

@@ -26,19 +26,19 @@ React로 새로운 앱이나 웹사이트를 구축하려면 프레임워크부
2626

2727
### Next.js (앱 라우터) {/*nextjs-app-router*/}
2828

29-
**[Next.js'의 앱 라우터](https://nextjs.org/docs)는 React의 아키텍처를 최대한 활용하여 풀 스택 React 앱을 활성화하는 React 프레임워크입니다.**
29+
**[Next.js의 앱 라우터](https://nextjs.org/docs)는 React의 아키텍처를 최대한 활용하여 풀 스택 React 앱을 활성화하는 React 프레임워크입니다.**
3030

3131
<TerminalBlock>
3232
npx create-next-app@latest
3333
</TerminalBlock>
3434

35-
Next.js는 [Vercel](https://vercel.com/)에서 유지 관리합니다. [Next.js 앱을 빌드](https://nextjs.org/docs/app/building-your-application/deploying)해서 Node.js와 서버리스 호스팅 혹은 자체서버에 배포할 수 있습니다. Next.js는 또한 서버가 필요없는 [정적 내보내기](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)도 지원합니다. Vercel은 추가적으로 옵트인 유료 클라우드 서비스도 지원합니다.
35+
Next.js는 [Vercel](https://vercel.com/)에서 유지 관리합니다. [Next.js 앱을 빌드](https://nextjs.org/docs/app/building-your-application/deploying)해서 Node.js와 서버리스 호스팅 혹은 자체 서버에 배포할 수 있습니다. Next.js는 또한 서버가 필요없는 [정적 내보내기](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)도 지원합니다. Vercel은 추가적으로 옵트인 유료 클라우드 서비스도 지원합니다.
3636

3737
### React Router (v7) {/*react-router-v7*/}
3838

3939
**[React Router](https://reactrouter.com/start/framework/installation)는 React에서 가장 인기인는 라우팅 라이브러리이며 Vite와 함께 사용하면 풀스택 React 프레임워크를 만들 수 있습니다**. 표준 Web API를 강조하고 다양한 자바스크립트 런타임과 플랫폼을 위한 [준비된 배포 템플릿](https://github.com/remix-run/react-router-templates)이 있습니다.
4040

41-
새로운 React Router 프레임워크를 생성하려면 다음 명령을 사용하세요:
41+
새로운 React Router 프레임워크를 생성하려면 다음 명령을 사용하세요.
4242

4343
<TerminalBlock>
4444
npx create-react-router@latest
@@ -48,19 +48,20 @@ React Router는 [Shopify](https://www.shopify.com)에서 유지 관리합니다.
4848

4949
### Expo (네이티브 앱용) {/*expo*/}
5050

51-
**[Expo](https://expo.dev/)는 네이티브 UI를 사용하여 안드로이드, iOS, 웹을 위한 범용앱을 만들 수 있는 React 프레임워크입니다.** 네이티브 부분을 쉽게 사용할 수 있게 해주는 [React Native SDK](https://reactnative.dev/)를 제공합니다. 새로운 Expo 프로젝트를 생성하려면 다음 명령을 사용하세요:
51+
**[Expo](https://expo.dev/)는 네이티브 UI를 사용하여 안드로이드, iOS, 웹을 위한 범용앱을 만들 수 있는 React 프레임워크입니다.** 네이티브 부분을 쉽게 사용할 수 있게 해주는 [React Native SDK](https://reactnative.dev/)를 제공합니다. 새로운 Expo 프로젝트를 생성하려면 다음 명령을 사용하세요.
5252

5353
<TerminalBlock>
5454
npx create-expo-app@latest
5555
</TerminalBlock>
5656

57-
Expo를 처음 사용하는 경우, [Expo tutorial](https://docs.expo.dev/tutorial/introduction/)을 참조하세요.
57+
Expo를 처음 사용하는 경우, [Expo 자습서](https://docs.expo.dev/tutorial/introduction/)를 참조하세요.
58+
59+
Expo는 [Expo (the company)](https://expo.dev/about)에서 유지 관리합니다. Expo로 앱을 빌드하는 것은 무료이고 구글이나 애플 스토어에 제한없이 제출할 수 있습니다. Expo는 추가적으로 옵트인 유료 클라우드 서비스를 제공합니다.
5860

59-
Expo는 [Expo (the company)](https://expo.dev/about)에서 유지 관리됩니다. Expo로 앱을 빌드하는 것은 무료이고 구글이나 애플 스토어에 제한없이 제출할 수 있습니다. Expo는 추가적으로 옵트인 유료 클라우드 서비스를 제공합니다.
6061

6162
## 다른 프레임워크 {/*other-frameworks*/}
6263

63-
풀스택 React 비전을 향해 나아가고 있는 또다른 떠오르는 프레임워크가 있습니다.
64+
풀스택 React 비전을 향해 나아가고 있는 또 다른 떠오르는 프레임워크가 있습니다.
6465

6566
- [TanStack STart (Beta)](https://tanstack.com/): TanStack Start는 TanStack Router를 기반으로 하는 풀스택 React 프레임워크입니다. Nitro나 Vite와 같이 전체 문서 SSR, 스트리밍, 서버 함수, 번들링과 많은 유용한 도구를 제공합니다.
6667
- [RedwoodJS](https://redwoodjs.com/): Redwood는 쉽게 풀스택 웹 애플리케이션을 만들 수 있도록 사전탑재된 패키지와 구성을 가진 풀스택 React 프레임워크입니다.
@@ -69,17 +70,17 @@ Expo는 [Expo (the company)](https://expo.dev/about)에서 유지 관리됩니
6970

7071
#### React 팀의 풀스택 아키텍처 비전을 구성하는 기능은 무엇인가요? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
7172

72-
Next.js의 App Router 번들러는 공식 [React Server Components 사양]((https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md))을 모두 구현합니다. 이를 통해 빌드 시간, 서버 전용 및 대화형 구성 요소를 단일 React 트리에 혼합할 수 있습니다.
73+
Next.js의 App Router 번들러는 공식 [React Server Components 명세]((https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md))를 모두 구현합니다. 이를 통해 빌드 시간, 서버 전용 및 대화형 구성 요소를 단일 React 트리에 혼합할 수 있습니다.
7374

74-
예를 들어, 서버 전용 React 컴포넌트를 데이터베이스나 파일을 읽는 `비동기` 함수로 작성할 수 있습니다. 그런 다음 데이터를 대화형 컴포넌트로 전달할 수 있습니다:
75+
예를 들어, 서버 전용 React 컴포넌트를 데이터베이스나 파일을 읽는 `비동기` 함수로 작성할 수 있습니다. 그런 다음 데이터를 대화형 컴포넌트로 전달할 수 있습니다.
7576

7677
```js
7778
// 이 컴포넌트는 *오직* 서버에서만(혹은 빌드되는 동안만) 실행됩니다.
7879
async function Talks({ confId }) {
7980
// 1. 서버에서라면 데이터 레이어와 대화할 수 있습니다. API 엔드포인트는 필요하지 않습니다.
8081
const talks = await db.Talks.findAll({ confId });
8182

82-
// 2. 렌더링 로직이 추가되더라고도 Javascript 번들크기를 크게 만들지 않습니다.
83+
// 2. 렌더링 로직이 추가되더라고도 자바스크립트 번들 크기를 크게 만들지 않습니다.
8384
const videos = talks.map(talk => talk.video);
8485

8586
// 3. 브라우저에서 싫행될 컴포넌트에 데이터를 전달합니다.
@@ -99,13 +100,19 @@ Next.js의 App Router는 [Suspense와 데이터 조회](/blog/2022/03/29/react-v
99100

100101
</DeepDive>
101102

102-
## 처음부터 시작 {/*start-from-scratch*/}
103+
## 처음부터 시작하기 {/*start-from-scratch*/}
104+
105+
앱에 기존 프레임워크에서 잘 제공되지 않는 제약 조건이 있거나, 자체 프레임워크를 구축하는 것을 선호하거나, React 앱의 기본 사항을 배우려는 경우 React 프로젝트를 처음부터 시작하는 데 사용할 수 있는 다른 옵션이 있습니다.
106+
107+
처음부터 시작하면 더 많은 유연성을 얻을 수 있지만 라우팅, 데이터 가져오기 및 기타 일반적인 사용 패턴에 사용할 도구를 선택해야 합니다. 이미 존재하는 프레임워크를 사용하는 대신 자신만의 프레임워크를 구축하는 것과 비슷합니다. 저희가/DeepDive>
108+
109+
## 처음부터 시작하기 {/*start-from-scratch*/}
103110

104111
앱에 기존 프레임워크에서 잘 제공되지 않는 제약 조건이 있거나, 자체 프레임워크를 구축하는 것을 선호하거나, React 앱의 기본 사항을 배우려는 경우 React 프로젝트를 처음부터 시작하는 데 사용할 수 있는 다른 옵션이 있습니다.
105112

106-
처음부터 시작하면 더 많은 유연성을 얻을 수 있지만 라우팅, 데이터 가져오기 및 기타 일반적인 사용 패턴에 사용할 도구를 선택해야 합니다. 이미 존재하는 프레임워크를 사용하는 대신 자신만의 프레임워크를 구축하는 것과 비슷합니다. 우리가 [권장하는 프레임워크](#full-stack-frameworks)에는 이러한 문제에 대한 기본 제공 솔루션이 있습니다.
113+
처음부터 시작하면 더 많은 유연성을 얻을 수 있지만 라우팅, 데이터 가져오기 및 기타 일반적인 사용 패턴에 사용할 도구를 선택해야 합니다. 이미 존재하는 프레임워크를 사용하는 대신 자신만의 프레임워크를 구축하는 것과 비슷합니다. 저희가 [권장하는 프레임워크](#full-stack-frameworks)에는 이러한 문제에 대한 기본 제공 솔루션이 있습니다.
107114

108-
자신만의 솔루션을 구축하려면 [Vite](https://vite.dev/), [Parcel](https://parceljs.org/) 또는 [RSbuild](https://rsbuild.dev/)와 같은 빌드 도구로 시작하는 새 React 프로젝트를 설정하는 방법에 대한 지침은 Scratch에서 [React 앱 빌드 가이드](/learn/build-a-react-app-from-scratch)를 참조하세요.
115+
자신만의 솔루션을 구축하려면, [Vite](https://vite.dev/), [Parcel](https://parceljs.org/) 또는 [RSbuild](https://rsbuild.dev/)와 같은 빌드 도구로 시작할 수 있도록 하는 [처음부터 React 앱 만들기](/learn/build-a-react-app-from-scratch) 가이드를 참조하세요.
109116

110117
-----
111118

0 commit comments

Comments
 (0)