1. Component
1. component
- UI를 독립적이고, 재사용한 가능한 조각들로 나눈 것
- 다시 사용하기 위한 ⇒ 소프트웨어 구성 요소
- 마치 HTML에서 body를 여러개의 div로 구성한 것과 비슷한 맥락이다.
- Vue에서는 src/App.vue를 root로 하는 tree 구조
- Why? 유지보수, 재사용성
2. Django에서의 예시
- base.html에서 block으로 index.html에서 상속받아 사용한 것처럼
- 상위 컴포넌트를 변경 ⇒ 하위컴포넌트에도 영향을 미친다.
3. Component based architecture의 특징
- 관리가 용이
- 유지보수가 쉽다
- 재사용성
- 캡슐화
- 독립적
2. SFC
1. component in Vue
- Vue에서의 컴포넌트 === 이름이 있는 재사용 가능한
Vue instance
- Vue instance ==
new Vue()로 만든 인스턴스
2. SFC (Single File Component)
.vue파일이 하나의 Vue instance == 하나의 컴포넌트
- 하나의 인스턴스 ⇒ 하나의 기능 으로 작성
📌
하나의 .vue 파일을 컴포넌트로 해서 ‘기능’ 단위로 CLI의 도움을 받아 작성할 것이다.
3. Vue component
App.vue 파일을 열어본다.
- template
- HTML의 body 부분
- script
- JS 코드 작성
- 컴포넌트 정보, 데이터, 메서드 등 vue 인스턴스를 구성하는 대부분
- 기존에 작성하던 문법과 약간 다르다!
- style
- CSS
Uploaded by N2T