[vue-trello] TIL 1 :: webpack이란? / 라우터와 플러그인

webpack

SPA(단일 페이지 어플리케이션)이 많아지면서 하나의 파일에서 자바스크립트 코드를 관리할 수 없을 만큼 그 양이 증가하게 되었다.

그래서 파일을 UI 및 기능별로 분리하여 개발하고 webpack을 통해 하나의 js파일로 번들링하여 웹페이지를 불러오는 방식을 사용하게 되었다.

webpack.config.js파일에 들어가면 entry point를 확인할 수 있는데, 이는 로딩하는 모듈의 시작점이 되는 파일을 말한다.

module.exports = {
  entry: {
    main: './src/main.js',
  }
}

webpack은 이 entry point를 기점으로 필요한 모듈을 로딩해 하나로 묶는다. (번들링)

번들링이 완료되면 이 결과물을 처리할 위치를 output에 기록한다.

module.exports = {
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
}

//dist 폴더의 bundle.js 파일로 저장한다.

그러면 index.html에서는 이 bundle.js 파일만 불러오면 된다.

 

라우터

라우팅이란 웹페이지 간 이동 방법을 말한다. Vue-router에서는 각 컴포넌트를 각 url을 매치시켜 보여줘, 싱글 페이지 어플리케이션을 만들기 용이하다.

플러그인

Vue-cli를 통해 개발하고 있다면 Vue.use 통해 vue-router를 호출해 주어야 한다. 전역 수준으로 사용되는 기능은 이렇게 추가해주면 좋은 듯 하다.

1. 약간의 전역 메소드 또는 속성 추가 예. vue-custom-element

2. 하나 이상의 글로벌 에셋 추가 : 디렉티브 / 필터 / 트랜지션 등. vue-router

3. 글로벌 mixin으로 일부 컴포넌트 옵션을 추가하십시오. 예. vuex

4. Vue.prototype에 Vue 인스턴스 메소드를 연결하여 Vue 인스턴스 메소드를 추가하십시오.

5. 가지고 있는 API를 제공하면서 동시에 위의 일부 조합을 주입하는 라이브러리. 예. vue-router

window.location

window.location 안에서 확인 가능한 것

어느 팔월의 오후 다섯시 :: javascript window.location 객체

location.href 와 location.replace 차이점

location.href 와 location.replace 차이점 - JavaScript Tips

computed and watch

computed는 복잡한 로직을 사용할 때 적합함.

history

mode:history를 사용하면 #없이 경로 이동이 가능해짐!