개발이 하고 싶어요

🖥Frontend/Vue.js

1. Vue.js - book - 기초

코너(Corner) 2021. 7. 23.
반응형

Vue.js 첫걸음

1.1 가상 DOM 방식

vue.js 나 react.js 는 가상 DOM을 사용한다. 자바스크립트에서 여러 개 DOM 엘리먼티를 한 번에 조작하는 일이 잦아 DOM 조작이 동시 또는 시간차이를 두고 일어나면 브라우저는 처리를 위해 찾아가는 시간과 속도가 매우 비효율적이기 때문이다.

가상 DOM을 사용하게 되면 웹 애플리케이션은 개별의 가상 DOM에만 접근하면 되므로 처리 속도가 빨라진다.

Vue.js는 가상 DOM에 변경 사항이 발생하면 가상 DOM의 내용과 웹 페이지의 DOM을 비교해 웹 페이지의 DOM이 다르면 가상 DOM의 내용으로 업데이트 한다.

1.2 Vue.js의 장점

빠른 시간에 많은 사람이 사용하는 프레임워크가 된 이유는 단순히 사용하기 쉽다는 것만이 아니다.

React.js와 비교했을 때 템플릿, 확장성이라는 장점이 잇다.

단점

규모가 큰 웹 애플리케이션의 구현이 어렵고, React.js보다 생태계가 작다는 점을 들 수 있다.

1.2.1 템플릿

Vue.js는 Vue 인스턴스나 컴포넌트에 있는 데이터를 표시하는 방법으로 기존 HTML 템플릿을 그대로 활용한다. (컴포넌트에서 다루는 CSS도 기존 문법 그대로 사용한다.) 덕분에 기존의 웹 애플리케이션에 Vue.js 코드를 부분적으로도 통합할 수 있다.

React.js는 인스턴스의 데이터를 표현하는 방법으로 HTML을 변형한 템플릿 문법인 JSX를 사용한다. 사용자 엘리먼트를 효과적으로 표현하는 방법으로 인기 있지만, 별도로 배워야 한다는 점은 부담스럽다.

Vue 컴포넌트에서 CSS를 통합하는 데 사용하는 코드 일부분이다.

<style scoped>
@media (min-width: 250px) {
    .list-container:hover {
        background: orange;
    }
}
</style>

style 태그에 scoped 속성이 추가 됐다. scoped 속성은 개별의 Vue 컴포넌트에만 스타일이 적용되어야 한다는 것을 뜻한다.

Vue.js에서 동적 엘리먼트를 보여주는 방법으로 render 함수를 직접 구현할 때가 있다. 템플릿을 사용하는 것보다 더 까다롭고 복잡하므로 선언적 XML과 비슷한 JSX를 사용할 것을 권한다. Vue.js 프로그램에 JSX를 적용하는 작업은 간단한 편이므로 Vue.js 공식 홈페이지를 참고하면 된다.

1.2.2 확장성

웹 애플리케이션 대부분은 웹 페이지를 10개에서 20개 정도로 구성하며 동적 기능을 추가하려고 다양한 라이브러리와 프레임워크를 사용하기도 한다. 그중 jQuery와 같은 라이브러리는 script 태그로 CDN을 추가해 쉽게 사용할 수 있다.

Vue.js도 jQuery처럼 script 태그로 CDN을 추가할 수 있다. CDN은 웹 애플리케이션에 자바스크립트 프레임워크나 라이브러리를 바로 사용할 수 있는 호스팅 서비스이다.

또한 Vue.js는 점진적으로 커지는 프로그램 규모에 맞게 필요한 라이브러리를 선택해 사용할 수 있다.

자바스크립트 파일만 별도로 취급하는 빌드 작업을 자동화할 수도 있다.

1.3 Vue.js 활용

웹 애플리케이션은 다양한 요소로 구현되어 있다. 쇼핑몰이라면 화면에 상품 각각을 보여주는 부분(상품 이미지 컴포넌트), 상품 배송 여부를 보여주는 부분 (배송 조회 컴포넌트) 등이 있다면, 이때 Vue.js를 사용해 상품 이미지 컴포넌트, 배송 조회 컴포넌트, 로그인 컴포넌트 등을 따로 만들고 적용해 기능을 쉽게 추가할 수 있다.

Vue.js 개발 환경

웹팩이란?

모듈 번들러이다.

  • 서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해 주는 변환 도구이다.
    • = 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해 주는 변환 도구
  • 기본적인 취지 : 애플리케이션 동작과 관련된 여러개의 파일(html, css, js, images etc) 들을 1개의 자바스크립트 파일 안에 넣고, 해당 자바스크립트 파일만 로딩해도 웹앱이 돌아가게 하자는 것.

