[Vue] 디렉터리 구조

vue cli를 설치한 후 그다음 중요한 것이 디렉터리 구조였다. 

프레임 워크를 쓰기전에는 그냥 index.html / css폴더 / js 폴더 / img 폴더만 있으면 했던 것이 이제는 좀 더 역할 별로 관리하기 위해 폴더들이 많아 짐에 따라 분리되어 있고 그것들이 의미하는 게 뭔지 알아야 한다. 제일 먼저 디렉터리 구조를 공부하지 않은 나를 반성하자..

 

1. 디렉토리 구조

vue-login
├── src
│   ├── main.js
│   ├── App.vue
│   └── models
│        └── user.js
│   └── router
│        └── index.js
│   └── services
│        └── auth-header.js
│        ├── auth.service.js
│        └── user.service.js
│   └── store
│        └── auth.module.js
│        ├── index.js
│        └── map.module.js
│   └── components
│        └── Home.vue
│        ├── Login.vue
│        ├── Profile.vue
│        └── Register.vue
└── index.html

 

 

2. 패키지

프로젝트를 구성하는데 필요한 패키지들을 설치한다.

npm --save install bootstrap-vue
npm --save install bootstrap
npm --save install @fortawesome/fontawesome-svg-core
npm --save install @fortawesome/free-solid-svg-icons
npm --save install @fortawesome/vue-fontawesome
npm --save install axios
npm --save install vuex
npm install --save vee-validate@2.2.15

 

 

3. public : 가장 맨 처음 로드 되는 기본 HTML

기본적인 HTML과 동일하며, 하단 DIV 태그의 ID 값 "app"을 통해서 뷰가 호출되어 보여지게 된다.

 

 

4. src 

- asset

초기에는 이미지만 저장이 되어있으며, 보통 기타 부수적인 내용의 파일 및 폴더를 만들어 넣어놓는다.  대표적으로 "css", "image" 

 

- components

각각의 기능 및 웹 페이지들의 화면을 구성할 컴포넌트들로 구성되어 있으며,

새로운 HTML 파일의 내용을 만들어 넣어서 호출한다는 느낌으로 보면 된다.

각각의 페이지를 독립적으로 만들되 호출은 한곳에서 진행한다.

이렇게 유형, 기능별로 나누게 되면 프로젝트가 규모가 커질때 유지보수도 쉬워지고 디버깅도 원활하게 진행 할 수 있다.

이것을 우리는 싱글 페이지 어플리케이션 (SPA-Single Page Application) 라고 부른다.

 

- router

vue router의 각종 path들이 정의될 공간

• index.js : 최상위 라우터이다.
  애플리케이션의 규모에 따라 라우터의 구조는 다양한 구조로 구성될 수 있다.

 

- store

store는 로그인 상태, 데이터 상태 등 각종 상태 관리를 위한 일종의 모듈같은것이다.
vue.js는 store를 쉽게 구성할 수 있는 vuex라는 라이브러리를 자체적으로 제공한다.

• store/index.js
  vuex 인스턴스 생성부이다.
  로그인 관련 상태를 저장할 auth.module을 import한다.

• store/auth.module.js
  회원 인증 관련 상태관리 모듈이다.
  로그인, 로그아웃, 회원가입 등의 과정에서 발생하는 상태 데이터들이 이곳에 저장되고 관리된다.

 

 

 

5. app.vue

App.vue 파일은 최상위 컨테이너이다.
본 애플리케이션의 전체 레이아웃은 상단 메뉴부와 컨텐츠 부로 구성된다.
컨텐츠부는 vue router를 통해 처리된다.

 

 

 

6. main.js

main.js 파일은 vue 애플리케이션의 진입점이다.
최상위 컨테이너 뷰인 App.vue 파일을 로드하는 구조로 구성된다.

 

 

간단하게 보자면 아래와 같이 순차적으로 호출하여 불러오고 있다.

 

 

7.  vue.config.js 

뷰에 대한 설정(웹팩 등)을 하기 위한 환경설정 파일이라고 보면 된다.

기본 프로젝트 생성시에는 포함되어 있지 않아 따로 생성해야 한다.

 

 

8.  gitignore

깃에서 특정 파일 혹은 디렉토리를 관리 대상에서 제외할 때 사용하는 파일이다.

파일 안에 기입된 내용들은 깃에서 관리하지 않으며,  자동으로 생성되는 로그파일, 프로젝트 설정 파일 등을 관리 대상에서 제외할 수 있다.

※ 이미 업로드된 파일(폴더)를 제외한 경우 다시 커밋해야 적용된다.

 

 

 

9. babel.config.js (바벨)

개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 유용한 도구

 

 

10. package.json

"package.json"은 프로젝트 정보와 의존성(dependencies)을 관리하는 문서다. 패키지, 버전이 기록되어 관리 할 수 있습니다.

 

 

11. package-lock.json

"package-lock.json"은 npm을 사용하여 "package.json" 파일을 또는 "node_modules" 트리를 수정하면 자동으로 생성되는 파일이다. 한마디로 파일이 생성되는 시점의 의존성 트리에 대한 정보를 가지고 있다.

간혹 업데이트된 버전이 오류를 발생시키는 경우가 있기 때문에 안정성을 위해 "package-lock.json"은 매우 중요하다.

 

 

12. Readme.md

깃(깃허브)과 같은 저장소에서 프로젝트에 대한 설명을 기입하도록 하고 있으며, 일반적으로 소트프웨어와 함께 배포한다.