Node.js와 NPM

SFC(Single File Component) 프로젝트 구성

• 크게 템플릿, 스크립트, 스타일로 구성

<template>
  html 구조
</template>

<script>
  컴포넌트에 작성 할 Vue.js 옵션들
</script>

<style>
  css 작성
</style>

SFC 프로젝트 생성

1. npm 프로젝트 시작 npm init -y package.json파일 생성 됨
2. vue 패키지 설치 npm i vue@next
3. 개발용 서버 npm i serve -D = npm install serve --save-dev
4. package.json 파일의 "scripts": { "dev": "serve" } 변경전을 가지고 다양한 패키지들을 관리해준다.
5. npm run dev Serving!

package-lock.json

• 설치한 환경에 해당하는 버전을 가짐

• 다양한 패키지들을 관리해줌

"devDependencies"와 "dependencies"의 차이점

• devDependencies는 개발할 때만 필요한 패키지의 목록

  • 개발 의존성 패키지

• dependencies는 실제로 브라우저에서 동작하는 패키지의 목록

  • 일반 의존성 패키지

.gitignore

• git버전 관리 시스템에서 무시 할 폴더나 파일을 명시

• 언제든지 다시 설치가 가능한 node_modules/, .로 시작하는 숨김 파일.vscode/, 이와 비슷하게 webstorm에서 사용하는 .idea, mac을 사용 시 .DS_Store/, 배포용 파일인 dist/등을 명시

• git status ignore된 것 확인

• git add .

• git commit -m 'project'

• git branch -M main

• git log

• git push

Pacel 번들러

• 중소 규모 프로젝트에서 유용, 복잡한 프로젝트의 경우 단점이 많음
• 전역 정의 모든 구성 요소에 대해 고유한 이름을 지정하도록 강요
• CSS 지원 없음
• 빌드 단계 없음

개발용 서버

1. index.html파일의 <script>에 type="module"추가

2. npm i -D parcel 파슬 패키지 설치

• "devDependencies": {
    "parcel": "^2.0.0-rc.0"
  }

3. parcel에 개발 서버 진입점을 설정하여 dev명령어 생성

• "scripts": {
      "dev": "parcel ./src/index.html"
   },

4. npm run dev해보면 개발 서버 오픈~🙌

5. 배포하는 dist 폴더에 index.147---.js 생성

배포용 서버
1. 브라우저가 해석하는 배포용 서버 생성

• "scripts": {
      "dev": "parcel build ./src/index.html"
   },

2. 서버 충돌 방지를 위하여 "main": "index.js"를 제거해주고 npm run build실행

3. dist 폴더에 index.1e7---.js 생성, 난독화

sass 설치

• npm i sass -D

webpack

1. npm init -y npm 프로젝트 생성, package.json 파일 생성

2. npm i -D webpack webpack-cli webpack과 터미널을 통한 동작 패키지 설치

  const path = require('path'); // path 패키지(모듈) 가져오기

  module.exports = { // node.js의 내보내기 방식
    // webpack의 옵션

    entry: './src/main.js', // 진입점
    output: { // 결과 출력
      path: path.resolve(__dirname, 'dist'),
    },
  };

매번 Open With Live Server 열지 않고도,
새로 고침 없이 자동으로 편하게 개발하는 방법

• webpack-dev-server --mode development

• "scripts": {
      "dev": "webpack-dev-server --mode development"
    },

Webpack에게 css읽게 해주기

• HMR(Hot Module Replacement)

• npm i -D css-loader vue-style-loader

• webpack.config.js 파일에

  • {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      } 
      

favicon

• npm i -D copy-webpack-plugin 설치

• webpack.config.js 파일 plugins에

  new CopyPlugin({
     patterns: [{ from: 'static' }],
   }) 

> **동적 컴포넌트**

- `keep-alive`
- 한번 렌더링한 컴포넌트를 캐싱해서 또 다시 렌딩되지 않도록 방지
- 동적으로 자주 토글되는 컴포넌트에서만 유용하게 사용

> **템플릿 refs**

- 자식 요소에 JavaScript를 이용해 직접 접근해야 하는 경우
- `ref` 속성을 이용해 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여
- 인스턴스 메서드인 `$nextTick`과 자주 사용
  -  DOM 업데이트 주기 이후 실행될 콜백을 연기