이전 글 2025.03.31 - [Frontend/Vue 3] - [단일 파일 컴포넌트-1] 프로젝트 설정컴포넌트의 조합복잡한 화면의 Vue 애플리케이션은 여러 컴포넌트 조합하여 개발부모-자식 관계로 `트리 구조` 형성여러 컴포넌트를 조합하면, 컴포넌트 간의 정보 전달 必∴ `속성`과 `이벤트`를 이용함속성1) 속성을 이용한 정보 전달부모 컴포넌트 → 자식 컴포넌트로 정보 전달하는 방법자식 컴포넌트는 `props` 옵션으로 속성 정의부모 컴포넌트는 `v-bind`를 이용해 자식 컴포넌트의 속성에 정보 전달📌 속성으로 전달 받은 데이터 변경X = 읽기 전용부모에서 속성 값 변경 👉 자식은 자동으로 다시 렌더링부모 컴포넌트: App.vue자식 컴포넌트: TodoList.vueApp 컴포넌트에서 data ..

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

Options API vs Composition APIOptions API 방식이전까지 컴포넌트 작성 방법 (= 옵션 API (Option API))data, methods, computed, watch와 같은 `옵션`들을 작성컴포넌트 연산(`calc`) 기능과 이름(`name`)을 처리하는 두 가지 기능을 가진 컴포넌트연산과 관련된 기능이 여러 옵션에 흩어져 있음여러 기능을 가진 컴포넌트의 경우, 매우 복잡한 코드를 분석하기에는 불편한 방식Composition API 방식대규모 vue 애플리케이션에서 컴포넌트의 로직을 효과적으로 구성 & 재사용할 수 있도록 만든 함수 기반 API위 Option API를 사용한 컴포넌트 방식과 달리 데이터, 메서드, 생명주기 메서드들이 관심 기능 별로 묶여있음👉 특정 ..

동적 컴포넌트  (Dynamic Components)`` 태그와 `is` 속성을 사용해 동적으로 컴포넌트를 변경할 수 있는 기능 제공즉, 컴포넌트를 고정적으로 렌더링하는 것이 아니라, 상황에 따라 변경 가능기본 문법 `:is` 속성에는 렌더링할 컴포넌트의 이름을 전달`currentComponent` 값이 변경되면 자동으로 새로운 컴포넌트로 교체예제`ComponentA`와 `ComponentB`를 동적으로 변경하는 예제 컴포넌트 변경  keep-alive로 상태 유지동적 컴포넌트를 변경할 경우, 기존 컴포넌트의 상태가 초기화 됨👉 A에서 이름을 입력 중 B로 이동시, 다시 A로 돌아왔을 때 작성한 이름이 초기화 돼 있음 위처럼 ``를 사용해서 한 번 로드된 컴포넌트의 상태를 유지하면 ..

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

...동적 컴포넌트 작성 예정...v-model 디렉티브?3장에서 학습한 양방향 바인딩 을 지원하는 `v-model`을 말함기존에는 동일 파일(컴포넌트)에서 사용했지만, 컴포넌트 개념에서 서로 다른 파일 (컴포넌트)이를 컴포넌트에서 사용하면 미리 정의된 속성명과 이벤명을 통해 양방향 바인딩처럼 부모컴포넌트에서 사용 가능📌 컴포넌트에서 v-model 디렉티브는 부모 컴포넌트에서만 이점이 있음v-model을 사용하지 않은 경우자식으로부터 이벤트를 수신해 함수와 매핑 하는 `@update:name ="changeSearchName"` changeSearchName 함수: 자식으로부터 받아온 값 (여기서는 name)으로 searchName 속성 업데이트v-model을 사용한 경우부모 컴포넌트: InputNam..

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

전역 스타일` style 태그 안에 `.child` 스타일을 각각 정의했지만, 마지막에 임포트한 `Child3`의 style로 적용되어 충돌이 발생함이렇게, 동일한 css 클래스 이름 (여기서는 `.child`)이 여러 컴포넌트에 사용되면, 마지막에 임포트한 스타일이 적용됨다른 컴포넌트와의 스타일 충돌을 피하면서, 특정 컴포넌트만의 스타일을 지정하는 방법은 두 가지가 있음.특정 컴포넌트 스타일 지정1. 범위 CSS컴포넌트가 렌더링하는 요소에 특성 기반의 추가적인 식별자를 부여하여 충돌을 피하는 가장 쉬운 방법을 `` 로 변경하여 적용 위에서 충돌이 발생한 Child1과 Child2의 style을 로 변경하면, 충돌 없이 style이 적용됨console의 빨간 네모 박스와 같이, Child1과 Child2..