카테고리 보관물: 미분류

Vue입문/Vue로 앱 만들기 (4 : 최종) – 앱 화면 만들기

이틀동안 Vue 설치와 Visual Studio Code(VSCode), Android Studio, Nativescript를 설치하고 간단한 Vue Web App을 만들어보고 Android 개발 환경까지 준비를 다 했다.

이제 간단한 Android용 앱을 하나 만들어 개발용 갤럭시탭에 띄워 보려고 한다.

C:\project\vue 폴더에 만든 vue-farm 폴더에서 계속 작업한다. vue-farm 폴더가 없으면 프로젝트를 만들려고 하는 폴더 ( \project\vue)에서 tns create vue-farm 이라고 치면 폴더가 만들어지고 vue-farm 프로젝트 기본 파일들이 생성된다. 이 vue-farm 폴더 내에서 npm  install  –save  nativescript-vue 라고 명령을 내려 vue-farm 프로젝트에 nativescript-vue를 추가시켜 준다.

VSCode를 띄워서 메뉴의 파일 > 폴더열기를 선택해서 C:\project\vue\vue-farm 폴더를 선택한다.

대략 이런 폴더 구조가 보인다. 여기서 app 밑에 있는 app.js를 열어보면 간단한 정보를 보여주기 위한 페이지를 띄우는 스크립트가 보인다.

[app.js 파일]
import Vue from 'nativescript-vue'

import Home from './components/Home'



new Vue({
  render: (h) => h('frame', [h(Home)]), 
}).$start()

음…Vue.js 예제 파일에서 보던 App.js와는 좀 다른 모양이다. 대충 구조는 Vue() 에서 render 함수를 통해 프로그램이 시작되는 것을 알 수 있다.

이 파일을 약간 수정한다. components 폴더 아래에 App.vue를 만들어서 쓸 예정이므로 Home을 빼고 App를 추가한다.

import Vue from 'nativescript-vue'

/* 삭제되는 라인  import Home from './components/Home' */
import App from './components/App'

new Vue({
  render: (h) => h('frame', [h(App)]), // Home이 App 로 바뀌었다.
}).$start()

import Home 라인은 필요없으니까 삭제를 한다.

다음엔 components 폴더 아래에 App.vue와 Post.vue 두개의 파일을 만든다. 소스는 git의 Instagram-NativeScript-Vue 프로젝트를 참조하였다.

App.vue 파일은 git에서 다운로드 받은 App.vue 파일을 복붙한 다음 하나씩 수정을 하면서 구조를 파악했다.

[App.vue 파일]
<template>
  <Page>
    <ActionBar>
      <StackLayout>
        <Image class="logo" src="~/assets/images/logo.png" />
      </StackLayout>
    </ActionBar>

    <ScrollView>
      <StackLayout>
        <Post v-for="(item, index) in posts" 
                    :key="index"
                    :Image="item.Image"  
                    :Favor="item.Favor"

      />
      </StackLayout>
    </ScrollView>
  </Page>
</template>

<script>
  import Post from './Post'
  export default {
    data(){
      return{
        posts: [
          { Image: 'https://cdn.pixabay.com/photo/2022/09/21/05/39/birds-7469509_960_720.jpg', Favor:0 },
          { Image: 'https://cdn.pixabay.com/photo/2022/02/08/09/28/boats-7001054_960_720.jpg' , Favor:0},
          { Image: 'https://nespy2aub3if2yow3fcm0t5y-wpengine.netdna-ssl.com/files/2013/11/conhe%C3%A7a-londres-635x359.jpg', Favor:0 },
          { Image: '~/assets/images/1000454324980_i1_1200.jpg', Favor:0 }
        ]
      }
    },
    components: { Post }
  }
</script>

<style lang="scss" scoped>
  ActionBar {
    background-color: #f5f5f5;
    color: #ffffff;
  }
  .logo{
    width: 100;
  }
  .message {
    vertical-align: center;
    text-align: center;
    font-size: 20;
    color: #333333;
  }
