📚 Reference

기본으로 생성 되는 프로젝트 구조

Untitled

node_modules
- npm 라이브러리
- npm으로 설치되는 서드파티(third party) 라이브러리들이 모여있는 폴더이다.
public
- public 디렉토리는 Webpack의 처리를 받지 않고 퍼블리싱되는 정적 자산(static assets)을 포함한다.
  - 단, index.html의 경우 일부 Webpack의 처리를 받는다.
- favicon.ico
  - 앱의 대표 favicon 파일이다.
  - 기본값으로 Vue 로고가 들어가 있다.
- index.html
  - Vue 프로젝트를 웹 브라우저에서 열었을 때, 처음으로 서버에서 받아오는 HTML이다.
  - 앱의 템플릿 파일이다.
  - 우리의 Vue앱은 이 HTML 페이지로부터 실행된다.
  - lodash 템플릿 구문을 사용해 보간법으로 값을 지정할 수 있다.
  - index.html 파일은 애플리케이션 레이아웃을 관리하는 템플릿이 아니다.
  - 이 파일은 Vue 앱 외부의 정적 HTML을 제어하는 템플릿이다.
  - 고급 사용 사례를 제외하면 이 파일을 직접 편집할 일은 거의 없다.
  - 아래 id가 app인 div 안에서 Vue 애플리케이션이 작동한다.
```
<div id="app"></div>
```
src
- 우리의 Vue 애플리케이션의 핵심 내용을 포함하게 될 디렉토리이다.
- assets
  - 자원
  - CSS나 이미지 등의 정적 자산(static assets)을 저장하는 디렉토리이다.
  - 이 파일들은 src 디렉토리에 포함되어 있기 때문에 Webpack의 처리를 받는다.
  - 즉, Sass/SCSS 나 Stylus와 같은 전처리 도구를 사용할 수 있다는 의미이다.
  - logo.png
- components
  - 컴포넌트
  - 우리가 앞으로 만들 Vue 컴포넌트를 저장할 디렉토리이다.
  - 지금은 한 개의 예시 컴포넌트만을 포함하고 있다.
  - HelloWorld.vue
- App.vue
  - 웹 사이트 주소에 따라 해당 컴포넌트들을 랜더링 하는 부분이 있다.
  - Vue 애플리케이션의 최상위 컴포넌트이다.
- main.js
  - Vue 애플리케이션에서 가장 먼저 실행된다.
  - 이 파일은 애플리케이션의 진입점이다.
  - 현재 이 파일은 Vue 앱을 초기화하고 index.html 파일에서 어떤 HTML 엘리멘트를 앱에 붙여야 하는지 (예제 프로젝트에서는 #app 엘리멘트)나타낸다.
  - 이 파일에 전역 컴포넌트나 부가적인 Vue 라이브러리를 등록하는 경우가 많다.
  - 사용할 Vue 인스턴스를 생성하고 그 안에 router, store, 랜더링 할 Vue를 설정한다.
  - 새로운 라이브러리를 설정할 때, 해당 파일에 연결해서 사용한다.
.gitignore
- git 버전 관리에서 제외할 파일 목록을 지정하는 파일이다.
- git으로 프로젝트를 관리할 때, 그 프로젝트 안의 특정파일들은 git으로 관리할 필요가 없는 경우가 있다.
babel.config.js
- Babel의 config 파일이다.
- Babel은 개발용으로 사용하는 최신 JavaScript 기능을 상용 브라우저 호환이 가능하도록 구버전으로 번역하는 역할을 한다.
- 대표적으로, ECMA Script 2015(비공식적으로 ES6라고도 불림)로 작성된 코드를 ES5로 변환해 IE등의 브라우저에서 동작할 수 있도록 해주는 것이 Babel이 하는 일이다.
- 이 파일에 부가적인 babel 플러그인을 등록할 수 있다.
package-lock.json
- node_modules구조나 package.json이 수정되고 생성될 때 당시 의존성에 대한 정확하고 구체적인 정보를 자동으로 생성된다.
package.json
- 파일에는 프로젝트와 관련된 메타데이터가 담긴다.
- 즉, 패키지의 이름, 버전, 데이터 등이 담긴 파일이 바로 package.json이다.
- dependencies: 개발과 productions에도 필요한 패키지 리스트이다.
- devDependencies: 개발할 때 필요한 패키지 리스트를 저장해놓는 공간이다.
- 패키지 설치를 하면 node_modules 폴더 안에 설치 된다.
README.md
- 파일은 디렉토리나 압축 파일에 포함된 기타 파일에 대한 정보를 가지고 있으며, 일반적으로 소프트웨어와 함께 배포된다.
.eslintrc.js
- eslint의 config 파일이다.
- linting 규칙을 이 파일에서 관리할 수 있다.
.browserslistrc
- Browserslist의 config 파일이다.
- 우리가 사용하는 도구를 어떤 브라우저에 최적화 할지 이 파일에 정의할 수 있다.

예시

1. 예시 1

.
├─ README.md
├─ index.html
├─ webpack.config.js
├─ package.json
└─ src
   ├─ main.js
   ├─ App.vue
   ├─ components        컴포넌트
   │  ├─ common
   │  └─ ...
   ├─ routes            라우터
   │  ├─ index.js
   │  └─ routes.js
   ├─ views             라우터 페이지
   │  ├─ MainView.vue
   │  └─ ...
   ├─ store             상태 관리
   │  ├─ auth
   │  ├─ index.js
   │  └─ ...
   ├─ api               api 함수
   │  ├─ index.js
   │  ├─ users.js
   │  └─ ...
   ├─ utils             필터 등의 유틸리티 함수
   │  ├─ filters.js
   │  ├─ bus.js
   │  └─ ...
   ├─ mixins            믹스인
   │  ├─ index.js
   │  └─ ...
   ├─ plugins           플러그인
   │  ├─ ChartPlugin.js
   │  └─ ...
   ├─ translations      다국어
   │  ├─ index.js
   │  ├─ en.json
   │  └─ ...
   ├─ images            이미지
   ├─ fonts             폰트
   └─ assets            기타 자원