뷰(Vue) 프로젝트(폴더, 디렉토리) 구조

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

 

Vue.js 개발하기에 앞서 Vue 프로젝트(폴더, 디렉터리)의 구조를 먼저 살펴봅니다.

본 글에 대한 설명은 Vue 3를 기반으로 하였습니다.

---

Vue 프로젝트 기본 구조

Vue 프로젝트를 처음 생성하면, 아래와 같이 프로젝트 구조, 폴더/디렉터리 구조를 확인하실 수 있습니다.

 

▶ 구조

 

▶ 설명

node_modules

: npm으로 설치된 패키지, 모듈과 같은 3rd party 라이브러리가 모여있는 디렉터리

 

public

:  정적 리소스

 

src

: 실질적인 개발이 이루어지는 디렉터리

 

src/assets

: 이미지, 폰트 등의 어플리케이션에서 사용하는 파일들이 모여있는 디렉터리

 

src/components

: vue 컴포넌트 파일 디렉터리

 

App.vue

: 최상위(Root) 컴포넌트 vue

 

main.js

: 가장 먼저 실행되는 자바스크립트 파일

: Vue 인스턴스를 생성 및 mount하는 역할

 

.gitignore

: Github에 업로드 제외할 파일에 대한 정보를 설정하는 파일

 

babel.config.js

: Babel 관련 정보를 설정하는 파일

 

jsconfig.json

: 자바스크립트 프로젝트의 루트 디렉터리임을 알려주는 파일

: 자바스크립트 언어를 위해 제공하는 기능에 대한 옵션을 제공, 설정하는 파일

 

package-lock.json

: 설치된 패키지의 의존성(dependency)을 관리하는 파일

 

package.json

: 프로젝트에 필요한 패키지를 정의하고 관리하는 파일

 

README.md

: 프로젝트의 정보를 기록하는 파일

 

vue.config.js

: 웹팩(webpack) 설정하는 및 관리하는 파일

 

dist

: 배포 버전으로 빌드시 배포 버전의 결과물이 있는 디렉터리

  (위 프로젝트 구조의 이미지에는 없음)

 

 

---

Vue 프로젝트 실무 구조

Vue.js의 강의 최강자라고 유명한 캡틴 판교님의 설명에서 발췌한 부분입니다.

src 폴더 하위에 위치한 폴더 및 디렉터리만 작성해보았는데 기능에 맞춰 분리된 디렉터리 구조로 보입니다.

실무에서 대체로 사용하는 디렉터리 구조라는 것일뿐, 각자에 필요에 따라서 구조화하여 사용하면 될 것 같아요.

 

아래는 제가 Vue에 대해 공부하면서 보았던 프로젝트 구조들을 기반으로 한 번 작성해보았어요.

작성하면서 느낀 점은 캡틴 판교님의 프로젝트의 구조가 정말 기능에 맞춰 세세하게 분리되어 있다는 생각이 들더라구요. 

아래의 프로젝트 구조는 기능과 함께 화면의 구조에 맞게 따라갈 수 있게 구조화가 된 느낌이네요.

 

 

---

References

• 캡틴판교의 실무에서 사용하는 Vue.js 프로젝트 구조: https://joshua1988.github.io/web-development/vuejs/vue-structure/