Skip to content

Commit

Permalink
Fix grammar issues
Browse files Browse the repository at this point in the history
  • Loading branch information
evasquare committed Aug 10, 2024
1 parent 310834a commit 3066296
Show file tree
Hide file tree
Showing 28 changed files with 314 additions and 314 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

## 소개

이 레포지토리의 문서는 Rust를 wasm에 사용하는 방법이나 주로 사용되는 작업환경뿐 아니라 기초적인 부분부터 심화 내용까지 깊이 들어가게 되면서 더 심층적인 내용을 다루게 됩니다. Rust로 놀라운 작업을 할수 있도록 도와주는 가이드 정도로 생각해주세요!
이 레포지토리의 문서는 Rust를 wasm에 사용하는 방법이나 주로 사용되는 작업환경뿐 아니라 기초적인 부분부터 심화 내용까지 깊이 들어가게 되면서 더 심층적인 내용을 다루게 됩니다. Rust로 놀라운 작업을 할 수 있도록 도와주는 가이드 정도로 생각해 주세요!

Rust와 WebAssembly를 함께 사용하는 방법을 배우고 싶다면, 책을 [여기서 온라인으로](https://rustwasm.github.io/book/game-of-life/introduction.html) 읽어보세요.

Expand All @@ -37,23 +37,23 @@ Rust와 WebAssembly를 함께 사용하는 방법을 배우고 싶다면, 책을
$ cargo install mdbook
```

바이너리 코드를 실행하기 위해 `cargo install` 경로가 `$PATH` 에 있는지 확인해주세요.
바이너리 코드를 실행하기 위해 `cargo install` 경로가 `$PATH` 에 있는지 확인해 주세요.

이제 이 경로에서 다음 명령어를 실행해주세요:

```bash
$ mdbook build
```

이 명렁어를 실행해서 책을 빌드하고 `book` 경로에 빌드된 파일들을 출력할수 있는데, 이 경로에 위치한 `index.html` 파일을 찾아 브라우저에서 확인해볼수 있습니다. 변경중인 내용을 실시간으로 확인하고 싶다면 다음 명령어를 실행하여 파일을 수정하면서 저장한 내용을 자동으로 반영할수도 있습니다:
이 명렁어를 실행해서 책을 빌드하고 `book` 경로에 빌드된 파일들을 출력할 수 있는데, 이 경로에 위치한 `index.html` 파일을 찾아 브라우저에서 확인해볼수 있습니다. 변경 중인 내용을 실시간으로 확인하고 싶다면 다음 명령어를 실행하여 파일을 수정하면서 저장한 내용을 자동으로 반영할 수도 있습니다:

```bash
$ mdbook serve
```

이 방법을 통해 자동으로 파일을 생성하고 로컬 환경에서 호스트할수 있습니다. 이렇게 `build`를 매번 실행할 필요 없이 변경된 내용을 쉽고 빠르게 확인할 수 있게 됩니다.
이 방법을 통해 자동으로 파일을 생성하고 로컬 환경에서 호스트할 수 있습니다. 이렇게 `build`를 매번 실행할 필요 없이 변경된 내용을 쉽고 빠르게 확인할 수 있게 됩니다.

이러한 파일들은 모두 마크다운 문법으로 작성됐기 때문에, 직접 파일 생성 작업을 할 필요 없이 레포지토리의 `src` 경로에서 바로 읽어볼수도 있습니다.
이러한 파일들은 모두 마크다운 문법으로 작성됐기 때문에, 직접 파일 생성 작업을 할 필요 없이 레포지토리의 `src` 경로에서 바로 읽어볼 수도 있습니다.

[mdbook]: https://github.com/rust-lang-nursery/mdBook
[rustup]: https://github.com/rust-lang-nursery/rustup.rs/
Expand Down
8 changes: 4 additions & 4 deletions src/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

- [소개](./introduction.md)
- [왜 Rust로 WebAssembly 개발을 해야 하나요?](./why-rust-and-webassembly.md)
- [배경 지식](./background-and-concepts.md)
- [WebAssembly가 뭔가요?](./what-is-webassembly.md)
- [배경지식](./background-and-concepts.md)
- [WebAssembly가 뭔가요?](./what-is-webasseㅌmbly.md)
--------------------------------------------------------------------------------
- [튜토리얼](./game-of-life/introduction.md)
- [셋업](./game-of-life/setup.md)
Expand All @@ -17,15 +17,15 @@
- [`.wasm` 파일 사이즈 줄이기](./game-of-life/code-size.md)
- [npm에 배포하기](./game-of-life/publishing-to-npm.md)
--------------------------------------------------------------------------------
- [레퍼런스](./reference/index.md)
- [참조](./reference/index.md)
- [알면 좋은 크레이트들](./reference/crates.md)
- [알면 좋은 툴들](./reference/tools.md)
- [프로젝트 템플릿](./reference/project-templates.md)
- [디버깅](./reference/debugging.md)
- [타임 프로파일링](./reference/time-profiling.md)
- [`.wasm` 파일 사이즈 줄이기](./reference/code-size.md)
- [JavaScript 상호 운용하기](./reference/js-ffi.md)
- [어떤 Rust 크레이트들을 WebAssembly에서 바로 사용할수 있나요?](./reference/which-crates-work-with-wasm.md)
- [어떤 Rust 크레이트들을 WebAssembly에서 바로 사용할 수 있나요?](./reference/which-crates-work-with-wasm.md)
- [다목적 크레이트가 WebAssembly를 지원하도록 코드 수정하기](./reference/add-wasm-support-to-crate.md)
- [Rust와 WebAssembly 코드를 실제 환경에 배포하기](./reference/deploying-to-production.md)
- [번역본](./reference/translations.md)
4 changes: 2 additions & 2 deletions src/background-and-concepts.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# 배경 지식
이 섹션은 Rust와 WebAssembly 개발을 시작할 때 필요한 배경 지식을 설명해줍니다.
# 배경지식
이 섹션은 Rust와 WebAssembly 개발을 시작할 때 필요한 배경지식을 설명해줍니다.
10 changes: 5 additions & 5 deletions src/game-of-life/code-size.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## 빌드 설정으로 `.wasm` 바이너리 사이즈를 얼마나 줄일 수 있나요?

[`wasm` 바이너리 사이즈를 줄일 때 어떤 빌드 설정을 수정해볼수 있는지 한번 살펴보세요.](../reference/code-size.html#optimizing-builds-for-code-size)
[`wasm` 바이너리 사이즈를 줄일 때 어떤 빌드 설정을 수정해 볼 수 있는지 한번 살펴보세요.](../reference/code-size.html#optimizing-builds-for-code-size)


(debug 심볼이 빠져있는) 기본 빌드 설정으로 Game of Life를 빌드하면 29,410 bytes 사이즈의 바이너리가 출력되게 됩니다:
Expand All @@ -21,18 +21,18 @@ $ wc -c pkg/wasm_game_of_life_bg.wasm
17317 pkg/wasm_game_of_life_bg.wasm
```

그 다음에는 출력된 바이너리를 (거의 모든 HTTP 서버가 하는 대로) `gzip`를 사용하여 압축해보는데, 정말 귀엽게도 바이너리 파일의 사이즈를 9,045 bytes 까지 줄일수 있게 됩니다!
그다음에는 출력된 바이너리를 (거의 모든 HTTP 서버가 하는 대로) `gzip`를 사용하여 압축해 보는데, 정말 귀엽게도 바이너리 파일의 사이즈를 9,045 bytes까지 줄일 수 있게 됩니다!

```
$ gzip -9 < pkg/wasm_game_of_life_bg.wasm | wc -c
9045
```

## 연습해보기
## 연습해 보기

* [`wasm-snip`](../reference/code-size.html#use-the-wasm-snip-tool)을 사용해서 구현했던 Game of Life의 `.wasm` 바이너리에서 패닉 디버깅 함수를 제외시켜보세요. 파일의 사이즈가 얼마나 줄어드나요?

* [`wee_alloc` 를 전역 할당자 (global allocator)](https://github.com/rustwasm/wee_alloc)사용해보고 파일의 사이즈를 이전과 비교해보세요. 프로젝트를 시작할때 클론 했던 `rustwasm/wasm-pack-template` 템플릿은 "wee_alloc" 이라는 cargo 기능(feature)을 포함하고 있는데, 이 기능은 `wasm-game-of-life/Cargo.toml` 파일에 있는 `[features]` 섹션의 `default` 필드에 추가해서 활성화할수 있습니다.
* [`wee_alloc` 를 전역 할당자 (global allocator)](https://github.com/rustwasm/wee_alloc)사용해 보고 파일의 사이즈를 이전과 비교해 보세요. 프로젝트를 시작할 때 클론 했던 `rustwasm/wasm-pack-template` 템플릿은 "wee_alloc" 이라는 cargo 기능을 포함하고 있는데, 이 기능은 `wasm-game-of-life/Cargo.toml` 파일에 있는 `[features]` 섹션의 `default` 필드에 추가해서 활성화할 수 있습니다.

```toml
[features]
Expand All @@ -41,4 +41,4 @@ $ gzip -9 < pkg/wasm_game_of_life_bg.wasm | wc -c

`wee_alloc`을 활성화하면 `.wasm` 바이너리 사이즈가 얼마나 줄어드나요?

* 튜토리얼을 진행하는 내내 한 `Universe`만 페이지에 포함시켰는데, 생성자를 사용하는 대신 단 한개의 `static mut` 전역 인스턴스 (global instance) 만 수정하는 코드를 익스포트 해볼수도 있습니다. 이전 챕터에서 다룬 이중 버퍼링 기법 (double buffering technique) 을 사용하고 싶다면, 이러한 버퍼도 `static mut` 키워드를 사용하여 전역적으로 만들어볼수 있습니다. 이런 방식으로, 구현한 게임에서 모든 동적 할당 (dynamic allocation) 을 없앨수 있고, `#![no_std]` 속성을 추가하여 할당기(allocator)가 없는 크레이트를 만들어볼수도 있습니다. 동적 할당에 필요한 종속성을 다 없애면 `.wasm` 파일의 사이즈가 얼마나 줄어드나요?
* 튜토리얼을 진행하는 내내 한 `Universe`만 페이지에 포함시켰는데, 생성자를 사용하는 대신 단 한 개의 `static mut` 전역 인스턴스 (global instance) 만 수정하는 코드를 익스포트 해볼 수도 있습니다. 이전 챕터에서 다룬 이중 버퍼링 기법 (double buffering technique) 을 사용하고 싶다면, 이러한 버퍼도 `static mut` 키워드를 사용하여 전역적으로 만들어볼 수 있습니다. 이런 방식으로, 구현한 게임에서 모든 동적 할당 (dynamic allocation) 을 없앨 수 있고, `#![no_std]` 속성을 추가하여 할당기(allocator)가 없는 크레이트를 만들어볼 수도 있습니다. 동적 할당에 필요한 종속성을 다 없애면 `.wasm` 파일의 사이즈가 얼마나 줄어드나요?
26 changes: 13 additions & 13 deletions src/game-of-life/debugging.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# 디버깅

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

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

## 패닉 로그 활성화하기

[코드가 패닉할 때 개발자 콘솔에 도움이 되는 에러 메세지를 표시하면 디버깅이 더 쉬워집니다.](../reference/debugging.html#logging-panics)
[코드가 패닉 할 때 개발자 콘솔에 도움이 되는 에러 메세지를 표시하면 디버깅이 더 쉬워집니다.](../reference/debugging.html#logging-panics)

필수로 사용할 필요는 없지만 `wasm-pack-template``wasm-game-of-life/src/utils.rs` 파일에 기본으로 활성화 돼 있는 종속성인 [the `console_error_panic_hook` 크레이트][panic-hook]를 포함합니다. 이 훅(hook)을 생성자에 포함시켜주면 이 기능을 사용할 수 있게 됩니다. `wasm-game-of-life/src/lib.rs` 파일 내의 `Universe::new` 생성자에서 불러보도록 하겠습니다.
필수로 사용할 필요는 없지만 `wasm-pack-template``wasm-game-of-life/src/utils.rs` 파일에 기본으로 활성화돼 있는 종속성인 [the `console_error_panic_hook` 크레이트][panic-hook]를 포함합니다. 이 훅(hook)을 생성자에 포함시켜주면 이 기능을 사용할 수 있게 됩니다. `wasm-game-of-life/src/lib.rs` 파일 내의 `Universe::new` 생성자에서 불러보도록 하겠습니다.

```rust
pub fn new() -> Universe {
Expand All @@ -22,9 +22,9 @@ pub fn new() -> Universe {

## 구현한 Game of Life에 로그 기능 추가하기

[`web-sys` 크레이트를 통해 `console.log` 함수를 사용해보고, 매 세포들의 정보를 로그][logging]할수 있도록 기능을 추가해보겠습니다.
[`web-sys` 크레이트를 통해 `console.log` 함수를 사용해 보고, 매 세포들의 정보를 로그][logging] 할 수 있도록 기능을 추가해 보겠습니다.

우선, `wasm-game-of-life/Cargo.toml` 파일을 열고 `web-sys`를 종속성으로 추가한 다음 `"console"` 기능을 활성해주세요:
우선, `wasm-game-of-life/Cargo.toml` 파일을 열고 `web-sys`를 종속성으로 추가한 다음 `"console"` 기능을 활성화해 주세요:

```toml
[dependencies]
Expand All @@ -45,15 +45,15 @@ features = [
```rust
extern crate web_sys;

// `println!(...)` 스타일의 문법을 `console.log`에 사용할수 있게 해주는 매크로.
// `println!(...)` 스타일의 문법을 `console.log`에 사용할 수 있게 해주는 매크로.
macro_rules! log {
( $( $t:tt )* ) => {
web_sys::console::log_1(&format!( $( $t )* ).into());
}
}
```

이제 Rust 코드에서 `log` 매크로를 호출해서 콘솔에 메세지를 로그해봅시다. 예를 들어서, 세포의 상태, 이웃 수, 다음 틱 상태를 로그할수 있도록 `wasm-game-of-life/src/lib.rs` 파일을 수정해주세요:
이제 Rust 코드에서 `log` 매크로를 호출해서 콘솔에 메세지를 로그 해봅시다. 예를 들어서, 세포의 상태, 이웃 수, 다음 틱 상태를 로그 할 수 있도록 `wasm-game-of-life/src/lib.rs` 파일을 수정해 주세요:

```diff
diff --git a/src/lib.rs b/src/lib.rs
Expand Down Expand Up @@ -87,9 +87,9 @@ index f757641..a30e107 100755

## 디버거를 사용하여 매 틱마다 일시정지 시키기

[브라우저의 스탭핑 디버거 (stepping debugger) 는 Rust로 작성한 WebAssembly와 상호작용하는 JavaScript 코드를 살펴볼때 유용합니다.](../reference/debugging.html#using-a-debugger)
[브라우저의 스탭핑 디버거 (stepping debugger) 는 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 All @@ -103,14 +103,14 @@ const renderLoop = () => {
};
```

이제 로그 메세지를 쉽게 살펴볼수 있도록 간편한 체크포인트(checkpoint) 기능을 사용할수 있게 됐습니다. 이 기능을 통해 현재 렌더된 프레임과 이전 프레임을 비교할수 있습니다.
이제 로그 메세지를 쉽게 살펴볼 수 있도록 간편한 체크포인트(checkpoint) 기능을 사용할 수 있게 됐습니다. 이 기능을 통해 현재 렌더된 프레임과 이전 프레임을 비교할 수 있습니다.

[dbg-stmt]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

[![Game of Life 디버깅 화면 스크린샷](../images/game-of-life/debugging.png)](../images/game-of-life/debugging.png)

## 연습해보기
## 연습해 보기

* 죽게 되거나 살아나게 되는 식으로 상태가 전환되는 각각 세포의 행과 열을 기록할수 있도록 `tick` 함수를 로그하는 코드를 추가해보세요.
* 죽게 되거나 살아나게 되는 식으로 상태가 전환되는 각각 세포의 행과 열을 기록할 수 있도록 `tick` 함수를 로그 하는 코드를 추가해 보세요.

* `Universe::new` 메소드에 `panic!()` 매크로를 추가해서 웹 브라우저의 JavaScript 디버깅 툴에서 패닉한 코드를 [퇴각검색(backtrace)](https://ko.wikipedia.org/wiki/퇴각검색) 할수 있도록 수정해보세요. 추가로 debug 심볼을 비활성화해본 다음 `console_error_panic_hook` 선택적 종속성을 다시 빌드했을 때 스택 추적도 다시 확인해보세요. 그렇게 유용하진 않은것 같은데, 안그런가요?
* `Universe::new` 메소드에 `panic!()` 매크로를 추가해서 웹 브라우저의 JavaScript 디버깅 툴에서 패닉한 코드를 [퇴각검색(backtrace)](https://ko.wikipedia.org/wiki/퇴각검색) 할 수 있도록 수정해 보세요. 추가로 debug 심볼을 비활성화한 다음 `console_error_panic_hook` 선택적 종속성을 다시 빌드했을 때 스택 추적도 다시 확인해 보세요. 그렇게 유용하진 않은 것 같은데, 안 그런가요?
Loading

0 comments on commit 3066296

Please sign in to comment.