누락된 부분 추가

taggon · taggon · commit 44ce43121ebf · 2023-05-24T08:59:58.000+09:00
diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md
@@ -4,13 +4,13 @@ title: 새로운 React 프로젝트 시작하기
 
 <Intro>
 
-리액트를 전체적으로 적용한 애플리케이션이나 웹 사이트를 새롭게 작성하고 싶다면 커뮤니티에서 React 기반 프레임워크 중 하나를 사용하는 것이 좋습니다. 이런 프레임워크는 대부분의 애플리케이션이나 웹 사이트에서 사용하게 될 라우팅, 데이터 가져오기, HTML 생성과 같은 기능을 제공합니다.
+React를 전체적으로 적용한 애플리케이션이나 웹 사이트를 새롭게 작성하고 싶다면 커뮤니티에서 React 기반 프레임워크 중 하나를 사용하는 것이 좋습니다. 이런 프레임워크는 대부분의 애플리케이션이나 웹 사이트에서 사용하게 될 라우팅, 데이터 가져오기, HTML 생성과 같은 기능을 제공합니다.
 
 </Intro>
 
 <Note>
 
-**로컬에서 개발하려면 [Node.js](https://nodejs.org/ko/)를 설치해야 합니다.** 원한다면 프로덕션 환경에서도 Node.js를 사용할 수 있지만 반드시 필요하지는 않습니다. 많은 React 프레임워크가 정적 HTML/CSS/JS 폴더로 내보내는 기능을 지원합니다.
+**로컬에서 개발하려면 [Node.js](https://nodejs.org/ko/)를 설치해야 합니다.** 원한다면 프로덕션 환경에서도 Node.js를 사용할 수 있지만 꼭 필요하지는 않습니다. 많은 React 프레임워크가 정적 HTML/CSS/JS 폴더로 내보내는 기능을 지원합니다.
 
 </Note>
 
@@ -26,11 +26,11 @@ npx create-next-app
 
 Next.js를 처음 사용하는 분이라면 [Next.js 자습서](https://nextjs.org/learn/foundations/about-nextjs)를 읽어보세요.
 
-Next.js는 [Vercel](https://vercel.com/)이 관리합니다. 어느 Node.js 서버, 서버리스 호스팅 또는 직접 소유한 서버 어느 곳에라도 [Next.js 애플리케이션을 배포](https://nextjs.org/docs/deployment) 할 수 있습니다. [완전 정적인 Next.js 애플리케이션](https://nextjs.org/docs/advanced-features/static-html-export)은 어느 정적 호스팅에라도 배포할 수 있습니다.
+Next.js는 [Vercel](https://vercel.com/)이 관리합니다. 어느 Node.js 서버, 서버리스 호스팅 또는 직접 소유한 서버 어느 곳에라도 [Next.js 애플리케이션을 배포](https://nextjs.org/docs/deployment)할 수 있습니다. [완전 정적인 Next.js 애플리케이션](https://nextjs.org/docs/advanced-features/static-html-export)은 어느 정적 호스팅에라도 배포할 수 있습니다.
 
 ### Remix {/*remix*/}
 
-**[Remix](https://remix.run/)는 중첩 라우팅이 가능한 풀스택 React 프레임워크입니다.** 애플리케이션을 중첩되는 하위 파트로 나눌 수 있으며, 각 파트는 병렬로 데이터를 읽어들일 수 있고 사용자의 행동에 반응하여 다시 그려질 수 있습니다. 새로운 Remix 프로젝트를 작성하려면 다음을 실행하세요.
+**[Remix](https://remix.run/)는 중첩 라우팅이 가능한 풀스택 React 프레임워크입니다.** 애플리케이션을 중첩되는 하위 파트로 나눌 수 있으며, 각 파트는 병렬로 데이터를 읽어 들일 수 있고 사용자의 행동에 반응하여 다시 그려질 수 있습니다. 새로운 Remix 프로젝트를 작성하려면 다음을 실행하세요.
 
 <TerminalBlock>
 npx create-remix
@@ -42,7 +42,7 @@ Remix는 [Shopify](https://www.shopify.com/)가 관리합니다. Remix 프로젝
 
 ### Gatsby {/*gatsby*/}
 
-**[Gatsby](https://www.gatsbyjs.com/)는 CMS를 활용한 빠른 웹 사이트를 작성하는 React 프레임워크입니다.** 풍부한 플러그인 생태계와 GraphQL 데이터 레이어가 콘텐츠, API, 서비스와 어우려져 하나의 웹 사이트를 이룹니다. 새로운 Gatsby 프로젝트를 작성하려면 다음을 실행하세요.
+**[Gatsby](https://www.gatsbyjs.com/)는 CMS를 활용한 빠른 웹 사이트를 작성하는 React 프레임워크입니다.** 풍부한 플러그인 생태계와 GraphQL 데이터 레이어가 콘텐츠, API, 서비스와 어우러져 하나의 웹 사이트를 이룹니다. 새로운 Gatsby 프로젝트를 작성하려면 다음을 실행하세요.
 
 <TerminalBlock>
 npx create-gatsby
@@ -72,10 +72,9 @@ Expo는 [Expo (기업)](https://expo.dev/about)이 관리합니다. Expo를 사
 
 이유는 다음과 같습니다.
 
-라우터나 데이터 통신 기능이 처음에는 필요하지 않더라도 나중에는 관련 기능을 위한 라이브러리를 추가하고 싶어질 수 있습니다. 새로운 기능을 추가할 때마다 JavaScript 번들의 크기가 증가하면 각 라우팅 경로로 코드를 분할하는 방법을 알아야 할 것입니다. 데이터 통신이 복잡해지면 서버-클라이언트 네트워크 통신이 꼬리에 꼬리를 물게 되어 앱이 매우 느려질 수 있습니다. 네트워크 상태가 좋지 않거나 저사양 기기를 사용하는 사용자가 많아지면 컴포넌트에서 HTML을 생성하여 콘텐츠를 빠르게 표시해야 할 수도 있습니다. 서버나 빌드 시간에 코드를 실행하도록 설정을 변경하는 것은 매우 까다로울 수 있습니다.
+라우터나 데이터 통신 기능이 처음에는 필요하지 않더라도 나중에는 관련 기능을 위한 라이브러리를 추가하고 싶어질 수 있습니다. 새로운 기능을 추가할 때마다 JavaScript 번들의 크기가 증가하면 각 라우팅 경로로 코드를 분할하는 방법을 알아야 할 것입니다. 데이터 통신이 복잡해지면 서버-클라이언트 네트워크 통신이 꼬리에 꼬리를 물게 되어 앱이 매우 느려질 수 있습니다. 네트워크 상태가 좋지 않거나 저사양 기기를 사용하는 사용자가 많아지면 컴포넌트에서 HTML을 생성하여 콘텐츠를 빠르게 표시해야 할 수도 있습니다. 서버나 빌드 시간에 코드를 실행하도록 설정을 변경하기는 매우 까다로울 수 있습니다.
 
-
-**이 문제는 비단 React에서만 발생하지 않습니다. 그래서 Svelte에는 SvelteKit이 있고 Vue에는 Nuxt가 있는 것입니다.** 이 문제를 스스로 해결하려면 번들러를 라우터와 데이터 통신 라이브러리와 통합해야 합니다. 초기 설정을 작성하는 것은 어렵지 않지만, 앱이 시간이 지남에 따라 커져도 빠르게 로드되는 앱을 만드는 데에는 많은 미묘한 점이 있습니다. 앱 코드의 최소한의 양을 보내야 하지만, 페이지에 필요한 데이터와 함께 클라이언트-서버 라운드트립을 하나로 통합해야 합니다. JavaScript 코드가 실행되기 전에 페이지가 상호작용할 수 있도록 하고, 점진적 기능 향상을 지원하기 위해 페이지가 로드되기 전에도 작동하는 정적 HTML 파일을 생성하여 마케팅 페이지를 어디에서나 호스팅할 수 있도록 할 수도 있습니다. 이러한 기능을 직접 구축하는 것은 실제로 작업이 필요합니다.
+**이 문제는 비단 React에서만 발생하지 않습니다. 그래서 Svelte에는 SvelteKit이 있고 Vue에는 Nuxt가 있는 것입니다.** 이 문제를 스스로 해결하려면 번들러를 라우터와 데이터 통신 라이브러리와 통합해야 합니다. 초기 설정을 작성하는 것은 어렵지 않지만, 앱이 시간이 지남에 따라 커져도 빠르게 로드되는 앱을 만드는 데에는 많은 미묘한 점이 있습니다. 앱 코드의 최소한의 양을 보내야 하지만, 페이지에 필요한 데이터와 함께 클라이언트-서버 라운드 트립을 하나로 통합해야 합니다. JavaScript 코드가 실행되기 전에 페이지가 상호작용할 수 있도록 하고, 점진적 기능 향상을 지원하기 위해 페이지가 로드되기 전에도 작동하는 정적 HTML 파일을 생성하여 마케팅 페이지를 어디에서나 호스팅할 수 있도록 할 수도 있습니다. 이러한 기능을 직접 구축하는 것은 실제로 작업이 필요합니다.
 
 **이 페이지에 있는 React 프레임워크는 사용자의 추가적인 노력없이 이러한 문제를 기본적으로 해결하고 있습니다.** 해당 프레임워크는 사용자가 애플리케이션을 가볍게 시작하여 필요에 따라 점차 규모를 키울 수 있도록 합니다. 각 React 프레임워크는 관련 커뮤니티가 있으므로 질문과 답변을 쉽게 찾을 수 있고, 도구를 업그레이드하는 것도 쉽습니다. 프레임워크는 코드에 구조를 제공하여 사용자와 다른 사람이 다른 프로젝트 간에도 컨텍스트와 기술을 유지할 수 있도록 도와줍니다. 반대로 사용자 정의 설정을 사용하면 지원되지 않는 종속성 버전에 갇히기 쉽고, 사실상 자체 프레임워크를 만들게 됩니다(이전에 만든 프레임워크와 비슷하게, 덜 구조화된 것일 수 있습니다).
 
@@ -84,11 +83,9 @@ Expo는 [Expo (기업)](https://expo.dev/about)이 관리합니다. Expo를 사
 
 ## 최신 React 프레임워크 {/*bleeding-edge-react-frameworks*/}
 
-As we've explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)
-
+React를 지속적으로 개선할 방법을 찾아가는 과정에서, 우리는 React를 프레임워크(특히 라우팅, 번들링, 서버 기술)와 더 밀접하게 통합하는 것이 React 사용자가 더 나은 앱을 만드는 데 도움을 줄 수 있는 가장 큰 기회라는 것을 깨달았습니다. Next.js 팀은 [React Server Component](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)와 같은 가장 최신의 React 기능을 프레임워크에 구애받지 않는 형태로 연구, 개발, 통합, 테스트하는 데에 협력하기로 합의했습니다.
 
-
-이러한 기능들은 매일 프로덕션 수준에 근접하고 있으며 다른 번들러 및 프레임워크 개발자들과 이를 통합하기 위해 협의 중입니다. 희망으로는 1, 2년 후에 이 페이지에 나열된 모든 프레임워크가 이러한 기능을 지원했으면 합니다. (이러한 기능을 실험해보기 위해 우리와 협력하고 싶은 프레임워크 개발자가 있다면 알려주세요!)
+이러한 기능들은 매일 프로덕션 수준에 근접하고 있으며 다른 번들러 및 프레임워크 개발자들과 이를 통합하기 위해 협의 중입니다. 희망으로는 1, 2년 후에 이 페이지에 나열된 모든 프레임워크가 이러한 기능을 지원했으면 합니다. (이러한 기능을 실험해 보기 위해 우리와 협력하고 싶은 프레임워크 개발자가 있다면 알려주세요!)
 
 ### Next.js (App Router) {/*nextjs-app-router*/}
 
@@ -131,4 +128,6 @@ Next.js의 App Router는 또한 Suspense를 사용하는 데이터 통신과도
 </Suspense>
 ```
 
-Server Component와 Suspense는 Next.js의 기능이 아닌 React의 기능입니다. 하지만 프레임워크 수준에서 이를 채택하려면 많은 노력과 비교적 복잡한 구현 작업이 필요합니다. 현재 기준으로는 Next.js의 App Router가 가장 완벽한 구현입니다. React 팀은 차세대 프레임워크에서는 이러한 기능을 구현하기 쉽도록 번들러 개발자와 공동으로 노력하고 있습니다.
+Server Component와 Suspense는 Next.js의 기능이 아닌 React의 기능입니다. 하지만 프레임워크 수준에서 이를 채택하려면 많은 노력과 비교적 복잡한 구현 작업이 필요합니다. 현재 기준으로는 Next.js의 App Router가 가장 완벽한 구현입니다. React 팀은 차세대 프레임워크에서는 이러한 기능을 구현하기 쉽도록 번들러 개발자와 공동으로 노력하고 있습니다.
+
+</DeepDive>
