6주차 주말 배운 것 정리

목차

1. Vue 4화

1. 컴포넌트 기초

1.0 app과 vm 구별하기

• app은 Vue.createApp(name)이 반환하는 인스턴스로 components, methods, props, computed, inject 및setup 등의 메소드가 존재한다.

• vm은 app이 특정 element에 mount되어 반환하는 view-model을 의미

1-1. 전역등록과 지역등록

• 지역등록은 Vue.createApp({options})의 options.components 안에 컴포넌트를 등록하는 것

• tip 일반적으로는 지역등록을 권장하고, 어디서든지 반복적으로 사용해야하는 컴포넌트 경우에만 전역으로 등록한다.

1-2. 자식 컴포넌트에게 데이터 전달하기

• 컴포넌트는 기본적으로, 태그 이름과 tamplate, props를 가지고 생성된다.
• app.component(’upper-name’, { template: `<div>{{name}}</div>`, props:['name'] })
• 데이터를 내려줄 때에는 props 와 v-bind를 통해 내려준다.
• props는 모든 data 타입의 값을 넘겨줄 수 있다.

• 상위 컴포넌트의 데이터를 변경해야 할 때는 emit 을 통해 전달한다.
• emit으로 넘기는 함수의 인자를 같이 넘길 때에는, 사용처(html)에서 $event라는 인자로 받을 수 있다.
fruits data 변경 사례

// HTMl
	<div id="app">
      <upper-name
        v-for="fruit in fruits"
        :key="fruit.id"
        v-bind:hello="fruit.name"
        @to-upper="toUpper(fruit, $event)"
      >
      </upper-name>
    </div>

//하위 component(upper-name)
app.component("upper-name", {
        template: '<div @click="capitalize"> {{hello}}</div>',
        props: ["hello"],
        methods: {
          capitalize() {
            this.$emit("to-upper", this.hello.toUpperCase());
          },
        },
      });

// 전역 component(app)
const App = {
        data() {
          return {
            fruits: [
              { id: "1", name: "apple" },
              { id: "2", name: "apple2" },
              { id: "3", name: "apple3" },
            ],
          };
        },
        methods: {
          toUpper(fruit, upperName) {
            console.log(fruit, upperName);
            fruit.name = upperName;
          },
        },
      };

2. 버전관리 Node.js 와 NPM

2-1. node.js

Node.js는 크롬 v8 엔진으로 빌드된 Javascript 런타임 이다.

• javascript를 동작시킬 수 있는 환경을 js런타임이라고 한다.
• nodeJS는 로컬의 컴퓨터에서의 js 코드를 제어하고 개발한다.
• 그 중 일부 기능을 통해 프론트엔드 개발을 하는 것 (npx serve, ...)
• nodeJS에서 작동하는 코드, 브라우저에서 작동하는 코드 분리 필요
• nodeJS 환경에서 개발 된 코드는 빌드되어 웹브라우저상에서 실행된다.

• node.js, nvm 설치
• node.js는 상황마다 versione을 변경할 수 있도록 NVM 패키지 사용
• nvm ls : 현재 사용 가능한 node version 출력
• nvm use 14 : node 14ver 사용

• vue 설치
• npm install vue
• 주의 2version 이 설치 된다!
• npm uninstall vue 혹은 npm um vue 를 통해 패키지 삭제
• npm i vue@next 별칭을 통해 3version을 설치한다.
• vue가 동작하는데 필요한 의존성 패키지들이 node_modules에서 확인 가능

2-2. 번들러를 통해 개발 진행하기

• 흐름
• index.html → <script defer /> → live-server 혹은 npx-serve

• port
• 3000, 5000, 5500, 8080 주로 사용

• npx-serve
• npx는 npm의 특정 패키지를 메모리상에 설치하고 동작시키도록 하는 명령어

• npm i serve —save-dev === npm i -D serve
• serve는 개발환경을 제공하는 패키지이므로, 개발환경에만 설치되도록 옵션 설정

• npm run dev
• package.json의 scripts에 등록한 명령어를 실행하도록 함

• packge-lock.json
• “^12.0.0” 버젼에서 “^” 캐럿 기호는 이상을 뜻하는 기호
• 12.0.0 이상의 모든 호환가능한 버전에서 동작하도록 함
• 팀원이나 환경에 따른 다른 버전을 가능하도록 해서 오류를 발생시킬 수 있음
• 따라서 version을 snapshot을 찍어 완전히 version을 일치하도록 하는 관리 파일
• node_modules가 제거되더라도 package.json, package.lock.json이 잘 관리되면 같은 패키지로 사용가능

• git ignore 추가
• node_modules/
• .vscode/ ⇒ vscode 환경 설정 폴더, .idea/ ⇒ webstorm 설정 폴더
• .DS_Store/ ⇒맥에서 등록되는 폴더

3. SFC 프로젝트 구성

3.1 개요

• 모듈방식 차이 이해하기
• commonJS 방식 (require & module.exports)
• nodeJS 환경에서 사용
• ESM 방식 (import & export)
• local에서 작성 시 사용 (브라우저 환경에서 사용할 수 있도록)
• 사례 import * as Vue from ‘vue’
• ‘vue’는 node_modules의 vue폴더의 packge.json의 main에 해당하는 index.js 파일을 의미한다.
• index.js파일에서이 commnJS 방식으로 module.exports 되고 있으므로(ESM 방식의 export defaults 아님), * as 방식으로 import해야 해당하는 전체 파일을 Import 할 수 있다.

