Vue 란?

쵸리·2021년 8월 3일

Vue

목록 보기

1/2

Vue.js 란?

2014년 2월에 에반 유가 처음으로 공식 배포
웹 페이지 화면을 개발하기 위한 JavaScript의 프레임워크이다.
React의 장점과 Angular의 장점을 가져왔으며 쉽고 사용하기 간편하다.
React의 Virtual Dom 방식과 Angular의 양방향 데이터 바인딩 기능을 가져왔다.
React와 Angular에 비해 성능이 우수하고 빠르다.
React와 같이 Component 방식을 사용한다. ( SPA 방식 )
MVVM 패턴을 사용한다.

프레임워크 란?

개발자들의 개발 생산성을 높이기 위해 일정한 툴과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구

MVVM 패턴이란?

MVVM 패턴은 모델 ( Model ) + 뷰 ( View ) + 뷰 모델 ( View Model )로 구조화하여 개발하는 방식 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고 추후 유지 보수가 편해지기 때문이다.

구조

모델 ( Model ) : 웹에서 사용되는 데이터와 그 데이터를 처리하는 부분이다.
뷰 ( View ) : 사용자에게 보여지는 UI 부분
돔 ( DOM ) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너 ( DOM Listeners ) : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
데이터 바인딩 ( Data Binding ) : 뷰(view)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델 ( View Model ) : View를 표현하기 위해 만든 View를 위한 Model. View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터를 처리하는 부분

Vue instance

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다. 인스턴스를 생성하지 않으면 뷰자체로 개발하는건 불가능하다.
인스턴스를 생성하기 위해선 new Vue

사용 방법

1. CDN으로 가져오는 방법 ( 간단히 연습할 때 )

뷰 공식 사이트 - https://kr.vuejs.org/v2/guide/installation.html 에 접속하여

이 부분에서 CDN을 긁어와 HTML 파일에 붙여준다 jQuery방법과 동일하다.

CDN으로 가져온걸로 Vue instance 생성

<!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 Cdn Test</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
  </script>
</body>
</html>

2. NPM 방식 ( cli )

Vue 자동 절차

( 1 ) Node.js 설치

노드 js 공식 사이트 - https://nodejs.org/ko/에 접속하여 node.js install받고 설치

( 2 ) VSCode의 Vue로 프로젝트를 진행할 폴더를 열고 터미널 ( ctrl + ＇ ) 을 켜서 경로가 Vue로 프로젝트를 진행할 폴더가 맞는지 확인 후 npm install -g @vue/cli 입력 설치가 완료되면 vue create 디렉토리이름 생성을 할 때 2버전으로 설치할 건지 3버전으로 설치 할건지 선택지가 나오는데

Vue 2 버전과 Vue 3 버전의 차이

Composition API라는게 들어오면서 데이터, 함수 선언, 상태 관리 등이 변함
컴포넌트 내에서 데이터, 함수, 상태를 호출하는 방식도 변함
없던 종류의 컴포넌트가 몇몇개 생기고
내부적으로 성능 향상을 위한 변화도 진행
Vue 2는 IE 11을 지원한다.
Vue 인스턴스 연동방식 Router, Store 생성 연동방식

더 자세한 내용 확인 - https://velog.io/@bluestragglr/Vue3-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%B0%94%EB%80%8C%EB%82%98%EC%9A%94

cmd 명령어인 vue create 디렉토리이름 으로 만든 cd 디렉토리이름 으로 이동 후 npm run serve로 Vue를 실행한다.

※ 웹 브라우저는 .vue파일을 읽을 수 없고 .js만 읽을 수 있다 그래서 필수적으로 webpack이라는 번들러가 필요한데 위 방법은 자동으로 webpack까지 설치가되는 대신 오래걸린다. 아래는 수동 방법이다. ※

수동 방법도 Vue2버전과 Vue3버전에서 좀 차이가 난다. ( package.json 이랑 js파일에 인스턴스 만드는 과정에서 차이 )

Vue 수동 웹팩 수동 절차

https://velog.io/@chyori/webpack

이 글에서 Webpack 기본 구성 절차 그대로 따라가고 VueLoaderPlugin을 추가 시켜주면 된다. ( Vue2, Vue3 동일 )

※ 기본 구성 절차 + Vue 총정리

설치 해야해야될 모듈들

webpack, webpack-cli, webpack-dev-server

html-loader, html-webpack-plugin

style-loader, css-loader

sass sass-loader ( SASS 를 사용할 시 설치 )

file-loader

vue-loader, vue-template-compiler

vue ( vue는 -D 빼고 써줄 것 Vue2버전 사용시 $ npm i vue@2.6.14
※참고: Vue2의 마지막 버전은 2.6.14)

vue-router, vuex ( 사용할 시 -D 빼고 써줄 것 )

만들어줘야할 파일, 폴더들

src 폴더 ( 개발할때 최상위 파일들 있는 폴더 )
해당 폴더안에 있어야할 파일들 App.vue, index.html, index.scss, index.js, router.js, Main.vue 등

images 폴더 ( 사용할 이미지 파일들 있는 폴더 )

components 폴더 ( Vue 사용시 영역 마다 component로 나뉘는데 영역 상위 .vue파일들 모여있는 폴더 )
해당 폴더안에 있어야할 파일들 Header.vue, Section.vue, Footer.vue 등

