> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/vuejs/vue-cli-3/project-structure.md).

# 프로젝트 구조

## Vue Project 구조

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

<details>

<summary>Vue Application</summary>

/node\_modules/ <mark style="color:red;">(라이브러리 설치 폴더)</mark>

/public/ <mark style="color:red;">(최초 로드되는 파일이 있는 폴더</mark>)

/src/ <mark style="color:red;">(빌드를 위한 파일이 있는 폴더)</mark>

/.gitignore <mark style="color:red;">(git에서 무시할 파일 목록이 있는 파일)</mark>

/babel.config.js <mark style="color:red;">(Babel 설정 파일)</mark>

/jsconfig.json <mark style="color:red;">(Javascript 설정 파일)</mark>

/package.json <mark style="color:red;">(프로젝트 정보 및 의존성 정보를 가진 파일)</mark>

/package-lock.json <mark style="color:red;">(package.json 업데이트 오류를 방지용 파일)</mark>

/README.md <mark style="color:red;">(git 용 프로젝트 설명서)</mark>

/vue.config.js <mark style="color:red;">(Vue 설정 파일)</mark>

</details>

### package.json

프로젝트의 정보와 사용하는 의존성 등을 설정하는 파일이다. [Maven](https://maven.apache.org/)의 pom.xml, [Gradle](https://gradle.org/)의 build.gradle과 유사한 역할을 수행한다.

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

```javascript
{
  "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의 명령으로 대체되어 실행된다.

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

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

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

{% embed url="<https://eslint.org/docs/latest/user-guide/configuring/>" %}

### package-lock.json

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

* 설치 과정에서 오류가 발생하는 경우
* 설치한 버전이 <mark style="color:red;">deprecated</mark>되어 상위 버전이 설치되는 경우

어느 경우든 의존성 정보가 최초 개발 당시와 일치하지 않기 때문에 실행 시 오류가 발생할 가능성이 있다. 특히 <mark style="color:blue;">git</mark>으로 프로젝트를 공유할 경우 `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 문법을 기존 브라우저에서도 사용할 수 있도록 변환해주기 때문에 급변하는 프론트엔드 환경의 필수품이라고 볼 수 있다.

{% embed url="<https://babeljs.io/docs/en/configuration>" %}
babel 공식 문서
{% endembed %}

{% code title="babel.config.js" %}

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

{% endcode %}

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

{% embed url="<https://babeljs.io/docs/en/options>" %}

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

### jsconfig.json

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

{% embed url="<https://code.visualstudio.com/docs/languages/jsconfig>" %}
vscode documentation의 jsconfig 설명
{% endembed %}

`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에 지정된 위치를 기준으로 계산될 경로 매핑을 지정

{% hint style="info" %}

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

paths에 <mark style="color:red;">`@/`</mark> 로 시작하는 모든 경로는 `src`에 연결 설정되어 있다. 따라서 다음과 같은 경로 설정이 가능하다.

* @/assets/image/hello.png → <mark style="color:red;">src/assets/image/hello.png로 변환</mark>
  {% endhint %}

### readme.md

git 등에서 사용하는 프로젝트 메인 설명 파일이다. [Markdown ](https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4)형식으로 작성한다.

### vue.config.js

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

{% embed url="<https://cli.vuejs.org/config/>" %}
vue cli setting reference
{% endembed %}

{% code title="vue.config.js" %}

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

{% endcode %}

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

```javascript
//방식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 형태로 작성되는 <mark style="color:red;">방식2</mark>로 작성되어 있다.

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

* baseUrl - 사용하지 않는 옵션(Vue-cli 3.3 이후 publicPath로 대체)
* publicPath - 배포 시 생성될 index.html의 모든 링크에 대한 기본 경로 설정
* outputDir - 빌드 시 생성될 파일의 경로 설정
* devServer - 개발 서버에 대한 설정 객체
  * port - 개발 서버의 포트 설정
  * allowHosts - 외부에서 접속을 허용할 경우 설정 (전체 설정은 all)
  * https - 개발 서버를 https로 실행할 경우 설정 (인증서 필요)