가이드

싱글 파일 컴포넌트

소개

Watch a free video lesson on Vue School

많은 Vue 프로젝트에서, 전역 컴포넌트는 Vue.component를 사용해 정의되고, 다음에 모든 페이지의 container 엘리먼트를 대상으로 하는 new Vue({el: '#container'})가 정의됩니다.

이것은 특정 뷰를 향상시키는 용도로만 사용되는 중소 규모 프로젝트에서 유용합니다. 하지만 좀 더 복잡한 프로젝트의 경우 또는 프론트엔드가 JavaScript 기반인 경우 단점이 분명해집니다.

위 모든 것들은 Webpack 또는 Browserify와 같은 빌드 도구를 이용해 .vue 확장자를 가진 싱글 파일 컴포넌트 로 해결 됩니다.

다음은 Hello.vue 파일의 간단한 예입니다.

Single-file component example (click for code as text)

이제 우리는 할 수 있습니다:

약속대로 Jade, Babel (ES2015 모듈을 포함합니다), Stylus와 같은 전처리기를 사용해 더 깨끗하고 기능이 풍부한 컴포넌트를 사용할 수 있습니다.

Single-file component example with preprocessors (click for code as text)

이러한 특정 언어는 예제일 뿐입니다. Bublé, TypeScript, SCSS, PostCSS 또는 생산성 향상에 도움을 주는 다른 전처리기를 쉽게 사용할 수 있습니다. Webpack을 vue-loader와 함께 사용하면 CSS 모듈에 대한 1등급 클래스를 지원합니다.

관심사의 분리는 무엇입니까?

주목해야 할 중요한 점은 관심사 분리가 파일 타입 분리와 같지 않다는 것입니다. 현대적인 UI 개발에서 코드베이스를 서로 얽혀있는 세 개의 거대한 레이어로 나누는 대신, 느슨하게 결합 된 컴포넌트로 나누고 구성하는 것이 더 중요합니다. 컴포넌트 내부에서 템플릿, 로직 및 스타일이 본질적으로 결합되어 배치되면 컴포넌트의 응집력과 유지 보수성이 향상됩니다.

싱글 파일 컴포넌트에 대한 아이디어가 마음에 들지 않더라도 JavaScript와 CSS를 별도의 파일로 분리하여 핫 리로드 및 사전 컴파일 기능을 활용할 수 있습니다.

<!-- my-component.vue -->
<template>
  <div>이 곳은 사전에 컴파일 됩니다.</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

시작하기

예제 샌드박스

지금 당장 싱글 파일 컴포넌트를 사용하고 싶다면 CodeSandbox의 단순한 할일 앱을 확인하세요.

JavaScript에서 모듈 빌드 시스템을 처음 사용하는 사용자를 위한 내용

.vue 컴포넌트로, 우리는 진보한 JavaScript 영역에 들어서고 있습니다. 약간의 아직 배우지 않은 추가 도구 사용방법을 배워야 합니다.

위 내용을 얻으려면 하루정도 걸립니다. 이 후에 Vue CLI 3 를 확인하는 것을 추천합니다. 설명을 따라 가면 .vue 컴포넌트, ES2015 및 핫 리로드가 포함된 Vue 프로젝트를 즉시 사용할 수 있게 됩니다.

템플릿은 여러 “모듈”을 가져와 최종 응용프로그램에 묶는 모듈 번들러인 Webpack을 사용합니다. Webpack 자체에 대한 자세한 내용을 보려면 이 동영상에서 좋은 소개를 볼 수 있습니다. 일단 기본을 익히면 Egghead.io의 고급 Webpack 코스과 Webpack Academy를 확인하십시오.

고급 사용자를 위한 내용

CLI는 여러분을 위해 대부분의 구성을 관리하지만, 자체 구성 옵션을 통한 세밀한 사용자 정의 구성도 허용합니다.

빌드 설정을 처음부터 직접 구성하길 원한다면, Webpack과 vue-loader을 수동으로 구성해야 합니다.
Webpack에 대한 더 자세한 내용은 Webpack 공식 문서와 Webpack Academy를 확인하세요.

← 필터 단위 테스팅 →
이 문서에 문제를 제보하거나 기여하고 싶은 부분이 있으십니까? Github에서 이 페이지를 수정하세요!