</style>

수정한 부분은 중간의 Image Url들을 실제 pixabay에 있는 이미지 주소들로 몇개 변경해 본거고 마지막 Image Url은 로컬에 있는 이미지도 되는지 샘플로 한번 넣어봤다. 그리고 각 Image에 Favor라고 하는 변수들을 초기값을 포함하여 지정해 두었다.

이 때 마지막 Image 파일의 주소에 해당하는 실제 파일은 app 폴더 아래의 asset 폴더에 images라고 하는 폴더를 생성하여 그 안에 넣어두어야 한다. 그 작업은 Windows 탐색기 상에서 작업을 하면 되겠다.

다음은 Post.vue 파일이다.

[ Post.vue 파일 ]
<template web>
  <div class="post">
    <div class="post__profile" @click="goTo('profile')">
      <div class="post__imgProfile">
        <img src="~/assets/images/1000486794501_i1_1200.jpg" style="width: 100%">
      </div>
      <strong>홍길동</strong>
    </div>
    <img class="post__image" :src="Image">
    <div class="post__desc">
      <p>{{ Description }}</p>
    </div>
    
  </div>
</template>

<template native>
  <StackLayout class="post">
    <FlexboxLayout class="post__profile" @tap="goTo('profile')">
      <StackLayout class="post__imgProfile">
        <Image
          src="~/assets/images/1000486794501_i1_1200.jpg"
          style="width: 100%"
        />
      </StackLayout>
      <Label text="홍길동" />

    </FlexboxLayout>

    <Image
      class="post__image"
      :src="Image"
    />
    <FlexboxLayout class="post__desc">
      <Label
        textWrap
        :text="Description"
      />
    </FlexboxLayout>
    <WrapLayout>
        <Button text="좋아요" width="50%" @tap="increase()" />
        <Label :text="Favor" width="30%" />
    </WrapLayout>
  </StackLayout>
</template>

<script>
  const { VUE_APP_MODE } = process.env;

  export default {
    props: {
      Image: String,
      Description: String,
      Favor:Number
    },
    methods: {
        goTo(route){
        VUE_APP_MODE === 'web' ? this.$router.push(route) : this.$navigator.navigate(route)
        },
        increase() {
            this.Favor++;
        }
    }
  }
</script>

<style lang="scss" scoped web>
  .post{
    margin-top: 20px;
    width: 100%;
    &__profile{
      display: flex;
      flex-direction: row;
      padding: 0 10px 10px 10px;
      align-items: center;
      strong{
        margin-left: 10px;
        font-size: 13px;
        font-weight: 500;
      }
    }
    &__imgProfile{
      width: 35px;
      height: 35px;
      border-radius: 50%;
      overflow: hidden;
    }
    &__image{
      width: 100%;
    }
    &__desc{
      padding: 10px;

      p{
        font-size: 12px;
      }
    }
  }
</style>


<style lang="scss" scoped native>
  .post{
    margin-top: 20;
    &__profile{
      padding: 0 10 10 10;
      Label{
        margin-left: 10;
        font-size: 13;
        font-weight: 500;
      }
    }
    &__imgProfile{
      width: 35;
      height: 35;
      border-radius: 100;
      overflow: hidden;
    }
    &__desc{
      padding: 10;

      Label{
        font-size: 12;
      }
    }
  }
</style>

여기서 수정한 부분은 <template native> 부붙과 <script>의 propts 부분이다. <template native>는 native 즉 Android 화면에서 뜰 때 참조하는 부분이고 <template web>은 웹브라우저에서 뜨는 환경에서 참조하는 부분이다. template web 부분을 아무리 고쳐도 Android에는 반영되지 않으니 조심해야 한다.

<script>의 props 부분에는 Favor라고하는 변수를 추가하고 버튼을 눌렀을 때 하나씩 증가하는 이벤트 함수를 정의해 주고 이를 <tepmplate native>에 있는 <Button>에 @tab 이벤트로 추가해 주었다.

