[vue] vue는 무엇인가? / mvvm 패턴 / vue 3.0 설치부터 서버 띄우기까지!(+포트 변경)

먼저 vue를 설치하기 전에, 왜 vue를 쓰는지? vue가 왜 편한지 살펴봅시당🫠

 

vue.js는 무엇인가?

 

 

 

💚 Vue.js의 장점

• 쉬운 학습 곡선
  Vue.js는 간단한 문법과 직관적인 디자인으로, 새로운 개발자가 빠르게 배우고 사용할 수 있습니다. React나 Angular보다 학습 곡선이 낮은 편입니다.
• 유연성과 경량성
  Vue.js는 작고 가벼운 라이브러리로서, 다른 프로젝트에도 쉽게 통합할 수 있고 필요한 부분만 사용할 수 있습니다.
• 단일 파일 컴포넌트
  Vue.js는 .vue 확장자를 사용하는 단일 파일 컴포넌트를 지원합니다. 이는 HTML, CSS, JavaScript를 하나의 파일로 구성하여 관리할 수 있게 해주며, 모듈화와 재사용성을 높여줍니다.
• 반응성
  Vue.js는 데이터 바인딩과 가상 DOM을 통해 효율적인 UI 업데이트를 제공하여 애플리케이션의 반응성을 향상시킵니다.

 

📌 데이터바인딩이란?

Vue.js는 데이터와 DOM(문서 객체 모델)을 연결하는 데이터 바인딩을 제공합니다.

이는 HTML 템플릿과 JavaScript 데이터를 연결하여, 데이터가 변경될 때 UI가 자동으로 업데이트되도록 합니다.

예를 들어, Vue 인스턴스에 있는 데이터가 변경되면, 해당 데이터를 사용하는 DOM 요소들도 자동으로 갱신됩니다. 이는 Vue.js가 내부적으로 데이터 변화를 감지하고, 이에 따라 연결된 DOM 요소를 업데이트하는 방식으로 작동합니다.

 

https://cheonmro.github.io/2018/12/21/what-is-vue/

Vue & MVVM Pattern

---

 

 

 

window 기준 입니다

IDE는 vs code 사용!

 

▼ 공식문서 참조

https://vuejs.org/guide/quick-start.html#creating-a-vue-application

Quick Start | Vue.js

 

1. nodejs 최신버전 설치

https://nodejs.org/ko/

Node.js

이전에 노드 설치해놓은 것이 있어서 아마 현재 최신 버전이랑은 많이 차이 날 것이다...

📌 cli 3.x 이상은 node.js 버전 8.9 이상 필요하다고 하니 나는 따로 버전 업은 안할 것임

 

폴더 하나 생성해서 우클릭 > vs code로 열기

 

2. vue-cli 라이브러리 설치

🧐VUE CLI 란?
Vue CLI는 Vue.js 앱을 개발하기 위한 공식적인 CLI(Command Line Interface)입니다. 
Vue.js 앱을 만들 때 필요한 설정, 빌드, 배포 등의 작업을 쉽게 할 수 있도록 도와주는 도구입니다.

Vue CLI를 사용하면 프로젝트 구성을 쉽게 설정할 수 있습니다. 
Vue CLI는 기본 프로젝트 구성을 제공하며, 사용자는 이 구성을 기반으로 프로젝트를 시작할 수 있습니다. Vue CLI를 사용하면 개발 서버를 실행하고 코드를 번들링하는 등의 작업도 쉽게 처리할 수 있습니다.

Vue CLI는 다양한 템플릿을 제공합니다. 
이를 통해 사용자는 다양한 프로젝트 유형에 맞는 초기 구성을 선택할 수 있습니다. 예를 들어, Vue CLI는 Vue.js와 함께 Nuxt.js, TypeScript, PWA, Electron 등 다양한 템플릿을 제공합니다.

Vue CLI는 또한 플러그인 시스템을 지원합니다. 
이를 통해 사용자는 추가 기능을 쉽게 추가할 수 있습니다. Vue CLI 플러그인은 개발 서버에서 사용할 수 있는 HTTP 프록시 설정, ESLint, Babel, Prettier 등의 추가 기능을 제공합니다.

Vue CLI는 개발자들이 Vue.js 앱을 더 쉽고 빠르게 개발할 수 있도록 도와주는 매우 유용한 도구입니다.

터미널에서 아래 명령어 실행

#vue-cli 설치
$ npm install -g @vue/cli

powershell 에서 작업하면 된다. 걍

뭐라뭐라 나오고 설치 완

제대로 설치 되었는지 확인하고 싶으면 vue-cli 버전 확인

#vue-cli 버전 확인
$ vue --version

2022-12-09 기준: @vue/cli 5.0.8

 

vue-cli 라이브러리 설치가 끝났으면 vue 프로젝트를 생성한다.

3. vue 프로젝트 생성

#vue 프로젝트 생성
$ vue create [프로젝트명]

중간에 vue 버전 뭐 선택할래? 하면 3 선택해주면 된다(3이랑 2 중에 고를 수 있음)

그렇게 넘어가면 설치 완료!

 

---

package.json을 보면 vue cli로 생성한 프로젝트는 serve, build, lint. 총 3개의 npm script를 제공해주는 걸 확인할 수 있다.

 

각 스크립트별로 어떤 기능을 하는지 알아보자!

serve 스크립트는 webpackDevServer를 실행시키고 웹팩의 번들링 결과물을 전달한다.
코드 변경이 감지되면 HMR(Hot Module Replacement) 이 동작하며 웹팩은 변경이 일어난 파일에 대해서 번들링 작업을 재수행한다. Vue CLI 가 등록한 eslint-loader 는 변경이 감지된 파일을 분석하고 규칙을 위반한 패턴을 발견하면 사용자에게 알린다.

build 스크립트는 웹팩으로 최종 결과물을 변환(빌드)한다.

lint 스크립트는 프로젝트 전체 파일을 대상으로 ESLint를 동작시킨다. 

4. vue 서버 띄워보기

# 프로젝트 폴더로 경로 이동
$ cd [프로젝트명]
# vue 프로젝트 실행
$ npm run serve

기본포트는 8080으로, localhost:8080으로 들어가보면 이렇게 정상적으로 실행되는 것을 볼 수 있다

 

🤔흠, 만약 포트를 변경하고 싶다면?

package.json에서 변경하면 된다.

 "scripts": {
    "serve": "vue-cli-service serve --port 9000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

--port 9000 => 9000번 포트로 변경해주었습니다.

서버를 종료하고 다시 실행시켜주면,

9000번 포트로 잘 띄워진 것을 볼 수 있음!