뷰(.vue) 파일 구조 - 싱글 파일 컴포넌트 체계

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

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

 

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

---

 

Vue.js 개발하기에 앞서 Vue 파일의 구조를 먼저 살펴봅니다.

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

---

뷰(.vue) 파일

뷰 파일은 "싱글 파일 컴포넌트(Single File Components) 체계"를 기반으로 하고 있습니다.

• 싱글 파일 컴포넌트 체계
  • 뷰(.vue) 파일로 프로젝트 구조를 구성하는 방식
  • 뷰(.vue) 파일 1개는 뷰 어플리케이션을 구성하는 1개의 컴포넌트와 동일

 

기본 구조

형식

<template>
	<!-- (1) HTML 태그 내용 -->
</template>

<script>
export default {
	// (2) 자바스크립트 내용
}
</script>

<style>
	/* (3) CSS 스타일 내용 */
</style>

 

설명

뷰(.vue) 파일은 크게 3개의 영역으로 구분하여 구현할 수 있습니다.

• (1): <template> ... </template>
  • 화면에 표시할 요소들을 정의하는 영역
  • HTML과 함께 데이터 바인딩의 작업 가능
• (2): <script> ... </script>
  • 뷰 컴포넌트의 내용을 정의하는 영역
  • 뷰 컴포넌트이자 인스턴스(template, data, methods 등)의 속성을 정의
  • export default { }는 ES6 자바스크립트 모듈화 관련 문법으로 내부에 뷰 컴포넌트이자 인스턴스 정의
• (3): <style> ... </style>
  • 템플릿((1) 영역)에 추가된 HTML 태그의 CSS 스타일을 정의하는 영역

 

---

뷰 로더(Vue Loader)

웹팩(webpack)에서 지원하는 라이브러리로 싱글 파일 컴포넌트 체계에서 사용하는 뷰(.vue) 파일의 내용을 브라우저에서 실행 가능한 웹 페이지의 형태로 변환해주는 라이브러리입니다.

즉, 뷰(.vue) 파일에서 정의한 사항을 각각의 코드에서 인식될 수 있도록 변환하는 작업을 수행합니다.

• <template> ... </template> → HTML
• <script> ... </script> → Javascript
• <style> ... </style> → CSS