You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ko-KR/src/guide/essentials/application.md
+38-4Lines changed: 38 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,8 @@
9
9
## 애플리케이션 인스턴스
10
10
11
11
Every Vue application starts by creating a new **application instance** with the [`createApp`](/api/application#createapp) function:
12
-
모든 Vue 애플리케이션은 [`createApp`](/api/application#createapp) 함수를 사용하여 새 **애플리케이션 인스턴스** 를 생성하여 시작합니다.
12
+
13
+
모든 Vue 애플리케이션은 [`createApp`](/api/application#createapp) 함수를 사용하여 새로운 **애플리케이션 인스턴스** 를 생성하여 시작합니다.
13
14
14
15
```js
15
16
import { createApp } from'vue'
@@ -23,10 +24,12 @@ const app = createApp({
23
24
## 최상위(Root) 컴포넌트
24
25
25
26
The object we are passing into `createApp` is in fact a component. Every app requires a "root component" that can contain other components as its children.
26
-
`createApp` 에 전달된 객체는 사실 하나의 컴포넌트 입니다. 모든 앱에는 다른 컴포넌트를 자식으로 포함할 수 있는 "루트 컴포넌트"가 필요합니다.
27
+
28
+
`createApp` 에 전달된 객체는 사실 컴포넌트 입니다. 모든 앱은 다른 컴포넌트를 자식으로 포함할 수 있는 "루트 컴포넌트"가 필요합니다.
27
29
28
30
29
31
If you are using Single-File Components, we typically import the root component from another file:
32
+
30
33
싱글 파일 컴포넌트를 사용하는 경우 일반적으로 루트 컴포넌트를 다른 파일에서 가져옵니다:
31
34
32
35
```js
@@ -39,7 +42,8 @@ const app = createApp(App)
39
42
```
40
43
41
44
While many examples in this guide only need a single component, most real applications are organized into a tree of nested, reusable components. For example, a Todo application's component tree might look like this:
42
-
이 가이드의 많은 예제에는 싱글 파일 컴포넌트만 필요하지만 대부분의 실제 응용 프로그램은 중첩되고 재사용 가능한 컴포넌트 트리로 구성됩니다. 예를 들어 Todo 애플리케이션의 컴포넌트 트리는 다음과 같을 수 있습니다.
45
+
46
+
이 가이드 문서의 많은 예제에서는 단일 컴포넌트만 사용하지만, 실제 애플리케이션의 대부분은 중첩되고 재사용 가능한 컴포넌트 트리로 구성됩니다. 예를 들어 Todo 애플리케이션의 컴포넌트 트리는 다음과 같습니다.
43
47
44
48
```
45
49
App (root component)
@@ -53,12 +57,14 @@ App (root component)
53
57
```
54
58
55
59
We will discuss how to define and compose multiple components together in later sections of the guide. Before that, we will focus on what happens inside a single component.
56
-
가이드의 뒷 부분에서 여러 컴포넌트를 함께 정의하고 구성하는 방법에 대해 설명합니다. 그 전에 우리는 단일 컴포넌트 내부에서 일어나는 일에 초점을 맞출 것입니다.
60
+
61
+
가이드의 뒷 부분에서 여러 컴포넌트를 함께 정의하고 구성하는 방법에 대해 설명합니다. 지금은 단일 컴포넌트 내부에서 어떤 일이 일어나는지에 대해 집중하겠습니다.
57
62
58
63
## Mounting the App
59
64
## 애플리케이션 마운트하기
60
65
61
66
An application instance won't render anything until its `.mount()` method is called. It expects a "container" argument, which can either be an actual DOM element or a selector string:
67
+
62
68
애플리케이션 인스턴스는 `.mount()` 메소드가 호출될 때까지 아무 것도 렌더링되지 않습니다. 실제 DOM 엘리먼트 또는 선택자(selector) 문자열이 될 수 있는 "컨테이너" 전달인자가 필요합니다.
63
69
64
70
```html
@@ -70,16 +76,21 @@ app.mount('#app')
70
76
```
71
77
72
78
The content of the app's root component will be rendered inside the container element. The container element itself is not considered part of the app.
79
+
73
80
애플리케이션의 루트 컴포넌트의 내용은 컨테이너 엘리먼트 내에서 렌더링됩니다. 컨테이너 엘리먼트 자체는 애플리케이션의 일부로 간주되지 않습니다.
74
81
75
82
76
83
The `.mount()` method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance.
84
+
77
85
`.mount()` 메서드는 모든 애플리케이션 구성 및 자산 등록이 완료된 후에 항상 호출되어야 합니다. 또한 자산 등록 방법과 달리 반환 값은 응용 프로그램 인스턴스가 아닌 루트 구성 엘리먼트 인스턴스입니다.
78
86
79
87
### In-DOM Root Component Template
88
+
### DOM 내부에 루트 컴퍼넌트 템플릿 사용하기
80
89
81
90
When using Vue without a build step, we can write our root component's template directly inside the mount container:
82
91
92
+
빌드 도구 없이 Vue를 사용한다면, 루트 컴포넌트의 템플릿을 마운트할 컨테이너 내부에 작성할수 있습니다.
93
+
83
94
```html
84
95
<divid="app">
85
96
<button@click="count++">{{ count }}</button>
@@ -102,10 +113,16 @@ app.mount('#app')
102
113
103
114
Vue will automatically use the container's `innerHTML` as the template if the root component does not already have a `template` option.
104
115
116
+
Vue는 루트컴포넌트에 `tempalte` 옵션을 지정하지 않으면, 자동으로 컨테이너의 `innerHTML`의 내용을 템플릿으로 사용합니다.
117
+
105
118
## App Configurations
106
119
120
+
## 애플리케이션 설정
121
+
107
122
The application instance exposes a `.config` object that allows us to configure a few app-level options, for example defining an app-level error handler that captures errors from all descendent components:
108
123
124
+
애플리케이션 인스턴스는 `.config` 속성을 어플리케이션 레벨의 설정을 하기 위해 제공합니다. 예를 들자면 모든 하위 컴포넌트들에서 발생하는 모든 에러를 잡을수 있는 애플리케이션 레벨 에러 핸들러를 정의할수 있습니다:
This makes the `TodoDeleteButton` available for use anywhere in our app. We will discuss registration for components and other types of assets in later sections of the guide. You can also browse the full list of application instance APIs in its [API reference](/api/application).
122
142
143
+
컴포넌트를 앱에 등록하면 전역 범위로 앱 내의 어디에서나 사용할수 있게 됩니다. 컴포넌트 와 기타 자원 등록에 대해서는 가이드 후반에 다루도록 하겠습니다. 애플리케이션 인스턴스의 모른 API를 보고 싶으시면 [API reference](/api/application) 를 확인해보세요.
144
+
123
145
Make sure to apply all app configurations before mounting the app!
124
146
147
+
Make sure to apply all app configurations before mounting the app!
148
+
149
+
앱을 마운트하기 전에 모든 앱 설정을 적용했는지 확인하세요!
150
+
151
+
125
152
## Multiple application instances
126
153
154
+
## 다중 애플리케이션 인스턴스
155
+
127
156
You are not limited to a single application instance on the same page. The `createApp` API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets:
128
157
158
+
한페이지에 하나의 애플리케이션 인스턴스만 만들수 있는건 아닙니다. `createApp` API를 사용하면 여러 Vue 애플리케이션이 동일한 페이지에 동시에 존재 할 수 있으며 각각은 설정 및 전역 자원(asset) 대해 서로 독립된 고유한 범위를 갖습니다.
159
+
160
+
129
161
```js
130
162
constapp1=createApp({
131
163
/* ... */
@@ -139,3 +171,5 @@ app2.mount('#container-2')
139
171
```
140
172
141
173
If you are using Vue to enhance server-rendered HTML and only need Vue to control specific parts of a large page, avoid mounting a single Vue application instance on the entire page. Instead, create multiple small application instances and mount them on the elements they are responsible for.
174
+
175
+
일반적인 서버 렌더링 HTML 환경에서 vue를 이용해 개선을 하고 싶을때, 큰 페이지 안에서 특정 부분만 vue로 개선하고 싶을때 단일 vue 인스턴스로 전체 페이지를 마운트하지 마십시오. 대신 각각의 애플리케이션을 인스턴스를 만들고 담담해야 하는 엘리먼트에 마운트 하세요.
Copy file name to clipboardExpand all lines: ko-KR/src/guide/essentials/computed.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -115,7 +115,7 @@ See also: [Typing Computed Properties](/guide/typescript/options-api.html#typing
115
115
116
116
우리는 여기서 `publishedBooksMessage` 라는 computed 속성을 선언했습니다.
117
117
118
-
이 어플리케이션에서`data` 의 `books` 배열의 값을 변경하면, 그에 따라 `publishedBooksMessage` 가 어떻게 변경되는 지 볼 수 있습니다.
118
+
이 애플리케이션에서`data` 의 `books` 배열의 값을 변경하면, 그에 따라 `publishedBooksMessage` 가 어떻게 변경되는 지 볼 수 있습니다.
119
119
120
120
일반적인 속성과 마찬가지로 템플릿에서 computed 속성도 데이터 바인딩 할 수 있습니다. Vue는 `this.publishedBooksMessage` 가 `this.author.books` 에 의존한다는 것을 알고 있습니다. 그래서 `this.author.books`가 변경될 때 `this.publishedBooksMessage` 의존하는 모든 바인딩을 업데이트합니다.
Copy file name to clipboardExpand all lines: ko-KR/src/guide/introduction.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -116,7 +116,7 @@ Vue는 프론트엔드 개발에 필요한 대부분의 공통 기능을 다루
116
116
- Embedding as Web Components on any page
117
117
- 어떤 페이지에서든 웹 컴포넌트 형태로 포함시키기
118
118
- Single-Page Application (SPA)
119
-
- 단일 페이지 어플리케이션(Single-Page Application SPA)
119
+
- 단일 페이지 애플리케이션(Single-Page Application SPA)
120
120
- Fullstack / Server-Side-Rendering (SSR)
121
121
- 풀스택/서버 사이드 렌더링(SSR)
122
122
- Jamstack / Static-Site-Generation (SSG)
@@ -294,7 +294,7 @@ If you are new to Vue, here's our general recommendation:
294
294
- 만약 빌드 도구를 사용하지 않거나 복잡하지 않은 시나리오에서 Vue를 사용하실거라면 옵션 API를 사용하세요. 예) 점증적인 개선
295
295
296
296
- Go with Composition API + Single-File Components if you plan to build full applications with Vue.
297
-
- Vue로 완전한 어플리케이션을 빌드하실 예정이라면 컴포지션 API와 싱글 파일 컴포넌트를 사용하세요
297
+
- Vue로 완전한 애플리케이션을 빌드하실 예정이라면 컴포지션 API와 싱글 파일 컴포넌트를 사용하세요
298
298
299
299
You don't have to commit to only one style during the learning phase. The rest of the documentation will provide code samples in both styles where applicable, and you can toggle between them at any time using the **API Preference switches** at the top of the left sidebar.
0 commit comments