Merge pull request #214 from niceplugin/tutorial/step-4

번역: tutorial/step-4

Author: narusas

ko-KR/src/tutorial/src/step-4/App/template.html

@@ -1,2 +1,2 @@
-<!-- make this button work -->
-<button>count is: {{ count }}</button>
+<!-- 이 버튼이 작동하도록 만들어 봅시다 -->
+<button>숫자 세기: {{ count }}</button>

ko-KR/src/tutorial/src/step-4/_hint/App/template.html

@@ -1 +1 @@
-<button @click="increment">count is: {{ count }}</button>
+<button @click="increment">숫자 세기: {{ count }}</button>

ko-KR/src/tutorial/src/step-4/description.md

@@ -1,20 +1,20 @@
-# Event Listeners
+# 이벤트 리스너
 
-We can listen to DOM events using the `v-on` directive:
+`v-on` 디렉티브를 사용하여 DOM 이벤트를 수신할 수 있습니다:
 
 ```vue-html
 <button v-on:click="increment">{{ count }}</button>
 ```
 
-Due to its frequent use, `v-on` also has a shorthand syntax:
+자주 사용되기 때문에 `v-on`에는 다음과 같은 단축 문법도 있습니다:
 
 ```vue-html
 <button @click="increment">{{ count }}</button>
 ```
 
 <div class="options-api">
 
-Here, `increment` references a function declared using the `methods` option:
+여기서 참조되는 `increment`는 `methods` 옵션을 사용하여 선언된 함수입니다:
 
 <div class="sfc">
 
@@ -27,7 +27,7 @@ export default {
   },
   methods: {
     increment() {
-      // update component state
+      // 컴포넌트의 count 상태 업데이트
       this.count++
     }
   }
@@ -46,7 +46,7 @@ createApp({
   },
   methods: {
     increment() {
-      // update component state
+      // 컴포넌트의 count 상태 업데이트
       this.count++
     }
   }
@@ -55,15 +55,17 @@ createApp({
 
 </div>
 
-Inside a method, we can access the component instance using `this`. The component instance exposes the data properties declared by `data`. We can update the component state by mutating these properties.
+메서드 내에서 `this`를 사용하여 컴포넌트 인스턴스에 접근할 수 있습니다.
+컴포넌트 인스턴스는 `data`에 의해 선언된 데이터 속성을 노출합니다.
+이러한 속성을 변경하여 컴포넌트 상태를 업데이트할 수 있습니다.
 
 </div>
 
 <div class="composition-api">
 
 <div class="sfc">
 
-Here, `increment` is referencing a function declared in `<script setup>`:
+여기서 참조되는 `increment`는 `<script setup>`에서 선언된 함수입니다:
 
 ```vue{6-9}
 <script setup>
@@ -72,7 +74,7 @@ import { ref } from 'vue'
 const count = ref(0)
 
 function increment() {
-  // update component state
+  // 컴포넌트의 count 상태 업데이트
   count.value++
 }
 </script>
@@ -82,14 +84,14 @@ function increment() {
 
 <div class="html">
 
-Here, `increment` is referencing a method in the object returned from `setup()`:
+여기서 참조되는 `increment`는 `setup()`에서 반환된 객체의 메서드입니다:
 
 ```js{$}
 setup() {
   const count = ref(0)
 
   function increment(e) {
-    // update component state
+    // 컴포넌트의 count 상태 업데이트
     count.value++
   }
 
@@ -102,10 +104,13 @@ setup() {
 
 </div>
 
-Inside the function, we can update the component state by mutating refs.
+함수 내에서 ref 값을 변경하여 컴포넌트 상태를 업데이트할 수 있습니다.
 
 </div>
 
-Event handlers can also use inline expressions, and can simplify common tasks with modifiers. These details are covered in <a target="_blank" href="/guide/essentials/event-handling.html">Guide - Event Handling</a>.
+이벤트 핸들러는 인라인 표현식을 사용할 수도 있으며,
+수식어를 사용하여 일반적인 작업을 단순화할 수 있습니다.
+이러한 세부 사항은 <a target="_blank" href="/guide/essentials/event-handling.html">가이드 - 이벤트 핸들링</a>에서 다룹니다.
 
-Now, try to implement the `increment` <span class="options-api">method</span><span class="composition-api">function</span> yourself and bind it to the button using `v-on`.
+이제 `increment` <span class="options-api">메소드</span><span class="composition-api">함수</span>를 직접 구현하고,
+`v-on`을 사용하여 버튼에 바인딩 해봅시다.