Vue 개발의 아쉬운 부분 개선

다른 설치 없이 순수 Vue를 통해 개발하는 것에는 아쉬운 부분이 많다.

• 코드의 변화를 인식하고 자동 로드, 업데이트 기능
• IDE의 자동 완성 & 오류 검수 기능
• 구현한 JavaScript 코드를 불러오고 내보내는 기능

이 같은 기능을 사용하고 싶을때, 우리는 Vue CLI를 활용할 수 있다.

Vue CLI

• 내부에서 Node.js 사용 (자동 로드 기능 제공)
  • javascript 런타임. 브라우저 밖에서 javascript를 사용하기 위해 필요
  • npm: node package manager
  • npm run serve: 서버 시작
  • ctrl + C: 서버 종료
• ESLint (코드 자동 완성 & 오류 검수 기능)
  • JavaScript 코드 문제점 식별 & 코드 품질 향상을 위해 사용되는 정적 코드 분석 도구

---

폴더 구조 분석

my-vue-project/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  │   └── favicon.ico
  ├── src/
  │   ├── assets/
  │   │   └── logo.png
  │   ├── components/
  │   │   └── HelloWorld.vue
  │   ├── views/
  │   │   └── Home.vue
  │   ├── App.vue
  │   └── main.js
  ├── babel.config.js
  ├── package.json
  ├── package-lock.json
  ├── README.md
  ├── vue.config.js
  └── ...

src

• 메인 작업이 수행되는 디렉토리

assets

• 정적 자원(이미지, 스타일 시트 등)을 저장

components

• Vue 컴포넌트 파일들을 저장하는 폴더.
• 컴포넌트
  • 웹 페이지의 다양한 부분을 구성하는 재사용 가능한 요소
  • 자체적으로 데이터와 동작을 가질 수 있다.
  • 다른 컴포넌트와 조합하여 웹 애플리케이션을 구축하는 데 사용
  • 이 폴더에 저장된 Vue 컴포넌트 파일들이 Vue 앱에서 임포트하여 사용된다.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

• vue 앱의 진입점
• import : 한 파일에서 다른 파일로 코드를 불러오는 모던 javascript 기능
• 이제 더 이상 Vue.createApp을 통해 app을 만들지 않고 import { createApp } from 'vue'를 통해 Vue 프레임워크로부터 createApp 메서드와 같이 항목을 불러와 사용한다.

App.vue

• vue앱 작성을 돕는다.
• 3가지 부분으로 나뉜다.: tempalte, script, style
• App.vue 코드 자체에는 브라우저에서 작동하지 않을 코드가 있으나, Vue CLI가 백그라운드에서 코드를 변환하여 최종적으로 유저의 브라우저에서 작동하도록 변환해준다.

---

기본 Vue app 생성

지금까지 app을 생성해온 방식.

App.vue

<template></>
<script>
const app = {
  data() {
    return {
      friends: []
    }
  }
}
</script>

main.jsp

import { createApp } from 'vue';

createApp({}).mound('#app);

이 app 코드가 main.js의 구성 객체가 되도록 할 것이다. 어떻게 이 구성 객체를 main.js의 createApp 메서드에 넣을 수 있을까? import를 사용하면 된다.

import

import 불러올 객체 이름(자유롭게 지정 가능. 일반적으로는 파일명과 통일)
	from '불러올 파일 경로(./상대주소)'

• vue 패키지에서 불러오는것이 아닌 커스텀 파일인 경우 파일 경로를 지정해줘야 한다.

import App from './App.vue'

createApp(app).mount('#app');

이 코드 수정으로 우리는 이제 App 코드(javascript 객체)를 createApp으로 전달 가능하게 되었다. 그러나 현재는 이를 내보내고있지 않다. 상수(const)에 코드를 저장하면 해당 파일에서만 사용가능하고 다른 파일에선 사용할 수 없기 때문이다. 대신, javascript의 기본 구문인 export default 키워드를 사용할 수 있다.

export default

App.vue

<template></template>
<script>
export default {
  data() {
    return {
      friends: []
    }
  }
}
</script>

• javascript에게 이 객체가 이 App.vue 파일의 default export임을 알려준다.
• 이는 import마다 해당 default를 불러오게 됨을 의미한다.
• 결과적으로 App.vue 파일에서 main.js파일로 이 객체를 공유한다.

---

컴포넌트 추가하기

App과 Component

Vue에는 앱이 있고 컴포넌트가 있다.

1. vue App
   App.vue: 매인 Vue 앱

2. vue Component

   • 미니 앱 같은 것
   • 여러 컴포넌트를 합쳐 하나의 앱으로 만들 수 있다.
   • 각 컴포넌트들은 서로 통신할 수 있다.
   • 여러 다른 컴포넌트를 합쳐 복잡한 사용자 인터페이스를 구축할 수 있다.
   • 보편적으로 파스칼 케이스로 작명한다.(첫글자 대문자 + 여러 단어)

src/components/FriendContact.vue

<template>
  <li>
    <h2>{{ frind.name }}</h2>
    <button @click="toggleDetails">Show Details</button>
    <ul>
      <li><strong>Phone:</strong>{{ friend.phone }}</li>
      <li><strong>Email:</strong>{{ friend.email }}</li>
    </ul>
  </li>
</template>

<script>
export default {
  data() {
    return { //이 컴포넌트에만 고유하게 해당되는 데이터
      detailsAreVisible: false,
      friend: {
        id: 'manuel',
        name: 'YoungJin Lee',
        phone: '123456789',
        email: 'YoungJin@localhost.com'
      }
    }
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible
    }
  }

}
</script>

이렇게 컴포넌트 코드 하나를 작성해보았다.
이제 이 컴포넌트를 main.js에 등록해보자!

main.js

import { createApp } from 'vue';

import App from './App.vue';
import FriendContact from "@/components/FriendContact.vue";

const app = createApp(App);

app.component('friend-contact', FriendContact);

app.mount('#app');

이제 App.vue에서 frined-contact 컴포넌트를 사용할 수 있게 되었다.
즉, 커스텀 HTML 요소를 사용할 수 있게 된 것이다.

App.vue

<template>
  <section>
    <h2>My Friends</h2>
    <ul>
      <friend-contact></friend-contact>
      <friend-contact></friend-contact>
    </ul>
  </section>
</template>

---

Reference

Udemy:【한글자막】 Vue - 완벽 가이드 (Router 및 Composition API 포함)