Skip to content

Commit b1e36f8

Browse files
Translate README into Korean.
1 parent 1e87d7e commit b1e36f8

File tree

1 file changed

+183
-0
lines changed

1 file changed

+183
-0
lines changed

README-ko.md

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
[![Build Status](https://teamcity.jetbrains.com/app/rest/builds/buildType:JetBrainsUi_CreateReactKotlinApp/statusIcon.svg)](https://teamcity.jetbrains.com/viewType.html?buildTypeId=JetBrainsUi_CreateReactKotlinApp&guest=1)
2+
[![JetBrains team project](http://jb.gg/badges/team.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
3+
4+
[English](https://github.com/JetBrains/create-react-kotlin-app/blob/master/README.md)
5+
[Japanese](https://github.com/JetBrains/create-react-kotlin-app/blob/master/README-ja.md)
6+
7+
# Create React Kotlin App
8+
9+
코틀린 안에서 별도의 빌드 설정 없이 React 앱을 만들어보세요. 이 프로젝트는 `초기의 프리뷰 버전`임을 유의하세요.
10+
11+
## 훑어보기
12+
13+
**프로젝트를 진행하기 전 [JDK 8 버전](http://www.oracle.com/technetwork/java/index.html)이 설치되어 있는지 확인하세요.** Java 9는 아직 지원하지 않습니다.
14+
15+
새 프로젝트를 작성하기:
16+
17+
```sh
18+
npx create-react-kotlin-app my-app
19+
```
20+
21+
([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) npm 5.2+ 버전 이상에서 사용할 수 있습니다. 그 이전의 npm 버전은 [여기](#installation) 를 참고하세요.
22+
23+
프로젝트 시작하기:
24+
25+
```sh
26+
cd my-app/
27+
npm start
28+
```
29+
30+
다음으로 [http://localhost:3000/](http://localhost:3000/)을 열어 앱을 확인할 수 있습니다.<br>
31+
프로덕션에 배포할 준비가 되었다면, `npm run build` 명령어를 통해 미니파이된(minified) 결과물을 만들 수 있습니다.
32+
33+
Create React Kotlin App은 코드에 집중할 수 있도록 코틀린, 웹팩 그리고 IntelliJ IDEA를 알아서 설정하기 때문에 간단하게 프로젝트만 생성하면 됩니다.
34+
35+
## 시작하기
36+
37+
### 설치
38+
39+
create-react-kotlin-app 모듈을 전역적으로 설치합니다.
40+
41+
```sh
42+
npm install -g create-react-kotlin-app
43+
```
44+
45+
만약 이미 `create-react-app`가 설치되어 있거나 혹은 `npx`를 사용한다면 설치 단계는 넘어가도 됩니다.
46+
47+
48+
**6 버전 이상의 Node가 설치되어 있어야 합니다**. [nvm](https://github.com/creationix/nvm#usage)을 사용하여 서로 다른 프로젝트의 Node 버전으로 쉽게 전환할 수 있습니다.
49+
50+
**이 도구는 Node 백엔드 역할을 하지 않습니다.** Node의 설치는 Create React Kotlin App 작성시에만 필요합니다.
51+
52+
### 코틀린과 리액트 같이 사용하기
53+
54+
코틀린에서 리액트를 이용하여 애플리케이션을 개발하려면 [Kotlin wrapper for React](https://www.npmjs.com/package/@jetbrains/kotlin-react)이 필요합니다. [module's repository](https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react)에서 이에 대한 문서와 예제에 대해 살펴볼수 있습니다.
55+
56+
### 코틀린/자바스크립트 패키지 추가하기
57+
58+
Create React Kotlin App 기반의 코틀린으로 작성된 프로젝트에서는 **별도의 설정이 필요하지 않습니다.** 이러한 설정은 Create React Kotlin App에서 구성합니다. 예를 들어 [wrapper for React Router DOM](https://www.npmjs.com/package/@jetbrains/kotlin-react-router-dom)를 설치하기 위해 간단하게 `npm install @jetbrains/kotlin-react-router-dom` 명령어를 실행시키면 됩니다.
59+
60+
### 앱 생성하기
61+
62+
새로운 앱을 실행하기 위해 다음의 명령어를 실행하세요:
63+
64+
```sh
65+
create-react-kotlin-app my-app
66+
cd my-app
67+
```
68+
69+
혹은 `create-react-app`가 설치 되어 있다면 다음의 명령어를 사용할 수 있습니다:
70+
71+
```sh
72+
create-react-app my-app --scripts-version react-scripts-kotlin
73+
cd my-app
74+
```
75+
76+
명령어를 실행시킨 경로 안에 `my-app` 폴더가 생성됩니다. <br>
77+
프로젝트는 [IntelliJ IDEA](https://www.jetbrains.com/idea/)안에서 작업할 수 있도록 사전 구성됩니다. 만약 IntelliJ IDEA에 필요한 `.idea` 폴더가 생성되는 것을 원하지 않으면, `--no-idea` 옵션을 추가하세요. <br>
78+
초기의 프로젝트의 구조가 생성되며, 각각의 모듈이 설치됩니다.
79+
80+
```
81+
my-app/
82+
README.md
83+
node_modules/
84+
package.json
85+
.gitignore
86+
public/
87+
favicon.ico
88+
index.html
89+
manifest.json
90+
src/
91+
app/
92+
App.css
93+
App.kt
94+
index/
95+
index.css
96+
index.kt
97+
logo/
98+
kotlin.svg
99+
Logo.css
100+
Logo.kt
101+
react.svg
102+
ticker/
103+
Ticker.kt
104+
```
105+
106+
이 프로젝트는 앱이 실행된 후 얼마의 시간이 지났는지를 보여주는 간단한 앱입니다.<br>
107+
설치가 완료되면 프로젝트 폴더 안에서 몇가지의 명령어를 실행할 수 있습니다.
108+
109+
110+
### `npm start` 혹은 `yarn start`
111+
112+
개발 모드의 앱을 실행합니다.<br>
113+
[http://localhost:3000](http://localhost:3000)을 통해 앱을 브라우저에서 볼 수 있습니다.
114+
115+
앱의 코드 내에 새로운 수정이 생기면 페이지가 자동으로 새로고침 됩니다.<br>
116+
경고 혹은 에러가 있을 경우, 콘솔창을 통해 볼 수 있습니다.
117+
118+
만약 `Kotlin.defineModule is not a function` 와 같은 에러가 발생한다면, npm cache를 삭제하세요:
119+
120+
rm -rf node_modules/.cache
121+
122+
### `npm run build` 혹은 `yarn build`
123+
124+
`build` 폴더에 프로덕션용 앱을 빌드합니다.<br>
125+
리액트는 프로덕션 모드로 번들링되며, 번들된 결과물은 성능 최적화가 됩니다.
126+
127+
빌드된 결과물은 압축되어 캐시 관리를 위해 각각의 파일 이름은 해쉬를 포함합니다. 이제 앱은 배포될 준비가 되었습니다.
128+
129+
### 앱 디버깅
130+
131+
IntelliJ IDEA Ultimate에서 실행 중인 앱을 내장된 Javascript 디버거를 통해 디버깅할 수 있습니다. IDE는 새로운 인스턴스의 크롬을 실행하여 그 안에 디버거를 연결합니다.
132+
133+
`npm start` 명령어를 통해 앱을 시작하여 코틀린 코드 내에 브레이크 포인트를 추가합니다. 그 다음 오른쪽 상단의 실행/디버깅 설정에서 `크롬에서 디버깅하기(Debug in Chrome)`을 선택합니다. 그리고 초록색 디버그 아이콘을 클릭하거나 맥북의 `^D` 혹은 윈도우와 리눅스에서는 `F9`를 통해 디버깅을 실행시킬 수 있습니다.
134+
135+
현재는 IntelliJ IDEA Ultimate 2017.3에서만 디버깅을 지원합니다.
136+
137+
또한 브라우저의 개발자 도구를 통해 애플리케이션을 디버깅할 수 있습니다.
138+
139+
## 철학
140+
141+
* **하나의 의존성:** 하나의 빌드 의존성을 가집니다. 웹팩과 다른 훌륭한 프로젝트를 사용하고 있지만, 응집력 있는 정교한 경험을 제공합니다.
142+
143+
* **별도의 설정이 필요하지 않습니다:** 별도의 설정을 구성할 필요가 없습니다. 개발 모드 및 프로덕션 모드의 효율적인 설정이 구성되어있기 때문에 코드를 작성하는 것에만 집중할 수 있습니다.
144+
145+
* **별도의 잠금(Lock-In)제한이 없습니다:** 언제든 사용자가 스스로 설정을 할 수 있도록 "eject" 할 수 있습니다. 이 명령어를 통해 모든 설정과 빌드 의존성 모듈이 프로젝트 안으로 이동되며 eject된 설정 파일들을 자유롭게 설정할 수 있다.
146+
147+
## 내부의 구성 요소
148+
149+
생성된 프로젝트는 다음의 npm 모듈을 사용합니다.:
150+
* [Kotlin wrappers](https://github.com/JetBrains/kotlin-wrappers): [@jetbrains/kotlin-react](https://www.npmjs.com/package/@jetbrains/kotlin-react), [@jetbrains/kotlin-react-dom](https://www.npmjs.com/package/@jetbrains/kotlin-react-dom), [@jetbrains/kotlin-extensions](https://www.npmjs.com/package/@jetbrains/kotlin-extensions)
151+
* [Kotlin DSL for HTML](https://www.npmjs.com/package/kotlinx-html)
152+
* [Kotlin Compiler](https://www.npmjs.com/package/kotlin-compiler)
153+
* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [@jetbrains/kotlin-webpack-plugin](https://www.npmjs.com/package/@jetbrains/kotlin-webpack-plugin), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader)
154+
* 기타 등등.
155+
156+
## 왜 사용하나
157+
158+
`create-react-kotlin-app`을 이용하여 코틀린과 리액트를 이용할 수 있는 새로운 애플리케이션을 빠르게 구축할 수 있습니다. 새로운 코틀린 앱을 구축하는데 필요한 모든 환경을 제공합니다:
159+
* 코틀린과 리액트 문법 지원합니다.
160+
* 개발 서버는 코틀린 코드를 자바스크립트 코드로 자동으로 컴파일합니다.
161+
* `build` 스크립트는 소스맵과 함께 자바스크립트, CSS 그리고 이미지를 프로덕션 용으로 빌드합니다.
162+
163+
## 한계
164+
165+
* 현재 이 프로젝트는 단위 테스트를 지원하지 않습니다. 현재 Jest Kotlin wrapper를 만들고 있으니 앞으로 지켜봐주세요.
166+
167+
## 사용자 설정 변환
168+
169+
툴을 이용하여 "eject" 할 수 있으며, 보일러플레이트 생성기로서 사용할 수 있습니다.
170+
171+
`npm run eject`를 사용하면 모든 설정 파일과 변환 모듈(웹팩, 코틀린 컴파일러, 기타 등등)들이 프로젝트에 바로 복사되며 이를 통해 모든 설정을 자유롭게 구성할 수 있습니다. `npm start``npm run build` 명령어는 기존과 같이 동작하되, 복사된 설정 파일에 따라 동작하기 때문에 자유롭게 구성하면 됩니다.
172+
173+
**주의: 실행은 단방향이며, 한번 `eject`되면 다시 복구할 수 없습니다.**
174+
175+
## 프로젝트 기여하기와 이슈 리포팅하기
176+
177+
[YouTrack](https://youtrack.jetbrains.com/issues/CRKA)에 이슈를 등록해주세요. 이 프로젝트는 GitHub의 이슈를 사용하지 않습니다.
178+
179+
이 프로젝트에 대한 기여를 환영합니다! 현재 생성된 [issues](https://youtrack.jetbrains.com/issues/CRKA?q=State:%20Open)를 보거나 [Slack](http://slack.kotlinlang.org/)**#react** 채널에서 우리와 함께 이야기할 수 있습니다.
180+
181+
## 감사의 말
182+
183+
이 프로젝트는 페이스북의 [Create React App](https://github.com/facebookincubator/create-react-app)를 기반으로 합니다. 프로젝트 작성자의 작업과 영감에 대하여 감사드립니다.

0 commit comments

Comments
 (0)