diff --git a/doc/en/the-client.md b/doc/en/the-client.md index b3a5c30..5ded6bc 100644 --- a/doc/en/the-client.md +++ b/doc/en/the-client.md @@ -28,8 +28,8 @@ Once the browser has loaded all the resources, it will call the `SPAMain().main( entry point of the application. The class itself is very simple, ```scala -@JSExport("SPAMain") -object SPAMain extends JSApp { +@JSExportTopLevel("SPAMain") +object SPAMain extends js.JSApp { @JSExport def main(): Unit = { // create stylesheet diff --git a/doc/kr/README.md b/doc/kr/README.md index 009beae..4602abc 100644 --- a/doc/kr/README.md +++ b/doc/kr/README.md @@ -1,19 +1,18 @@ -# Scala.js SPA-지침서 +# Scala.js SPA-튜토리얼 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ochrons/scalajs-spa-tutorial) -[Scala.js](http://www.scala-js.org/)로 간단한 (그러나 잠재적으로 복잡한!) 단일 페이지 응용 프로그램을 만드는 방법에 대한 자습서 -[Play](https://www.playframework.com/). +[Scala.js](http://www.scala-js.org/)와 [Play](https://www.playframework.com/)로 간단하지만 얼마든지 복잡해질 수 있는 단일 페이지 애플리케이션을 만드는 방법에 대한 튜토리얼입니다. ## 목적 -이 프로젝트는 Scala.js로 SPA를 개발하기위한 전형적인 디자인 패턴과 사례를 보여줍니다. -Scala.js와 관련 라이브러리에 대해 더 많이 배울 수있는 방법으로 시작되었지만 공익을 위해 튜토리얼을 만들기로 결정했습니다. :) +이 프로젝트는 Scala.js를 통해 SPA를 개발하는데에 사용되는 일반적인 디자인 패턴과 사례를 보여줍니다. +Scala.js와 관련 라이브러리에 대해 더 공부해 보려고 시작했지만 모두를 위해 튜토리얼을 만들기로 결정했습니다. :) + +이 코드에는 Scala.js를 사용하여 SPA를 작성하는 일반적인 요소들이 다뤄지지만, Scala.js에서 가능한 모든 것을 포괄하는 예제는 아닙니다. +이 튜토리얼을 진행하기 전에 공식 [Scala.js 튜토리얼](http://www.scala-js.org/doc/tutorial.html)과 [Li Haoyi (lihaoyi)](https://github.com/lihaoyi)의 훌륭한 이북 [Hands-on Scala.js](http://lihaoyi.github.io/hands-on-scala-js/#Hands-onScala.js)을 읽고 Scala.js의 기본적인 사항을 이해하는 것이 도움이 될 것입니다. -이 코드는 Scala.js를 사용하여 SPA를 작성하는 일반적인 측면을 다루지 만 Scala.js로 가능한 모든 것을 포괄하는 예제는 아닙니다. -이 튜토리얼을 진행하기 전에 Scala.js의 기본 사항을 이미 알고 공식적인 내용을 [Scala.js 튜토리얼] (http://www.scala-js.org/doc/tutorial.html)과 훌륭한 전자 책 [Scala.js] (http://lihaoyi.github.io/) hands-on-scala-js / # Hands-onScala.js) -[Li Haoyi (lihaoyi)] (https://github.com/lihaoyi)를 통해 읽었다면 도움이 될 것입니다. # 코드 -Tutorial code is hosted in a [Github repo](https://github.com/ochrons/scalajs-spa-tutorial). +튜토리얼의 코드는 [깃허브 리포](https://github.com/ochrons/scalajs-spa-tutorial)에 있습니다. diff --git a/doc/kr/application-structure.md b/doc/kr/application-structure.md index e6398af..032b386 100644 --- a/doc/kr/application-structure.md +++ b/doc/kr/application-structure.md @@ -1,10 +1,7 @@ # 응용프로그램 구조 -응용 프로그램은`client`,`server` 및`shared`의 세 폴더로 나뉩니다. 이름에서 알 수 있듯이 'client`는 SPA의 클라이언트 코드를 포함하고'server`는 서버이며 -`shared`는 둘 다 사용되는 코드와 리소스를 포함합니다. [`build.sbt`] (https://github.com/ochrons/scalajs-spa-tutorial/tree/master/build.sbt)를 잠시 살펴보면, -이 Scala.js의 [cross-building] (http://www.scala-js.org/doc/sbt/cross-building.html) 프로젝트 구조를 정의하기 위해`crossProject`를 사용하게됩니다. +이 애플리케이션은 `client`,`server`및 `shared`의 세 폴더로 나누어져 있습니다. 이름에서 알 수 있듯이 `client`는 SPA의 클라이언트 코드, `server`는 서버, `shared`는 양쪽 모두에서 사용되는 코드와 리소스를 포함합니다. [`build.sbt`](https://github.com/ochrons/scalajs-spa-tutorial/tree/master/build.sbt)를 잠시 살펴보면, Scala.js만의 [교차 빌드(cross-building)](http://www.scala-js.org/doc/sbt/cross-building.html) 프로젝트 구조를 정의하기 위해`crossProject`를 사용하는 것을 알 수 있습니다. -각 하위 프로젝트 내에서 일반적인 SBT / Scala 디렉토리 구조 규칙을 따릅니다. - -프로젝트 빌드 파일에 대한 자세한 내용은 나중에 설명 하겠지만 실제 클라이언트 코드를 먼저 살펴 보겠습니다. +각각의 하위 프로젝트는 일반적으로 쓰이는 SBT/Scala 디렉토리 관례를 따릅니다. +프로젝트 빌드 파일에 대한 자세한 내용은 나중에 보도록 하고, 우선 클라이언트 코드를 먼저 살펴봅시다! diff --git a/doc/kr/autowire-and-boopickle.md b/doc/kr/autowire-and-boopickle.md index 9129ea5..9cdff7d 100644 --- a/doc/kr/autowire-and-boopickle.md +++ b/doc/kr/autowire-and-boopickle.md @@ -1,10 +1,10 @@ # Autowire and BooPickle -웹 클라이언트는 가장 일반적으로 Ajax *라는 서버와 통신합니다.이 기술은 매우 느슨하게 정의 된 기술 모음입니다. JQuery와 같은 가장 눈에 띄는 JavaScript 라이브러리는 브라우저에 노출 된 낮은 수준의 프로토콜에 대한 상위 수준의 액세스를 제공합니다. Scala.js는`dom.extensions.Ajax` (또는 scalajs-dom 0.8+의`dom.ext.Ajax`)에 멋진 Ajax 래퍼를 제공하지만 객체를 직렬화 / 비 직렬화하고 모든 더러운 세부적인 것을 처리하는 것은 여전히 지루합니다. +웹 클라이언트는 일반적으로 *Ajax*라는 느슨하게 정의된 기술의 모음으로 서버와 통신합니다. JQuery와 같은 눈에 잘 띄는 JavaScript 라이브러리들은 브라우저를 통해 노출되는 저수준 프로토콜에 대한 고수준 액세스를 제공합니다. Scala.js는 `dom.extensions.Ajax` (또는 scalajs-dom 0.8+의`dom.ext.Ajax`)에 멋진 Ajax 래퍼를 제공하지만 객체를 직렬화/비 직렬화하고 모든 세밀한 디테일을 처리하는 것은 여전히 지루합니다. -그러나 두려움이 없다면, 우리 친구 [Li Haoyi (lihaoyi)](https://github.com/lihaoyi)가 [Autowire](https://github.com/lihaoyi/autowire)라고 불리는 훌륭한 도서관을 만들고 출판 한 이래로 모든 것을 스스로 할 필요는 없습니다. 내 자신의 [BooPickle](https://github.com/ochrons/boopickle) 라이브러리와 결합하면 클라이언트 - 서버 통신을 쉽게 처리 할 수 있습니다. BooPickle은 바이너리 직렬화 형식을 사용하므로 JSON 형식을 선호한다면 [uPickle](https://github.com/lihaoyi/upickle)을 사용해보십시오. SPA 튜토리얼은 uPickle을 사용하여 직렬화에 사용되었으므로 저장소 기록을 탐색하여 관련 코드 [여기](https://github.com/ochrons/scalajs-spa-tutorial/blob/628bf9308aaebe7f3d0527007ef604801988ef42/js/src/main/scala/spatutorial/client/services/AjaxClient.scala)와 [여기](https://github.com/ochrons/scalajs-spa-tutorial/blob/628bf9308aaebe7f3d0527007ef604801988ef42/jvm/src/main/scala/spatutorial/server/MainApp.scala)를 볼 수 있습니다. +그러나 두려워하지 않아도 됩니다. 우리의 친구 [Li Haoyi (lihaoyi)](https://github.com/lihaoyi)가 [Autowire](https://github.com/lihaoyi/autowire)라고 불리는 훌륭한 라이브러리를 만들고 공개한 이래로 모든 것을 직접 할 필요가 없어졌습니다. 제가 만든 [BooPickle](https://github.com/ochrons/boopickle) 라이브러리와 결합하면 클라이언트-서버 통신을 쉽게 처리 할 수 있습니다. BooPickle은 바이너리 직렬화 형식을 사용하므로 JSON 형식을 선호한다면 [uPickle](https://github.com/lihaoyi/upickle)을 사용해 보십시오. 이 SPA 튜토리얼은 기전에는 uPickle을 통해 직렬화를 수행한 적이 있었기 때문에 저장소 기록을 탐색하여 [여기](https://github.com/ochrons/scalajs-spa-tutorial/blob/628bf9308aaebe7f3d0527007ef604801988ef42/js/src/main/scala/spatutorial/client/services/AjaxClient.scala)와 [여기](https://github.com/ochrons/scalajs-spa-tutorial/blob/628bf9308aaebe7f3d0527007ef604801988ef42/jvm/src/main/scala/spatutorial/server/MainApp.scala)에서 관련 코드를 볼 수 있습니다. -자신 만의 클라이언트 - 서버 통신 경로를 구축하려면 클라이언트 측에서 하나의 객체를 정의하고 서버 측에서 다른 하나의 객체를 정의해야합니다. +자신 만의 클라이언트-서버 통신 경로를 구축하려면 클라이언트 측과 서버 측에 각각 하나의 객체를 정의해야 합니다. ```scala import boopickle.Default._ @@ -25,7 +25,7 @@ object AjaxClient extends autowire.Client[ByteBuffer, Pickler, Pickler] { } ``` -응용 프로그램과 관련된 유일한 변수는 서버 호출에 사용하려는 URL입니다. 그렇지 않으면 매크로의 마법을 통해 자동으로 생성 된 다른 모든 것. 서버 측은 심지어 더 간단합니다. 단지 Autowire가 직렬화에 BooPickle을 사용하고자 함을 알립니다. +응용 프로그램이 갖는 고유한 변수는 서버 호출에 사용되는 URL 뿐입니다. 나머지는 매크로 마법을 통해 자동으로 생성됩니다. 서버측은 심지어 더 간단합니다. 단지 직렬화에 BooPickle을 사용한다는 것을 Autowire에 알려주기만 하면 됩니다. ```scala import boopickle.Default._ @@ -37,7 +37,7 @@ object Router extends autowire.Server[ByteBuffer, Pickler, Pickler] { } ``` -이제`AjaxClient`가 설정되었으므로 서버를 호출하는 것은 아주 간단합니다. +`AjaxClient`가 설정되었기 때문에, 서버를 호출하는 것은 아주 간단합니다. ```scala import scala.concurrent.ExecutionContext.Implicits.global @@ -49,9 +49,9 @@ AjaxClient[Api].getTodos().call().foreach { todos => } ``` -Autowire / BooPickle 마법에 액세스하고 미래에 대한 실행 컨텍스트를 제공하려면이 세 가지 가져 오기가 필요합니다. +Autowire/BooPickle 마법과 Future에 대한 실행 컨텍스트(execution context)를 제공하려면 위의 세 import가 필요합니다. -`Api`는 클라이언트와 서버가 공유하는 단순한 특성입니다. +`Api`는 클라이언트와 서버가 공유하는 단순한 trait입니다. ```scala trait Api { @@ -69,6 +69,6 @@ trait Api { } ``` -직렬화가 가능하고 직렬화 할 수없는 것에 대해서는 [BooPickle documentation](https://github.com/ochrons/boopickle)을 확인하십시오. 데이터가 복잡하다면 다른 것을 사용해야 할 수도 있습니다. 사례 클래스, 기본 모음 및 기본 데이터 형식은 안전한 방법입니다. +BooPickle이 어떤 것을 직렬화할 수 있는지에 대해서는 [BooPickle 문서](https://github.com/ochrons/boopickle)을 확인하십시오. 데이터가 복잡하다면 다른 라이브러리를 사용해야 할 수도 있습니다. case class와 기본 콜렉션, 그리고 기본 데이터 타입들은 일반적으로 문제의 여지가 안전합니다. -그렇다면 이것이 서버 측에서 어떻게 작동합니까? +그렇다면 이것이 서버 측에서 어떻게 작동하는지 볼까요? diff --git a/doc/kr/css-in-scala.md b/doc/kr/css-in-scala.md index 3d64227..1ae44d6 100644 --- a/doc/kr/css-in-scala.md +++ b/doc/kr/css-in-scala.md @@ -1,12 +1,12 @@ -# CSS in Scala +# 스칼라를 통한 CSS -이제 코드에서 HTML을 생성하는 것이 일반적입니다 (예를 들어 Scalatags 사용). 왜 스타일 시트에서도 똑같이하지 마십시오! 외부 CSS 파일을 사용하는 대신 코드에 스타일 시트를 작성하면 특정 이점이 있습니다. 하나의 명확한 이점은 조심하지 않으면 서로 쉽게 충돌하는 글로벌 클래스 이름을 제거하는 것입니다. 또한 타입 안전, 쉬운 리팩터링 및 IDE 완성 지원과 같은 것들을 얻을 수 있습니다. +(Scalatags 등을 사용해) 코드에서 HTML을 생성하는 것이 일반적인 일이 된 이상, 스타일시트에서도 똑같이 할 수 있습니다! 외부 CSS 파일을 사용하는 대신 코드로 스타일 시트를 작성하는 데에 대한 이점이 있습니다. 명확한 이점 중 하나는 조심하지 않으면 쉽게 충돌하는 글로벌 클래스 이름이 더 이상 없다는 것입니다. 또한 타입 안전성, 쉬운 리팩터링 및 IDE 완성 지원과 같은 것들을 얻을 수 있습니다. -이 글을 쓰고있을 때 Scala에서 CSS를 제작하기위한 적어도 두 개의 별도 라이브러리가 있습니다. 하나는 [Scalatags](https://github.com/lihaoyi/scalatags)에 내장되어 있고 다른 하나는 [ScalaCSS](https://github.com/japgolly/scalacss)라는 별개의 라이브러리입니다. 이들은 약간 다른 접근 방식을 취하므로 두 가지를 모두 확인하고 응용 프로그램에 적합한 것을 확인하는 것이 좋습니다. 이 튜토리얼에서는 ScalaCSS를 사용하고 있습니다. scalajs-react와 잘 통합되어 있기 때문입니다. +집필 시점에 Scala를 통해 CSS를 생성하는 라이브러리는 최소 두 가지가 있습니다. 하나는 [Scalatags](https://github.com/lihaoyi/scalatags)에 내장되어 있고 다른 하나는 [ScalaCSS](https://github.com/japgolly/scalacss)라는 별개의 라이브러리입니다. 이들은 약간 다른 접근 방식을 취하므로 두 가지를 모두 확인하고 어떤 것이 앱에 더 적합할지를 보는 것이 좋습니다. 이 튜토리얼에서는 scalajs-react와 더 잘 통합되어 있는 ScalaCSS를 사용합니다. -## Defining global styles +## 글로벌 스타일 정의 -이 튜토리얼에서는 Bootstrap을 사용하여 대부분의 CSS를 제공하므로 전역 스타일 정의가 매우 간단합니다. 원본 CSS는 기본적으로 하나의 정의 만 포함합니다. +이 튜토리얼에서는 대부분의 CSS의 제공을 Bootstrap에 의존하므로 전역 스타일 정의는 매우 간단합니다. 원본 CSS는 기본적으로 하나의 정의만 포함합니다. ```css body { @@ -26,7 +26,7 @@ object GlobalStyles extends StyleSheet.Inline { } ``` -더 자세한 예제는 [ScalaCSS documentation](https://japgolly.github.io/scalacss/book)을 참조하십시오. +더 자세한 예제는 [ScalaCSS 문서](https://japgolly.github.io/scalacss/book)을 참조하십시오. `style`을 호출 할 때마다 내부 레지스트리에 새로운 스타일이 등록됩니다. 실제로 HTML 페이지에서 필요한 CSS를 생성하려면 @@ -34,19 +34,19 @@ object GlobalStyles extends StyleSheet.Inline { GlobalStyles.addToDocument() ``` -우리의 응용 프로그램 초기화 코드에서 실행하면 됩니다. 이것은 [scalajs-react에 대한 특정 초기화](https://japgolly.github.io/scalacss/book/ext/react.html)이며 다른 상황에서는 CSS를 만들고 삽입하는 다른 방법이 있습니다. +을 우리의 응용 프로그램 초기화 코드에서 호출하면 됩니다. 이것은 [scalajs-react에 적용되는 초기화 방법](https://japgolly.github.io/scalacss/book/ext/react.html)이며 다른 상황에서는 CSS를 만들고 삽입하는 다른 방법이 있다는 것을 참고하시기 바랍니다. -## Wrapping external CSS +## 외부 CSS 래핑 -우리가 사용하는 대부분의 스타일은 Bootstrap CSS에 정의되어 있으므로보다 편리하게 CSS에 액세스하려고합니다. 특히 어떤 시점에서 Bootstrap에서 [MaterializeCSS](http://materializecss.com/)로 전환하고 싶다면 모든 CSS 클래스 이름이 단일 위치에서만 발생하면 정말 좋을 것입니다. +우리가 사용하는 대부분의 스타일은 Bootstrap CSS에 정의되어 있으므로, 보다 편리하게 CSS에 액세스하는 것이 좋겠습니다. 특히, 언젠가 Bootstrap에서, 예를 들어, [MaterializeCSS](http://materializecss.com/)로 전환하고 싶다면 모든 CSS 클래스 이름이 한 곳에 모여있다면 정말 좋을 것입니다. -부트 스트랩에서는 기본 클래스와 문맥 클래스를 사용하여 스타일을 정의하는 것이 매우 일반적입니다. 예를 들면 다음과 같습니다. +Bootstrap에서는 기본 클래스와 상황 클래스를 사용하여 스타일을 정의하는 것이 매우 일반적입니다. 예를 들면 다음과 같습니다. ```html ``` -스타일 래퍼를 만들기 위해 문맥 옵션과 헬퍼 함수를 정의하는 것으로 시작하겠습니다. +스타일 래퍼를 만들기 위해 상황 옵션과 몇 가지의 헬퍼 함수를 정의하는 것으로 시작하겠습니다. ```scala class BootstrapStyles(implicit r: mutable.Register) extends StyleSheet.Inline()(r) { @@ -65,17 +65,17 @@ class BootstrapStyles(implicit r: mutable.Register) extends StyleSheet.Inline()( def styleWrap(classNames: String*) = style(addClassNames(classNames: _*)) ``` -`default`,`primary` 등의 값은`Bootstrap.scala` 구성 요소에 정의 된 열거 형에서옵니다. * domain *의 개념은 ScalaCSS [기능적 스타일] (http://japgolly.github.io/scalacss/book/features/stylef.html)에서 비롯되며 사용되기 이전에 생성 된 스타일에 대해 가능한 모든 값을 나열하는 방법입니다. +`default`, `primary` 등의 값은 `Bootstrap.scala` 컴포넌트에 열거형으로 정의되었습니다. 또한 *domain(정의역)*이라는 개념은 ScalaCSS의 [함수형 스타일](http://japgolly.github.io/scalacss/book/features/stylef.html)에서 왔으며, 생성되는 특정 스타일에서 가능한 모든 값을 사용 전에 미리 나열하는 방법입니다. -`commonStyle`은 정의 된 도메인으로부터 하나의 값을 입력 받아 적절한 스타일을 반환하는 * 기능적 스타일 *입니다. 우리는 가능한 모든 부트 스트랩`button` 스타일을 간단하게 정의 할 수 있습니다. +`commonStyle`은 지정된 정의역 내의 하나의 값을 입력 받아 그에 맞는 스타일을 반환하는 *함수형 스타일*입니다. 이를 통해 Bootstrap의 `button`에 대한 모든 스타일을 다음과 같이 간단하게 정의 할 수 있습니다. ```scala val buttonOpt = commonStyle(csDomain, "btn") val button = buttonOpt(default) ``` -기본 버튼 스타일은 간단한 사용을위한`button`으로 정의되어 있지만, * info * 버튼이 필요하다면 간단한 호출 인`buttonOpt (info)`가 그것을 제공 할 것입니다. +버튼의 기본 스타일은 편의를 위해 `button`으로 정의되어 있지만, *info* 버튼이 필요하다면 간단히 `buttonOpt(info)` 함수 호출이면 충분합니다. -좀 더 직설적 인 부트 스트랩 스타일을 위해 우리는 단순히 제공된 모든 부트 스트랩 클래스 이름을 스타일에 추가하는`styleWrap` 함수를 사용합니다. 다양한 부트 스트랩 스타일을보다 명확하게 사용하기 위해 별도의 객체 아래에서 관련 스타일을 래핑합니다. +Bootstrap 스타일을 더 간단히 사용하기 위해 제공된 Bootstrap 클래스 이름들을 스타일에 더해주는 `styleWrap`함수를 사용합니다. 또한, 여러 스타일의 사용을 더 명확하게 하기 위해 연관된 Bootstrap 스타일별로 각각 별도의 object 안에 모아둡니다. ```scala object listGroup { @@ -85,10 +85,10 @@ object listGroup { } ``` -## Using styles +## 스타일 사용하기 -여러분의 React 컴포넌트에서 정의 된 인라인 스타일을 사용하려면 관련 implicit 변환을 얻기 위해`scalacss.ScalaCssReact._`를 import해야합니다. -그 후에는 스타일 시트에 대한 참조를 얻고 아래의 태그에 스타일을 사용하는 것만 큼 간단합니다. +정의된 인라인 스타일들을 여러분의 React 컴포넌트에서 사용하려면 `scalacss.ScalaCssReact._`를 import해서 관련 implicit 변환을 얻어야 합니다. +그러고 나면 아래와 같이, 간단히 스타일시트에 대한 참조를 얻어 태그에 적용하면 됩니다. ```scala private def bss = GlobalStyles.bootstrapStyles @@ -111,8 +111,7 @@ def renderItem(item: TodoItem) = { <.ul(style.listGroup)(P.items toTagMod renderItem) ``` -부트 스트랩 클래스 이름이 스칼라 메서드 뒤에 "숨겨져"있기 때문에 전체 IDE 코드 완성을 지원하며 클래스 이름을 잘못 입력 할 가능성이 없습니다. -컴파일러는 그것을 알아 차리지 못한다. 출력은 예상했던 것과 동일합니다. +Bootstrap의 클래스 이름이 스칼라 메서드 뒤에 "숨겨져"있기 때문에 IDE의 코드 완성 지원을 온전히 받을 수 있으며, 컴파일러가 감지할 수 없는 클래스 이름 오타는 없습니다. 또한, 결과물도 예상했던 대로 생성됩니다. ```html