Vue 프로젝트 구조

📒 Vue CLI 프로젝트 구조

 

📎 Module

 

• 개발하는 애플리케이션의 크기가 커지고 복잡해지며 파일 하나에 모든 기능을 담기가 어려워졌다.
• 따라서 자연스럽게 파일을 여러 개로 분리하여 관리하게 되었고,
  이때 분리된 파일 각각이 모듈(module) 즉, js 파일 하나가 하나의 모듈이다.
• 모듈은 대개 기능 단위로 분리하며, 클래스 하나 혹은
  특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.
• 여러 모듈 시스템 ( ESM, AMD, CommonJS, UMD )

node_modules의 의존성 깊이

 

📎 Webpack

 

• 모듈의 수가 많아지고 라이브러리 혹은 모듈 간의 의존성(연결성)이 깊어지면서 특정한 곳에서 발생한 문제가
  어떤 모듈 간의 문제인지 파악하기 어려워짐
• Webpack은 이러한 모듈 간의 의존성 문제를 해결하기 위한 도구
• 프로젝트에 필요한 모든 모듈을 매핑하고 내부적으로 종속성 그래프를 빌드함

 

📎 Bundler

 

• 모듈 의존성 문제를 해결해주는 작업이 Bundling
• 이러한 일을 해주는 도구가 Bundler이고, Webpack은 다양한 Bundler 중 하나이다.
• 모듈들을 하나로 묶어주고 묶인 파일은 하나(혹은 여러 개)로 만들어짐
• Bundling된 결과물은 개별 모듈의 실행 순서에 영향을 받지 않고 동작하게 됨
• snowpack, parcel, rollup.js 등의 webpack 이외에도 다양한 모듈 번들러 존재

의존성을 Webpack이 담당해 주므로 개발자는 npm install을 사용해 다양한 모듈을 한 번에 설치할 수 있음

 

• Vue CLI는 이러한 Bable, Webpack에 대한 초기 설정이 자동으로 되어 있음
  • Bable : 자바스크립트의 ES6+ 코드를 구버전으로 번역/변환 해주는 도구

 

---

 

📒 Component

 

📎 Component

 

• UI를 독립적이고 재사용 가능한 조각들로 나눈 것
  • 즉, 기능별로 분화한 코드 조각
• CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미
• 하나의 app을 구성할 때 중첩된 컴포넌트들의 tree로 구성하는 것이 보편적임
  • HTML의 중첩은 Body tag를 root node로 하는 tree 구조이다
  • 마찬가지로, Vue에서는 src/App.vue를 root node로 하는 tree구조를 가짐
• 컴포넌트는 유지보수를 쉽게 만들어 줄 뿐만 아니라
  재사용성의 측면에서도 매우 강력한 기능을 제공

 

 

• 우리가 사용하는 웹 서비스는 여러 개의 컴포넌트로 이루어짐
• 하나의 컴포넌트를 만들어두면 반복되는 UI를 쉽게 처리할 수 있다

 

📎 Component based architecture 특징

 

• 관리가 용이 (유지 / 보수 비용 감소)
• 재사용성
• 확장가능
• 캡슐화
• 독립적

 

---

 

📒 Vue component

 

📎 Vue component 구조

 

• 템플릿(HTML)
  • HTML의 body 부분
  • 눈으로 보여지는 요소 작성
  • 다른 컴포넌트를 HTML 요소처럼 추가 가능
• 스크립트(JavaScript)
  • JavaScript 코드가 작성되는 곳
  • 컴포넌트 정보, 데이터, 메서드 등 vue 인스턴스를 구성하는 대부분이 작성 됨
• 스타일(CSS)
  • CSS가 작성되며 컴포넌트의 스타일을 담당

 

Vue component 구조

 

Vue Component 구조 정리

 

• 컴포넌트들이 tree구조를 이루어 하나의 페이지를 만듦
• root에 해당하는 최상단의 component가 App.vue
• App.vue를 index.html 과 연결
• 결국 index.html 파일 하나만을 rendering (SPA)