Jacob Ko

Jacob Ko

Everything is Awesome 👍

01.Vue.js 시작하기

Updated:

1.Vue.js 설치

vue.js 공식 페이지

CDN 연결

  • 프로토 타이핑 또는 학습 목적에 사용에 적합합니다. (Project 시에는 npm 환경 사용 추천)
// in index.html
<script src="https://unpkg.com/vue@next"></script>

Vue.js CLI

  • Vue.js 는 단일 페이지 어플리케이션을 빠르게 구축할 수 있는 공식 CLI 을 제공합니다.

vue.js official CLI

  • Vue.js CLI 설치 - $ npm install -g @vue/cli

    • -g : global 전역 설치를 하여서 CLI 를 통해 Project 를 전반적으로 제어 할 수 있게 됩니다.

  • Creatign a Project - $ vue create 프로젝트이름

  • 설치 후에 Project 환경이 자동으로 설치 된것을 확인 할 수 있습니다.

    • 기본적으로 babel, node_modules, postcss, webpack 등 npm 환경에서 앱개발 시 필수 package 들이 설치 되있는것을 확인 하실 수 있습니다.

Vetur

  • VS code 의 플러그인으로 .vue 확장자의 hightlight 등 기능을 지원하기 위해 필요한 플러그인 입니다.

  • extention 에서 vetur 검색 후 설치 진핸

image

App.vue

  • 기본적으로 App.vue 파일을 통해서 3개의 구조로 vue 파일이 나눠져 있음을 알 수 있습니다.

    • templte : HTML 을 작성하는 부분

    • script : JS 을 작성하는 부분

    • style: CSS 을 작성하는 부분

<!-- 예시 in App.vue -->
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
</template>

<script>
  import HelloWorld from "./components/HelloWorld.vue";

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

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
  • 즉, 언제든지 vue cli 를 통해서 쉽게 vue project 환경을 만들 수 있습니다.

2.Vue3 Webpack Template

  • 이전 글, Webpack 에서의 만든 github 에 저장된 webpack template NPX degit 을 통해 가져와서 vue3 버전에 맞는 template 을 생성 합니다.

$ npx degit jacobkosmart/webpack-template-setup vue3-webpack-template

  • 생성된 project root 경로에서 src 폴더 생성 후, main.js 와 APP.vue 파일 생성합니다.

  • Vue.js 최신 버전 설치(v.3버전) - $ npm i vue@next (참고로 vue.js 는 개발할때만 사용하는 것이 아니라, 실제로 브라우저에서 동작하는 package 이기 때문에, -D 개발의존성이 아닌 일반의존성으로 설치를 진행해야 합니다)

  • vue.js 페키지는 기본적인 문법을 해석하는 용도로 사용되는 것이기 때문에, vue 라는 파일을 관리 하려면 몇가지 추가적으로 package 를 설치해야 합니다.

    • $ npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc

    • vue-loader : webpack에 사용되는 loader package (@next 를 붙여줘서 최신버전인 v3.0 설치)

    • vue-style-loader : vue 의 스타일을 제어하는 package

    • @vue/compiler-sfc : 실제로 vue 파일을 complie 해서 브라우저에서 동작하게 하는 package

  • webpack.config.js 재설정

// in webpack.config.js

// path: NodeJS에서 파일 및 디렉토리 경로 작업을 위한 전역 모듈
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const {
  // 객체 분해 구조를 통해 가져옴
  VueLoaderPlugin,
} = require("vue-loader");

module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./src/main.js",

  // 결과물(번들)을 반환하는 설정
  output: {
    // 주석은 기본값!, `__dirname`은 현재 파일의 위치를 알려주는 NodeJS 전역 변수
    // path: path.resolve(__dirname, 'dist'),
    // filename: 'main.js',
    clean: true,
  },

  // 모듈 처리 방식을 설정
  module: {
    rules: [
      {
        test: /\.vue$/, // .vue 로 끝나는 것 파일 탐색
        use: [
          "vue-loader", // vue-loader 추가
        ],
      },
      {
        test: /\.s?css$/, // .css 로 끝나는 것 파일 탐색 과 .scss 를 위해 s가 있어도 되고 없어도 되는 파일들 탐색
        use: [
          // 순서 중요! (역순으로 실행됨)
          "vue-style-loader", // 5번 vue-style loader 추가
          "style-loader", // 4번
          "css-loader", // 3번
          "postcss-loader", // 2번
          "sass-loader", // 1번
        ],
      },
      {
        test: /\.js$/, // .js 로 끝나는 것 파일 탐색
        exclude: /node_modules/, // 제외할 경로
        use: ["babel-loader"],
      },
    ],
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html",
    }),
    new CopyPlugin({
      patterns: [
        {
          from: "static",
        },
      ],
    }),
    new VueLoaderPlugin(), // vue loader 생성자 함수로 실행
  ],

  // 개발 서버 옵션
  devServer: {
    host: "localhost",
    port: 8080,
    hot: true,
  },
};

