Skip to content

Fix markdown syntax in tip section #218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 17, 2021
Merged

Fix markdown syntax in tip section #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 src/v2/guide/instance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,8 +145,8 @@ new Vue({
인스턴스 라이프사이클의 여러 단계에서 호출될 다른 훅도 있습니다. 그 예로 [`mounted`](../api/#mounted),[`updated`](../api/#updated) 및 [`destroyed`](../api/#destroyed)가 있습니다. 모든 라이프사이클 훅은 `this` 컨텍스트가 호출하는 Vue 인스턴스를 가리키며 호출됩니다. Vue 세계에서 "컨트롤러"의 컨셉이 어디에 있는지 궁금할 수 있습니다. 답은 컨트롤러가 없습니다. 컴포넌트의 사용자 지정 로직은 이러한 라이프사이클 훅으로 분할됩니다.


<p class="tip">options 속성이나 콜백에 `created: () => console.log(this.a)` 이나 `vm.$watch('a', newValue => this.myMethod())` 와 같은 [화살표 함수](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98) 사용을 지양하기 바랍니다.
화살표 함수는 `this`를 가지지 않기 때문에 화살표 함수에서의 `this`는 다른 변수로 취급되거나 렉시컬하게 호출한 변수를 발견할 때까지 부모 스코프에서 해당 변수를 찾습니다. 이 때문에 `Uncaught TypeError: Cannot read property of undefined` 또는 `Uncaught TypeError: this.myMethod is not a function`와 같은 오류가 발생하게 됩니다.</p>
<p class="tip">options 속성이나 콜백에 <code>created: () => console.log(this.a)</code> 이나 <code>vm.$watch('a', newValue => this.myMethod())</code> 와 같은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a> 사용을 지양하기 바랍니다.
화살표 함수는 <code>this</code>를 가지지 않기 때문에 화살표 함수에서의 <code>this</code>는 다른 변수로 취급되거나 렉시컬하게 호출한 변수를 발견할 때까지 부모 스코프에서 해당 변수를 찾습니다. 이 때문에 <code>Uncaught TypeError: Cannot read property of undefined</code> 또는 <code>Uncaught TypeError: this.myMethod is not a function</code>와 같은 오류가 발생하게 됩니다.</p>

## 라이프사이클 다이어그램

Expand Down
4 changes: 2 additions & 2 deletions src/v2/guide/syntax.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ new Vue({

`span`의 내용은 `rawHtml`로 대체됩니다. 이 때 데이터 바인딩은 무시됩니다. Vue는 문자열 기반 템플릿 엔진이 아니기 때문에 `v-html`을 이용해 템플릿을 사용할 수 없습니다. 이와 달리 컴포넌트는 UI 재사용 및 구성을 위한 기본 단위로 사용하는 것을 추천합니다.

<p class="tip">웹사이트에서 임의의 HTML을 동적으로 렌더링하려면 [XSS 취약점](https://en.wikipedia.org/wiki/Cross-site_scripting)으로 쉽게 이어질 수 있으므로 매우 위험할 가능성이 있습니다. 신뢰할 수 있는 콘텐츠에서만 HTML 보간을 사용하고 사용자가 제공한 콘텐츠에서는 **절대** 사용하면 안됩니다.</p>
<p class="tip">웹사이트에서 임의의 HTML을 동적으로 렌더링하려면 <a href="https://en.wikipedia.org/wiki/Cross-site_scripting">XSS 취약점</a>으로 쉽게 이어질 수 있으므로 매우 위험할 가능성이 있습니다. 신뢰할 수 있는 콘텐츠에서만 HTML 보간을 사용하고 사용자가 제공한 콘텐츠에서는 <strong>절대</strong> 사용하면 안됩니다.</p>

### 속성

Expand Down Expand Up @@ -98,7 +98,7 @@ boolean 속성을 사용할 때 단순히 `true`인 경우 `v-bind`는 조금
{{ if (ok) { return message } }}
```

<p class="tip">템플릿 표현식은 샌드박스 처리되며 `Math`와 `Date` 같은 [전역으로 사용 가능한 것](https://github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9)에만 접근할 수 있습니다. 템플릿 표현식에서 사용자 정의 전역에 액세스 하지 마십시오.</p>
<p class="tip">템플릿 표현식은 샌드박스 처리되며 <code>Math</code>와 <code>Date</code> 같은 <a href="https://github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9">전역으로 사용 가능한 것</a>에만 접근할 수 있습니다. 템플릿 표현식에서 사용자 정의 전역에 액세스 하지 마십시오.</p>

## 디렉티브

Expand Down