Skip to content

Commit bbeb7e8

Browse files
committed
application.md 번역. 오타수정
1 parent 691e6b9 commit bbeb7e8

File tree

5 files changed

+43
-9
lines changed

5 files changed

+43
-9
lines changed

ko-KR/.vitepress/config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export const sidebar = {
118118
text: '핵심 가이드',
119119
items: [
120120
{
121-
text: '어플리케이션 만들기',
121+
text: '애플리케이션 만들기',
122122
link: '/guide/essentials/application'
123123
},
124124
{

ko-KR/src/api/composition-api-dependency-injection.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ Provides a value that can be injected by descendent components.
6363

6464
Injects a value provided by an ancestor component or the application (via `app.provide()`).
6565

66-
상위 컴포넌트 또는 어플리케이션(`app.provide()`을 통해)에서 제공된 값을 주입 받는다.
66+
상위 컴포넌트 또는 애플리케이션(`app.provide()`을 통해)에서 제공된 값을 주입 받는다.
6767

6868
- **Type**
6969

ko-KR/src/guide/essentials/application.md

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
## 애플리케이션 인스턴스
1010

1111
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) 함수를 사용하여 새로운 **애플리케이션 인스턴스** 를 생성하여 시작합니다.
1314

1415
```js
1516
import { createApp } from 'vue'
@@ -23,10 +24,12 @@ const app = createApp({
2324
## 최상위(Root) 컴포넌트
2425

2526
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` 에 전달된 객체는 사실 컴포넌트 입니다. 모든 앱은 다른 컴포넌트를 자식으로 포함할 수 있는 "루트 컴포넌트"가 필요합니다.
2729

2830

2931
If you are using Single-File Components, we typically import the root component from another file:
32+
3033
싱글 파일 컴포넌트를 사용하는 경우 일반적으로 루트 컴포넌트를 다른 파일에서 가져옵니다:
3134

3235
```js
@@ -39,7 +42,8 @@ const app = createApp(App)
3942
```
4043

4144
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 애플리케이션의 컴포넌트 트리는 다음과 같습니다.
4347

4448
```
4549
App (root component)
@@ -53,12 +57,14 @@ App (root component)
5357
```
5458

5559
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+
가이드의 뒷 부분에서 여러 컴포넌트를 함께 정의하고 구성하는 방법에 대해 설명합니다. 지금은 단일 컴포넌트 내부에서 어떤 일이 일어나는지에 대해 집중하겠습니다.
5762

5863
## Mounting the App
5964
## 애플리케이션 마운트하기
6065

6166
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+
6268
애플리케이션 인스턴스는 `.mount()` 메소드가 호출될 때까지 아무 것도 렌더링되지 않습니다. 실제 DOM 엘리먼트 또는 선택자(selector) 문자열이 될 수 있는 "컨테이너" 전달인자가 필요합니다.
6369

6470
```html
@@ -70,16 +76,21 @@ app.mount('#app')
7076
```
7177

7278
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+
7380
애플리케이션의 루트 컴포넌트의 내용은 컨테이너 엘리먼트 내에서 렌더링됩니다. 컨테이너 엘리먼트 자체는 애플리케이션의 일부로 간주되지 않습니다.
7481

7582

7683
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+
7785
`.mount()` 메서드는 모든 애플리케이션 구성 및 자산 등록이 완료된 후에 항상 호출되어야 합니다. 또한 자산 등록 방법과 달리 반환 값은 응용 프로그램 인스턴스가 아닌 루트 구성 엘리먼트 인스턴스입니다.
7886

7987
### In-DOM Root Component Template
88+
### DOM 내부에 루트 컴퍼넌트 템플릿 사용하기
8089

8190
When using Vue without a build step, we can write our root component's template directly inside the mount container:
8291

92+
빌드 도구 없이 Vue를 사용한다면, 루트 컴포넌트의 템플릿을 마운트할 컨테이너 내부에 작성할수 있습니다.
93+
8394
```html
8495
<div id="app">
8596
<button @click="count++">{{ count }}</button>
@@ -102,10 +113,16 @@ app.mount('#app')
102113

103114
Vue will automatically use the container's `innerHTML` as the template if the root component does not already have a `template` option.
104115

116+
Vue는 루트컴포넌트에 `tempalte` 옵션을 지정하지 않으면, 자동으로 컨테이너의 `innerHTML`의 내용을 템플릿으로 사용합니다.
117+
105118
## App Configurations
106119

120+
## 애플리케이션 설정
121+
107122
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:
108123

124+
애플리케이션 인스턴스는 `.config` 속성을 어플리케이션 레벨의 설정을 하기 위해 제공합니다. 예를 들자면 모든 하위 컴포넌트들에서 발생하는 모든 에러를 잡을수 있는 애플리케이션 레벨 에러 핸들러를 정의할수 있습니다:
125+
109126
```js
110127
app.config.errorHandler = (err) => {
111128
/* handle error */
@@ -114,18 +131,33 @@ app.config.errorHandler = (err) => {
114131

115132
The application instance also provides a few methods for registering app-scoped assets. For example, registering a component:
116133

134+
애플리케이션 인스턴스는 또 애플리케이션 범위의 자원(asset)을 등록하기 위한 메소드를 제공합니다. 예) 컴포넌트 등록하기:
135+
136+
117137
```js
118138
app.component('TodoDeleteButton', TodoDeleteButton)
119139
```
120140

121141
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).
122142

143+
컴포넌트를 앱에 등록하면 전역 범위로 앱 내의 어디에서나 사용할수 있게 됩니다. 컴포넌트 와 기타 자원 등록에 대해서는 가이드 후반에 다루도록 하겠습니다. 애플리케이션 인스턴스의 모른 API를 보고 싶으시면 [API reference](/api/application) 를 확인해보세요.
144+
123145
Make sure to apply all app configurations before mounting the app!
124146

147+
Make sure to apply all app configurations before mounting the app!
148+
149+
앱을 마운트하기 전에 모든 앱 설정을 적용했는지 확인하세요!
150+
151+
125152
## Multiple application instances
126153

154+
## 다중 애플리케이션 인스턴스
155+
127156
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:
128157

158+
한페이지에 하나의 애플리케이션 인스턴스만 만들수 있는건 아닙니다. `createApp` API를 사용하면 여러 Vue 애플리케이션이 동일한 페이지에 동시에 존재 할 수 있으며 각각은 설정 및 전역 자원(asset) 대해 서로 독립된 고유한 범위를 갖습니다.
159+
160+
129161
```js
130162
const app1 = createApp({
131163
/* ... */
@@ -139,3 +171,5 @@ app2.mount('#container-2')
139171
```
140172

141173
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 인스턴스로 전체 페이지를 마운트하지 마십시오. 대신 각각의 애플리케이션을 인스턴스를 만들고 담담해야 하는 엘리먼트에 마운트 하세요.

ko-KR/src/guide/essentials/computed.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ See also: [Typing Computed Properties](/guide/typescript/options-api.html#typing
115115

116116
우리는 여기서 `publishedBooksMessage` 라는 computed 속성을 선언했습니다.
117117

118-
어플리케이션에서 `data``books` 배열의 값을 변경하면, 그에 따라 `publishedBooksMessage` 가 어떻게 변경되는 지 볼 수 있습니다.
118+
애플리케이션에서 `data``books` 배열의 값을 변경하면, 그에 따라 `publishedBooksMessage` 가 어떻게 변경되는 지 볼 수 있습니다.
119119

120120
일반적인 속성과 마찬가지로 템플릿에서 computed 속성도 데이터 바인딩 할 수 있습니다. Vue는 `this.publishedBooksMessage``this.author.books` 에 의존한다는 것을 알고 있습니다. 그래서 `this.author.books`가 변경될 때 `this.publishedBooksMessage` 의존하는 모든 바인딩을 업데이트합니다.
121121

ko-KR/src/guide/introduction.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ Vue는 프론트엔드 개발에 필요한 대부분의 공통 기능을 다루
116116
- Embedding as Web Components on any page
117117
- 어떤 페이지에서든 웹 컴포넌트 형태로 포함시키기
118118
- Single-Page Application (SPA)
119-
- 단일 페이지 어플리케이션(Single-Page Application SPA)
119+
- 단일 페이지 애플리케이션(Single-Page Application SPA)
120120
- Fullstack / Server-Side-Rendering (SSR)
121121
- 풀스택/서버 사이드 렌더링(SSR)
122122
- Jamstack / Static-Site-Generation (SSG)
@@ -294,7 +294,7 @@ If you are new to Vue, here's our general recommendation:
294294
- 만약 빌드 도구를 사용하지 않거나 복잡하지 않은 시나리오에서 Vue를 사용하실거라면 옵션 API를 사용하세요. 예) 점증적인 개선
295295

296296
- Go with Composition API + Single-File Components if you plan to build full applications with Vue.
297-
- Vue로 완전한 어플리케이션을 빌드하실 예정이라면 컴포지션 API와 싱글 파일 컴포넌트를 사용하세요
297+
- Vue로 완전한 애플리케이션을 빌드하실 예정이라면 컴포지션 API와 싱글 파일 컴포넌트를 사용하세요
298298

299299
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.
300300

0 commit comments

Comments
 (0)