주요 속성

  • entry : 웹팩으로 빌드(변환)할 대상 파일을 지정하는 속성(번들링 파일을 만들려고 할 때). entry로 지정한 파일의 내용에는 전체 애플리케이션의 로직과 필요한 라이브러리를 로딩하는 로직이 들어간다.
  • output : 웹팩으로 빌드한 결과물의 위치와 파일 이름 등 세부 옵션을 설정하는 속성
  • loader : 웹팩으로 빌드할 때 HTML, CSS, 이미지 파일 등을 자바스크립트로 변환하기 위해 필요한 설정을 정의하는 속성
  • plugin : 웹팩으로 빌드하고 나온 결과물에 대해 추가 기능을 제공하는 속성. 예를 들어, 결과물의 사이즈를 줄이거나 결과물(기본적으로 자바스크립트)을 기타 CSS, HTML 파일로 분리하는 기능 등이 있다.
  • resolve : 웹팩으로 빌드할 때 해당 파일이 어떻게 해석되는지 정의하는 속성. 예를들어, 특정 라이브러리를 로딩할 때 버전은 어떤 걸로 하고, 파일 경로는 어디로 지정하는지 등을 정의한다.
웹팩 데브 서버 (webpack-dev-server)

웹팩 설정 파일 (webpack.config.js)의 변화를 감지하여 빠르게 웹팩을 빌드할 수 있도록 지원하는 유틸리티이자 node.js 서버

  • npm run build 명령어로 /dist/라는 웹팩 빌드 결과물을 만들지 않아도 npm run dev 명령어를 실행했을 때 마치 웹팩으로 빌드한 것 같은 효과를 얻을 수 있다.
  • 이는 npm run dev 명령어로 띄운 서버에서 참조하고 있는 빌드 결과물이 메모리 상에 있기 때문이다.
  • 파일 시스템에 파일을 쓰고 읽는 시간보다 메모리에 저장하고 읽는 시간이 더 빠르기 때문이며 웹팩 데브 서버를 인 메모리(in memory) 기반이라고 한다.
웹팩 설정 파일

뷰 CLI로 프로젝트를 생성하고 나면 프로젝트 내 최상위 레벨에서 webpackconfig.js 라는 웹팩 설정 파일을 확인할 수 있다. npm run dev 명령을 입력했을 때 이 설정 파일에 따라 .vue파일을 포함한 기타 파일들이 웹팩으로 빌드된다.

  1. 파일 경로와 웹팩 라이브러리 로딩
var path = require('path')
var webpack = require('webpack')

output 속성에서 사용할 노드 path 라이브러리와 웹팩 플러그인에서 사용할 node_modules의 웹팩 라이브러리를 node_modules 폴더에서 로딩하여 path, webpack에 각각 저장한다.

  1. entry 속성
entry: './src/main.js',

웹팩으로 빌드할 파일을 src 폴더 밑의 main.js 파일로 지정한다. 이 내용에 따라 애플리케이션의 구성 요소 및 파일들이 웹팩으로 빌드된다.

  1. output 속성
output : {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist',
    filename: 'build.js'
},

웹팩으로 빌드하고 난 결과물의 파일의 위치와 이름을 지정한다. 결과물 파일의 위치는 dist/build.js이다.

  1. module 속성
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },-loader'
        ],

웹팩으로 애플리케이션 파일들을 빌드(변환)할 때 HTML, CSS, PNG 등의 파일을 자바스크립트로 변환해 주는 로더를 지정한다.

  1. resolve 속성
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
},

웹팩으로 빌드할 때 사용할 뷰 라이브러리 유형을 지정한다. vue.esm.js는 최신 웹팩 버전과 사용할 수 있는 풀 버전의 라이브러리를 의미한다. 이렇게 별도로 설정하지 않으면 런타임 버전인 vue.runtime.sem.js를 사용한다.

  1. devServer 속성
devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
},

웹팩 데브 서버 관련 속성을 지정한다.

  • historyApiFallback 속성 : 클라이언트 사이드 라우팅인 뷰 라우터와 함께 사용하기 위해 true로 지정.
  • noInfo 속성 : 처음 서버를 시작할 때만 웹팩 빌드 정보를 보여주고, 이후 변경 시에는 빌드 정보를 보여주지 않는다.
  • overlay 속성 : 웹팩으로 빌드할 때 오류가 있으면 브라우저 화면 전체에 오류를 표시한다.
  1. performance 속성
performance: { 
    hints: false
},
  1. devtool 속성
devtool: '#eval-source-map'
  1. 배포 옵션
if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

애플리케이션의 기능과 화면을 구현한 후 최종적으로 사용자나 사이트에 배포할 때 설정하는 옵션이다.

==> index.html 파일에서 웹팩으로 빌드한 build.js파일을 로딩하면 애플리케이션 로직을 구성하는 vue 파일, png 파일, 자바스크립트 라이브러리를 로딩한 것과 동일한 방식으로 동작한다.

반응형

'🖥Frontend > Vue.js' 카테고리의 다른 글

Vue2 - 더 이상 믹스인을 사용하면 안됩니다.  (0) 2022.07.19
Vue.js 3.6 렌더링 / 3.7 이벤트 핸들링  (0) 2021.07.26
Vue.js 파비콘, 아이콘, 폰트, 반응형 태그 설정 / 컴포넌트 구현하기  (0) 2021.07.26
vue.js 프로젝트 소개 및 컴포넌트 설계 방법  (0) 2021.07.26
Vue.js  (0) 2021.07.22

댓글

티스토리툴바