Skip to content

Commit

Permalink
Use more natural language
Browse files Browse the repository at this point in the history
  • Loading branch information
polyecho committed Apr 5, 2024
1 parent 6d40141 commit 7e6f73d
Show file tree
Hide file tree
Showing 13 changed files with 30 additions and 30 deletions.
4 changes: 2 additions & 2 deletions src/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
- [Game of Life 테스팅하기](./game-of-life/testing.md)
- [디버깅](./game-of-life/debugging.md)
- [상호작용 추가하기](./game-of-life/interactivity.md)
- [시간 프로파일링](./game-of-life/time-profiling.md)
- [타임 프로파일링](./game-of-life/time-profiling.md)
- [`.wasm` 파일 사이즈 줄이기](./game-of-life/code-size.md)
- [npm에 배포하기](./game-of-life/publishing-to-npm.md)
--------------------------------------------------------------------------------
Expand All @@ -22,7 +22,7 @@
- [알면 좋은 툴들](./reference/tools.md)
- [프로젝트 템플릿](./reference/project-templates.md)
- [디버깅](./reference/debugging.md)
- [시간 프로파일링](./reference/time-profiling.md)
- [타임 프로파일링](./reference/time-profiling.md)
- [`.wasm` 파일 사이즈 줄이기](./reference/code-size.md)
- [JavaScript 상호 운용하기](./reference/js-ffi.md)
- [어떤 Rust 크레이트들을 WebAssembly에서 바로 사용할수 있나요?](./reference/which-crates-work-with-wasm.md)
Expand Down
4 changes: 2 additions & 2 deletions src/game-of-life/debugging.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 디버깅

코드를 더 작성하기 전에, 디버깅 툴들을 살펴보고 한번 장전해보도록 합시다. 관심이 있다면 [Rust로 WebAssembly 바이너리를 생성하는 데에 사용해볼수 있는 접근방법과 툴에 대해 다루는 참조 페이지][reference-debugging]도 확인해보세요!
코드를 더 작성하기 전에, 디버깅 툴들을 살펴보고 한번 장전해보도록 합시다. 관심이 있다면 [Rust로 WebAssembly 바이너리를 생성하는 데에 사용해볼수 있는 접근방법과 툴에 대해 다루는 참조 페이지][reference-debugging] 도 확인해보세요!

[reference-debugging]: ../reference/debugging.html

Expand Down Expand Up @@ -89,7 +89,7 @@ index f757641..a30e107 100755