전체적인 구조를 설명하자면 Post.vue에서 Image Element와 “좋아요” 버튼, 사용자 명 등을 레코드 형식으로 정의하고 App.vue는 이러한 Post.vue Object를 읽어서 data에서 공급받은 정보를 하나씩 대입해서 화면에 반복적으로 뿌려주는 역할을 하는 앱이다.

필요한 image 파일들은 app\asset\images 폴더에 저장해 주고 ( logo 파일, 사용자 프로파일용 사진, Image 리스트 중 로컬에서 보여질 파일 등) 모두 저장한다.

Command prompt 를 실행시켜 vue-parm project 폴더로 이동한다.

C:\> cd \project\vue\vue-farm
C:\project\vue\vue-farm >

이제 Android 기계(핸드폰이나 갤탭 등)를 USB로 연결하고 다시 한번 Android 설정 화면의 가장 아래에 있는 개발자 옵션에서 USB 디버깅이 On 되어 있는지 확인한다. 만약 연결할 기계가 없으면 PC 상에서 그냥 가상기계가 뜨도록 하면 된다.

C:\project\vue\vue-farm> ns run  android

특별히 에러가 나지않으면 Android 기계가 화면을 깜빡이다가 갑자기 앱 화면이 뜬다. 아직 본격적인 화면과는 거리가 멀지만 뭔가 프로그램의 느낌이 나는 화면이 뜬다.

좋아요 버튼을 누르면 숫자가 0에서 1씩 증가하는 것을 볼 수 있다. 화면의 다른 곳을 잘못 누르면 에러가 나고 화면이 에러 로그로 가득 차는데 이는 goTo(‘profile’)의 route가 지정은 되어 있으나 정의되어 있지 않아 쉽게말해 링크가 깨어져 있어서 발생하는 에러이다. route에 대해서는 아직 손대지 않았으니 조금 문서들을 들여다 보고 바꿀 예정이다.

이상으로 vue의 설치와 nativescript 설치를 통해 android App 개발의 첫발을 떼는 것 까지 해 봤다. 혹시 이것저것 자료 찾기 귀찮거나 해도 잘 안되는 사람들은 머리를 비우고 그냥 한번 쭉 따라해 보면 가볍게 성공하지 않을까 싶다.

단, 주의할 점은 시간이 지남에 따라 모든 프로그램들의 버전들이 약간씩 바뀌고 버전의 변경에 따라 소스 문법이나 컴포넌트 사용법들이 약간씩 달라지는 데 이런 점은 각 버전에 맞는 문법과 사용 방법을 다시 한번 참조해야 할 것이다.

끝.

Vue입문/Vue로 앱 만들기 (3) – Nativescript 설치

Vue를 설치하고 기본 프로그램 수정을 해서 메뉴와 헤더를 가진 페이지 레이아웃을 개발해보았으니 이제 본격적으로 Mobile 앱을 만들기 위한 단계로 들어가 보겠다.

Vue는 Framework이므로 개발을 위한 큰 체계, 얼개 정도로 알 수 있는데 이 framework가 Mobile앱을 직접 만들어 주는 것은 아니고 Mobile용 SDK(Software Development Kit)를 설치해서 Mobile용 앱을 만들 수 있도록 Framework이 도와주는 정도이다.

navtivescript에 관해서는 https://nativescript-vue.org/ko/docs/introduction/ 사이트에서 차근 차근 읽어보는 것이 좋다. 우선 nativescript를 설치한다.

많은 warning이 쏟아져 나온다. 모두 버전의 차이로 더이상 지원되지 않는 기능이라거나 높은 버전의 패키지를 참조해야 한다는 메시지들이다. 잘 모르지만 일단 스킵하고 문제가 생기면 다시 설치하기로 했다.

