Skip to content

Commit 169f601

Browse files
authored
Translate start a new react project (#384)
* translate start-a-new-react-project * fix typo * review * fix review
1 parent a2ba24f commit 169f601

File tree

1 file changed

+34
-33
lines changed

1 file changed

+34
-33
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,42 @@
11
---
2-
title: Start a New React Project
2+
title: 새로운 React 프로젝트 시작하기
33
---
44

55
<Intro>
66

7-
If you're learning React or considering adding it to an existing project, you can get started quickly by [adding React to any HTML page with script tags](/learn/add-react-to-a-website). If your project will need many components and many files, it might be time to consider the options below!
7+
React를 배우길 원하거나 프로젝트에 도입을 고민하고 있다면, [스크립트 태그가 있는 HTML 페이지에 React 추가](/learn/add-react-to-a-website)에서 신속히 시작할 수 있습니다. 프로젝트에 수많은 컴포넌트와 파일들이 필요하다면 아래의 선택지를 고려해보세요!
88

99
</Intro>
1010

11-
## Choose your own adventure {/*choose-your-own-adventure*/}
11+
## 모험을 시작하기 {/*choose-your-own-adventure*/}
1212

13-
React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. For these features, you'll want to use third-party libraries or write your own solutions. This means there are several ways to start a new React project:
13+
React는 UI 코드를 컴포넌트라는 조각으로 나누어 구성할 수 있는 라이브러리입니다. React는 데이터 관리나 라우팅을 담당하지 않기 때문에, 서드 파티 라이브러리나 직접 솔루션을 도입하여 이 문제를 해결할 수 있습니다. 이는 곧 React 프로젝트를 시작할 수 있는 다양한 방법이 있음을 의미합니다.
1414

15-
* Start with a **minimal set up with just a toolchain,** adding features to your project as necessary.
16-
* Start with an **opinionated framework** with common functionality already built in.
15+
* **툴체인만으로 최소한의 설정**부터 시작하여, 프로젝트에 필요한 기능을 추가할 수 있습니다.
16+
* 일반적인 기능이 내장되어있는 **특화된 프레임워크**로 시작할 수 있습니다.
1717

18-
Whether you're just getting started, looking to build something big, or want to set up your own toolchain, this guide will set you on the right path.
18+
이제 막 시작하든, 큰 무언가를 구축하든, 자신만의 툴체인을 제작하든, 이 가이드는 여러분을 올바른 길로 안내합니다.
1919

20-
## Getting started with a React toolchain {/*getting-started-with-a-react-toolchain*/}
20+
## React 툴체인으로 시작하기 {/*getting-started-with-a-react-toolchain*/}
2121

22-
If you're just getting started with React, we recommend [Create React App](https://create-react-app.dev/), the most popular way to try out React's features and a great way to build a new single-page, client-side application. Create React App is an unopinionated toolchain configured just for React. Toolchains help with things like:
22+
React를 처음 시작한다면, React의 기능을 사용해 볼 수 있는 가장 일반적인 방법이자 새로운 단일 페이지의 클라이언트 사이드 애플리케이션을 구축하는 좋은 방법인 [Create React App](https://create-react-app.dev/)을 권장합니다.
23+
Create React App은 React 전용으로 구성된 유연한 툴체인입니다. 툴체인은 다음과 같은 기능이 있습니다.
2324

24-
* Scaling to many files and components
25-
* Using third-party libraries from npm
26-
* Detecting common mistakes early
27-
* Live-editing CSS and JS in development
28-
* Optimizing the output for production
25+
* 여러 파일 및 컴포넌트로 확장할 수 있습니다.
26+
* npm을 통한 서드 파티 라이브러리 이용이 가능합니다.
27+
* 실수를 조기에 발견합니다.
28+
* 개발환경에서 JS, CSS의 실시간 편집을 지원합니다.
29+
* 프로덕션 결과물을 최적화합니다.
2930

30-
You can get started building with Create React App with one line of code in your terminal! (**Be sure you have [Node.js](https://nodejs.org/) installed!**)
31+
한 줄의 코드로 터미널에서 Creat React App을 빌드할 수 있습니다. (**단, [Node.js](https://nodejs.org/)가 설치되어 있어야 합니다!**)
3132

3233
<TerminalBlock>
3334

3435
npx create-react-app my-app
3536

3637
</TerminalBlock>
3738

38-
Now you can run your app with:
39+
이제 다음 명령어로 애플리케이션을 실행할 수 있습니다.
3940

4041
<TerminalBlock>
4142

@@ -44,37 +45,37 @@ npm start
4445

4546
</TerminalBlock>
4647

47-
For more information, [check out the official guide](https://create-react-app.dev/docs/getting-started).
48+
자세한 내용은 [공식 가이드](https://create-react-app.docs/getting-started)를 참조하세요.
4849

49-
> Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline. This means you can use it with any backend you want. But if you're looking for more features like routing and server-side logic, read on!
50+
> Create React App은 데이터베이스나 백엔드 로직을 다루지 않습니다. 단지 프론트엔드 빌드 파이프라인을 생성할 뿐입니다. 즉 원하는 백엔드와 함께 사용할 수 있습니다. 그러나 라우팅, 서버 사이드 로직 등의 기능에 대해 더 찾고 있다면 계속 읽어주세요!
5051
51-
### Other options {/*other-options*/}
52+
### 다른 선택지 {/*other-options*/}
5253

53-
Create React App is great to get started working with React, but if you'd like an even lighter toolchain, you might try one of these other popular toolchains:
54+
Create React App은 React를 시작하기에 좋지만, 더 가벼운 툴체인을 원한다면 다음과 같은 인기 툴체인 중 하나를 사용해 볼 수 있습니다.
5455

5556
* [Vite](https://vitejs.dev/guide/)
5657
* [Parcel](https://parceljs.org/)
5758
* [Snowpack](https://www.snowpack.dev/tutorials/react)
5859

59-
## Building with React and a framework {/*building-with-react-and-a-framework*/}
60+
## React와 프레임워크로 빌드하기 {/*building-with-react-and-a-framework*/}
6061

61-
If you're looking to start a bigger, production-ready project, [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly.
62+
더 큰 규모의 프로덕션 단계의 프로젝트를 시작하려면 [Next.js](https://nextjs.org/)를 참조하세요. Next.js는 React로 빌드된 정적 및 서버 사이드 렌더링 애플리케이션을 위한 경량 프레임워크입니다. 라우팅, 스타일링 및 서버 사이드 렌더링과 같은 기능이 사전 패키지로 제공되어 프로젝트를 신속하게 실행할 수 있습니다.
6263

63-
[Get started building with Next.js](https://nextjs.org/docs/getting-started) with the official guide.
64+
[Next.js 공식 가이드](https://nextjs.org/docs/getting-started)와 함께 빌드를 시작하세요
6465

65-
### Other options {/*other-options-1*/}
66+
### 또 다른 선택지 {/*other-options-1*/}
6667

67-
* [Gatsby](https://www.gatsbyjs.org/) lets you generate static websites with React with GraphQL.
68-
* [Razzle](https://razzlejs.org/) is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
68+
* [Gatsby](https://www.gatsbyjs.org/)를 이용하여 React와 GraphQL로 정적 웹사이트를 생성할 수 있습니다.
69+
* [Razzle](https://razzlejs.org/)은 어떤 설정도 요구하지 않는, Next.js보다 유연한 서버 사이드 렌더링 프레임워크입니다.
6970

70-
## Custom toolchains {/*custom-toolchains*/}
71+
## 커스텀 툴체인 {/*custom-toolchains*/}
7172

72-
You may prefer to create and configure your own toolchain. A JavaScript build toolchain typically consists of:
73+
직접 툴체인을 생성 및 설정하고 싶다면, 자바스크립트 빌드 툴체인의 구성을 고려하세요.
7374

74-
* A **package manager**—lets you install, updated and manage third-party packages. [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) are two popular package managers.
75-
* A **bundler**—lets you write modular code and bundle it together into small packages to optimize load time. [Webpack](https://webpack.js.org/), [Snowpack](https://www.snowpack.dev/), [Parcel](https://parceljs.org/) are several popular bundlers.
76-
* A **compiler**—lets you write modern JavaScript code that still works in older browsers. [Babel](https://babeljs.io/) is one such example.
75+
* [Yarn](https://yarnpkg.com/)[npm](https://www.npmjs.com/)같은 **패키지 매니저**를 사용하여 서드 파티 패키지를 설치, 업데이트 및 관리할 수 있습니다.
76+
* [Webpack](https://webpack.js.org/), [Snowpack](https://www.snowpack.dev/), [Parcel](https://parceljs.org/)과 같은 **번들러**를 사용하면 모듈식 코드를 작성하고 이를 작은 패키지로 함께 번들링 하여 로드 시간을 최적화할 수 있습니다
77+
* [Babel](https://babeljs.io/)과 같은 **컴파일러**는 이전 브라우저에서도 최신 자바스크립트 코드를 작동시킵니다.
7778

78-
In a larger project, you might also want to have a tool to manage multiple packages in a single repository. [Nx](https://nx.dev/react) is an example of such a tool.
79+
대규모 프로젝트에서는 단일 저장소에서 여러 패키지를 관리하는 툴이 필요할 수도 있습니다. [Nx](https://nx.dev/react)가 이러한 툴의 예입니다.
7980

80-
If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality.
81+
자바스크립트 툴체인을 처음부터 만들어보고 싶다면, [Create React App 만들어보기](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658)를 확인해보세요.

0 commit comments

Comments
 (0)