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
일반적으로 `*.vue` 파일 확장자를 사용하는 Vue 싱글 파일 컴포넌트(SFC)는 HTML과 유사한 문법을 사용하여 Vue 컴포넌트를 설명하는 커스텀 파일 형식입니다.
6
+
Vue SFC는 HTML과 문법적으로 호환됩니다.
7
7
8
-
A Vue Single File Component (SFC), conventionally using the `*.vue` file extension, is a custom file format that uses an HTML-like syntax to describe a Vue component. A Vue SFC is syntactically compatible with HTML.
9
-
10
-
Each `*.vue` file consists of three types of top-level language blocks: `<template>`, `<script>`, and `<style>`, and optionally additional custom blocks:
8
+
각 `*.vue` 파일은 세 가지 유형의 최상위 언어 블록(`<template>`, `<script>`, `<style>`)과 선택적으로 추가 커스텀 블록으로 구성됩니다:
11
9
12
10
```vue
13
11
<template>
@@ -18,7 +16,7 @@ Each `*.vue` file consists of three types of top-level language blocks: `<templa
18
16
export default {
19
17
data() {
20
18
return {
21
-
msg: 'Hello world!'
19
+
msg: '안녕 Vue!'
22
20
}
23
21
}
24
22
}
@@ -31,67 +29,80 @@ export default {
31
29
</style>
32
30
33
31
<custom1>
34
-
This could be e.g. documentation for the component.
32
+
예를 들어 컴포넌트 설명서가 될 수 있습니다.
35
33
</custom1>
36
34
```
37
35
38
-
## Language Blocks
36
+
## 언어 블럭 {#language-blocks}
39
37
40
38
### `<template>`
41
39
42
-
-Each `*.vue`file can contain at most one top-level `<template>`block at a time.
40
+
-`*.vue`파일은 최상위 `<template>`블록은 하나만 포함할 수 있습니다.
43
41
44
-
- Contents will be extracted and passed on to `@vue/compiler-dom`, pre-compiled into JavaScript render functions, and attached to the exported component as its `render` option.
42
+
- 콘텐츠는 추출되어 `@vue/compiler-dom`으로 전달되고,
43
+
JavaScript 렌더 함수로 사전 컴파일되며,
44
+
내보낸 컴포넌트에 `render` 옵션으로 첨부됩니다.
45
45
46
46
### `<script>`
47
47
48
-
-Each `*.vue`file can contain at most one `<script>`block at a time (excluding [`<script setup>`](/api/sfc-script-setup.html)).
48
+
-`*.vue`파일은 하나의 `<script>`블록만 포함할 수 있습니다([`<script setup>`](/api/sfc-script-setup.html) 제외).
49
49
50
-
-The script is executed as an ES Module.
50
+
-스크립트는 ES 모듈로 실행됩니다.
51
51
52
-
-The **default export** should be a Vue component options object, either as a plain object or as the return value of [defineComponent](/api/general.html#definecomponent).
52
+
-**기본 내보내기**는 일반 객체 또는 [defineComponent](/api/general.html#definecomponent)의 반환 값으로 Vue 컴포넌트 옵션 객체여야 합니다.
53
53
54
54
### `<script setup>`
55
55
56
-
-Each `*.vue`file can contain at most one `<script setup>`block at a time (excluding normal `<script>`).
56
+
-`*.vue`파일은 하나의 `<script setup>`블록만 포함할 수 있습니다(일반 `<script>` 제외).
57
57
58
-
- The script is pre-processed and used as the component's `setup()` function, which means it will be executed **for each instance of the component**. Top-level bindings in `<script setup>` are automatically exposed to the template. For more details, see [dedicated documentation on `<script setup>`](/api/sfc-script-setup).
58
+
- 스크립트는 전처리되어 컴포넌트의 `setup()` 함수로 사용됩니다.
59
+
즉, **컴포넌트의 각 인스턴스**에 대해 실행됩니다.
60
+
`<script setup>` 내에 최상위 바인딩은 템플릿에 자동으로 노출됩니다.
61
+
자세한 내용은 [`<script setup>` 전용 문서](/api/sfc-script-setup)를 참조하십시오.
59
62
60
63
### `<style>`
61
64
62
-
-A single `*.vue`file can contain multiple `<style>`tags.
65
+
-`*.vue`파일에는 여러 `<style>`태그가 포함될 수 있습니다.
63
66
64
-
- A `<style>` tag can have `scoped` or `module` attributes (see [SFC Style Features](/api/sfc-css-features) for more details) to help encapsulate the styles to the current component. Multiple `<style>` tags with different encapsulation modes can be mixed in the same component.
67
+
-`<style>` 태그는 현재 컴포넌트에 스타일을 캡슐화하는 데 도움이 되도록,
68
+
`scoped` 또는 `module` 속성(자세한 내용은 [SFC 스타일 특징](/api/sfc-css-features) 참고)을 가질 수 있습니다.
69
+
캡슐화 모드가 다른 여러 `<style>` 태그를 동일한 컴포넌트에 혼합할 수 있습니다.
65
70
66
-
### Custom Blocks
71
+
### 커스텀 블럭 {#custom-blocks}
67
72
68
-
Additional custom blocks can be included in a `*.vue` file for any project-specific needs, for example a `<docs>` block. Some real-world examples of custom blocks include:
73
+
프로젝트별 요구 사항에 따라 `*.vue` 파일에 추가 커스텀 블록을 포함할 수 있습니다(예: `<docs>` 블록).
Handling of Custom Blocks will depend on tooling - if you want to build your own custom block integrations, see [relevant tooling section](/guide/scaling-up/tooling.html#sfc-custom-block-integrations) for more details.
80
+
커스텀 블록 처리는 도구에 따라 다릅니다.
81
+
자체 커스텀 블록 통합을 구축하려는 경우 자세한 내용은 [도구 섹션](/guide/scaling-up/tooling.html#sfc-custom-block-integrations)을 참고하십시오.
75
82
76
-
## Automatic Name Inference
83
+
## 자동으로 이름 추론 {#automatic-name-inference}
77
84
78
-
An SFC automatically infers the component's name from its **filename** in the following cases:
85
+
다음과 같은 경우, SFC **파일 이름**에서 컴포넌트의 이름을 자동으로 유추합니다:
79
86
80
-
- Dev warning formatting
81
-
- DevTools inspection
82
-
- Recursive self-reference. E.g. a file named `FooBar.vue` can refer to itself as `<FooBar/>` in its template. This has lower priority than explicitly registered/imported components.
87
+
- 개발 경고 포멧팅
88
+
- DevTools 검사
89
+
- 재귀적 자기 참조.
90
+
예를 들어 `FooBar.vue`라는 파일은 템플릿에서 `<FooBar/>`로 자신을 참조할 수 있음.
91
+
명시적으로 등록/가져온 컴포넌트보다 우선 순위가 낮음.
83
92
84
-
## Pre-Processors
93
+
## 전처리기 {#pre-processors}
85
94
86
-
Blocks can declare pre-processor languages using the `lang` attribute. The most common case is using TypeScript for the `<script>` block:
95
+
블록은 `lang` 속성을 사용하여 전처리기 언어를 선언할 수 있습니다.
96
+
가장 일반적인 경우는 `<script>` 블록에 TypeScript를 사용하는 것입니다:
87
97
88
98
```vue-html
89
99
<script lang="ts">
90
-
// use TypeScript
100
+
// TypeScript 사용
91
101
</script>
92
102
```
93
103
94
-
`lang` can be applied to any block - for example we can use `<style>` with [SASS](https://sass-lang.com/) and `<template>` with [Pug](https://pugjs.org/api/getting-started.html):
104
+
`lang`은 모든 블록에 적용할 수 있습니다.
105
+
예를 들어 `<style>`에서는 [SASS](https://sass-lang.com/)를, `<template>`에서는 [Pug](https://pugjs.org/api/getting-started.html)를 사용할 수 있습니다:
95
106
96
107
```vue-html
97
108
<template lang="pug">
@@ -106,39 +117,44 @@ p {{ msg }}
106
117
</style>
107
118
```
108
119
109
-
Note that integration with various pre-processors may differ by toolchain. Check out the respective documentation for examples:
If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block:
129
+
`*.vue` 컴포넌트를 여러 파일로 분할하는 것을 선호하는 경우,
130
+
`src` 속성을 사용하여 언어 블록에서 외부 파일을 가져올 수 있습니다:
118
131
119
132
```vue
120
133
<template src="./template.html"></template>
121
134
<style src="./style.css"></style>
122
135
<script src="./script.js"></script>
123
136
```
124
137
125
-
Beware that `src` imports follow the same path resolution rules as webpack module requests, which means:
138
+
`src` 가져오기는 웹팩 모듈 요청과 동일한 경로 확인 규칙을 따릅니다.
139
+
즉, 다음을 의미합니다:
126
140
127
-
-Relative paths need to start with `./`
128
-
-You can import resources from npm dependencies:
141
+
-상대 경로는 `./`로 시작해야 함.
142
+
-npm 종속성에서 리소스를 가져올 수 있음.
129
143
130
144
```vue
131
-
<!-- import a file from the installed "todomvc-app-css" npm package -->
145
+
<!-- 설치된 "todomvc-app-css" npm 패키지에서 파일 가져오기 -->
132
146
<style src="todomvc-app-css/index.css" />
133
147
```
134
148
135
-
`src`imports also work with custom blocks, e.g.:
149
+
`src`가져오기는 커스텀 블록에서도 작동합니다. 예를들어:
136
150
137
151
```vue
138
152
<unit-test src="./unit-test.js">
139
153
</unit-test>
140
154
```
141
155
142
-
## Comments
156
+
## 주석 {#comments}
143
157
144
-
Inside each block you shall use the comment syntax of the language being used (HTML, CSS, JavaScript, Pug, etc.). For top-level comments, use HTML comment syntax: `<!-- comment contents here -->`
158
+
각 블록 내에서 사용 중인 언어(HTML, CSS, JavaScript, Pug 등)의 주석 문법을 사용해야 합니다.
Custom blocks are compiled into imports to the same Vue file with different request queries. It is up to the underlying build tool to handle these import requests.
144
-
145
-
- If using Vite, a custom Vite plugin should be used to transform matched custom blocks into executable JavaScript. [Example](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-transforming-custom-blocks)
146
-
147
-
- If using Vue CLI or plain webpack, a webpack loader should be configured to transform the matched blocks. [Example](https://vue-loader.vuejs.org/guide/custom-blocks.html)
141
+
## SFC의 커스텀 블록 통합하기 {#sfc-custom-block-integrations}
148
142
149
143
커스텀 블록은 다른 리퀘스트 쿼리로 가져온 동일한 Vue 파일로 컴파일 됩니다.
150
144
이러한 가져오기 요청을 처리하는 것은 기본 빌드 도구에 달려 있습니다.
151
145
152
-
- Vite를 사용하는 경우, 일치하는 커스텀 블록을 실행 가능한 JavaScript로 변환하려면 커스텀 Vite 플러그인을 사용해야 합니다. [예제](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-transforming-custom-blocks)
146
+
- Vite를 사용하는 경우,
147
+
일치하는 커스텀 블록을 실행 가능한 JavaScript로 변환하려면,
148
+
커스텀 Vite 플러그인을 사용해야 합니다. [예제](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-transforming-custom-blocks)
153
149
154
-
- Vue CLI 또는 일반 웹팩을 사용하는 경우, 일치하는 블록을 변환하도록 웹팩 로더를 구성해야 합니다. [예제](https://vue-loader.vuejs.org/guide/custom-blocks.html)
150
+
- Vue CLI 또는 일반 웹팩을 사용하는 경우,
151
+
일치하는 블록을 변환하도록 웹팩 로더를 구성해야 합니다. [예제](https://vue-loader.vuejs.org/guide/custom-blocks.html)
0 commit comments