Vue (4)

SFC 프로젝트 구성 w.parcel

• SFC ... 파일 단위로 Vue 를 관리 / 편리하지만 변환과정을 거쳐야하고, 패키지가 필요
• import * as Vue from 'vue': 상대 경로가 없는 import ... node_modules 에 설치한 패키지에서 가지고 오는 방법
  * as ... 패키지의 내용을 전부 가져오도록 함
• npm i -D parcel
• "dev": "parcel ./src/index.html" ... index.html 을 parcel 의 진입점으로 설정
  npm run dev ... 개발 서버로 오픈
• "build": "parcel build ./src/index.html" ... 배포용으로 결과물을 만들 때 ("main" 과 충돌 ... "main" 을 지워도 무방)
  난독화가 이루어짐 ... 용량 압축과 보안성 강화 (브라우저 해석용)
• src/ ... 개발용 파일이 담긴 폴더
  dist/ ... vue 를 js 로 변환한 브라우저 해석 / 배포용 파일이 담긴 폴더
  

---

SFC 프로젝트 구성 w.webpack

• 번들러 ... 여러가지 js, sass, jpg 등을 웹 브라우저에서 동작할 수 있는 결과로 묶음처리
• npm init -y
  = npm i -D webpack webpack-cli ... cli(command line interface / 터미널 동작 커맨드를 의미)
• script
  "build": "webpack"
• webpack.config.js ... webpack 명령이 동작할 때 필요한 구성옵션을 정의한 파일

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist')
  }
}

// entry: 어떤 파일로 진입해서 해석할 것인지
// output: 해석이 완료된 후에는 어디에 결과물을 반환할 것인지 
// __dirname: 현재 webpack.config.js 의 경로 정보를 가지고 있는 node.js 의 전역 변수

• webpack 은 기본적으로 js 만 해석할 수 있음 ... vue 등의 다른 파일을 해석하기 위해 loader 필요
  npm i -D vue-loader@next (vue-loader 는 vue 2 버전)

// ----- webpack.config.js -----
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: '...',
  output: {
    ...
  },
  module: {
    rules: [
      {
        test: /\.vue$/, // .vue 로 끝나는 파일만 찾음
        use: 'vue-loader'
      }
    ]
  },
  plugins: {
  new VueLoaderPlugin()
}

• npm i -D @vue/compiler-sfc ... vue-loader 를 통해 로드한 후, vue 컴파일러가 필요함
  설치된 버전이 "vue" 와 일치해야 함!
• "build": "webpack --mode production" ... 제품화(난독화) 명령 (개발서버 오픈 x)
• dist 에는 index.html 이 포함되어 있지 않음 ... webpack html plugin 필요
  npm i -D html-webpack-plugin

const HtmlPlugin = require('html-webpack-plugin')

...
plugins: [
	new HtmlPlugin({
      template: path.resolve(__dirname, 'src/index.html') 
      // webpack 이 해석해야하는 html 파일이 어디에 있는지?
    })
]

• webpack.config.js 의 output 에 clean: true 를 추가하면, 빌드할 때마다 dist 의 기존 파일을 제거하고 빌드하여 파일 섞임을 방지할 수 있다.
• npm i -D webpack-dev-server ... 개발 서버를 열기 위한 패키지
  "dev": "webpack-dev-server --mode development"
  개발 서버 포트를 plugins 에서 devServer: { port: 1234 } 와 같이 변경할 수 있다.
• css 처리를 해주는 loader 또한 필요하게 됨
  npm i -D css-loader vue-style-loader
• scss 처리를 해주는 loader 필요
  npm i -D sass sass-loader
• 번들링을 하면서 dist 에 필요한 파일 (파비콘 등) 을 넣어주기 위한 플러그인
  npm i -D copy-webpack-plugin
• 자동으로 코드 최적화 ... eslint (혹은 prettier)
  npm i -D eslint eslint-plugin-vue
  

---

컴포넌트

• 컴포넌트의 이름은 영어 소문자만 사용하고, 하이픈을 이용하여 단어를 연결하여 사용한다.
• SFC 에서는 kebab-case('-') 로 정의하거나, 파스칼케이스(MyComponentName) 로 정의할 수 있다.
  파스칼케이스가 권장되는 방법
• import 로 해당 컴포넌트를 불러오고, components 에 등록 후 사용하는 방식

컴포넌트 Props

• 숫자, 불린, 배열, 객체 등의 데이터를 전달할 수 있다.
• v-bind 로 전달 가능
• 상위 컴포넌트에서 props 를 할당받은 하위 컴포넌트에서는 props 를 수정할 수 없음.
  하위 컴포넌트 data 에서 새로운 변수에 할당하여 변경은 가능함.
• 기본 타입 체크 / default 값을 정의해주어야 함.
• HTML 속성은 kebab-case 로, props 옵션은 camel-case 로 작성해야 함!

컴포넌트 Non-Prop 속성

• props 를 통해 다루지 않는 나머지 객체
• 다중 루트 노드일 때 (최상위 요소가 여러개일 때) 는 $attrs 객체를 통해 원하는 곳에 명시를 해주어야 함.
• inheritAttrs: false 를 통해 속성에 대한 상속을 받지 않을 수 있다.

컴포넌트 커스텀 이벤트

• emits: 를 통해 컴포넌트에서 커스텀 이벤트를 등록
  커스텀 이벤트의 이름이 네이티브 이벤트와 똑같다면, 커스텀 이벤트가 이를 덮어쓰게 되어 원래 기능을 하지 않게 됨 ... emit 을 통한 커스텀 동작화 해주어야 함
• $emit(): 기본적으로 props 에서 받아온 상위 컴포넌트의 데이터는 하위 컴포넌트에서 수정이 불가함 ... emit 을 이용하여 상위 컴포넌트까지 수정이 가능해짐 / 자식에서 부모로 이벤트를 발생시킴
• props 를 통해 내려온 하위 컴포넌트에서 상위 컴포넌트 데이터 바꾸기

<Hello
    :message="msg"
    @update="msg = $event" />

// ...

 <input
      :value="message"
      @input="$emit('update', $event.target.value)" />

동적 컴포넌트

• 필요에 따라 동적으로 컴포넌트를 교체해서 사용 :is
• 동적으로 컴포넌트를 전환하면 전환시마다 컴포넌트를 새로 생성 / 해제 하게 됨
  동적으로 자주 토글된다면 keep-alive 를 통해서 이를 방지할 수 있음

---

Refs

• 컴포넌트 내에서 원하는 요소를 찾고자 할 때 ref="hello", const h1El = this.$refs.hello 와 같이 바로 참조하여 사용할 수 있다.
• $refs 는 mounted() 라이프 사이클에서 사용할 수 있다.

---

회고

webpack 은 기본 세팅부터 패키지 설치, 설정을 해야할 게 많아서 프로젝트마다 언제 다 셋팅할까.. 라는 생각이 들었지만 github 에 default 세팅을 올려두고 프로젝트를 시작할 때마다 내려받아서 위에서 작업하면 되는 것이었다.

컴포넌트가 생길때마다 상위 컴포넌트 - 하위 컴포넌트 간의 데이터를 주고 받는 과정을 잘 학습해야겠다.