From 457542f993ac876bab3bd3e258eebe09fa24b6ea Mon Sep 17 00:00:00 2001 From: ymin1103 Date: Sun, 21 Apr 2019 23:39:33 +0900 Subject: [PATCH 1/4] Translated Add React to a Website. --- content/docs/add-react-to-a-website.md | 146 ++++++++++++------------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 11b99d37a..1dde84f68 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: 웹사이트에 React 추가 permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,28 +8,28 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +React는 필요한 만큼만 사용하면 됩니다. 적게든 많게든 말이죠. -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +React는 처음부터 점진적인 도입을 가정하여 설계되었습니다. **그래서 React는 필요한 만큼만 사용하면 됩니다.** 아마 기존 페이지에 "상호작용"이라는 조미료를 첨가하기만 하고 싶을 수도 있습니다. 이럴 때 React 컴포넌트를 쓰면 좋습니다. -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +오늘날 웹사이트의 대부분은 싱글 페이지가 아니고 그래야 할 필요도 없습니다. **빌드 도구도 없이 몇 줄의 코드만으로**, 웹사이트의 작은 부분에 먼저 React를 도입해보세요. React의 비중을 천천히 늘릴 수도 있고 아니면 동적인 위젯을 몇 개 추가하는 것으로 끝낼 수도 있습니다. --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [React 1분 내로 추가하기](#add-react-in-one-minute) +- [선택사항: JSX로 React 해보기](#optional-try-react-with-jsx) (번들러가 필요없습니다!) -## Add React in One Minute {#add-react-in-one-minute} +## 1분 내로 React 추가하기 {#add-react-in-one-minute} -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +이 글에서는 기존 페이지에 리액트를 추가하는 법에 대해서 다룹니다. 당신이 이미 가지고 있는 웹사이트에서 해보셔도 좋고, 연습삼아 새로운 html 파일에서 시도해보셔도 좋습니다. -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +복잡한 도구를 쓰거나 뭔가를 따로 설치해야 할 필요도 없습니다. -- **약간의 시간과 인터넷만 연결 되어 있다면 이 문서에서 다루는 것을 모두 해볼 수 있습니다.** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Optional: [예제의 전체 소스코드 다운로드 (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} +### 1단계: HTML 파일에 DOM 컨테이너 설치 {#step-1-add-a-dom-container-to-the-html} -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: +먼저, 편집할 HTML 파일을 엽니다. 그 다음 비어있는 `
` 태그를 추가해줍니다. 이 태그가 바로 React를 통해 원하는 내용을 표시할 수 있는 위치가 됩니다. 다음과 같이 말이죠. ```html{3} @@ -39,96 +39,96 @@ First, open the HTML page you want to edit. Add an empty `
` tag to mark the ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +이 `
` 태그에 유일한 HTML 속성인 `id`를 부여해줍니다. 이를 통해 JavaScript가 태그를 찾고 찾은 태그 안에 React 컴포넌트를 표시할 수 있게됩니다. ->Tip +>팁 > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +>컨테이너 `
` 태그는 이 처럼 `` 태그 안 쪽 **어디서든** 추가할 수 있습니다. 한 페이지에서도 독립적인 DOM 컨테이너를 원하는 만큼 추가할 수 있습니다. 보통 이 태그는 비어있습니다. React가 DOM 컨테이너 안에 내용을 추가해줍니다. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### 2단계: 스크립트 태그 추가하기 {#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +처음 두 태그는 React를 실행시키고 3번 째 코드는 당신이 만든 컴포넌트를 실행시킵니다. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### Step 3: React 컴포넌트 만들기 {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. + `like_button.js` 라는 이름으로 HTML 페이지 옆에 새 파일을 만듭니다. -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. + 이 **[스타터 코드](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** 를 열고 코드를 방금 만든 파일에 복사해줍니다. ->Tip +>팁 > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +>이 코드는 `LikeButton` 이라는 React 컴포넌트를 정의해줍니다. 지금 당장 이해가 안 되어도 걱정 마세요. React에 대한 개념을 쌓아 나가는 것은 나중에 [자습서](/tutorial/tutorial.html)와 [주요 개념 가이드](/docs/hello-world.html)에서 다룰 겁니다. 그러니 지금 당장은, 컴포넌트를 화면에 띄우는 데 집중해봅시다! -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +`like_button.js`의 맨 뒷 줄, 그러니까 아까 붙여넣은 **[스타터 코드](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** 뒤에 다음 코드 두 줄을 추가해줍니다. ```js{3,4} -// ... the starter code you pasted ... +// ... 복사했던 스타터 코드 ... const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +이 두줄의 코드는 첫 단계에 HTML 페이지에 추가했던 `
` 태그를 찾아주고 그 안에 "좋아요" 버튼이라는 React 컴포넌트를 추가해줍니다. -### That's It! {#thats-it} +### 이제 다 됐어! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +그 다음 단계는 없습니다. **당신은 방금 웹사이트에 처음으로 React 컴포넌트를 설치했습니다.** -Check out the next sections for more tips on integrating React. +다음 차례들에 React를 기존 프로젝트에 결합하는데 도움이 될만한 정보들이 더 있습니다. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[예제 전체 소스 코드 보기](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[예제 전체 다운로드 (2KB로 압축됨)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### 팁: 컴포넌트의 재사용 {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +보통은 하나의 웹페이지에 여러 React 컴포넌트를 설치하게 됩니다. 다음 예제는 "좋아요" 버튼 3개를 만들고 그 컴포넌트들에 데이터를 넘겨주는 코드입니다. -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[예제 전체 소스 코드 보기](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[예제 전체 다운로드 (2KB로 압축됨)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>참고 > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +>이 방법은 대개 페이지에서 React로 만들어진 부분들이 서로 격리 되어있을 때 유용합니다. React 코드 내에서는 [컴포넌트 합성](/docs/components-and-props.html#composing-components)을 사용하는 편이 더 쉽습니다. -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### 팁: 프로덕션을 위한 JavaScript의 압축 {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users. +프로덕션을 위해 웹사이트를 배포하기 전에 JavaScript 파일을 압축하지 않는다면 웹사이트를 사용할 때 눈에 띄는 성능 저하가 일어날 겁니다. -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +어플리케이션 스크립트를 이미 압축했다면, 배포된 HTML 파일이 `production.min.js`로 끝나는 React 파일을 확실히 실행하기만 하면 **당신의 사이트는 프로덕션 준비가 완료된 겁니다.** ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +스크립트를 압축하는 절차가 따로 없다면 [이 사이트를 참고해서 설정해보세요.](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## 선택사항: JSX로 React 해보기 {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +지금까지 다뤘던 예제들은 브라우저가 기본적으로 지원하는 요소들만을 사용했습니다. 때문에 React가 어떤 것을 표시할지 결정 해주는 JavaScript의 함수들을 사용했습니다. ```js const e = React.createElement; -// Display a "Like"