<script> 태그 영역

<script> 태그 영역에는 SFC 파일에서 사용할 로직을 자바스크립트로 작성합니다. 일반적인 자바스크립트 개념과 문법을 사용하되, 뷰에서만 사용할 수 있는 문법 규칙을 지키며 코드를 작성해야 합니다.

SFC 파일 형식을 보면 <script> 태그 영역에 export default 키워드로 객체({})를 내보내는 문법이 있습니다. 이러한 문법은 일반적인 자바스크립트 문법(객체)입니다. 원래 객체는 자유롭게 속성과 값을 설정할 수 있습니다. 하지만 뷰는 이러한 객체 안에 특정 속성을 사용하도록 문법 규칙이 정해져 있습니다. 뷰에서 객체를 작성할 때 지켜야 하는 문법 규칙을 옵션스 API(Options API)라고 합니다. 이 내용은 3.3.2 옵션스 API 사용하기에서 다시 살펴보겠습니다.

<template> 태그 영역

<template> 태그 영역에는 HTML 코드를 작성합니다. 별도 영역으로 분리되기 때문에 HTML 코드를 작성하기가 쉽습니다. HTML 문법을 그대로 따르므로 추가로 배울 부분은 없습니다. 단, <template> 태그 영역에 작성된 HTML은 <script> 태그 영역에서 작성한 여러 속성으로 정의한 값들과 연동할 수 있다는 점이 다릅니다. 이 내용은 3.3 기본 문법 다루기에서 배웁니다.