📌화살표 함수 (Arrow function)기존 함수에서는 this를 사용, 화살표 함수에서는 this없이 사용함수 로직이 한 줄이면 { } 생략 가능  📌템플릿 리터럴 (Template literals)백틱( ` ) 을 사용문자열과 자바스크립트 표현식 혼용 가능   📌모듈 (Modules)import, expert 문법 사용다른 js 파일에서 파일 내용을 가져옴// component.jsconst component = { fncES6() { console.log('hello, ES6!'); }}   📌분해와 확장 문법분해 문법은 { , } 사용확장 문법은  ... 사용

Composition API에서 axios를 사용하는 기본적인 방법을 알아보겠습니다. 📌 ref, onMounted를 활용한 axios.get jsonplaceholder REST API axios.get Loading... Error : {{ error }} {{ data }} ✅ 설명onMounted()에서 fetchData()를 호출하여 API 데이터를 가져옴ref()를 활용해 data, loading, error 상태를 관리axios.get(url)을 통해 비동기 요청을 실행try-catch-finally를 사용하여 오류 처리 및 로딩 상태 관리✅ 결과axios 성공 여부에 따른 responMessage 호출    📌 ref 를 활용한 axios.post jsonpl..

Composition API에서 provide와 inject는 부모 컴포넌트에서 데이터를 제공(provide)하고, 하위 컴포넌트에서 이를 주입(inject)받아 사용할 수 있도록 하는 기능입니다. 📌provide와 inject의 핵심 개념provide(key, value): 부모 컴포넌트에서 데이터를 제공inject(key, default value(없이도 사용 가능) ): 자식 컴포넌트에서 데이터를 주입받아 사용깊은 컴포넌트 트리에서도 데이터를 쉽게 전달 가능 (props를 여러 단계 거칠 필요 없음)  📌provide, inject 기본 사용 방법✅ 부모 컴포넌트에서 데이터 제공 (provide) parentComponent   ✅ 자식 컴포넌트에서 데이터 주입 (inject) ..

reactive로 만든 객체는 반응형이지만 개별 속성을 구조 분해 할당하면 반응형을 잃어버릴 수 있습니다.이를 방지하기 위해 toRef와 toRefs를 사용하여 개별 속성을 ref로 변환할 수 있습니다. 📌toRef 사용 방법toRef는 reactive 객체의 특정 속성을 ref로 변환합니다.이렇게 하면 .value 없이 reactive 객체처럼 사용할 수 있습니다. count : {{ count }} 증가  ✅ toRef가 사용 이유reactive 객체의 속성을 직접 구조 분해 하면 반응형이 사라짐toRef를 사용하면 해당 속성을 ref로 유지할 수 있음 count : {{ count }} 증가    📌toRefs 사용 방법toRefs는 reactive 객체의 모든 속성을 re..

Composition API에서 ref와 reactive는 반응형 상태를 만들기 위해 사용됩니다. 두 속성은 동작 방식과 사용법에 차이가 있습니다. 📌ref (단일 값 또는 객체를 감싸는 반응형 래퍼)ref는 기본 자료형(number, string, boolean 등) 또는 객체를 감싸서 반응형으로 만듭니다.  ✅ ref 예제 (기본 자료형) count : {{ count }} count 증가    ✅ ref 예제 (객체) 나이 : {{ user.age }} 나이 변경   ✅ ref 특징.value를 사용해야 값에 접근 가능객체를 감쌀 수도 있지만, reactive보다 덜 직관적일 수 있음   📌reactive (객체나 배열..

Composition API에서 watch와 watchEffect는 반응형 데이터를 감시할 때 사용되지만, 작동 방식과 사용 목적에 차이가 있습니다.   📌watch (명시적인 감시 대상)watch는 특정 반응형 변수를 감시하여 값이 변경될 때만 실행됩니다. count : {{ count }} count 증가    ✅ 출력 값  ✅ button 클릭 후 출력 값  ✅ button 클릭 후 콘솔  ✅ 특징count를 명시적으로 감시값이 변경될 때만 콜백 실행기본적으로 처음 한 번 실행되지 않음    📌watchEffect (자동 감지)watchEffect는 내부에서 사용된 반응형 데이터를 자동으로 감지하여 실행됩니다. count : {{ coun..