// in App.vue

<template>
  <h1></h1>
</template>

<script>
export default {
  // 객체 literal 을 반환해주는 부분
  data() {
    return {
      message: "Hello Vue!!!",
    };
  },
};
</script>

// in main.js

import { createApp } from "vue"; // 가지고 올때 객체 분해를 통해 바로 createApp 를 가져옴
import App from "./App.vue";

// App.vue 가 project 에 시작이 되는것을 설정
createApp(App).mount("#app"); // app이라는 ID 값을 가지고 있는 곳에 vue.js 프로젝트를 연결 한다는 개념임

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue.js template with webpack</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
    />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
  • $ npm run dev 를 통해서 localhost:8080 작동 확인

image

components 추가

  • root 경로 -> src 폴더에서 -> components 폴더 생성 후, 테스트용으로 HelloWorld.vue 파일 생성 (파일 이름: PascalCase 사용)

  • scr 경로에서 assets 폴더 추가(static 의 images 역활)

  • file-loader pacakge 설치 : $ npm i -D file-loader (특정한 파일들을 읽어서 브라우저에 출력 해주는 pacakge)

// image test 용으로 만든 in HelloWord.vue // webpack.config.js 를 통해서 ~ 와
assets 의 경로를 alias 해주고 file-loader 도 설정 해줘야 함
<template>
  <img src="~assets/logo.png" alt="Jacob's Devlog" />
</template>

module.exports = {
  resolve: {
    extensions: ['.js', '.vue'], // 확장자 명 .js 와 .vue 를 안적어도 자동으로 인식해줌 (확장자를 생략해서 사용할 수 있음)
    alias: { // 경로 별칭 쉽게 접근하기 위해 만듬
      '~': path.resolve(__dirname, 'src'), // ~ 에 경로 값을 alias 해줌 node.js의 현재 webpack.config.js 경로에 scr 폴더를 가리킴
      'assets': path.resolve(__dirname, 'src/assets') // 실제 image 가 있는 경로를 가리킴
    }
  }

  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/, // image 파일 포멧들 탐색 확장자로 png, jpeg, jpg(e는 있어도 되고 없어도 되고), gif, webp 파일 탐색
        use: 'file-loader' // file-loader 사용
      }
    ]
  },

// HelloWorld.vue 동작을 위한 연결 설정 in App.vue

<template><HelloWorld /> // index.html 으로 연결 내용 보내기</template>

<script>
import HelloWorld from "~/components/HelloWorld"; // ~ 는 alias 를 통해서 root/src 폴더를 가리킴 그 안에 components 연결 (마치 절대 경로로 연결하는것과 같음)
export default {
  // 객체 literal 을 반환해주는 부분
  components: {
    HelloWorld, // HelloWorld 연결
  },
};
</script>
  • $ npm run dev 을 통해서 image 가 출력됨을 확인

image

3.Vue3 Webpack Template - ESLint 구성

  • ESLint 관련 package 설치 - $ npm i -D eslint eslint-plugin-vue babel-eslint

  • root 경로에 eslintrc.js 파일 생성

eslint-plugin-vue 페이지

ESLint JS rules 관련 페이지

ESlint-plugin-vue Multi bracket closing 관련 내용..

module.exports = {
  env: { // eslint의 코드 검사를 browser, node 환경에서 동작할 수 있게 ture 설정
    browser: true,
    node: true
  },
  extends: [ // 코드검사를 할 규칙들을 명시
    // vue.js 관련 규칙

    // 'plugin:vue/vue3-essential', // Lv.1
    'plugin:vue/vue3-strongly-recommended', // Lv.2
    // 'plugin:vue/vue3-recommended', // Lv.3 - 가장엄격한 vue.js 문법을 따르는것

    // js 관련 규칙
    'eslint:recommended' // eslint 에서 권장으로 규칙으로 js 를 검사하게 됨
  ],
  parserOptions: { // 기본적으로 code 를 분석할 수 있는 분석기를 지정해주는것
    parser: 'babel-eslint' // JS 코드 검사할때 es6 이상의 문법을 es5 형태로 맞춰서 검사를 도와주는 plugin
  },
  rules: { // extends 를 그대로 사용하면 안써도 되는데, 상황에 맞게 Customizing 하기 위해서 변경하고, 추가 할 수 있는 부분임.

    
    "vue/html-closing-bracket-newline": ["error", { // html </> 기호가 싱글라인, 멀티라인에도 사용될수 있게 하는 옵션
      "singleline": "never",
      "multiline": "never"
    }],
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always", // always 로 하면은 빈 tag 에도 / 기호를 사용해야지 eslint 규칙에 맞는게 됨
        "normal": "never", // never 로 하면 일반 tag 에는 self closing 을 하지 않아도 된다는 것임
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }]
  }
}

