Vue.js
- MVC 패턴에서 View(사용자에게 보이는 화면)를 중심으로 만든 라이브러리 및 프레임워크
- MVC 패턴
- 디자인 패턴 중 하나
- Model은 데이터를 관리하고, View는 사용자에게 보이는 화면을 관리하며, Controller는 이 둘을 연결해준다.
Vite
- webpack을 대체할 수 있는 번들러
- Vue 3에서 권장하는 번들러이며, Vue 창시자 Evan You가 만든 오픈소스
npm
을 사용하기 위해 Node.js를 설치한다.
(Node.js를 설치하면 npm이 자동으로 설치된다.)
npm (node package manger)
- JavaScript 라이브러리를 설치하고 관리하는 패키지 매니저
- 패키지: 개발자들이 만든 일련의 유용한 도구 및 프레임워크
- Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command Line Interface)를 제공
- cmd에서 파일을 설치할 경로로 이동한 뒤, npm 명령어를 통해 모듈을 다운로드 할 수 있다.
- 각각의 모듈은 npm 공식 홈페이지에서 찾을 수 있으며, 모듈마다 다운로드부터 사용방법까지 자세히 나와있다.
- 이는 어떠한 기능을 위해 처음부터 스스로 코딩할 필요 없이, 필요에 따라 알맞은 모듈을 다운로드하여 프로젝트에 이용할 수 있다는 의미이다.
- 즉, npm이란 Node.js에서 사용되는 기본 패키지 매니저로 개발자들이 만든 유용한 패키지들을 함께 공유하는 장소 및 도구
- cf) Java - Maven
Node.js 설치 후 cmd에서 npm -v
를 입력하면 설치된 npm의 버전을 확인할 수 있다.
npm을 이용하여 Vite 기반의 Vue 프로젝트를 생성한다.
npm init vue@latest
명령어를 입력하고 프로젝트 이름과 옵션을 선택하면 프로젝트가 생성된다.
- Router -
src/router
폴더가 생성된다.- Pinia -
src/stores
폴더가 생성된다.
- 기존의 Vue 상태 관리 라이브러리인 Vuex를 대체할 수 있는 라이브러리
- ESLint -
.eslintrc.cjs
파일이 생성된다.- Prettier -
.prettierrc.json
파일이 생성된다.
cd <프로젝트 이름>
npm install
npm install
을 진행하면 프로젝트에 node_modules
폴더가 생성되고, 필요한 JavaScript library들이 설치된다.
npm install
전 프로젝트 구조node_modules
폴더가 존재하지 않는다.npm install
후 프로젝트 구조node_modules
폴더와 package-lock.json
파일이 생성되었다.
package.json
프로젝트에 대한 정보
프로젝트의 이름, 버전, private 여부, 배포 및 개발에서 사용할 모듈 정보, 실행 명령어, 지원할 브라우저에 대한 설정 등을 포함
dependencies
: 배포 환경에서 사용되는 모듈
devDependencies
: 개발 환경에서 사용되는 모듈
package-lock.json
package.json
의 모듈들이 동작하기 위해 필요로 하는 모듈들의 정보
npm install
과정에서 npm이 package.json
의 내용을 확인하고 package-lock.json
파일을 생성한다.
package.json
이 수정되면 package-lock.json
도 수정된다.
node_modules
npm install
과정에서 생성된다.
package-lock.json
의 모듈들이 설치된다.
package.json
에 종속된 자바스크립트 라이브러리들public
component(.vue 파일)에서 사용되지 않는 정적 파일들
cf) assets
와는 달리 webpack의 처리를 받지 않는다.
src
작성해야 하는 소스코드들 (대부분의 코딩이 이루어지는 곳)
assets
component(.vue 파일)에서 사용되는 정적 파일들
cf) public
과는 달리 webpack의 처리를 받는다.
views
components
)components
.vue 확장자를 가진 컴포넌트 파일들 - 화면 전체가 아니라 부분으로 구성되어 재사용할 수 있는 컴포넌트 (cf. views
)
<template>
, <script>
, <style>
부분으로 나뉜다.
<template>
: HTML로 화면상에 표시할 요소들을 작성
<script>
: 스크립트 코드 작성. import/export
<style>
: HTML 요소를 꾸며줄 css 구문 작성. scoped 속성을 사용하면 특정 컴포넌트에서만 고유의 스타일 선언 가능
router
Routing: 웹 페이지 간의 이동 방법으로 Single Page Application(SPA)에서 주로 사용된다.
stores
main.js
.eslintrc.cjs
코드에 대한 eslint 설정
Prettier에 대한 값으로 rule 지정
.prettierrc.json
vite.config.js
{
"name": "vue-project",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite", // 개발 서버에서 프로젝트를 실행할 때 실행되는 명령어
"build": "vite build", // 빌드할 때 실행되는 명령어
"preview": "vite preview", // 개발 환경에서의 미리보기
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
// eslint로 문법 체크
},
"dependencies": { // 배포 환경에서 필요한 라이브러리 정보
"pinia": "^2.0.28",
"vue": "^3.2.45",
"vue-router": "^4.1.6"
},
"devDependencies": { // 개발 환경에서 필요한 라이브러리 정보
"@rushstack/eslint-patch": "^1.1.4",
"@vitejs/plugin-vue": "^4.0.0",
"@vue/eslint-config-prettier": "^7.0.0",
"eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0",
"prettier": "^2.7.1",
"vite": "^4.0.0"
}
}
프로젝트 실행: 터미널 창에 npm run dev
입력
프로젝트 빌드: 터미널 창에 npm run build
입력
실행 화면
📌 Reference