Translate: Dom Manipulation(~ Document Interface) #150
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dvlprsh
reviewed
Aug 18, 2020
dvlprsh
reviewed
Aug 18, 2020
pages/tutorials/dom-manipulation.md
Outdated
|
|
||
| Website are made up of HTML and/or XML documents. These documents are static, they do not change. The D*ocument Object Model (DOM) is* a programming interface implemented by browsers in order to make static websites functional. The DOM API can be used to change the document structure, style, and content. The API is so powerful that countless frontend frameworks (jQuery, React, Angular, etc.) have been developed around it in order to make dynamic websites even easier to develop. | ||
| 웹 사이트는 HTML 및/또는 XML 문서로 구성됩니다. 이러한 문서들은 정적이어서, 변하지 않습니다. *문서 객체 모델(DOM)은* 정적 웹 사이트를 기능적으로 작동시키기 위해 브라우저에 의해 구현된 프로그래밍 인터페이스입니다. DOM API를 사용하면 문서의 구조, 스타일, 그리고 내용을 변경할 수 있습니다. API는 매우 강력하기 때문에 그 주변에서 보다 쉽게 동적인 웹사이트들 구현할 수 있도록 수많은 프런트엔드 프레임워크(jQuery, React, Angular, 등)가 개발되었습니다. |
There was a problem hiding this comment.
[제안]
Suggested change
| 웹 사이트는 HTML 및/또는 XML 문서로 구성됩니다. 이러한 문서들은 정적이어서, 변하지 않습니다. *문서 객체 모델(DOM)은* 정적 웹 사이트를 기능적으로 작동시키기 위해 브라우저에 의해 구현된 프로그래밍 인터페이스입니다. DOM API를 사용하면 문서의 구조, 스타일, 그리고 내용을 변경할 수 있습니다. API는 매우 강력하기 때문에 그 주변에서 보다 쉽게 동적인 웹사이트들 구현할 수 있도록 수많은 프런트엔드 프레임워크(jQuery, React, Angular, 등)가 개발되었습니다. | |
| 웹 사이트는 HTML 및/또는 XML 문서로 구성됩니다. 이러한 문서들은 정적이어서, 변하지 않습니다. *문서 객체 모델(DOM)은* 정적 웹 사이트를 기능적으로 작동시키기 위해 브라우저에 의해 구현된 프로그래밍 인터페이스입니다. DOM API를 사용하면 문서의 구조, 스타일, 그리고 내용을 변경할 수 있습니다. API는 매우 강력해서 이를 바탕으로 보다 쉽게 동적 웹사이트를 개발하기 위한 수많은 프런트엔드 프레임워크(jQuery, React, Angular 등)가 개발되었습니다. |
There was a problem hiding this comment.
말씀주신 제안이 훨씬 좋네요 👍
정말 한끗 차이긴 한데 마지막에 동적 웹사이트를 개발하기 위한 수많은 부분이 조금 부자연스러운데 아래와 같이 해도 괜찮을까요 ?,?
Suggested change
| 웹 사이트는 HTML 및/또는 XML 문서로 구성됩니다. 이러한 문서들은 정적이어서, 변하지 않습니다. *문서 객체 모델(DOM)은* 정적 웹 사이트를 기능적으로 작동시키기 위해 브라우저에 의해 구현된 프로그래밍 인터페이스입니다. DOM API를 사용하면 문서의 구조, 스타일, 그리고 내용을 변경할 수 있습니다. API는 매우 강력하기 때문에 그 주변에서 보다 쉽게 동적인 웹사이트들 구현할 수 있도록 수많은 프런트엔드 프레임워크(jQuery, React, Angular, 등)가 개발되었습니다. | |
| 웹 사이트는 HTML 및/또는 XML 문서로 구성됩니다. 이러한 문서들은 정적이어서, 변하지 않습니다. *문서 객체 모델(DOM)은* 정적 웹 사이트를 기능적으로 작동시키기 위해 브라우저에 의해 구현된 프로그래밍 인터페이스입니다. DOM API를 사용하면 문서의 구조, 스타일, 그리고 내용을 변경할 수 있습니다. API는 매우 강력해서 이를 바탕으로 보다 쉽게 동적인 웹사이트를 개발하기 위해 수많은 프런트엔드 프레임워크(jQuery, React, Angular, 등)가 개발되었습니다. |
There was a problem hiding this comment.
넵 @ss-won님이 최종 수정해 주신게 자연스러운 거 같습니다 👍 😄
pages/tutorials/dom-manipulation.md
Outdated
|
|
||
| Now, for the remainder of the `createElement` definition: `(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]`. The first argument `tagName` is defined as the generic parameter `K` . The TypeScript interpreter is smart enough to _infer_ the generic parameter from this argument. This means that the developer does not actually have to specify the generic parameter when using the method; whatever value is passed to the `tagName` argument will be inferred as `K` and thus can be used throughout the remainder of the definition. Which is exactly what happens; the return value `HTMLElementTagNameMap[K]` takes the `tagName` argument and uses it to return the corresponding type. This definition is how the `p` variable from the code snippet gets a type of `HTMLParagraphElement`. And if the code was `document.createElement('a')`, then it would be a element of type `HTMLAnchorElement`. | ||
| 이제, `createElement` 정의의 나머지 부분인 `(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]`를 살펴보겠습니다. 첫 번째 인수 `tagName`은 일반적 매개변수 `K`로 정의됩니다. TypeScript 인터프리터는 이 인수로부터 일반 매개변수를 _추론_ 할 수 있는 충분한 성능을 가지고 있습니다. 이는 개발자가 메서드를 사용할 때 실제로 일반적인 매개변수를 지정할 필요가 없음을 의미하며, 어떤 값이 `tagName`인수로 전달되든 간에 `K`로 추론되므로 정의의 나머지 부분에 사용할 수 있을 것입니다. 정확히 무슨 일이 일어나는지를 보면 반환값 `HTMLElementTagNameMap[K]`는 `tagName`인수를 가지고 해당 유형을 반환합니다. 이 정의는 스니펫 코드 `p` 변수에서 `HTMLParagraphElement`유형을 얻는 방법입니다. 그리고 코드가 `document.createElement('a')`였다면, `HTMLAnchorElement`유형의 요소가 됩니다. |
There was a problem hiding this comment.
Suggested change
| 이제, `createElement` 정의의 나머지 부분인 `(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]`를 살펴보겠습니다. 첫 번째 인수 `tagName`은 일반적 매개변수 `K`로 정의됩니다. TypeScript 인터프리터는 이 인수로부터 일반 매개변수를 _추론_ 할 수 있는 충분한 성능을 가지고 있습니다. 이는 개발자가 메서드를 사용할 때 실제로 일반적인 매개변수를 지정할 필요가 없음을 의미하며, 어떤 값이 `tagName`인수로 전달되든 간에 `K`로 추론되므로 정의의 나머지 부분에 사용할 수 있을 것입니다. 정확히 무슨 일이 일어나는지를 보면 반환값 `HTMLElementTagNameMap[K]`는 `tagName`인수를 가지고 해당 유형을 반환합니다. 이 정의는 스니펫 코드 `p` 변수에서 `HTMLParagraphElement`유형을 얻는 방법입니다. 그리고 코드가 `document.createElement('a')`였다면, `HTMLAnchorElement`유형의 요소가 됩니다. | |
| 이제, `createElement` 정의의 나머지 부분인 `(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]`를 살펴보겠습니다. 첫 번째 인수 `tagName`은 제네릭 매개변수 `K`로 정의됩니다. TypeScript 인터프리터는 이 인수로부터 제네릭 매개변수를 _추론_ 할 수 있는 충분한 성능을 가지고 있습니다. 이는 개발자가 메서드를 사용할 때 실제로 제네릭 매개변수를 지정할 필요가 없음을 의미하며, 어떤 값이 `tagName`인수로 전달되든 간에 `K`로 추론되므로 정의의 나머지 부분에 사용할 수 있을 것입니다. 정확히 무슨 일이 일어나는지를 보면 반환값 `HTMLElementTagNameMap[K]`는 `tagName`인수를 가지고 해당 타입을 반환합니다. 이 정의는 스니펫 코드 `p` 변수에서 `HTMLParagraphElement`타입을 얻는 방법입니다. 그리고 코드가 `document.createElement('a')`였다면, `HTMLAnchorElement`타입의 요소가 됩니다. |
1, 2. 괜찮은거 같습니다ㅎㅎ |
guyeol
reviewed
Aug 19, 2020
guyeol
reviewed
Aug 19, 2020
guyeol
reviewed
Aug 19, 2020
|
ss-won
added a commit
to ss-won/typescript-kr.github.io
that referenced
this pull request
Aug 19, 2020
* ~ Basic Example 번역 * ~ The Document Interface 번역 * 맞춤법검사, 테스트 * 리뷰 반영 후 수정 (typescript-kr#150)
yeonjuan
requested changes
Aug 19, 2020
* ~ Basic Example 번역 * ~ The Document Interface 번역 * 맞춤법검사, 테스트 * 리뷰 반영 후 수정 (typescript-kr#150) * change request에 의해 2차 수정 (typescript-kr#150)
|
@all-contributors please add @ss-won for translation |
|
I've put up a pull request to add @ss-won! 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
reference: #117
처음 ~ The Document Interface 부분까지 번역 완료했습니다.
일단, 한글로 번역하기 애매한 용어 부분은 대체로 원어 그대로 사용하였습니다.
번역하다가 가장 애매했던 부분은 다음과 같습니다.
line74의_deprecated_를 번역하기 애매해서 deprecated 표기라고 번역했는데, 더 좋은 표현이 있으면 제안 부탁드립니다.line102에서Which is exactly what happens;부분이 무슨 말인지 모르겠어서 일단, 문맥상 제가 생각하기에 어울리는 말로 번역했습니다.HTMLElementtype 표현이 많이 나오는데, TypeScript에 정의된 Interface 부분이라 생각해서 번역 용어에 따라 타입이 아닌 유형으로 번역했는데 이 부분이 적절한지 잘 모르겠습니다.검토해주시고 의역과 오역, 또는 제안 사항 부탁드립니다! 🙇🏻♀️