• 브라우저는 Vue 파일 자체를 해석할 수 없으므로, Vue 파일을 js로 변환해주는 패키지가 필요하다.
• Parcel
• Webpack

3.2 SFC(SingleFileComponent) by Parcel

• 설치
설치코드 보기
• npm i -D parcel
• parcel의 경우 entry를 index.html로 설정
• 개발환경 실행 코드 "dev": "parcel src/index.html"

• 개발환경과 배포환경
• 개발환경에서는 bundle된 js파일이 난독화 되어 있지않다.
• 실시간 리로딩 지원
• 배포환경에서는 난독화를 통해, 효율적으로 브라우저가 읽어낼 수 있도록 별도의 옵션을 설정한다.
• "build": "parcel build src/index.html"
• 주의 : 진입점이 기본적으로 index.js로 설정되어 있으나, 이 경우 필요하지 않기 때문에 지워줘야 동작함

• 장단점
• 간단하게 구성이 가능하지만, 섬세한 옵션처리등이 부족해 실무용으로는 부적합

3.3 SFC(SingleFileComponent) by Webpack

• parcel과 다르게 Bundle에 대한 옵션을 직접 지정해주어야 함 webpack.config.js
• entry: ‘src/index.js’ : 진입 지점
• output.path: path.resolve(__dirname, ‘dist’)
• nodejs의 경로해석용 메서드 path와 node.js의 전역변수이자 현재 경로를 나타내는 __dirname 사용
• path.resolve를 사용하는 이유
• === webpack.config.js를 기준으로 상대경로를 찾으면 안되는 이유
• output.path는 webpack 진행 과정 중 모든 option들이 적용 된 이후 최종적으로 결과를 지정하는 옵션인데, 그 때의 경로가 webpack.config.js의 위치가 아닐 수 있다. 따라서 저장될 폴더의 위치를 절대경로로 나타내기 위함
• output.clean : true 를 통해, build시 기존 존재하던 dist폴더를 삭제해줄 수 있다.

• a) webpack 설치
설치 코드 보기
• npm i -D webpack webpack-cli
• 실행
• scripts: {”build-webpack”: “webpack ” }

• b) HTML webpack Plugin 적용

dist 폴더에 index.html을 카피하여 넣어주는 플러그인

• path.resolve를 활용한 현재경로 찾는 부분이 내장화 되어 있어서 따로 적어주지 않아도 됨
코드

• npm i -D html-webpack-plugin

// webpack.config.js
...
const HtmlPlugin = require("html-webpack-plugin");

module.exports = {
...,
  plugins: [
    ...,
    new HtmlPlugin({
      template: "src/index.html",
    }),
  ],
};

• c) Vue 파일 해석을 위해 loader 적용

“vue-loader”는 webpack에 vue파일을 가져다두는 역할

• 실제 컴파일 해주는 @vue/compiler-sfc 패키지 설치해야함
• 설치 후 plugin을 등록해준다.
loader 적용 코드보기

• npm i -D vue-loader@next vue 3version에 해당하도록 next붙여 설치

• npm i -D @vue/compiler-sfc

// webpack.config.js

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.vue/,
        use: "vue-loader",
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

• d) webpack-dev-server 설치

개발환경에서 자동 re-loading을 위한 패키지

• port 바꾸기
• default: 8080
• at webpack.config.js ⇒ devServer: {port: 1234}
코드
npm i -D webpack-dev-server
scripts: { “dev”: "webpack-dev-server --mode development",}

• e) css-loader 설치 , scss-loader 설치
• 주의 use의 loader 순서가 중요하다. 먼저 해석되어야 하는 loader가 배열의 뒷부분에 위치해야한다.
• scss 먼저 컴파일 후 css 컴파일 후 vue 스타일을 컴파일 해야함
• [’vue-style-loader’, ‘css-loader’, 'sass-loader']
코드
npm i -D css-loader vue-style-loader
• webpack.config.js
• module.rules
• { test: /\.css$/ use: ["vue-style-loader", "css-loader"] }

• f) 하위 컴포넌트에서의 style이 전역적으로 적용되는 문제 해결
• style scoped속성을 통해 해결
• 동작원리
• hash값을 만들어 해당 요소에 data-hash값을 부여하고, hash값이 있는 요소에만 css를 적용하게하는
코드

<style scoped>
h1 {
  color: royalblue;
}
</style>

• g) 상대경로 → 절대경로를 사용하기 위한 alias 기능
• resolve.extensions: [’.vue’, ‘.js’]
• 배열안에 해당하는 파일들은 확장자를 따로 기입하지 않아도 됨
• resolve.alias: { '@src': path.resolve(__dirname,'src')}
• src에 해당하는 경로를 앞으로 ‘@src’로 사용

• h) favicon 적용하기
• 정적파일을 배포폴더로 copy하고 옮겨주는 copy-webpack-plugin 설치 및 적용
• from: 복사할 폴더, to:배포폴더 (생략가능)
• webpack-dev-server 가 아닌 wepback으로 실핼될 때만 적용 ( npm run build)
코드

• npm i -D copy-webpack-plugin

...
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
	...
  plugins: [
	  ...,
    new CopyPlugin({
      patterns: [{ from: "static", }],
    }),
  ],
	...
};