Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions doc/en/the-client.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
17 changes: 8 additions & 9 deletions doc/kr/README.md
Original file line number Diff line number Diff line change
@@ -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)에 있습니다.
9 changes: 3 additions & 6 deletions doc/kr/application-structure.md
Original file line number Diff line number Diff line change
@@ -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 디렉토리 관례를 따릅니다.

프로젝트 빌드 파일에 대한 자세한 내용은 나중에 보도록 하고, 우선 클라이언트 코드를 먼저 살펴봅시다!
18 changes: 9 additions & 9 deletions doc/kr/autowire-and-boopickle.md
Original file line number Diff line number Diff line change
@@ -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._
Expand All @@ -25,7 +25,7 @@ object AjaxClient extends autowire.Client[ByteBuffer, Pickler, Pickler] {
}
```

응용 프로그램과 관련된 유일한 변수는 서버 호출에 사용하려는 URL입니다. 그렇지 않으면 매크로의 마법을 통해 자동으로 생성 된 다른 모든 것. 서버 측은 심지어 더 간단합니다. 단지 Autowire가 직렬화에 BooPickle을 사용하고자 함을 알립니다.
응용 프로그램이 갖는 고유한 변수는 서버 호출에 사용되는 URL 뿐입니다. 나머지는 매크로 마법을 통해 자동으로 생성됩니다. 서버측은 심지어 더 간단합니다. 단지 직렬화에 BooPickle을 사용한다는 것을 Autowire에 알려주기만 하면 됩니다.

```scala
import boopickle.Default._
Expand All @@ -37,7 +37,7 @@ object Router extends autowire.Server[ByteBuffer, Pickler, Pickler] {
}
```

이제`AjaxClient`가 설정되었으므로 서버를 호출하는 것은 아주 간단합니다.
`AjaxClient`가 설정되었기 때문에, 서버를 호출하는 것은 아주 간단합니다.

```scala
import scala.concurrent.ExecutionContext.Implicits.global
Expand All @@ -49,9 +49,9 @@ AjaxClient[Api].getTodos().call().foreach { todos =>
}
```

Autowire / BooPickle 마법에 액세스하고 미래에 대한 실행 컨텍스트를 제공하려면이 세 가지 가져 오기가 필요합니다.
Autowire/BooPickle 마법과 Future에 대한 실행 컨텍스트(execution context)를 제공하려면 위의 세 import가 필요합니다.

`Api`는 클라이언트와 서버가 공유하는 단순한 특성입니다.
`Api`는 클라이언트와 서버가 공유하는 단순한 trait입니다.

```scala
trait Api {
Expand All @@ -69,6 +69,6 @@ trait Api {
}
```

직렬화가 가능하고 직렬화 할 수없는 것에 대해서는 [BooPickle documentation](https://github.com/ochrons/boopickle)을 확인하십시오. 데이터가 복잡하다면 다른 것을 사용해야 할 수도 있습니다. 사례 클래스, 기본 모음 및 기본 데이터 형식은 안전한 방법입니다.
BooPickle이 어떤 것을 직렬화할 수 있는지에 대해서는 [BooPickle 문서](https://github.com/ochrons/boopickle)을 확인하십시오. 데이터가 복잡하다면 다른 라이브러리를 사용해야 할 수도 있습니다. case class와 기본 콜렉션, 그리고 기본 데이터 타입들은 일반적으로 문제의 여지가 안전합니다.

그렇다면 이것이 서버 측에서 어떻게 작동합니까?
그렇다면 이것이 서버 측에서 어떻게 작동하는지 볼까요?
Loading