|
| 1 | +[](https://teamcity.jetbrains.com/viewType.html?buildTypeId=JetBrainsUi_CreateReactKotlinApp&guest=1) |
| 2 | +[](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