[ES6/VueJS] ES6 모듈 구조와 Vue의 구조에 대한 고찰

Node.js 를 공부했었지만 오래되다보니

 

Vue 를 공부하고 있다가 익숙한 구조가 눈에 띄었습니다.

 

 

'export default'

 

 

Vue 공부하면서 단순히 Vue.js 라이브러리에서 정의하고 있는 고정된 양식이겠지 라고 생각하고

 

그냥 넘어가려다 찜찜해서 찾아본 결과 ES6 의 모듈 구조였었습니다.

 

ES6 의 기초를 싸그리 까먹었나봅니다...

 

이번 포스팅은 Vue 에서 자주 다루고 있었던 컴포넌트 구조와 ES6 의 모듈 구조 관계를 살펴보도록 하겠습니다.

 

// HelloWorld.vue

<template>
  <div class="hello">
    ...
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
...
</style>

 

vue-cli 을 이용하여 프로젝트 초기 구성하게 되면 폴더에 다음과 같이 기본 Vue 파일이 생성되어 있습니다.

 

templete, script, style 태그들은 Vue.js 의 컴포넌트를 정의하기 위한 기본 구조이나

 

script 태그 안에 정의되어 있는 export default 는 ES6 의 모듈 정의 문법입니다.

 

위와 같이 정의된 컴포넌트를 다른 js 파일이나 script 태그 안의 코드에서 아래와 같이 호출, 연결하여 사용하죠

//index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'HelloWorld', component: HelloWorld }
  ]
})

 

vue-router 를 설치하여 사용하고 있다고 가정하고 기본 구성된 index.js 를 살펴봅시다.

 

import HelloWorld from '@/component/HelloWorld'

 

이 부분을 보면 HelloWorld.vue 파일에서 export default 으로 정의된 부분을 연결하여 사용하고 있다는것을 알수 있습니다.

 

Vue.js 는 Node.js(ES6) 기반의 프레임워크입니다.

 

이런식의 ES6 문법을 이용한 효율적인 자원 관리를 하는것은 Vue.js 를 구성할때 당연한 사항일 것입니다.

 

Vue.js 컴파일러는 vue 확장자의 파일을 해석하여 js 구조로 통합하여 실행하기 때문에 이런식의 연결을 할수 있습니다.

 

이것을 이용하여 몇가지를 활용해볼수 있는데

 

ES6 문법을 이용하면 다음과 같이 파일을 분리하여 기능들을 정의하고 활용할수 있습니다.

 

// data.js

export default function () {
  return {
    msg: 'Welcome to Your Vue.js App'
  }
}


// name.js

export default 'HelloWorld'


// HelloWorld.vue

<template>
  <div class="hello">
    ...
  </div>
</template>

<script>
import WelcomeData from '@/component/module/HelloWorld'
import NameData from '@/component/module/name'

export default {
  name: NameData,
  data: WelcomeData
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
...
</style>

 

약간 억지스럽지만 예시를 위한 코드니 참고삼아 봐주시기 바랍니다.

 

감사합니다.

 

---

참고 자료

• http://woowabros.github.io/experience/2018/06/07/vue-story-of-baminchan.html
• https://ui.toast.com/weekly-pick/ko_20190805/
• https://www.daleseo.com/js-module-import/