[Vuejs] Vuejs 구성요소
내가 두고두고 보려고 쓰는 vue 구성요소 모음
- node_modules
- vue.js 애플리케이션에서 사용하는 자바스크립트 라이브러리(package)를 포함하고 있는 폴더이다. 자동으로 생성되며, 버전관리 대상이 아니다. package.json 설정파일에 정의된 라이브러리를 npm이 자동으로 다운로드해서 저장한다.
- public
- 정적 리소스 파일(css, 이미지 파일)이 위치하는 폴더다. index.html은 이 애플리케이션의 첫 화면을 표현하는 페이지로, 수정없이 그대로 사용한다.
- src
- 빌드도구(바벨, webpack)로 애플리케이션을 빌드(변환, 패키징)할 때 빌드 대상이 되는 폴더다.
src 안에 있는 폴더들
- assets
- 번들에 포함시킬 정적 리소스 파일이 위치하는 폴더다.
- components
- 화면을 구성하는 부품으로 사용되는 컴포넌트 파일이 위치하는 곳이다. 여기에 정의된 컴포넌트들은 여러 화면에서 재사용 될 수 있다.
- router
- vue-router 설정파일이 위치하는 폴더다.
- vue-router는 라우팅을 지원하는 라이브러리로, url에 따라서 페이지(컴포넌트)를 전환시킬 수 있다.
- index.js 파일은 경로와 컴포넌트가 매핑되어 있으며, 해당 경로를 요청하는 지정된 컴포넌트가 <router-view/> 자리에 표시된다.
- service
- 여러 컴포넌트에서 공통으로 사용되는 기능이 정의된 자바스크립트 파일이 위치하는 폴더다.
- 주로 컴포넌트들이 공통으로 사용하는 기능, 서버와 http 통신(ajax)을 해서 필요한 데이터를 주고받는 기능들이 정의되어 있다.
- axios를 사용해 서버와 어떠한 서비스의 CRUD 작업이 정의되어져 있다.
- views
- components 폴더의 컴포넌트가 화면을 구성하는 부품이라면, views 폴더의 컴포넌트는 페이지(화면)이다.
- components 폴더에 정의된 컴포넌트들을 조합해 화면을 구성한다.
- App.vue
- vue.js 애플리케이션의 루트 컴포넌트다.
- main.js
- Vue.js의 메인 스크립트 파일이다.
- Vue Application을 생성하고, vue-router를 애플리케이션에 추가하고, App.vue 루트 컴포넌트를 public 폴더에 위치한 index.html 파일에 추가한다.
createApp(App).use(router).mount('#app')
- package.json
- Vue.js 애플리케이션 프로젝트 설정정보가 정의된 파일로, 자바 프로젝트의 pom.xml과 같은 역할을 수행한다.