1. Vue.js Characteristics πŸ‘©β€πŸ’»

1. MVVM Pattern

Model-View-ViewModel을 μ‚¬μš©ν•œλ‹€.

MVVM

2. Component

Viewλ₯Ό μ—¬λŸ¬ 개둜 μͺΌκ°œ μž¬μ‚¬μš© ν•  수 μžˆλŠ” ꡬ쑰둜 κ°œλ°œν•œλ‹€.
Vueμ—μ„œ ν•˜λ‚˜μ˜ μ»΄ν¬λ„ŒνŠΈλŠ” HTML + CSS + JavaScript둜 μ΄λ£¨μ–΄μ Έμžˆλ‹€.

2. Vue CLI πŸ‘©β€πŸ’»

1. npm install

  • local installation
npm install [library]
  • global installation
npm install -g [library]


  • package.json > dependencies에 νŒ¨ν‚€μ§€ μ •μ‘°λ₯Ό λ“±λ‘ν•˜λ©° μ„€μΉ˜
npm install --save [library]
  • package.json > devDependencies에 νŒ¨ν‚€μ§€ μ •μ‘°λ₯Ό λ“±λ‘ν•˜λ©° μ„€μΉ˜
npm install --save-dev [library]


install은 i둜, --saveλŠ” -S둜, --save-devλŠ” -D둜 μΆ•μ•½ κ°€λŠ₯ν•˜λ‹€

npm i -S [library]
npm i -D [library]


가급적 vue, vue/cli λŠ” global 둜 μ„€μΉ˜ν•˜μž

npm install -g vue@3.2.45 @vue/cli

2. Create App

JavaScript의 npm init, TypeScript의 tsc --init, Angular의 ng new [App Name]처럼 VueλŠ” vue create [App Name]을 μ΄μš©ν•΄ ν”„λ‘œμ νŠΈλ₯Ό 생성할 수 μžˆλ‹€.

vue create [App Name]

3. Run App

cd [App Name]
run npm serve -- --port [Port Number]

run npm serve --port [Port Number] κ°™μ§€λ§Œ run npm serve -- --port [Port Number]λ‹€.

4. Vue Project Structures

  • App.vue: Root Component
  • main.js: κ°€μž₯ λ¨Όμ € μ‹€ν–‰λ˜λŠ” JavaScript 파일둜 Vue instance λ₯Ό μƒμ„±ν•˜λŠ” μ—­ν• 
  • node_modules: npm 으둜 μ„€μΉ˜λœ νŒ¨ν‚€μ§€ νŒŒμΌλ“€μ΄ λͺ¨μ—¬ μžˆλŠ” 디렉토리
  • package.json: ν”„λ‘œμ νŠΈμ— ν•„μš”ν•œ package λ₯Ό μ •μ˜ν•˜κ³  관리
  • package-lock.json: μ„€μΉ˜λœ package 의 dependency 정보λ₯Ό 관리
  • public: webpack 을 톡해 κ΄€λ¦¬λ˜μ§€ μ•ŠλŠ” static resources κ°€ λͺ¨μ—¬ μžˆλŠ” 디렉토리
  • src/assets: images, css, fonts 등을 κ΄€λ¦¬ν•˜λŠ” 디렉토리
  • src/components: Vue Components 파일이 λͺ¨μ—¬ μžˆλŠ” 디렉토리

5. package.json

  • name: ν”„λ‘œμ νŠΈ 이름
  • version: ν”„λ‘œμ νŠΈ 버전 정보
  • private: true둜 μ„€μ •ν•˜λ©΄ ν”„λ‘œμ νŠΈλ₯Ό npm으둜 올릴 수 μ—†μ–΄ npm에 μ˜¬λ €λ„ 배포가 μ•ˆ λœλ‹€.
  • scripts: ν”„λ‘œμ νŠΈ μ‹€ν–‰κ³Ό κ΄€λ ¨λœ λͺ…λ Ήμ–΄λ₯Ό 등둝
  • dependencies: 배포용 νŒ¨ν‚€μ§€ 정보
  • devDependencies: 개발용 νŒ¨ν‚€μ§€ 정보
  • eslintConfig: ESLint μ„€μ •
  • browserlist: default 둜 μ „ 세계 μƒμœ„ 1% 이상 μ‚¬μš© & μ΅œμ‹  버전 2κ°œκΉŒμ§€ μ§€μ›ν•˜λ„λ‘ μ„€μ •

