# IME issue

## VueJS IME 입력 문제

한글처럼 [IME 입력](https://ko.wikipedia.org/wiki/%EC%9E%85%EB%A0%A5%EA%B8%B0)이 필요한 언어들은 조합이 완성되어야 v-model이 갱신되므로 이용 시 문제가 되는 경우들이 존재한다.

![검정 부분은 작성중인 글자이다](/files/e2xt5whFC8LWnHxta1xs)

### 테스트 예제

&#x20;유니코드 입력이 정상적으로 이루어지지 않는 상황을 확인하기 위해 예제를 준비한다.

```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model example</title>
    <style>
        input {
            font-size: 20px;
            padding: 0.75em;
            display: block;
            margin:0.5em 0;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <input type="text" v-model="text">

        <div>{{text}}</div>

    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    text : ""
                };
            }
        });
        app.mount("#app");
    </script>
</body>
</html>
```

{% embed url="<https://codepen.io/hiphop5782/pen/WNZqExm>" %}

테스트 예제를 실행하면 한글 등 유니코드가 실시간으로 입력되지 않는다는 것을 알 수 있다. 이에 대한 공식 사이트의 해결책은 다음과 같다.

{% embed url="<https://kr.vuejs.org/v2/guide/forms.html#%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95>" %}

![공식 사이트에서 제안하는 해결책](/files/QD713RA44Ry6CgaUcifg)

### 문제점 해결

문제를 해결하려면 키보드 이벤트를 추가해야 한다. input 이벤트를 사용하면 쉽게 처리가 가능하다. 아직 이벤트를 다루지 않았으나 이 부분은 응용이 필요없는 고정 해결책이기에 이곳에서 기술한다.

```html
<input type="text" v-model="text" v-on:input="text = $event.target.value">
```

`$event`는 Vue에서 제공하는 내장 이벤트 객체이며, `$event.target`은 이벤트가 발생한 대상인 input 태그를 말한다. 따라서 `$event.target.value`는 입력창의 입력값을 불러오는 코드이며, 이를 Vue data인 `text`에 설정하는 코드를 입력 시 실행되도록 설정했다.

```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model example</title>
    <style>
        input {
            font-size: 20px;
            padding: 0.75em;
            display: block;
            margin:0.5em 0;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <input type="text" v-model="text" v-on:input="text = $event.target.value">

        <div>{{text}}</div>

    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    text : ""
                };
            }
        });
        app.mount("#app");
    </script>
</body>
</html>
```

{% embed url="<https://codepen.io/hiphop5782/pen/vYeqJjr>" %}

한글을 포함한 모든 입력이 정상적으로 수행되는 것을 확인할 수 있다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sysout.co.kr/web/develop-page/js/vuejs/cdn-vue3/vue-instance/data/ime-issue.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