Windows 환경에서 앱을 개발한다고 하면 우리가 잘 아는 삼성 갤럭시 시리즈 핸드폰과 같은 Android 환경에서 돌아가게 하든 애플의 iOS 환경에서 돌아가게 하든 각각의 핸드폰 또는 기계에 맞는 SDK 들이 들어 있어야 한다. SDK는 간단히 말하면 Development Kit(개발 킷)이다. 이 개발 킷으로 개발을 하면 프로그램이 Android든 iOS든 올라가서 각OS에 있는 기본 기능을 호출하면서 돌아가게 되는 구조이다.

그래서 Android든 iOS를 위한 SDK를 설치해야 한다. 그런데 iOS SDK(아이폰, 아이패드용)은 애플 컴퓨터의 Mac OS에서 가능하므로 일단 Linux와 Windows 를 사용하는 사람은 일단 Android용 SDK만 설치해 보기로 한다.

설치해야 하는 것은 node.js, java의 JDK 그리고 Android Studio라고 한다. node.js는 이미 설치가 되어 있고 JDK는 오라클의 자바 다운로드 사이트에서 다운로드 받아서 설치를 하면 되겠다. 많은 설명 문서에 Windows용 패키지 관리툴인 chocolatey를 쓰라고 권장하는데 아직 익숙하지 않아 하나씩 직접 설치해 보기로 했다.

먼저 Android Studio를 다운로드받아서 직접 설치하기로 했다. SDK만 필요하긴 하지만 실제 Android 환경에서 돌아가는 지 테스트 하기 위해서도 필요하다고 하니 Android Studio를 다 설치 하기로 했다.

다운로드가 완료되면 실행하여 설치를 시작한다.

설치가 끝난 다음 확인을 해 보니 JDK는 Android Studio밑에 자동으로 설치되었고 Android Studio를 처음 실행하면 SDK Components Setup 화면에서 install 할 component를 선택하게 된다. 일단 모든 컴포넌트들을 다 선택한다.

Next를 누를 수 없어서 보니 SDK의 Default 폴더가 한글 사용자 이름이 있는 폴더로 되어 있어서 C:\Project\Android\SDK라는 폴더를 새로 만들고 이곳으로 변경해 주었다. 폴더명에 공백이 있어도 안된다.

나머지는 그냥 계속 Next를 선택하다 마지막에 Finish를 선택하면 실제 설치가 시작된다. 설치는 약 2G 정도의 파일들을 계속 다운로드를 받아가면서 설치하므로 시간이 좀 걸린다.

설치가 완료되면 SDK가 모두 설치되었을 것이므로 일단 종료한다. Android Studio를 모두 설치 했으면 시스템 환경 설정 화면에서 ANDROID_HOME 환경변수를 설정한다.

환경 변수 버튼을 눌러서 환경 변수 화면으로 들어가서 상단의 사용자 변수의 새로만들기를 누른다. 여기서 ANDROID_HOME 경로로 아까 설치한 SDK 경로를 입력해 준다.

그리고 환경변수 화면 하단의 시스템 변수에서 Path를 찾아 편집을 누른다. 여기에 SDK 폴더에 있는 platform-tools 경로를 추가해 준다.

새로 만들기를 누르고 찾아보기 하여 마지막에 platfom-tools 의 경로를 추가해 준다. 이 때 시스템 환경변수 JAVA_HOME 도 확인을 해 보고 등록되어 있지 않으면 등록을 해 준다. JAVA_HOME은 Android Studio가 설치된 폴더의 하위 폴더 중 jre 폴더를 등록해 준다. 일단 “C:\Program Files\Android\Android Studio\jre “를 JAVA_HOME 환경변수로 등록을 했다. 만약 JAVA_HOME이 이미 등록되어 있을 때 JAVA_HOME에 등록된 JAVA와 nativescript가 필요로 하는 자바 버전이 일치 하지 않을 때 Fatal Error를 마주하게 될 수 있으니 반드시 확인해야 한다.

정상적으로 설치와 등록이 끝났는지는 새로운 Command Prompt 창을 띄워서 테스트 해본다.