6. Create App Manually

vue create [App Name]을 ν•œ ν›„ Manually select featuresλ₯Ό μ„ νƒν•œλ‹€.

Manually select features


Manually Options

  • Babel: ES5 μ΄ν•˜ 버전 ν˜Έν™˜μœΌλ‘œ Transpile
  • TypeScript
  • Progressive Web App (PWA) Support: μ›Ή μ•± 개발용
  • Router
  • Vuex: Vue의 μƒνƒœ 관리λ₯Ό μœ„ν•œ νŒ¨ν‚€μ§€
  • CSS Pre-processors: Sass, Less, Stylus λ“± CSS μž‘μ„±μ„ μœ„ν•œ CSS μ „μ²˜λ¦¬κΈ°
  • Linter / Formatter: JavaScript Coding Convention (Standard Guide)
  • Unit Testing: Mocha λ“± λ‹¨μœ„ ν…ŒμŠ€νŠΈλ₯Ό μœ„ν•œ 라이브러리
  • E2E Testing: End-to-End 톡합 ν…ŒμŠ€νŠΈλ₯Ό μœ„ν•œ ν”ŒλŸ¬κ·ΈμΈ

μ˜ˆμ œμ—μ„œλŠ” Babel, Router, Vuex, Linter / Formatterλ₯Ό μ„ νƒν–ˆλ‹€.

  • Vue 버전은 3
  • Router history modeλŠ” Y
  • EslintλŠ” ESLint + Standard config, Lint on save, In package.json

을 μ°¨λ‘€λ‘œ μ„ νƒν•œλ‹€.

그리고 λ§ˆμ§€λ§‰μœΌλ‘œ ν•΄λ‹Ή 섀정을 preset으둜 μ €μž₯ν•  것인지 λ¬»λŠ”λ‹€. μ €μž₯을 μ›ν•˜λ©΄ 이름을 지정 ν›„ μ €μž₯ν•˜λ©΄ λ‹€μŒλΆ€ν„° μ•„λž˜μ™€ 같이 ν”„λ‘œμ νŠΈλ₯Ό 생성할 수 μžˆλ‹€.

preset 이름을 vue basic으둜 μ €μž₯ν•œ 경우 λ‹€μŒκ³Ό 같이 vue create [App Name]μ‹œ 확인 κ°€λŠ₯ν•˜λ‹€.

Vue preset

7. Vue Project Manager

Vue Project ManagerλŠ” vue ui λͺ…λ Ήμ–΄λ₯Ό 톡해 μ‹€ν–‰ν•œλ‹€.

Vue Project Manager


μ›Ή νŽ˜μ΄μ§€λ₯Ό 톡해 ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν•˜κ³  관리할 수 μžˆλ‹€.

Create Vue App Using Project Manager

Vue Project Manager둜 μƒμ„±ν•˜μ§€ μ•Šκ³  Vue CLI둜만 μƒμ„±ν•œ ν”„λ‘œμ νŠΈλŠ” ν”„λ‘œμ νŠΈ λ¦¬μŠ€νŠΈμ— 보이지 μ•ŠλŠ”λ‹€. κ°€μ Έμ˜€κΈ°λ₯Ό 톡해 λ§€λ‹ˆμ €μ— 등둝 ν›„ 확인 κ°€λŠ₯ν•˜λ‹€.



Reference

  1. κ³ μŠΉμ›. Vue.js ν”„λ‘œμ νŠΈ νˆ¬μž… 일주일 μ „. λΉ„μ œμ΄νΌλΈ”λ¦­ Chapter 1, 2021.
  2. κ³ μŠΉμ›. Vue.js ν”„λ‘œμ νŠΈ νˆ¬μž… 일주일 μ „. λΉ„μ œμ΄νΌλΈ”λ¦­ Chapter 2, 2021.
  3. κ³ μŠΉμ›. Vue.js ν”„λ‘œμ νŠΈ νˆ¬μž… 일주일 μ „. λΉ„μ œμ΄νΌλΈ”λ¦­ Chapter 3, 2021.