// settings user json in vscode 
// lslint 관련 추가 설정들.. 
    "editor.codeActionsOnSave": { // 저장시 vscode 에서 eslint 에 맞게 자동으로 저장 해줌
        "source.fixAll.eslint": true
    },

    // Vue3 template root requires exactly one element.eslint-plugin-vue 에러 발생시, vetur 기능 끄기
    "vetur.validation.template": false,
    "vetur.validation.script": false,
    "vetur.validation.style": false,

4.선언적 렌더링과 입력 핸들링

  • 클릭할때 마다 숫자가 증가하는 함수 만들기

// HTML (Vue) 문법 사용 // 클릭 할때 마다 count 가 1씩 증가함

// JS (Vue) 문법 사용

// CSS (SCSS) 설정

count

  • 작동 순서

    1. count를 0 으로 초기화를 해서 h1 tag 에 count 로 할당해줍니다

    2. increase() 함수를 만들어 count 가 1씩 증가 하게 합니다

    3. @click 하게 되면 increase() 가 실행되는 구조 입니다.

  • 🔑 중요한 점은, count 를 갱신하게 되면, 그것이 연결되어져 있는 화면도 같이 변경 된다는 점입니다. -> 이것을 반응성 (Reactivity) 이라는 개념입니다.

    • SPA (sigle page application) 의 가장 핵심적인 기술이라고 보면 됩니다

5.조건문과 반복문

조건문

  • vue.js 에서는 v-if 라는 속성을 HTML 에 제공하여 특정한 데이터를 기준으로 조건을 달아 줄 수 있습니다.

    • v- 으로 시작되는 명령어를 Directive 라고 합니다.
<template>
  <h1 @click="increase"> 
    8
  </h1>
  <div v-if="count > 4"> 
    4보다 큽니다!
  </div>
</template>

4보다 큽니다

반복문

  • 반복문을 사용할 때는 array data 가 필요합니다

  • SPA 에서는 data 값을 가지고 출력을 하기 때문에 데이를 잘 다룰줄 알아야 합니다.

  • root/src/components 경로에서 Fruit.vue 파일을 생성합니다.
// in App,vue

// HTML (Vue) 문법 사용
// 클릭 할때 마다 count 가 1씩 증가함 
<template>
  <h1 @click="increase"> 
    8
  </h1>
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
  <ul>
    <Fruit
      v-for="fruit in fruits"
      :key="fruit"
      :name="fruit">
      
    </Fruit>
  </ul>
</template>

// JS (Vue) 문법 사용
<script>
import Fruit from '~/components/Fruit' // 외부에서 Fruit 연결
export default { 
  components: { // 외부 Fruit.vue 를 사용하기 위해 등록을 하는 것
    Fruit // Fruit 이름을 components 로 설정해 놓으면 template 부분에서 tag 로 바로 사용 할 수 있습니다. 
  },
  data() { // count 0을 return 하는 data 함수 생성
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  methods: {
    increase() { // count 가 1씩 증가 될수 있는 함수 생성
      this.count += 1
    }
  }
}
</script>

// CSS (SCSS) 설정

<style  lang="scss">
  h1 {
    /* font-size: 100px;
    color: royalblue; */
  }
  ul {
    li {
      font-size: 40px;
    }
  }
</style>

<template>
  <li>?! </li>
</template>


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

<style scoped lang="scss">
// scoped 라는 설정을 추가하게 되면 유효 범위가 현재 파일 안에서만 적용되기 때문에, 외부로 export 할때는 적용 되지 않습니다. 
  h1 {
    color: red !important;
  }
</style>
  • 즉, 외부의 Fruit.vue 을 만들어서 App.vue 에서 가져 와서 HTML 부분에서 활용한다는 점입니다.

image

🔶 🔷 📌 🔑

Reference

Categories:

Updated:

Leave a comment

You may also enjoy