Vue v-model 익숙해지기 (Login UI)

개발자 도구(F12)에서 vue dev tool을 통해 아이디칸에 입력한 값대로 data가 변경되었음을 확인할 수 있다.

Vue를 사용하면서 가장 사용하게 될 directive(디렉티브) : v-model

vue 공식 사이트에서는 v-model에 대해서 다음과 같이 설명하고 있습니다. 

"2.x에서 컴포넌트에 v-model을 사용하는 것은 value prop를 전달하고 input 이벤트를 emit 하는 것과 같습니다."

 

즉 value를 전달하고, input 이벤트를 발생시킨다는 것인데, 다른 말로는 양방향 데이터 바인딩이라고 표현하기도 합니다. 저는 이를 조금 더 쉽게 컴퍼넌트에 value(값)을 연동시킨다고 표현하고 싶습니다. 예를 들어 로그인 페이지에서 아이디 입력칸과 비밀번호 입력칸에 각각 아이디와 비밀번호를 적은 후 로그인 버튼을 눌러 로그인하려고 합니다. 이 때 v-model을 통해 아이디 입력칸과 비밀번호 입력칸을 지정합니다.

최초에 아무것도 입력하지 않고 비어있을 때 아이디와 비밀번호의 value = "" 입니다. 

여기에 텍스트를 입력하면 입력한 값으로 value 가 변경됩니다. 이것이 바로 input 이벤트가 발생한 것입니다. 

 

로그인을 통해 메인 페이지로 이동하는 작업을 해보면서 직접 어떤 느낌인지 알아보세요.

 

 

Vue.js devtools 뷰 개발자 도구 / 메인 페이지 Router 등록

먼저 데이터의 값이 변경되는 것을 바로 확인할 수 있도록 크롬 확장 프로그램을 설치해야 합니다.

크롬 웹 스토어로 이동하여 "Vue.js devtools"를 검색한 후 추가합니다.

 

그리고 MainView.vue 파일을 생성한 후 라우터에 메인 페이지를 추가합니다.

- MainView.vue

<template>
  <div class="about">
    <h1>This is an main page</h1>   
  </div>
</template>

- router > index.ts

  ...
  {
    path: '/main',
    name: 'main',
    component: () => import('../views/MainView.vue')
  },  
  ...

 

 

Login 페이지 아이디 / 패스워드 v-model 

LoginView.vue에서 로그인 버튼을 눌렀을 때 아이디와 비밀번호 일치 여부를 확인하는 로직을 추가합니다. 템플릿은 이미 이전에 로그인 페이지를 작업할 때 v-model을 추가해 두었을 텐데 잘 들어가 있는지 확인 하시면 됩니다.

- Template (LoginView.vue)

<template>
...
        <v-text-field
          prepend-inner-icon="mdi-account"
          name="login"
          label="ID"
          type="text"
          v-model="loginId"
          outlined
        >
        </v-text-field>
        <v-text-field
          prepend-inner-icon="mdi-lock"
          name="password"
          label="Password"
          type="password"
          v-model="password"
          outlined
          @keyup.enter="RequestLogin()"
        >
        </v-text-field>
...
</template>

 

- Script (LoginView.vue)

  ...
  private commonPop = false;

  private loginId = "";
  private password = "";

  RequestLogin() {
    if (this.loginId == "test" && this.password == "1111") {
      router.push("/main");
    } else {
      alert("No Matching Account. Check Your Account Info");
    }
  }
  ...

전에 작성한 RequestLogin()의 내용은 변경되었습니다.

공용 팝업을 띄우는 대신 loginId가 "test" 이고, password가 "1111"인 경우에만 "/main" 페이지로 이동하고, 그 이외의 경우에는 "No Matching Account. Check Your Account Info" 텍스트 알림이 출력되도록 했습니다.

if, else 구문은 이후에도 정말 많이 사용할 예정이니, 한 번 어떤 규칙으로 이루어지는지 살펴보고 가시면 좋을 것 같습니다. 

 

이제 앱을 열어서 작업된 내용을 확인합니다. 

Vue로 만들어진 웹 페이지에서 F12를 눌러 개발자 도구를 누르면, 우측 상단 탭 메뉴(속성, 콘솔, 소스, 네트워크, >>) 중에서 vue를 선택합니다. 만약  vue가 보이지 않는다면 확장프로그램이 사용 중지되었을 가능성이 있으니 사용 설정을 해야 합니다. 

vue 탭을 눌렀다면 아래 드롭다운을 통해 LoginView를 찾아 누릅니다. LoginView의 data에서 commonPop, loginId, password의 현재 value를 확인할 수 있습니다(여기 data로 나타나는 것들은 우리가 private으로 선언한 변수들입니다).

ID / Password 인풋박스에 각각 값을 넣으면 data에 표시되는 값이 즉시 변경됩니다. 

 

그리고 스크립트에 작성한 대로 "test" / "1111" 을 각각 넣은 경우에는 메인페이지로 정상 이동하게 됩니다.