새로운 command prompt를 안띄우면 ANDROID_HOME이 정의되지 않았다고 그러므로 다시 띄워서 실행한다. 정상적으로 다 설치가 되었으면 모두 체크가 정상적으로 실행된다.

이제 필요한 sdk와 플랫폼은 다 설치 했으므로 프로젝트를 생성한다.

갸웃? 사용 통계정보를 자동으로 보내줘서 도와 달라는 내용인데 일단 거절한다.

어떤 프로젝트를 사용할 것인지 선택하라고 한다. 화살표 키를 이용하여 일단 Vue.js 를 선택한다.

어떤 형태의 template를 사용할 것인지 묻는 내용인데 모두 자신이 없어서 일단 Blank를 선택한다.

열심히 생성 해 주고 있다.

nativescript 설치는 된거 같다.

프로젝트 이름을 vue-farm으로 지어줬기 때문에 vue-farm이 프로젝트 폴더이다. 일단 이 폴더로 들어가서 nativescript-vue plugin을 설치해 준다.

다 된건가? 일단 실행을 해 본다. 명령은 tns run android.

갑자기 핸드폰 화면이 모니터에 뜨고 컴퓨터가 엄청 느려진다. 아 안드로이드를 애뮬레이팅 하나 보다. 화면 핸드폰이 부팅을 한참 한다.

인내를 가지고 기다려 본다. 약 1분 20초 후 화면이 전환되고 또 한 15초 정도 지나서 화면이 뜬다.

Android 에뮬레이터가 메모리 부족으로 실행되지 않거나 너무 느린 경우에는 Android 폰이나 탭(갤럭시 탭같은)을 USB로 PC와 연결하고 개발자 옵션을 켠다. 나는 사용하지 않던 구형 갤럭시 탭을 연결했다.

개발자 옵션은 설정 메뉴의 가장 하단에 있는 “정보”(또는 ‘태블릿정보’)에 들어가서 “소프트웨어 정보”를 선택한 다음 “빌드번호” 섹션을 7번 연달아 탭 해준다음 “설정” 메뉴로 돌아가 보면 가장 하단에 “개발자 옵션”이 생성되어 있는 것을 볼 수 있다.

개발자 옵션에서 “USB 디버깅”을 선택하면 PC가 이 기기를 인식할 수 있게 된다. 다시 PC의 command 창을 열어 “adb devices”를 입력하면 연결된 Android 기기의 시리얼번호가 뜬다. 이 상태에서 nativescript로 앱을 실행시키면 Android 화면에 앱이 실행된다.

Vue입문/Vue로 앱 만들기 (2) – VSCode 설정 및 프로그램 수정

Vue.js 설치시 함께 설치한 Visual Studio Code(이하 VSCode)를 이용한 개발 환경에서 프로젝트를 열어보고 디버깅을 해 보도록 하자. 아직 배포환경이나 git, backend, DB 등은 신경 쓸 틈이 없으니 간단한 쇼핑몰 상품 소개 화면의 뼈대(Frame)를 하나 만들어보자. 실제로는 메뉴까지 뜨면 좋겠지만 간단히 자리(Frame)만 잡고 넘어가도록 하겠다.

1. VS Code 환경 설정

우선 vue.js를 설치하고 생성한 첫번째 프로젝트인 HelloWorld 프로젝트를 VSCode에 불러서 어떻게 디버그 하는지 확인을 하고, Vue에서 만들어 주는 프로젝트는 도대체 어떻게 구성되어 있는지 보도록 하자.

VSCode를 실행시킨다.

기본적인 VSCode의 초기화면인데 Korean Language Pack 과 Live Server를 설치했다. 설치는 화면 제일 좌측에 조각난 네 개의 사각형을 누르면 다른 컴포넌트를 조회할 수 있고 클릭 몇 번으로 간단히 설치할 수 있다. Live Server는 굳이 필요없지만 VSCode에서 디버그를 컨트롤 해 준다고 해서 깔아보았다. 실제로는 Chrome에서 직접 해도 되지만 통합하여 디버그 하는 것이 더 편리할 수 있을거라는 생각에 한번 해 보기로 했다.

