1. 프로젝트 구성
vue-cli를 설치한 뒤 vue create 명령어로 프로젝트를 생성하면 아래와 같은 폴더 구조가 생성됩니다.
이 중 첫번째로 알아볼 파일은 pakage.json입니다.
1-1. package.json
package.json이란 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일입니다.
기본내용은 아래와 같습니다.
{
"name": "vue-re-study",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}위 코드를 차례로 뜯어보겠습니다.(지엽적인 내용들은 제외)
- name : 프로젝트명
- version : 프로젝트 버전
- scripts : CLI명령어를 scripts에 등록하여 사용가능.
(즉, npm run serve == npm run vue-cli-service serve 와 같다.)
- dependencies : 운영환경으로 배포될때 함께 가져가야할 모듈
- devDependencies : 개발할때 사용할 모듈들을 정의(운영서버에 배포되지 않음)
dependencies나 devDependencies에 있는 모듈들 또한 사람들이 프로젝트로 만들어 배포한 모듈입니다. 그렇기에 모듈들도 dependencies를 사용하여 다른 모듈들을 끌어왔을 것입니다.
그렇다면 모듈의 dependencies는 어디서 확인할 수 있을까요?
정답은 package-lock.json파일에서 확인할 수 있습니다.(node_modules폴더에 모듈파일이 많은 이유입니다.)
package-lock.json 파일입니다. 내용이 굉장히 길죠?
- browserslist : 해당 프로젝트에서 지원할 브라우저 옵션
> 1% : 전세계 사용자가 최소 1%이상 사용하는 브라우저만 지원
last 2 versions : 최근 2개의 버전만 지원
not ie 11 : ie 11을 지원하지 않는다.
1-2. main.js
우리가 해당 프로젝트를 실행(npm run serve)하게 될 경우, 가장먼저 실행되는 파일입니다.
1-3. index.html
vue는 SPA로써 index.html파일 하나로 vue application이 구동됩니다.
1-4. 재사용가능한 컴포넌트는 components폴더에, 화면 전체를 구성하는 컴포넌트는 views폴더에 저장합니다.
1-5. 화면 전체를 구성하는 컴포넌트는 파일명 끝에 View를 붙여줍니다.
1-6. 공통 css는 assets폴더에 작성합니다.
2. 프로젝트 소스
2-1. path 내 @의의미는 src폴더입니다.
2-2. .vue 컴포넌트들은 배포될때 .js파일로 배포됩니다.(.js파일로 컴파일)
2-3. vue는 단방향 데이터 바인딩, 양방향 데이터 바인딩이 가능하다.
첫번째 이미지가 단방향 데이터 바인딩, 두번째가 이미지가 양방향 데이터 바인딩을 나타내고 있습니다.
단방향 데이터 바인딩
양방향 데이터 바인딩(v-model속성을 가진 input값과 userId가 동기화되어있음)
양방향 데이터 바인딩은 v-model을 사용.
2-4. 태그에 이벤트를 추가할때 아래 이미지와 같이 두가지 방식으로 함수 바인딩을 할 수 있습니다.
매개변수가 존재한다면 3번째 라인처럼 사용해야하고, 매개변수가 없다면 4번째 라인처럼 소괄호 및 세미콜론을 생략할 수 있습니다.
2-5. checkbox값을 핸들링할때 배열로 받아서 사용한다.
2-6. list내역을 출력해야할 경우 :key의 값이 필수이다. 만약 API로 받아온 key(혹은 id)값이 없다면 아래 코드 v-for="(city, i) in cities" 처럼, 자동 증가값(i)를 :key로 사용할 수 있습니다.
2-7. class는 오브젝트형태로 값이 입력될 수 있습니다.
오브젝트 형태뿐만 아니라 배열형태로도 가능합니다. 하지만, 실무에서 class값의 변경이 빈번하기 때문에 배열형태로 사용하진 않습니다.
2-8. class 오브젝트 속성값의 key값은 아래와 같이 사용할 수 있습니다. 즉, -(대시)가 들어간 key값은 따옴표로 묶어줘야하고 그 외 일반문자는 따옴표 유무 상관없이 사용이 가능합니다.
2-9. style도 class와 마찬가지로 오브젝트 형태로 정의합니다.
2-10. style을 오브젝트 형태로 정의할때 -(대시)가 포함된 key값은 하위 문자를 대문자로 변경하는 것으로 대체합니다.
font-size를 예로들면, 일반 style정의에서는 font-size를 key로 정의하지만 vue에서는 fontSize로 정의합니다. (사실 일반 JS에서도 위 형태와 똑같이 사용합니다)
2-11. vue에서는 el문법과 디렉티브 문법에서 js문법을 상용할 수 있습니다.(물론, 기존 html element event에서도 js사용이 가능합니다.)
하지만 이러한 방식은 추천하지 않습니다. 가독성이 좋지않거든요
2-12. event태그에 관한 2가지 예시 아래 코드를 참고
주요 key에 대해서 event값을 바로 받을 수 있도록 제공합니다.
3. 기타 내용
3-1. vue파일은 <template>, <script>, <style> 태그로 나뉘어져 있어 관리가 쉽고 협업하기 쉽습니다. 단적인 예로, 퍼블리셔가 HTML파일 디자인을 작업했을 경우 React에서는 다시 js파일로 마이그레이션 해야하는 번거러움이 있습니다. 그러나 Vue.js에서는 HTML, Javascript, CSS가 각각 나뉘어져 있어서 적용하기 쉽습니다.
3-1. vue설정파일(ex. package.json, vue.config.js 등)을 수정할 경우 실시간 반영이 되지않기에 서버를 내렸다 올려야한다.
Reference
