Skip to content

Commit 0854582

Browse files
authored
Merge branch 'master' into stepover10-patch-1
2 parents 2a6782c + 7889eda commit 0854582

24 files changed

+664
-638
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949

5050
### Push 하기
5151

52-
1. `git add -A && git commit -m "My message"` (`My message` 부분을 `Fixed header logo on Android` 같은 커밋 메시지로 교체)를 실행하여 변경한 파일들을 commit 해주세요.
52+
1. `git add -A && git commit -m "My message"` (`My message` 부분을 `Fix header logo on Android` 같은 커밋 메시지로 교체)를 실행하여 변경한 파일들을 commit 해주세요.
5353
1. `git push my-fork-name the-name-of-my-branch`
5454
1. [reactjs.org repo](https://github.com/reactjs/reactjs.org)에서 최근에 푸시된 브랜치를 볼 수 있습니다.
5555
1. Github 지침을 따라주세요.

content/community/articles.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,4 @@ permalink: community/articles.html
1212
- [You're missing the point of React](https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a) - Dan Abramov's article about the best parts of React.
1313
- [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - Dave Ceddia's recommended timeline for learning React and the React ecosystem.
1414
- [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - Joshua Comeau's guide to showcase how easy it can be to start modern React development.
15-
- [React FAQ](https://reactfaq.site/) - An external site with articles that try to answer frequently asked questions about React.
1615
- [Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Dave Ceddia's visual guide to React state.

content/community/conferences.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ May 25, 2019 in Yerevan, Armenia
2222

2323
[Website](https://reactconf.am/) - [Twitter](https://twitter.com/ReactConfAM) - [Facebook](https://www.facebook.com/reactconf.am/) - [YouTube](https://www.youtube.com/c/JavaScriptConferenceArmenia) - [CFP](http://bit.ly/speakReact)
2424

25+
### ReactNext 2019 {#react-next-2019}
26+
June 11, 2019. Tel Aviv, Israel
27+
28+
[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/channel/UC3BT8hh3yTTYxbLQy_wbk2w)
29+
2530
### React Norway 2019 {#react-norway-2019}
2631
June 12, 2019. Larvik, Norway
2732

@@ -57,6 +62,11 @@ September 13th, 2019. New York, USA
5762

5863
[Website](https://reactnewyork.com/) - [Twitter](https://twitter.com/reactnewyork)
5964

65+
### React Live 2019 {#react-live-2019}
66+
September 13th, 2019. Amsterdam, The Netherlands
67+
68+
[Website](https://www.reactlive.nl/) - [Twitter](https://twitter.com/reactlivenl)
69+
6070
### React Boston 2019 {#react-boston-2019}
6171
September 21-22, 2019 in Boston, Massachusetts USA
6272

content/community/meetups.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
138138
* [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/)
139139
* [Provo, UT - ReactJS](https://www.meetup.com/ReactJS-Utah/)
140140
* [Sacramento, CA - ReactJS](https://www.meetup.com/Sacramento-ReactJS-Meetup/)
141+
* [San Francisco - Real World React](https://www.meetup.com/Real-World-React)
141142
* [San Francisco - ReactJS](https://www.meetup.com/ReactJS-San-Francisco/)
142143
* [San Francisco, CA - React Native](https://www.meetup.com/React-Native-San-Francisco/)
143144
* [San Ramon, CA - TriValley Coders](https://www.meetup.com/trivalleycoders/)

content/community/tools-starter-kits.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,4 @@ Ready to grow boilerplate with react-router, redux, saga, webpack 3, jest w/ cov
3636
* **[EDGE Platform](https://github.com/sebastian-software/edge)** Universal React/SSR + Apollo GraphQL + JS/CSS Code Splitting + Fine-Tuned Webpack + Localization/Internationalization. Most things are external dependencies. Boilerplate available.
3737
* **[bae](https://github.com/siddharthkp/bae)** Zero config toolkit. SSR (with data fetching) + routing + streaming + styling (with styled-components) + HMR out of the box.
3838
* **[breko-hub](https://github.com/tomatau/breko-hub)** A production ready boilerplate for universal react applications. Complete with code splitting, server render (using koa), redux, sagas, debugging, hot-reloading (live updates on the server), css-modules, scss, super fast integration tests and unit tests. There's also a big focus on clean code and smaller files.
39+
* **[appseed](https://github.com/rosoftdeveloper/appseed)** A production ready boilerplate for UI-Ready react applications. The frontend can be bundled with various backends: Flask, Laravel, Express.

content/docs/accessibility.md

Lines changed: 152 additions & 173 deletions
Large diffs are not rendered by default.

content/docs/add-react-to-a-website.md

Lines changed: 73 additions & 73 deletions
Large diffs are not rendered by default.

content/docs/codebase-overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ Its main goals are:
211211
* Ability to return multiple elements from `render()`.
212212
* Better support for error boundaries.
213213

214-
You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e). While it has shipped with React 16, the async features are not enabled by default yet.
214+
You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/inside-fiber-an-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet.
215215

216216
Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler).
217217

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,94 @@
11
---
22
id: create-a-new-react-app
3-
title: Create a New React App
3+
title: 새로운 React 앱 만들기
44
permalink: docs/create-a-new-react-app.html
55
redirect_from:
66
- "docs/add-react-to-a-new-app.html"
77
prev: add-react-to-a-website.html
88
next: cdn-links.html
99
---
1010

11-
Use an integrated toolchain for the best user and developer experience.
11+
최고의 사용자와 개발자 경험을 위해 통합된 툴체인을 사용하세요.
1212

13-
This page describes a few popular React toolchains which help with tasks like:
13+
이 페이지에서는 도움이 되는 몇 가지 인기 있는 React 툴체인을 소개합니다.
1414

15-
* Scaling to many files and components.
16-
* Using third-party libraries from npm.
17-
* Detecting common mistakes early.
18-
* Live-editing CSS and JS in development.
19-
* Optimizing the output for production.
15+
* 많은 파일과 컴포넌트 스케일링
16+
* 서드파티 npm 라이브러리 사용
17+
* 일반적인 실수를 조기에 발견
18+
* CSS와 JS를 실시간으로 편집
19+
* 프로덕션 코드 최적화
2020

21-
The toolchains recommended on this page **don't require configuration to get started**.
21+
이 페이지에서 추천하는 툴체인은 **시작하는데, 별도의 환경설정이 필요 없습니다.**
2222

23-
## You Might Not Need a Toolchain {#you-might-not-need-a-toolchain}
23+
## 툴체인이 필요하지 않을 수 있습니다. {#you-might-not-need-a-toolchain}
2424

25-
If you don't experience the problems described above or don't feel comfortable using JavaScript tools yet, consider [adding React as a plain `<script>` tag on an HTML page](/docs/add-react-to-a-website.html), optionally [with JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx).
25+
위에서 설명한 문제를 경험하지 못했거나 아직 Javascript 도구를 사용하는 것이 편하지 않다면, [React를 HTML 페이지에서 일반적인 <script> 태그에 추가](/docs/add-react-to-a-website.html)하거나 [JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx)를 고려하세요.
2626

27-
This is also **the easiest way to integrate React into an existing website.** You can always add a larger toolchain if you find it helpful!
27+
이 방법이 **제일 쉽게 React를 이미 만들어진 웹사이트에 추가하는 방법입니다**. 그리고 언제나 도움이 될 것 같으면 더 많은 툴체인을 추가할 수가 있습니다.
2828

29-
## Recommended Toolchains {#recommended-toolchains}
29+
## 추천 툴체인 {#recommended-toolchains}
3030

31-
The React team primarily recommends these solutions:
31+
React 팀의 추천 방법은 아래와 같습니다
3232

33-
- If you're **learning React** or **creating a new [single-page](/docs/glossary.html#single-page-application) app,** use [Create React App](#create-react-app).
34-
- If you're building a **server-rendered website with Node.js,** try [Next.js](#nextjs).
35-
- If you're building a **static content-oriented website,** try [Gatsby](#gatsby).
36-
- If you're building a **component library** or **integrating with an existing codebase**, try [More Flexible Toolchains](#more-flexible-toolchains).
33+
- **React를 배우고 있거나** 아니면 **새로운 [싱글 페이지](/docs/glossary.html#single-page-application) **을 만들고 싶다면 Create React App](#create-react-app).
34+
- **서버 렌더링 Node.js 웹사이트를 만들고 있다면** [Next.js](#nextjs)을 시도해보세요..
35+
- **고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면** [Gatsby](#gatsby)를 시도해보세요..
36+
- **컴포넌트 라이브러리** 혹은 **이미 있는 코드 베이스에 통합을 한다**[더 유연한 툴체인](#more-flexible-toolchains).
3737

3838
### Create React App {#create-react-app}
3939

40-
[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
40+
[Create React App](https://github.com/facebookincubator/create-react-app)**React 배우기**에 간편한 환경입니다. 그리고 시작하기에 최고의 방법은 **새로운 [싱글 페이지 애플리케이션](/docs/glossary.html#single-page-application)** 입니다.
4141

42-
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run:
42+
이것은 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해줍니다. Node 6 혹은 상위 버전 및 npm 5.2 혹은 상위 버전이 필요합니다. 새로운 프로젝트를 만들기 위해 아래의 명령어를 실행합니다.
4343

4444
```bash
4545
npx create-react-app my-app
4646
cd my-app
4747
npm start
4848
```
4949

50-
>Note
50+
>주의
5151
>
52-
>`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
52+
>첫 번째 줄의 'npx'는 실수가 아니며 [npm 5.2+ 버전의 패키지 실행 도구입니다](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
5353
54-
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
54+
Create React App 은 백 앤드 로직이나 데이터베이스를 제어할 수 없습니다. Create React App 은 프런트 앤드 빌드 파이프라인만 생성하기 때문에 백 앤드를 원하는 대로 사용할 수 있습니다. Create React App는 Babel이나 webpack같은 build 도구를 사용하나, 설정 없이도 동작합니다.
5555

56-
When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app--) and the [User Guide](https://facebook.github.io/create-react-app/).
56+
프로덕션을 배포할 준비가 되었을 때, npm run build 를 실행하면 build 폴더 안에 제작한 앱의 최적화된 Build를 생성합니다. [README](https://github.com/facebookincubator/create-react-app#create-react-app-)[사용자 가이드](https://facebook.github.io/create-react-app/)에서 더 자세한 사항을 볼 수 있습니다.
5757

5858
### Next.js {#nextjs}
5959

60-
[Next.js](https://nextjs.org/) is a popular and lightweight framework for **static and server‑rendered applications** built with React. It includes **styling and routing solutions** out of the box, and assumes that you're using [Node.js](https://nodejs.org/) as the server environment.
60+
[Next.js](https://nextjs.org/)는 인기 있는 경량의 프레임워크로 React로 만들어진 **스태틱 서버 렌더링 애플리케이션**입니다. 기본적으로 **스타일링과 라우팅 해결책**을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용하고 있다고 생각합니다.
6161

62-
Learn Next.js from [its official guide](https://nextjs.org/learn/).
62+
Next.js를 [정식 가이드](https://nextjs.org/learn/)를 보면서 배워보세요.
6363

6464
### Gatsby {#gatsby}
6565

66-
[Gatsby](https://www.gatsbyjs.org/) is the best way to create **static websites** with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.
66+
[Gatsby](https://www.gatsbyjs.org/)**정적 웹사이트를** React로 만들기에는 최고의 방법입니다. React 컴포넌트를 사용하게 해주지만 미리 렌더링 된 HTML과 CSS를 사용하여 가장 빠르게 로드됩니다.
6767

68-
Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [gallery of starter kits](https://www.gatsbyjs.org/docs/gatsby-starters/).
68+
Gatsby를 [정식 가이드](https://www.gatsbyjs.org/docs/)[스타터 키트](https://www.gatsbyjs.org/docs/gatsby-starters/)를 보면서 배워보세요
6969

70-
### More Flexible Toolchains {#more-flexible-toolchains}
70+
### 더 유연한 툴체인 {#more-flexible-toolchains}
7171

72-
The following toolchains offer more flexibility and choice. We recommend them to more experienced users:
72+
밑에 있는 툴체인은 조금 더 많은 선택과 다르기 쉬운 옵션입니다. 숙련된 사용자들에게 추천합니다.
7373

74-
- **[Neutrino](https://neutrinojs.org/)** combines the power of [webpack](https://webpack.js.org/) with the simplicity of presets, and includes a preset for [React apps](https://neutrinojs.org/packages/react/) and [React components](https://neutrinojs.org/packages/react-components/).
74+
- **[Neutrino](https://neutrinojs.org/)** [webpack](https://webpack.js.org/)의 장점과 React의 단순함과 미리 설정된 [](https://neutrinojs.org/packages/react/)[컴포넌트](https://neutrinojs.org/packages/react-components/)를 합친 것입니다.
75+
76+
- **[nwb](https://github.com/insin/nwb)** React 컴포넌트를 npm을 사용하여 배포하기에 아주 좋습니다. [새로운 리액트 앱](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb)을 만들기에도 적절합니다.
7577

76-
- **[nwb](https://github.com/insin/nwb)** is particularly great for [publishing React components for npm](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb). It [can be used](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb) for creating React apps, too.
78+
- **[Parcel](https://parceljs.org/)** [React와 함께 사용할 수 있고](https://parceljs.org/recipes.html#react) 빠르고 설정이 필요 없는 웹 애플리케이션 bundler입니다.
7779

78-
- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react).
80+
- **[Razzle](https://github.com/jaredpalmer/razzle)** 서버 렌더링 프레임워크며 설정이 필요 없지만, Next.js보다 다루기 쉽습니다.
7981

80-
- **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
82+
## 툴체인을 직접 만들기 {#creating-a-toolchain-from-scratch}
8183

82-
## Creating a Toolchain from Scratch {#creating-a-toolchain-from-scratch}
84+
JavaScript build 툴체인은 주로 아래와 같이 구성되어있습니다
8385

84-
A JavaScript build toolchain typically consists of:
86+
* [Yarn](https://yarnpkg.com/) 혹은 [npm](https://www.npmjs.com/)같은 package 매니저는 서드파티 패키지의 방대한 생태계를 활용할 수 있게 하며, 쉽게 설치하고 업데이트할 수 있게 합니다.
8587

86-
* A **package manager**, such as [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
88+
* [webpack](https://webpack.js.org/) 아니면 [Parcel](https://parceljs.org/) 같은 **bundler**는 코드를 모듈방식으로 작성할 수 있게 하고 이를 작은 package로 묶어서 로딩 시간을 최적화할 수 있습니다.
8789

88-
* A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
90+
* [Babel](https://babeljs.io/) 같은 **컴파일러**는 최신 JavaScript 코드를 구형 브라우저에도 실행되게 도와줍니다.
8991

90-
* A **compiler** such as [Babel](https://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
92+
만든 JavaScript 툴체인을 원하신다면, [이 가이드를 보세요](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658).
9193

92-
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.
93-
94-
Don't forget to ensure your custom toolchain [is correctly set up for production](/docs/optimizing-performance.html#use-the-production-build).
94+
커스텀 툴체인이 제대로 설정되어 있는지 [잊지 마세요](/docs/optimizing-performance.html#use-the-production-build).

0 commit comments

Comments
 (0)