[Udemy Vue 완벽가이드 Section7] 86. 기본 Vue 앱 만들기

# App.vue

src 폴더에 App.vue라는 새로운 파일을 생성해보자.

  - 파일명을 'App.vue'로 할 필요는 없지만, Vue앱의 주요 구성을 담고 있는 메인 파일에 일반적으로 붙이는 이름이 'App.vue'이다.

  - 해당 파일의 싱글 파일 컴포넌트 기능을 사용할 수 있도록 확장자는 .vue로 하자.

  - template, script, style 섹션이 분리되어 있어, 해당 로직을 분리하면서도 한 곳에 둘 수 있도록 해준다.

 

App.vue파일 안에 template, script태그를 생성해보자. (style 태그는 지금 필요하지 않으니 나중에 추가)

<template></template>
<script></script>

 

다시 한번 강조하면, 위 코드는 일반적으로는 작동하지 않는다.

이는 JS 파일이 아니라, .vue 파일이므로, Vue 프로젝트 setup만이 이를 처리할 수 있다.

Vue가 내부에서 위 코드 전부를 브라우저가 인식할 수 있는 regular JavaScript코드로 변환해준다.

개발자로서는 Vue 문법이 작업하기 편하기 때문에 이렇게 한다.

 

script 태그 안에 우리 Vue 앱을 구성하자. 그리고 그 Vue앱은 index.html의 div태그에 mount한다.

이를 위해, script에 표준 JavaScript 객체(const app = { })를 생성하고, 이를 app이라는 상수에 저장하자.

그리고 그 객체에 우리가 배운 내용을 추가하자.

이 Vue 앱에 필요한 무엇이든 추가할 수 있다. (data, methods, computed..)

<!--App.vue-->
<script>
 const app = {
   data(){
    return {
      friends: [
       {
         id: 'manuel',
         name: 'Manuel Lorenz',
         phone: '0123 45678 90',
         email: 'manuel@localhost.com'
       }, {
         id: 'julie',
         name: 'Julie Johnes',
         phone: '0456 35353 93',
         email: 'julie@localhost.com'
       }
       ],
    },
  },
   methods: {},
   computed: {},
},
</script>

위 작성한 app 객체가 main.js에서 Vue앱의 구성객체가 된다.

 

# main.js

그렇다면, App.vue 파일에 있는 이 구성 객체를 어떻게 main.js의 createApp 메서드에 넣을 수 있을까?

→ import 구문을 사용한다.

이는 모던 JS 기능으로, Vue CLI에서 생성한 Vue 프로젝트에서 사용가능하며, 여러 JS 파일을 병합하고 하나의 파일에서 기능을 내보내고, 다른 파일에서 사용할 수 있게한다.

2023.08.16 - [JavaScript] - 자바스크립트 ES6모듈 내보내기/불러오기(export/import)

이를 사용하려면, import ... from 을 입력하고, 불러오고 싶은 파일을 가리키면 된다.

from뒤에 './'로 시작하는 relative import를 사용해야하며, 이는 해당 파일이 같은 폴더에 있다는 걸 뜻한다.

그리고 뒤에는 파일이름을 적는다. 이 경우에는 App.vue를 입력한다.

 

Q. vue는 './' 이런 '파일경로'같은 걸 안적던데..?

import { createApp } from 'vue';

위 import와는 좀 다르다. './vue'가 아니다. → 'vue' 패키지로부터 불러오기 때문에.

패키지에서 불러오는 경우에는 패키지 이름만 참조해서 쓰면 된다.

그러나 App.vue같은 커스텀 파일에서 불러오는 경우에는 '파일 경로'를 지정해주어야한다.

 

import 뒤에는 중괄호를 써서 named export를 불러올 수도 있고, default export도 가능하다.

- named export : export하는 변수나 함수의 이름을 그대로 불러올 때 사용하게 되는 이름

- default export : 원하는 식별자를 작성. App 대신 Hello나 그 외의 무엇으로 해도 상관없다.

그러나 일반적으로 파일과 같은 이름으로 정하게 된다.

import App from './App.vue';

 

이제 이 App을 createApp으로 전달하게 된다.

여기서 불러온 App은 App.vue 컴포넌트의 script에 있는 JavaScript 객체이다.

import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

 

하지만 현재는 아래와 같이 App.vue에서 이 JavaScript 객체를 내보내고 있지 않다. JavaScript 객체를 내보내려면 const app 이렇게 상수에 저장하는 것은 좋은 생각이 아니다.

상수에 저장하면, 이 App.vue 파일에서만 사용가능하고, 다른 파일에서는 사용할 수 없기 때문.

<!--App.vue-->
<script>
 const app = {
   data(){
    return {
      friends: [
       {
         id: 'manuel',
         name: 'Manuel Lorenz',
         phone: '0123 45678 90',
         email: 'manuel@localhost.com'
       }, {
         id: 'julie',
         name: 'Julie Johnes',
         phone: '0456 35353 93',
         email: 'julie@localhost.com'
       }
       ],
    },
  },
   methods: {},
   computed: {},
},
</script>

 

대신, 이번에도 모던 JS의 기본 구문을 사용해보자 → export default 키워드.

이는 JS에게 이 객체가 이 App.vue 파일의 default export임을 알려준다. 즉, 다른 파일에서 App.vue를 import 할때마다 해당 default를 불러오게 되고 따라서 이 객체를 불러오게 된다.

 

그래서 main.js에서 App.vue를 import하면 이 객체를 불러오게 된다.

최종적으로 export default로 export한 이 구성 객체를 여기 createApp으로 전달한다.

<script>
 export default {
   data(){
    return {
      friends: [
       {
         id: 'manuel',
         name: 'Manuel Lorenz',
         phone: '0123 45678 90',
         email: 'manuel@localhost.com'
       }, {
         id: 'julie',
         name: 'Julie Johnes',
         phone: '0456 35353 93',
         email: 'julie@localhost.com'
       }
       ],
    },
  },
   methods: {},
   computed: {},
},
</script>

코드를 깔끔하게 정리하고, 모든 파일이 특정 작업에 집중되도록 여러 파일로 나누었다.

이렇게 해서 프로젝트 전반의 가독성이 향상되었고, 이는 대규모의 복잡한 개발 프로젝트를 진행할 때 더욱 유용한 부분이다.

이렇게 앱 구성 객체가 준비되었다.

 

# template

여기서 눈여겨볼만한 점이 하나 있다.

현재, 우리가 최종적으로 생성한 이 Vue앱에는 template이 없다.

id="app"인 div에 mount를 하긴 했지만, 이건 비어있는 div이다.

index.html 파일에 h2태그같은걸 사용하면 Vue 기능을 사용할 수는 있다.

<div id="app">
 <h2>{{ }}</div>
</div>

 

하지만 Vue CLI로 생성된 이런 프로젝트에서는 일반적으로 이렇게 하지 않는다.

index.html 파일은 그대로 두고, 대신 .vue파일의 template 섹션을 활용한다.

App.vue 파일의 template 섹션에서 이 Vue앱의 템플릿을 정의할 수 있다. script에 대한 HTML 코드를 이렇게 template에 작성할 수 있다.

<template>
 <section>
   <h2></h2>
   <ul>
    <li></li>
   </ul>
 </section>
</template>

 

이것이 .vue파일 그리고 이렇게 setup된 프로젝트를 다루는 방법이다.

컴포넌트도 기본적으로 같은 방법으로 생성하게 된다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.