pages 폴더 ( router로 페이지 이동시 이동될 .vue파일들이 있는 폴더 )

HTML 파일

<!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>CVA</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

webpack.config.js 파일

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  mode: 'development',
  resolve: {
    extensions: ['*', '.vue', '.js'],
    alias: {
      '@': __dirname + '/src'
    }
  },
  entry : __dirname + '/src/index.js',
  output : {
    path: __dirname + '/build',
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/, use: ['vue-loader']
      },
      {
        test: /\.(png|jpg|jpeg|avi|mp4|wav|ico|bmp|gif|svg)$/, use: ['file-loader']
      },
      {
        test: /\.(c|sa|sc)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] 
      },
      {
        test: /\.html$/, use: ['html-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + '/src/index.html',
      filename: 'index.html'
    }),
    new VueLoaderPlugin()
  ],
  devServer: {
    open: true
  }
}

Vue2 버전 index.js 파일

import Vue from 'vue';
import App from './app';
import router from './router.js';

new Vue({
  router,
  render: h => h(App),
}).$mount('#root');

Vue3 버전 index.js 파일

import { createApp } from "vue";
import Store from "./Store";
import Router from "./Router";
import App from './App.vue';

const app = createApp(App);
app.use(Store);
app.use(Router);

app.mount('#root');

출처 - https://cntechsystems.tistory.com/100
https://kr.vuejs.org/v2/guide/installation.html
https://beomy.tistory.com/43

쵸리

다음 포스트

Vue 란?

Vue

Vue.js 란?

프레임워크 란?

개발자들의 개발 생산성을 높이기 위해 일정한 툴과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구

MVVM 패턴이란?

구조

Vue instance

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다. 인스턴스를 생성하지 않으면 뷰자체로 개발하는건 불가능하다.
인스턴스를 생성하기 위해선 new Vue

사용 방법

1. CDN으로 가져오는 방법 ( 간단히 연습할 때 )

CDN으로 가져온걸로 Vue instance 생성

2. NPM 방식 ( cli )

Vue 자동 절차

( 1 ) Node.js 설치

Vue 2 버전과 Vue 3 버전의 차이

cmd 명령어인 vue create 디렉토리이름 으로 만든 cd 디렉토리이름 으로 이동 후 npm run serve로 Vue를 실행한다.

※ 웹 브라우저는 .vue파일을 읽을 수 없고 .js만 읽을 수 있다 그래서 필수적으로 webpack이라는 번들러가 필요한데 위 방법은 자동으로 webpack까지 설치가되는 대신 오래걸린다. 아래는 수동 방법이다. ※

수동 방법도 Vue2버전과 Vue3버전에서 좀 차이가 난다. ( package.json 이랑 js파일에 인스턴스 만드는 과정에서 차이 )

Vue 수동 웹팩 수동 절차

이 글에서 Webpack 기본 구성 절차 그대로 따라가고 VueLoaderPlugin을 추가 시켜주면 된다. ( Vue2, Vue3 동일 )

※ 기본 구성 절차 + Vue 총정리

설치 해야해야될 모듈들

만들어줘야할 파일, 폴더들

HTML 파일

webpack.config.js 파일

Vue2 버전 index.js 파일

Vue3 버전 index.js 파일

Vue template 문법

0개의 댓글

Vue 란?

Vue

Vue.js 란?

프레임워크 란?

개발자들의 개발 생산성을 높이기 위해 일정한 툴과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구

MVVM 패턴이란?

구조

Vue instance

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다. 인스턴스를 생성하지 않으면 뷰자체로 개발하는건 불가능하다. 인스턴스를 생성하기 위해선 new Vue

사용 방법

1. CDN으로 가져오는 방법 ( 간단히 연습할 때 )

CDN으로 가져온걸로 Vue instance 생성

2. NPM 방식 ( cli )

Vue 자동 절차

( 1 ) Node.js 설치

Vue 2 버전과 Vue 3 버전의 차이

cmd 명령어인 vue create 디렉토리이름 으로 만든 cd 디렉토리이름 으로 이동 후 npm run serve로 Vue를 실행한다.

※ 웹 브라우저는 .vue파일을 읽을 수 없고 .js만 읽을 수 있다 그래서 필수적으로 webpack이라는 번들러가 필요한데 위 방법은 자동으로 webpack까지 설치가되는 대신 오래걸린다. 아래는 수동 방법이다. ※

수동 방법도 Vue2버전과 Vue3버전에서 좀 차이가 난다. ( package.json 이랑 js파일에 인스턴스 만드는 과정에서 차이 )

Vue 수동 웹팩 수동 절차

이 글에서 Webpack 기본 구성 절차 그대로 따라가고 VueLoaderPlugin을 추가 시켜주면 된다. ( Vue2, Vue3 동일 )

※ 기본 구성 절차 + Vue 총정리

설치 해야해야될 모듈들

만들어줘야할 파일, 폴더들

HTML 파일

webpack.config.js 파일

Vue2 버전 index.js 파일

Vue3 버전 index.js 파일

Vue template 문법

0개의 댓글

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다. 인스턴스를 생성하지 않으면 뷰자체로 개발하는건 불가능하다.
인스턴스를 생성하기 위해선 new Vue