Vue 나만의 컴퍼넌트 만들기 feat.Common Popup(공용 팝업)

내 앱에서 앞으로 사용할 공용 모달 팝업 UI 컴퍼넌트를 만들어보자

My-Component 활용 방법

우리는 앱에서 특정한 규격의 버튼, 팝업 등 UI를 공용으로 사용하는 것을 알고 있습니다. 이는 개발 효율성을 증가시킬 뿐만 아니라 유저에게도 통일성의 측면에서 편안함을 느끼게 해주기 때문이죠. 물론 똑같은 로직을 복사하여 여러 곳에 붙여 넣기도 하지만, 계속해서 사용하게 되는 UI는 컴퍼넌트로 직접 만들어 두면 추후 유지 보수 측면에서도 매우 유리합니다(여러 곳에 복붙해둔 버튼을 하나 하나 찾아서 수정해야 된다면?). 

저희는 팝업을 하나 만들어보겠지만 같은 방식으로 인풋 박스나 버튼 등도 하나씩 직접 만들어 보시면 좋을 것 같습니다.

 

 

Login 페이지 만들기 

본격적으로 컴퍼넌트 만들기에 들어가기 앞서 이전에 배웠던 내용을 복습하는 느낌으로 가볍게 하나의 새로운 페이지를 만들어 보겠습니다. 이전에 LoginView.vue 파일을 만들고, 라우터에 추가해두었습니다만 현재는 해당 라우터 경로로 찾아가는 UI가 없습니다(주소창에 /login 입력하여 경로를 찾아갈 수는 있습니다).

/login 경로로 이동할 수 있는 버튼을 추가하기 위해 App.vue 파일을 엽니다.

모든 작업은 yarn serve로 앱을 실행하여 보면서 진행하도록 합니다.

<template>
  <v-app id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/login">Login</router-link>       
    </nav>
    <router-view/>
  </v-app>
</template>

이전에 네비게이션을 통해 HomeView와 AboutView를 살펴보았습니다. 이와 같은 방식으로 <router-link> 태그를 사용하여 Login 버튼을 추가합니다. 저장하고 확인해보면 상단 네비에 Login 이라는 텍스트 버튼이 추가되었습니다.

 

LoginView에는 아무런 내용이 없기 때문에 /login 경로에서도 네비를 제외하고는 빈 화면만 나타나게 됩니다. 이제 Vuetify에서 제공하는 UI 컴퍼넌트를 사용하여 기본적인 UI를 구성해보겠습니다. 이전 포스팅에서 소개해드린 Vuetify 메인 홈페이지로 이동한 후 좌측의 UI Componets 에서 사용할 수 있는 다양한 컴퍼넌트를 소개하고 있습니다. 제가 아래에 샘플로 작성한 템플릿 내용 이외에도 다양한 UI를 직접 추가해 보십시오.

https://simsimcoding.com/entry/Backoffice%EA%B4%80%EB%A6%AC%EC%9E%90-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0

 

 

Login Sample Code 샘플 코드

- Template 샘플 및 내용 설명

<template>
  <v-card elevation="0">
  <v-img src="https://picsum.photos/240/60?random" contain height="200">
  </v-img>
    <v-card-text>
      <v-form>
        <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>
        <v-btn 
        color="black" 
        block 
        x-large 
        dark
        @click="RequestLogin()"

        >Login
        </v-btn>
        <v-dialog 
        v-model="commonPop"
        width="600"
        >
          <common-pop></common-pop>
        </v-dialog>
        <v-card-actions>
          <v-checkbox color="black" label="Remeber me"></v-checkbox>
        </v-card-actions> 
      </v-form>
    </v-card-text>
  </v-card>
</template>

v-card: 카드(로그인 UI를 구성하기 위해 만들 틀)

v-img: 이미지(랜덤 이미지를 받아올 수 있는 경로 지정)

v-card-text: 카드 내 텍스트를 추가하기 위해 주로 사용되지만 여기서는 카드 내 하나의 틀을 더 만들기 위해서 추가

v-form: input의 type 지정을 위해 필요한 태그(이 샘플에서는 input을 사용하지 않았으므로 꼭 필요하지는 않으나 로직 추가 시 필요할 수 있음)

v-text-field: 텍스트 입력 공간(prepend-inner-icon을 통해 내부에 표시되는 아이콘 이미지를 지정하거나 type을 이용하여 내부에 입력되는 텍스트 타입을 지정할 수 있음)

v-btn: 버튼(@click을 이용하여 해당 버튼에 대한 클릭 이벤트를 지정할 수 있음)

v-dialog: 다이얼로그(모달의 규격과 종류를 지정. 모달 내용을 태그 내에 추가 필요)

common-popup: 직접 정의한 컴퍼넌트(common-pop으로 정의한 템플릿 내용을 불러옴)

 

-Script 

<script lang="ts">
import CommonPop from '@/components/popups/CommonPop.vue';
import { Component, Vue } from 'vue-property-decorator';


@Component({
  name: 'LoginView',
  components: {
    'common-pop': CommonPop,
  }
})


export default class LoginView extends Vue {

  private commonPop = false

  private loginId = ""
  private password = ""


  RequestLogin() {
    this.commonPop = true
  }

}
</script>

- import CommonPop ... : 해당 경로에 있는 CommonPop.vue 파일로부터 CommonPop을 가져오기

- @Componet: 가져온 CommonPop을 'common-pop'으로 사용할 것으로 정의(이에 따라 위에 템플릿에서 <common-pop> 태그를 사용할 수 있었음)

 - export default class ... : 이 내용을 LoginView라는 이름으로 내보내기(이렇게 내보낸 경우에만 다른 곳에서 LoginView를 가져올 수 있음)

- private ...: 해당 변수를 private으로 선언하고 타입 지정 및 초기화

- RequestLogin() {} ... : RequestLogin이라는 함수(function). 템플릿에서 클릭 이벤트로 사용되며, commonPop 변수(팝업의 오픈 여부) 값을 true로 변경해줌에 따라 팝업이 열림

 

 

CommonPopup Sample Code 샘플 코드

위의 스크립트에서 CommonPop을 가져오기 위한 코드를 만들었으나 해당 경로에는 아직 CommonPop.vue 파일을 만들어두지 않았기 때문에 오류가 발생했을 것이 분명합니다. 따라서 components 폴더 내에 popups 폴더를 만들고CommonPop.vue 파일을 새로 만듭니다.

 

-Template

<template>
  <v-card>
    <v-card-text>
      <span>
        Please Check Your Login Id or Password.
      </span>
    </v-card-text>
  </v-card>
</template>

간단한 메시지만 넣어두었습니다. 

 

- Script

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class CommonPop extends Vue {

}
</script>

가져올 것이 없기 때문에 import는 하지 않습니다(Componet, Vue는 디폴트)

export에서 CommonPop 클래스로 내보냅니다. 즉, 다른 곳에서 Import 할 때의 명칭과 일치하게 합니다.

 

앱에서 완성된 결과물 확인합니다.

로그인 버튼을 눌러 LoginView로 이동하고, 로그인 버튼을 누르면 CommonPop이 나타나는 것을 확인할 수 있습니다.