프로젝트 구조

Vue Project 구조

vue application 생성 시 폴더 구조는 다음과 같다.

Vue Application

/node_modules/ (라이브러리 설치 폴더)

/public/ (최초 로드되는 파일이 있는 폴더)

/src/ (빌드를 위한 파일이 있는 폴더)

/.gitignore (git에서 무시할 파일 목록이 있는 파일)

/babel.config.js (Babel 설정 파일)

/jsconfig.json (Javascript 설정 파일)

/package.json (프로젝트 정보 및 의존성 정보를 가진 파일)

/package-lock.json (package.json 업데이트 오류를 방지용 파일)

/README.md (git 용 프로젝트 설명서)

/vue.config.js (Vue 설정 파일)

package.json

프로젝트의 정보와 사용하는 의존성 등을 설정하는 파일이다. Maven의 pom.xml, Gradle의 build.gradle과 유사한 역할을 수행한다.

주석은 이해를 돕기 위해 추가한 것으로 실제 설정파일에는 존재하지 않는다.

{
  "name": "demo",//프로젝트 이름
  "version": "0.1.0",//프로젝트 버전
  "private": true,//npm에 올릴 수 없도록 비공개 모듈 설정
  "scripts": {//npm run으로 실행할 수 잇는 명령 목록
    "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": {//실행 가능한 환경 설정
      "browser":true,//browser 기반 실행 가능 설정
      "node": true//node 기반 실행 가능 설정
    },
    "extends": [//외부에 공개된 기반 설정 불러오기
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {//확장 구문분석기 설정
      "parser": "@babel/eslint-parser"
    },
    "rules": {}//구문 해석 규칙 설
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

• npm install 명령을 사용하면 존재하는 모든 dependencies를 다운받아 node_modules에 추가한다.

• npm install <모듈명> 명령을 사용하면 설치된 정보가 dependencies에 자동으로 추가된다.

• npm run 명령을 사용하여 scripts에 존재하는 key를 실행할 수 있다. 실행하면 value의 명령으로 대체되어 실행된다.

웹 개발을 위해 구문 해석 규칙을 하나 더 추가하였다.

"eslintConfig": {
    ...
    "env": {
      "browser":true,//추가된 항목
      "node": true
    },
    ...
  },

eslint에 대한 자세한 설정은 다음 공식 문서를 참조한다.

Configure ESLint - ESLint - Pluggable JavaScript Lintergeteslint

package-lock.json

package-lock.json은 설치된 모듈에 대한 의존성 트리 정보를 가지고 있다. npm 명령을 통해 모듈을 설치하고 package.json에 의존성을 추가할 경우 다음과 같은 문제가 발생할 수 있다.

• 설치 과정에서 오류가 발생하는 경우

• 설치한 버전이 deprecated되어 상위 버전이 설치되는 경우

어느 경우든 의존성 정보가 최초 개발 당시와 일치하지 않기 때문에 실행 시 오류가 발생할 가능성이 있다. 특히 git으로 프로젝트를 공유할 경우 npm install 명령을 이용하여 의존성을 다시 설치하게 되며 이 때 문제가 발생할 수 있다.

package-lock.json에는 설치 당시의 의존성 정보와 상태가 추가되어 이 파일을 같이 공유하면 문제를 해결할 수 있다.

node_modules

npm install 명령으로 설치한 모듈들이 위치하는 폴더이다.

git 등으로 프로젝트를 올릴 경우 제외해야 하며, 기본 생성된 .gitignore 파일에 제외하도록 설정되어 있다.

public

프로젝트의 빌드 범위에 포함되지 않는 정적(static) 파일을 저장하기 위한 폴더이다.

프로젝트 생성 시 기본적으로 두 개의 파일이 위치한다.

• index.html

• favicon.ico

이 내용들은 npm run build 명령으로 빌드를 하면 생성되는 dist 폴더로 자동 복사된다.

src

Vue Application 개발을 위한 .vue 파일과 .js 파일이 위치한다.

이 부분은 개발 관련 문서에서 자세히 다룬다.

.gitignore

git에 올리지 말아야 하는 항목들에 대해서 등록하는 파일이다.

의존성 파일이 위치하는 node_modules와 빌드 시 생성되는 dist 폴더 등이 제외되도록 기본 설정되어 있다.

babel.config.js

babel 은 Javascript compiler이다. babel은 새로운 Javascript 문법을 기존 브라우저에서도 사용할 수 있도록 변환해주기 때문에 급변하는 프론트엔드 환경의 필수품이라고 볼 수 있다.

Configure Babel · Babelbabeljs.io

babel 공식 문서

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

설정 가능한 내용에 대한 문서는 다음과 같다.

Options · Babelbabeljs.io

문서에 작성되어 있는 presets에는 사용할 사전 설정 요소를 작성할 수 있으며 @vue/cli 관련 설정이 작성되어 있다. 필요 시 추가하거나 수정할 수 있으며, 지금은 별도의 변경은 하지 않는다.

jsconfig.json

jsconfig.json 파일은 Javascript project의 root 위치를 나타내기 위한 파일이다.

https://code.visualstudio.com/docs/languages/jsconfigcode.visualstudio.com

vscode documentation의 jsconfig 설명

compilerOptions 속성에 옵션을 지정하여 원하는 설정을 할 수 있다.

• nolib - 기본 라이브러리를 포함하지 않도록 설정

• target - 사용할 기본 라이브러리를 지정

  • es3, es5, es6, es2015, es2016, es2017, es2019, es2020, esnext 중 하나를 설정

• module - 모듈 코드를 생성할 때 모듈 시스템을 지정

  • amd, commonJS, es2015, es6, exnext, none, system, umd 중 하나를 설정

• moduleResolution

  • import 모듈을 확인하는 방법을 지정

  • node, classic 중 하나를 설정

• checkJs - Javascript 유형 검사를 활성화

• experimentalDecorators - ES 데코레이터에 대한 지원 활성화

• allowSyntheticDefaultImports - export가 없는 모듈에서 import가 가능하도록 설정

• baseUrl - 탐색의 기본 위치 지정

• paths - baseUrl에 지정된 위치를 기준으로 계산될 경로 매핑을 지정

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    ...
  }
}

paths에 @/ 로 시작하는 모든 경로는 src에 연결 설정되어 있다. 따라서 다음과 같은 경로 설정이 가능하다.

• @/assets/image/hello.png → src/assets/image/hello.png로 변환

readme.md

git 등에서 사용하는 프로젝트 메인 설명 파일이다. Markdown 형식으로 작성한다.

vue.config.js

@vue/cli 프로젝트의 전역 설정을 보관하는 파일이다. 설정 가능한 내용들은 공식 문서에 자세히 설명되어 있다.

Configuration Reference | Vue CLIcli.vuejs.org

vue cli setting reference

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

vue.config.js 설정 파일의 설정 방식은 두 가지가 있다.

//방식1
//defineConfig 미사용 시 hint를 제공해야한다
/** @type {import('@vue/cli-service').ProjectOptions} */
module.exports = { 
    /* options */ 
}

//방식2
//defineConfig 사용 시 intellisence를 지원한다
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    /* options */
})

신규 프로젝트 생성 시 vue.config.js는 code 형태로 작성되는 방식2로 작성되어 있다.

주로 사용하는 옵션은 다음과 같다.

• baseUrl - 사용하지 않는 옵션(Vue-cli 3.3 이후 publicPath로 대체)

• publicPath - 배포 시 생성될 index.html의 모든 링크에 대한 기본 경로 설정

• outputDir - 빌드 시 생성될 파일의 경로 설정

• devServer - 개발 서버에 대한 설정 객체

  • port - 개발 서버의 포트 설정

  • allowHosts - 외부에서 접속을 허용할 경우 설정 (전체 설정은 all)

  • https - 개발 서버를 https로 실행할 경우 설정 (인증서 필요)