파일의 폴더 열기를 선택하여 지난번 만든 프로젝트 폴더(C:\project\vue\hello)를 선택하면 프로젝트 내의 폴더 구조가 자동으로 뜬다. 뜨지 않을때는 제일 좌측 아이콘들 중 가장 위 (탐색기) 아이콘을 선택한다. 프로젝트 내의 src 폴더를 열어보면 다음과 같이 보인다.

아하. 이렇게 디렉토리 구조를 만들어주는 구나 하고 일단 넘어가기로 한다. components 밑에 있는 HelloWorld.vue 파일에 실제 화면에 띄워주는 내용이 들어가 있고, App.vue는 이 내용을 초기화하여 화면에 붙여 주는 부분, main.js는 index.html이 해야 하는 vue 프레임웍을 읽어오는 부분과 이를 화면 <div> element에 mount 해주는 (붙여주는) 역할을 한다는 것을 알 수 있다.

2. 프로그램 실행

터미널을 실행하고 개발용 웹서버를 PC 상에서 실행한다. 지난 시간에 해 보았던 npm run serve 명령이다.

터미널에서 npm run serve 명령을 직접 타이핑 쳐서 실행 시킨다.

화면에서 메뉴에 있는 실행(R)의 디버깅 시작(또는 화면에서 바로 F5 키를 누른다)을 실행하면 웹브라우저 화면이 뜨면서 localhost:8080에 접속하여 HelloWorld 화면을 보여준다. 만약 이상한 에러 메시지를 보여주면 ( 확장자를 인식하지 못한다는 종류의 에러메시지가 뜨는 경우) 프로젝트에 있는 .vscode 폴더에 있는 launch.json 파일을 수정해 준다. 만약 없으면 생성해 주어도 좋다.

launch.json 파일이 정상적으로 저장이 되면 F5키를 누르면 바로 웹 브라우저가 뜨면서 디버깅이 시작된다.

이제 준비가 다 끝났으니 디버깅을 띄워 둔 채 본격적으로 프로그램을 고쳐보자.

3. 컴포넌트 추가

SimpleView 사이트를 참조하여 화면을 세 개의 컴포넌트로 구분해서 작성하겠다. 여기서 말하는 컴포넌트는 하나의 정보 단위로 화면에서 대체로 한개의 구역을 차지하는 덩어리를 말한다. 예를 들어 상단의 고정된 메뉴나, 좌측 세로 메뉴, 우측에 고정되는 링크, 게시판, image를 grid에 통합한 것 등등. 화면에서 하나의 같은 역할을 하는 덩어리들이 모두 컴포넌트이다.

화면을 최상단 header와 좌측 menu, 우측 content의 세개의 레이아웃으로 나누어 보겠다.

우선 VSCode 내에서 프로젝트의 src\components에 세개의 파일을 생성한다.

각각 Header.vue, Menu.vue, Content.vue로 각각 만들어준다.

각 파일의 내용은 거의 비슷하지만 약간씩 다르게 할 예정이다.

[Header.vue 파일]

<template>
    <div class="header">
        <div>Header </div>
        <div>안녕하세요. 다 팔아 쇼핑몰입니다</div>
    </div>
</template>

<script>
export default {
    name: "headerDiv"
};
</script>

<style scoped>
.header {
  position: sticky;
  height: 150px;
  border-bottom: 1px solid #ebebeb;
  background-color:yellow;
}
</style>
[Menu.vue 파일]

<template>
    <div class="menu"> 
        <div>
            Menu 
        </div>
        <div>
            세로로 메뉴를 넣겠습니다
        </div>
    </div>
</template>

<script>
export default {
    name: "menuDiv"
};
</script>

<style scoped>
.menu {
    flex: 1;
    background-color:lightgreen;
}
</style>
[Content.vue 파일]

