07-Vue.js / Single File Component

1. 프로젝트 설정 도구

기본적인 내용에 대해 배웠으니 이제 Single File Component 기반으로 Vue application을 개발하는 방법에 대해서 알아보도록 하죠.

Single File Component는 컴포넌트 하나를 .vue 파일 하나에 작성하기 때문에 붙여진 이름입니다. 한 파일에 컴포넌트 구성을 위해 필요한 template, script, style 정보를 모두 포함하기 때문에 컴포넌트 단위로 관심사 분리(Seperation of Concern)가 이루어질 수 있습니다.

Single File Component 기반으로 Vue application을 개발위해서는 Webpack과 같은 모듈 번들러와 ES6, TypeScript와 같은 트랜스파일러를 함께 사용하도록 개발 프로젝트 환경을 설정해야 합니다. 하지만 이 과정이 순탄치는 않습니다. 그래서 몇가지 프로젝트 설정도구를 사용해서 조금 손쉽게 구현합니다.

---

2. Vue CLI 도구

Vue CLI는 Webpack기반의 Vue 공식 프로젝트 설정도구 였습니다.

이 Vue CLI는 공식 설정도구였지만 프로젝트를 생성하고 개발용 웹서버를 구동할 때 까지 시간이 꽤 오래 걸립니다. Webpack이 기능은 좋지만 관련된 모듈들이 덩치가 커서 다운로드하고 빌드, 번들링 과정을 거쳐야 하기 때문입니다.

그래서 2021년 까지만 해도 Vue 프로젝트를 생성할 때의 표준 도구로 사용되었지만 현재는 vite 기반의 create-vue 도구를 사용하는걸 권장하고 있습니다. 두가지 모두 알아두시는게 좋습니다.

일단 먼저 npx를 사용하기 위해서 최신버전으로 update를 진행해야 해요!

💡 npm install -g npm

 

설치가 완료되면 다음의 명령어를 이용해서 프로젝트를 생성해요!

💡 npx @vue/cli create test-vue-app