단일 파일 컴포넌트 (Single File Component)
컴포넌트 하나를 `.vue` 파일 하나에 작성하기 때문에 붙여진 이름
한 파일 내에 템플릿, 스크립트, 스타일 정보를 모두 포함 → 컴포넌트 단위로 관심사 분리
📌 단일 컴포넌트 기반으로 Vue 애플리케이션을 개발하려면,
모듈 번들러 도구와 트랜스파일러를 함께 사용하도록 환경을 설정해야 함 👉 프로젝트 도구 사용 권장
번들링 ❓
여러 모듈을 묶어서 하나 또는 몇 개의 모듈 파일로 만드는 과정 (webpack, vite etc..)
프로젝트 설정 도구
1) Vue CLI 도구
`Webpack` 기반의 Vue 프로젝트 공식 설정 도구였음.
하지만, 이 도구를 사용해 개발용 서버를 구동할 때까지 꽤나 긴 시간이 걸림
왜❓
webpack 기능은 관련된 모듈들이 덩치가 커서 다운로드 시 오래 걸림.
웹서버 구동에 있어서도 `빌드 & 번들링` 과정을 거쳐야 해서 긴 시간을 기다려야 함
2) Vite 기반 도구
Vue CLI와 달리 웹팩이 아닌 `Rollup` 기반으로 작동
네이티브 ES Module을 지원하여 빠른 개발서버와 HMR 기능 제공
`npm init vue` 명령어로 프로젝트 생성
주요 특징
- 빠른 개발 서버: ES Module을 사용하여 개발 서버 매우 빠르게 시작
- Hot Module Replacement (HMR): 코드 변경 시 즉시 반영되는 기능 → 개발 효율성 ↑
- Rollup 기반 번들링: 최적화된 정적 리소스를 배포할 수 있는 기능 제공
프로젝트 생성
- `src`: JavaScript 코드, 컴포넌트 파일 (.vue) 작성, 시작진입(Entry) 파일은 `src/main.js`
- `public`: 이미지와 같은 정적 파일, 자원 작성
- `dist`: 빌드 후 생성된 산출물이 저장되는 디렉터리
- `index.html`: Vue 애플리케이션의 컴포넌트 트리는 index.html 의 id가 app인 div요소 내부에 렌더링
시작진입 파일 = 프로그램 실행 시 가장 먼저 실행되는 파일이나 코드 위치
프로젝트 관련 명령어
| 명령어 | 기능 |
| npm install | 패키지 설치 |
| npm run build | 빌드 |
| npm run dev | 개발 서버 시작 |
| npm run preview | 미리보기 |
vite.confing.js
상세한 설정이 필요한 경우 `vite.config.js` 파일을 작성 & 수정
모듈 경로 표기법 설정
`@` 기호를 src 폴더로 인식시켜 절대 경로 사용
vscode 에서 @ 기호 인식 = `jsconfig.json`에서 설정
생성된 프로젝트 구조
src/main.js 가 시작진입점
1행: `.css` 파일 모듈처럼 import
2행: createApp 함수 임포트
3행: App component 임포트
6행: app 컴포넌트를 렌더링하는 Vue app 인스터스 생성 & id가 app인 요소에 마운트
id=app 요소 👉 index.html 파일에 존재
단일 컴포넌트 작성과 사용
`CheckBoxItem` 컴포넌트 생성
컴포넌트 등록
컴포넌트를 사용하기 위해선 먼저 등록 해야 함
1) 전역 컴포넌트 등록
루트 컴포넌트 하위의 모든 자식들이 어디에서나 이용 가능
- 한 번만 등록하면 어디에서든 바로 사용 가능
- 사용하지 않는 컴포넌트에서도 포함 👉 패키징 시 파일이 커질 수 있음
2) 지역 컴포넌트 등록
객체 내부에 `components` 라는 옵션을 만들고 템플릿에 사용할 태그명 & 컴포넌트 객체 등록 하여 사용
사용할 태그 명이 컴포넌트 이름과 동일하다면, `components:{CheckBoxItem}`으로 축약 가능
