[프론트엔드_개발] Vue 프로젝트

Vue 프로젝트 생성

기초 vue 앱

• ES6 버전의 표준 javascript 문법으로 구현
• CDN (Contents Delivery Network 서비스) 이용

<script src="https://unpkg.com/vue@next"></script>

html 문서의 head 부분에 위 태그를 넣어주면, 웹브라우저가 위 URL의 서버로부터 vue 라이브러리를 받아와서 실행. 이런 방식을 제공해주는 서비스를 CDN이라고 함.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios 라이브러리도 웹브라우저가 CDN 서비스 서버로부터 받아와서 실행.

• 프로젝트 빌드(build)할 필요 없음
  javascript 소스코드 파일을 컴파일하거나 변화할 필요 없기 때문에 프로젝트 빌드 작업X

• vue 컴포넌트를 구현하기 불편
  기초 vue 앱에서는 구현하기 불편함.

고급 vue 앱

• 확장된 javascript 문법 구현
  이 확장된 javascript 문법은 웹브라우저가 이해할 수 없기 때문에, 표준 javascript 문법으로 변환해야 웹브라우저에서 실행됨 ➡️ 트랜스파일(transpile)

• 트랜스파일(transpile) 해야함
  : 소스 코드를 다른 문법의 소스 코드로 변환하는 작업

고급 vue 프로젝트 실행 전, 소스 코드 파일을 트랜스 파일해야함.
확장자는 *.vue, 이 파일을 표준 javascript 파일 *.js로 변환해야함.

• 압축(minify)
  javascript 파일의 크기가 너무 크면, 웹브라우저가 파일 받아갈 때도, 실행할 때도 무거움.
  변수 이름이나 함수 이름을 짧게 줄이고, 연속된 공백이나 줄바꿈 문자를 공백 문자 한개로 줄이면, 크기를 많이 줄일 수 있음
  ➡️ *.min.js

• npm 패키지 이용
  : CDN 서비스로 vue 라이브러리와 axios 라이브러리를 이용X

• 프로젝트 빌드(build)
  bulid = transpile + minify

웹브라우저는 이 배포 파일만 서버로부터 받아와서 실행하면 됨.

• vue 컴포넌트 구현 편리

✏️ 용어정리

• transfile : 소스 코드를 다른 문법의 소스 코드로 변환하는 작업
• minify : 구현된 기능 변화 업이 javascript 파일의 크기만 줄이는 작업
• babel : javascript 소스 코드 transplie & minify 도구
• webpack : javascript 소스 코드 파일과 라이브러리(npm 패키지) 파일들을 배포 파일로 묶어주는 도구
• eslint : javascript 소스 코드 오류를 찾아서 알려주는 도구

---

⚙️ @vue/cli 설치

: 고급 vue 프로젝트를 생성,빌드,실행,테스트하기 위한 도구

CLI

: Command Line Interface, 쉘에서 명령을 입력하는 방식
CLO <-> GUI(Graphic User Interface)

• 설치 명령

npm install -g @vue/cli

• 설치 확인

vue_app1 프로젝트 생성

vue create vue_app1

➡️ Vue3로 선택

vue_app1 프로젝트 실행

해당 프로젝트 폴더로 이동하고

npm run serve

포트번호 변경하기

package.json

... 생략 ...
  "scripts": {
    "serve": "vue-cli-service serve --port 8082",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
... 생략 ...

--port <포트번호>로 변경

💻 소스코드 수정

프로젝트 폴더 구조

• node_modules 폴더
  : npm 패키지(라이브러리) 파일들이 다운로드되는 폴더 (git repository에 등록X)

• public/index.html 파일
  : 앱의 시작에 해당하는 html 파일

• src 폴더
  : 소스코드 파일이 위치하는 폴더

• src/main.js
  : 앱의 시작에 해당하는 javascript 파일 ➡️ App.vue 컴포넌트를 사용

• App.vue 파일
  : 앱의 시작 컴포넌트
  마치 java 프로젝트의 소스 코드가 java 클래스인 것처럼, vue 프로젝트의 소스 코다 vue 컴포넌트.

• gitignore
  : git repository에 등록하지 않을 파일/폴더 목록이 들어있는 설정 파일

• package.json
  : javascript 프로젝트 설정 파일

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  configureWebpack: {
    devtool: 'source-map'
  },
  transpileDependencies: true
})

: vue cli 설정 파일

• publicPath : './' 이 설정이 있으면, 링크에서 사용하는 파일 경로는 상대 경로
• configureWebpack: { devtool: 'source-map' } 설정이 있으면, 웹브라우저 개발자창의 Sources 탭에서 *.vue 소스코드를 볼 수 있다.

App.vue 수정

<template>
  <div id="app">
    <HelloWorld message="첫번째 Vue.js App 입니다" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style scoped>
div#app { padding: 30px; margin: 30px auto; max-width: 400px;
      border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
</style>

<HelloWorld message="첫번째 Vue.js App 입니다" />

HelloWorld 컴포넌트를 여기에 출력.
파라미터 : message="첫번째 Vue.js App 입니다."

import HelloWorld from './components/HelloWorld.vue'

Helloworld.vue 파일에서 HelloWorld 컴포넌트를 import

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

이 컴포넌트의 이름은 App
내부에서는 HelloWorld 컴포넌트 사용

<style scoped>

이 서식은 이 컴포넌트에만 적용

HelloWorld.vue 수정

<template>
  <div>
    <h1>안녕하세요</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  p { color: blue; }
</style>

export default {
  name: 'HelloWorld',
  props: {
    message: String
  }
}

이 컴포넌트의 이름은 Helloworld
파라미터는 message ▶︎ 컴포넌트의 파라미터를 props라고 부름

<HelloWorld message="첫번째 Vue.js App 입니다" />

이렇게 입력하면,

<p>{{ message }}</p>

message props 값을 여기에 출력

프로젝트 빌드 & 배포

프로젝트 빌드

npm run bulid

위 명령에 의해 프로젝트 소스 코드 파일이 transplie되고 minify됨
빌드 결과로 생성되는 파일이 프로젝트 폴더 아래 dist 폴더에 생성

➡️ 실행 서버에 배포할 때 dist 폴더 아래의 파일들만 복사하면 됨