[브라우저 디버깅 툴은 Rust로 작성한 WebAssembly와 상호작용하는 JavaScript 코드를 살펴볼 때 유용합니다.](../reference/debugging.html#using-a-debugger)

예를 들어서, `universe.tick()` 호출 이전에 [JavaScript 코드의 `debugger;`][dbg-stmt]을 추가하면 디버깅 툴을 사용하여 `renderLoop`의 매 순회마다 코드 실행을 일시정지 시킬 수 있게 됩니다.
예를 들어서, `universe.tick()` 호출 이전에 [JavaScript 코드에 `debugger;`][dbg-stmt]을 추가하면 디버깅 툴을 사용하여 `renderLoop`의 매 순회마다 코드 실행을 일시정지 시킬 수 있게 됩니다.

```js
const renderLoop = () => {
Expand Down
2 changes: 1 addition & 1 deletion src/game-of-life/implementing.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Game of Life는 무한한 세상에서 시작됩니다. 하지만 우리가 무

> ⚡ 다음 내용은 이 튜토리얼에서 다루는 내용 중에서도 아주 중요한 내용입니다. 이 내용을 이해하면서 얻어갈 수 있는 부분이 많습니다!
JavaScript는 `Object`, `Array` 그리고 [DOM 노드 (node)](https://developer.mozilla.org/ko/docs/Glossary/Node/DOM)들이 할당되는 가비지 콜렉터가 관리하는 힙을 사용하지만, 작성하게 될 Rust 코드의 선형 메모리는 별개의 공간을 사용하게 됩니다. WebAssembly는 현재로써는 가비지 콜렉터가 관리하는 힙에 직접 접근할수 없습니다. (2018년 4월 기준으로, ["Interface Types" proposal][interface-types]과 함께 변경될 전망이긴 합니다.) 반면에 JavaScript는 [`ArrayBuffer`][array-buf]나 스칼라 값 (scalar values / `u8`, `i32`, `f64`, 등...)만으로라도 이 선형 메모리를 읽고 쓸수 있습니다. 이런 내용을 기반으로 모든 WebAssembly와 JavaScript 사이의 커뮤니케이션이 구성되게 됩니다.
JavaScript는 `Object`, `Array` 그리고 [DOM 노드(node)](https://developer.mozilla.org/ko/docs/Glossary/Node/DOM)들이 할당되는 가비지 콜렉터가 관리하는 힙을 사용하지만, 작성하게 될 Rust 코드의 선형 메모리는 별개의 공간을 사용하게 됩니다. WebAssembly는 현재로써는 가비지 콜렉터가 관리하는 힙에 직접 접근할수 없습니다. (2018년 4월 기준으로, ["인터페이스 타입" 제안][interface-types] 과 함께 변경될 전망이긴 합니다.) 반면에 JavaScript는 [`ArrayBuffer`][array-buf]나 스칼라 값 (scalar values / `u8`, `i32`, `f64`, 등...)만으로라도 이 선형 메모리를 읽고 쓸수 있습니다. 이런 내용을 기반으로 모든 WebAssembly와 JavaScript 사이의 커뮤니케이션이 구성되게 됩니다.

[interface-types]: https://github.com/WebAssembly/interface-types/blob/master/proposals/interface-types/Explainer.md
[array-buf]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
Expand Down
8 changes: 4 additions & 4 deletions src/game-of-life/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@

## 무엇을 배우게 되나요?

* WebAssembly 컴파일링을 할수 있도록 Rust 툴체인 셋업하는 법.
* WebAssembly 컴파일링을 할수 있도록 Rust 툴체인을 설정하는 법.

* Rust, WebAssembly, JavaScript, HTML, CSS으로 만든 다언어 프로그램 개발을 위한 워크플로우.

* Rust와 WebAssembly, 그리고 JavaScript의 강점을 모두 살리는 API를 설계하는 방법.
* Rust와 WebAssembly, 그리고 JavaScript의 강점을 모두 살리도록 API를 설계하는 방법.

* Rust 코드에서 컴파일된 WebAssembly 모듈 디버깅하는 .
* Rust 코드에서 컴파일된 WebAssembly 모듈을 디버깅하는 방법.

* Rust와 WebAssembly 프로그램을 더 빠르게 만들기 위해 타임 프로파일링 하는 법.

* `.wasm` 바이너리를 네트워크에서 다운로드 할때 더 작고 빠르게 만들기 위해 Rust와 WebAssembly 프로그램을 사이즈 프로파일링 하는 방법.
* 네트워크를 통해 다운로드 할때 `.wasm` 바이너리를 더 작고 빠르게 만들도록 Rust와 WebAssembly 프로그램을 사이즈 프로파일링 하는 방법.
2 changes: 1 addition & 1 deletion src/game-of-life/publishing-to-npm.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## 준비 사항

우선, [npm 계정이 있는지 확인해주세요](https://www.npmjs.com/signup).
우선, [기존에 생성된 npm 계정이 있는지 확인해주세요](https://www.npmjs.com/signup).

그 다음, 다음 명령어를 실행하여 로컬 머신에서 계정에 로그인돼 있는지 확인해주세요:

Expand Down
6 changes: 3 additions & 3 deletions src/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@
> 번역된 버전에 이슈나 풀 리퀘스트를 생성하고자 하시나요? [번역 버전의 레포지토리](https://github.com/polyecho/rust-wasm-book-ko)를 확인해주세요.
## 누구를 위한 책인가요?
이 책은 Rust 코드를 웹에서 작동하는 빠르고 안정된 WebAssembly 코드로 컴파일하는데에 관심이 있는 사람들을 위해 작성됐습니다.
이 책은 Rust와 WebAssembly를 함께 사용하여 웹에서 동작하는 빠르고 안정된 코드를 작성하는 방법에 대해 관심이 있는 분들을 위해 작성되었습니다.
꼭 전문가가 돼야할 필요는 없지만, Rust를 조금이라도 알아야 하고 JavaScript와 HTML, CSS에 익숙하면 더 좋습니다.

Rust를 아직 모르시나요? [*The Rust Programming Language* 책으로 시작해보세요.][trpl]

JavaScript나 HTML, CSS를 모르시나요? [MDN에서 더 알아보세요.][mdn]

## 이 책을 읽는 방법
[왜 Rust로 WebAssembly 개발을 해야 하나요?][why-rust-wasm] 읽어보면 좋고, [배경 지식][background]과 먼저 친숙해져보는것도 좋습니다.
[왜 Rust로 WebAssembly 개발을 해야 하나요?][why-rust-wasm] 섹션을 읽어보면 좋고, [배경 지식][background]과 먼저 친숙해져보는것도 좋습니다.

[튜토리얼][tutorial]은 처음부터 끝까지 읽도록 작성됐습니다. 튜토리얼에 있는 코드를 작성, 컴파일링하고 직접 실행해보세요. Rust와 WebAssembly를 같이 사용해본적이 없다면, 튜토리얼을 활용해보세요!
[튜토리얼][tutorial]은 처음부터 끝까지 읽도록 작성됐습니다. 튜토리얼에 있는 코드를 작성, 컴파일하고 직접 실행해보세요. Rust와 WebAssembly를 같이 사용해본적이 없다면, 튜토리얼을 한번 활용해보세요!

[레퍼런스 섹션][reference] 은 아무 순서로 정독해도 괜찮습니다.

Expand Down
6 changes: 3 additions & 3 deletions src/reference/add-wasm-support-to-crate.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@

## 크레이트가 이미 WebAssembly를 지원할수도 있어요!

[어떤 작업을 하는 다목적 크레이트가 WebAssembly에 적합하지 ****나요](./which-crates-work-with-wasm.html)의 내용을 먼저 읽어보세요. 작성하는 크레이트가 해당 사항이 없다면, WebAssembly를 지원할 확률이 높습니다.
[어떤 작업을 하는 다목적 크레이트가 WebAssembly에 적합하지 **않나요**?](./which-crates-work-with-wasm.html) 의 내용을 먼저 읽어보세요. 작성하는 크레이트가 해당 사항이 없다면, WebAssembly를 지원할 확률이 높습니다.

추가로, `cargo build` 명령어를 입력해서 WebAssembly 타겟을 지원하는지 항상 확인해볼수 있습니다:

```
cargo build --target wasm32-unknown-unknown
```

명령어 실행이 실패한다면 현재로서는 크레이트가 WebAssembly를 지원하지 않는다는 내용을 확일할 수 있습니다. 하지만 이 명령어가 성공하더라도 크레이트가 꼭 WebAssembly를 지원한다는 의미는 아닙니다. 더 확실하게 확인하고 싶다면 [wasm 테스팅 코드를 추가하고 지속성 통합 (continuous integration) 환경에서 테스트를 실행해보기](#maintaining-ongoing-support-for-webassembly)를 읽어보세요.
명령어 실행이 실패한다면 현재로서는 크레이트가 WebAssembly를 지원하지 않는다는 내용을 확일할 수 있습니다. 하지만 이 명령어가 성공하더라도 크레이트가 꼭 WebAssembly를 지원한다는 의미는 아닙니다. 더 확실하게 확인하고 싶다면 [wasm 테스팅 코드를 추가하고 지속성 통합 (continuous integration) 환경에서 테스트를 실행해보기](#maintaining-ongoing-support-for-webassembly) 를 읽어보세요.

## WebAssembly 지원 추가하기

Expand Down Expand Up @@ -142,7 +142,7 @@ matrix:
script: cargo check --target wasm32-unknown-unknown
```
### Node.js와 [헤드리스 브라우저 (Headless Browsers)](https://ko.wikipedia.org/wiki/헤드리스_브라우저)에서 테스팅하기
### Node.js와 [헤드리스 브라우저 (Headless Browsers)](https://ko.wikipedia.org/wiki/헤드리스_브라우저) 에서 테스팅하기
`wasm-bindgen-test`와 `wasm-pack-test` subcommand를 사용해서 wasm 테스트들 Node.js나 헤드리스 브라우저에서 실행해보세요. 이러한 테스트들을 CI에 통합시켜볼수도 있습니다.

Expand Down
2 changes: 1 addition & 1 deletion src/reference/code-size.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ wasm 바이너리 사이즈를 줄이는 데 바이너리 파일에 포함된

빌드 최적화 설정을 바꿨는데도 `.wasm` 코드 사이즈가 줄어들지 않는다면, 어떤 부분이 나머지 공간을 사용하는지 프로파일링 작업을 해보면서 알아보도록 합시다.

> 시간 프로파일링 가이드를 따라왔던 것처럼, 사이즈 프로파일링 가이드도 한번 읽어보고 시도해봅시다. 읽어보는 것만으로도 시간을 정말 많이 아낄수 있습니다!
> 타임 프로파일링 가이드를 따라왔던 것처럼, 사이즈 프로파일링 가이드도 한번 읽어보고 시도해봅시다. 읽어보는 것만으로도 시간을 정말 많이 아낄수 있습니다!
### `twiggy` 코드 사이즈 프로파일러

Expand Down
6 changes: 3 additions & 3 deletions src/reference/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,13 @@ web_sys::console::log_1(&"Hello, world!".into());
* [로그할 값들을 배열로 받는 `web_sys::console::log`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/console/fn.log.html)
* [한 값만 로그하는 `web_sys::console::log_1`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/console/fn.log_1.html)
* [두 값을 로그하는 `web_sys::console::log_2`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/console/fn.log_2.html)
* ...
* 기타...

* `web-sys` 크레이트로 `console.error` 함수 사용하기:
* [로그할 값들을 배열로 받는 `web_sys::console::error`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/console/fn.error.html)
* [한 값만 로그하는 `web_sys::console::error_1`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/console/fn.error_1.html)
* [두 값을 로그하는 `web_sys::console::error_2`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/console/fn.error_2.html)
* ...
* 기타...

* [`console` 객체에 대해 설명해주는 MDN 문서](https://developer.mozilla.org/en-US/docs/Web/API/Console)
* [Firefox 개발자 도구 — 웹 콘솔](https://developer.mozilla.org/en-US/docs/Tools/Web_Console)
Expand Down Expand Up @@ -84,7 +84,7 @@ pub fn init_panic_hook() {
* [Chrome DevTools에서 JavaScript 디버깅 시작해보기](https://developers.google.com/web/tools/chrome-devtools/javascript/)

## 처음부터 WebAssembly 디버깅을 최소화할수 있도록 해주세요
고쳐야 할 버그가 JavaScript나 Web API 환경을 필요로 한다면 [`wasm-bindgen-test`으로 테스팅 코드를 작성해보세요.][wbg-test]
고쳐야 할 버그가 JavaScript나 Web API 환경을 필요로 한다면 [`wasm-bindgen-test`으로 테스팅 코드를 작성해보세요][wbg-test].

그렇지 *않다면* `#[test]` 속성을 포함해서 일반적인 Rust 코드처럼 재현해보세요. 이렇게 하면 운영체제의 성숙한 네이티브 툴링을 최대한 활용하여 디버깅할 수 있습니다. [`quickcheck`][quickcheck]과 같은 테스팅 크레이트와 테스팅 코드 축소기도 사용해보면서 기계적으로 테스트 코드의 사이즈를 줄여보세요. 최종적으로는, JavaScript 환경이 요구되지 않도록 더 작은 Rust 테스트 코드로 분리시키면 버그를 찾아서 잡기가 쉬워집니다.

Expand Down
2 changes: 1 addition & 1 deletion src/reference/deploying-to-production.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Rust로 생성한 WebAssembly를 사용하는 웹 앱을 배포하려면 빌드

## 추가 자료

* [프로덕션 개발 환경에서 Webpack를 사용하는 모범 사례][webpack-prod] 많은 Rust와 WebAssembly 프로젝트들은 Rust로 생성한 WebAssembly와 JavaScript, CSS, HTML 코드를 번들링 하기 위해 Webpack을 사용합니다. 이 가이드는 프로덕션 환경에 배포할 때 어떻게 Webpack을 가장 잘 활용할수 있는지 알려주는 유용한 정보들를 포함합니다.
* [프로덕션 개발 환경에서 Webpack를 사용하는 모범 사례.][webpack-prod] 많은 Rust와 WebAssembly 프로젝트들은 Rust로 생성한 WebAssembly와 JavaScript, CSS, HTML 코드를 번들링 하기 위해 Webpack을 사용합니다. 이 가이드는 프로덕션 환경에 배포할 때 어떻게 Webpack을 가장 잘 활용할수 있는지 알려주는 유용한 정보들를 포함합니다.
* [Apache 문서.][apache] Apache는 프로덕션 환경에서 많이 사용되는 HTTP 서버입니다.
* [NGINX 문서.][nginx] NGNIX는 프로덕션 환경에서 많이 사용되는 HTTP 서버입니다.

Expand Down
2 changes: 1 addition & 1 deletion src/reference/which-crates-work-with-wasm.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 어떤 크레이트들을 WebAssembly에서 바로 사용할수 있나요?

가장 간단하게 어떤 것들이 WebAssembly 환경에서 작동하지 않는지 목록으로 만들어 보겠습니다. 다음 내용에 해당하지 않는 크레이트들은 휴대성이 좋고 WebAssembly 환경에서 잘 작동한다고 생각해도 좋고, 임베디드 시스템과 `#![no_std]`를 지원한다면 보통은 WebAssembly도 지원한다고 볼수 있습니다.
가장 간단하게 어떤 것들이 WebAssembly 환경에서 작동하지 않는지 목록을 한번 만들어 보겠습니다. 다음 내용에 해당하지 않는 크레이트들은 휴대성이 좋고 WebAssembly 환경에서 잘 작동한다고 생각해도 좋고, 임베디드 시스템과 `#![no_std]`를 지원한다면 보통은 WebAssembly도 지원한다고 볼수 있습니다.

## 이러한 크레이트들은 WebAssembly 환경에서 작동하지 않을수도 있습니다

Expand Down
6 changes: 3 additions & 3 deletions src/what-is-webassembly.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# WebAssembly가 뭔가요?

WebAssembly(wasm)는 [포괄적인 사양][extensive specification] 있는 간단한 기계 모델이자 실행 가능한 포맷입니다. 휴대 가능하고, 가벼우며 거의 네이티브 프로그램과 같은 속도로 실행될수도 있도록 설계됐습니다.
WebAssembly(wasm)는 [포괄적인 사양][extensive specification]을 가지고 있는 간단한 기계 모델이자 실행 가능한 포맷입니다. 휴대 가능하고, 가벼우며 거의 네이티브 프로그램과 같은 속도로 실행될수도 있도록 설계됐습니다.

프로그래밍 언어로써, WebAssembly는 같은 구조를 나타내면서도 두가지 다른 포맷으로 구성돼 있습니다.

1. `.wat` 텍스트 포맷 ("**W**eb**A**ssembly **T**ext" 에서 유래함)은 [S-expressions] 구조를 사용하고 Scheme이나 Clojure와 같은 Lisp 계열 언어와 유사점을 공유합니다.
1. `.wat` 텍스트 포맷 ("**W**eb**A**ssembly **T**ext" 에서 유래함)은 [S-expressions] 구조를 사용하고 Scheme이나 Clojure와 같은 Lisp 계열 언어와 유사점들을 공유합니다.

2. `.wasm` 바이너리 포맷은 더 저레벨이면서 WebAssembly 가상 머신에서 바로 사용되도록 의도됐습니다. 개념적으로 ELF 와 Mach-0와 비슷합니다.

Expand Down Expand Up @@ -38,7 +38,7 @@ WebAssembly 매우 간단한 [메모리 모델][memory model]을 가지고 있

## 웹에서만 WebAssembly를 사용할 수 있나요?

현재로써는 JavaScript 웹 커뮤니티에서 주목을 받고 있지만, wasm은 특정 실행 환경을 필요로 하지 않습니다. 그러므로, wasm이 미래에 다양한 맥락에서 사용할수 있는 "휴대 가능한 실행할수 있는" 포맷이라고 여겨질수도 있습니다. 하지만 오늘날 wasm은 대부분 (웹과 [Node.js]을 포함한) 다양한 형태로 존재하는 JavaScript (JS)와 함께 언급됩니다.
현재로는 JavaScript 웹 커뮤니티에서 주로 주목을 받고 있지만, wasm은 특정 실행 환경을 필요로 하지 않습니다. 그러므로, wasm이 미래에 다양한 맥락에서 사용할수 있는 "휴대 가능한 실행할수 있는" 포맷이라고 여겨질수도 있습니다. 하지만 오늘날 wasm은 대부분 (웹과 [Node.js]을 포함한) 다양한 형태로 존재하는 JavaScript (JS)와 함께 언급됩니다.

[memory model]: https://webassembly.github.io/spec/core/syntax/modules.html#syntax-mem
[memory can be grown]: https://webassembly.github.io/spec/core/syntax/instructions.html#syntax-instr-memory
Expand Down
Loading

0 comments on commit 7e6f73d

Please sign in to comment.