단일 파일 컴포넌트 (Single File Component)컴포넌트 하나를 `.vue` 파일 하나에 작성하기 때문에 붙여진 이름한 파일 내에 템플릿, 스크립트, 스타일 정보를 모두 포함 → 컴포넌트 단위로 관심사 분리📌 단일 컴포넌트 기반으로 Vue 애플리케이션을 개발하려면,모듈 번들러 도구와 트랜스파일러를 함께 사용하도록 환경을 설정해야 함 👉 프로젝트 도구 사용 권장번들링 ❓여러 모듈을 묶어서 하나 또는 몇 개의 모듈 파일로 만드는 과정 (webpack, vite etc..)프로젝트 설정 도구1) Vue CLI 도구`Webpack` 기반의 Vue 프로젝트 공식 설정 도구였음.하지만, 이 도구를 사용해 개발용 서버를 구동할 때까지 꽤나 긴 시간이 걸림왜❓webpack 기능은 관련된 모듈들이 덩치가..

Provide & Inject일반적으로 부모->자식 컴포넌트로 데이터를 전달할 때는 `props` 사용이렇게 정보를 전달하면 계층 구조를 따라 연속적으로 속성을 전달해야 하는 문제가 있음 (prop drilling)`provide & inject`를 이용하여 이러한 문제를 해결함공용 데이터를 부모 컴포넌트에서 제공(proivde)하여, 해당 데이터가 필요한 하위 컴포넌트에서 주입(inject) 하여 사용사용 예시조상(부모) 컴포넌트: App부모(자식) 컴포넌트: SongList자식(자손) 컴포넌트: SongListItemApp 에서 제공하는 icons 데이터를 `공용데이터`로 만들어 SongListItem에서 사용하도록 함App 내에서 `provide()` 함수를 사용해 icons 속성을 가진 객체를 애..

props & event 를 사용하여 부모, 자식 간의 정보를 교환할 수 있음.그런데, 교환하고 싶은 게 속성이 아니라 템플릿 정보라면?👉 이때 사용하는 게  slot슬롯(Slot)이란?부모 컴포넌트 → 자식 컴포넌트: 템플릿 정보를 전달하는 방법템플릿이 뭔데 ❓생겨 먹은 모양새.. html 이라고 생각하셔슬롯을 사용하지 않는 경우자식 컴포넌트: CheckBox1.vue부모 컴포넌트: NoSlotTest.vueinput 태그를 사용해 체크박스 생성`:value=id`:체크박스의 값이 id 프로퍼티로 설정`:checked=checked`: 체크박스의 초기 체크 상태가 checked 프로퍼티에 따라 결정`@change` 이벤트를 통해 체크 상태가 변경될 때마다 부모 컴포넌트 (여기선 NoSlotTest.v..