<template>
    <div class="grid"> 
        Contentㄴ 
            <div>
                <img src="https://cdn.pixabay.com/photo/2022/08/23/09/03/house-7405403_960_720.jpg">
            </div>
    </div>
</template>

<script>
export default {
    name: "nameDiv"
};
</script>

<style scoped>
.grid {
  flex: 2;
}
</style>

하나씩 설명을 하자면 세 개의 파일이 모두 동일한 구조를 가진다.

<template>
     표현할 내용 따위가 html 태그로 들어감
</template>

<script>
    export default {
        name: "고유의_이름"
    }
</script>

<style scoped>
   이 컴포넌트에만 적용되는 디자인 style
</style>

이 때 이름을 지정해 주지 않으면 lint가 컴파일 에러를 쏟아낸다. 그리고 이름도 하나의 단어 예를들어 “School” 등과 같이 하지말고 두개 이상의 단어의 결합을 사용하도록 한다. 현재 또는 미래의 html element 명칭과 혼동되는 것을 막기 위함이라고 하니 불편해도 따라줘야 한다. 이름 사이를 “_”나 두 개 이상의 단어를 섞어서 대소문자로 구분해서 적절히 써 주자.

이제 각각의 파일을 모두 저장해 준다. 그래도 웹브라우저에 뜬 결과물에는 아무 변화가 없다. 왜냐하면 이 각각의 컴포넌트를 화면에 뿌려주는 것은 App.vue가 하는 일이기 때문이다.

이제 App.vue 파일을 고쳐보겠다.

[App.vue 파일]

<template>
  <div>
    <headerDiv/>
      <div class="wrap">
        <menuDiv/>
        <contentDiv/>
      </div>
  </div>
</template>

<script>
import headerDiv from "./components/Header";
import menuDiv from "./components/Menu";
import contentDiv from "@/components/Content";

export default {
  name: "app",
  components: { // 가져온 component 들을 등록합니다.
    headerDiv,
    menuDiv,
    contentDiv
  }
};
</script>

<style>
.wrap {
  display: flex;
}
</style>

<script> 영역에 있는 import는 각 컴포넌트에 지정한 이름을 불러오는 부분이다. 이때 contentDiv는 굳이 파일 명 앞에 “@”를 쓰고 있는데 이는 절대경로로 불러오라는 것이다. ( src 디렉토리를 기준으로 절대경로 )

그리고 <style>은 전체 페이지에 적용되는 style이며 세 개의 컴포넌트를 배치하기 위해 사용한다. 이제 저장하면 자동으로 디버그 페이지가 쨘~ 하고 바뀔 것이다. 만약 vue의 웹서버가 떠 있지 않으면 터미널을 열어 npm run serve를 실행시켜 주고 디버그 창을 열어보거나 웹브라우저로 http://localhost:8080/ 으로 접속해 본다.

이제 감을 잡았을 것이다. 뭐가 컴포넌트이고 어떻게 화면에 보여지고 어디를 고쳐야 할 지를. components 폴더에 만든 각각의 .vue 파일들이 화면의 한 영역을 책임지거나 비지니스로직을 실행할 파일들이다. 그리고 App.vue는 각각의 컴포넌트들을 불러와서 화면에 뿌리는 역할을 한다. 물론 javascript와 html로 웹 페이지를 작성할 때도 java든 php든 python이든 include 등을 통해서 공통 메뉴와 Header, Footer 등을 불러와서 사용한다. 하지만 vue는 개념적으로 각각을 컴포넌트로 분리하여 개발하고 관리하고 필요한 곳에 가져다 쓰는 개념이다. 그래서 다른 템플릿이나 라이브러리를 쉽게 가져다 쓸 수 있다고 계속 강조하는 것이다.

만약 아직 감이 안잡히면 SimpleVue 사이트를 방문하여 예제를 차근 차근 따라 하면서 컴포넌트에 대한 이해를 더 높여보고 vue 프로그램 구조에 익숙해 져 보자.