Vue Composition API는 Vue 3에서 새롭게 도입된 API로, 기존의 Options API를 보완하거나 대체할 수 있는 기능을 제공합니다. 주로 코드의 재사용성과 가독성을 높이고 더 유연한 상태 관리 및 로직 구성을 가능하게 합니다.setup : Comp
템플릿 조각을 자식 컴포넌트에 전달하고 자식 컴포넌트가 자체 템플릿 내에서 조각을 렌더링하도록 할 수 있습니다.슬롯 사용 시, FancyButton이 button을 렌더링하고, 내부 컨텐츠를 자식 컴포넌트에게 제공합니다.슬롯을 사용하면 재사용한 컴포넌트를 만들 수 있습
provide와 inject는 Vue.js에서 컴포넌트 간 데이터 전달을 단순화하기 위해 사용됩니다.특히, 부모 컴포넌트와 하위 컴포넌트 간에 중첩 구조가 깊어지는 경우에 유용합니다.data()를 통해 선언된 데이터와 같이 인스턴스별 상태를 제공해야 하는 경우, pro
$emit : 자식 컴포넌트에서 이벤트를 발생시켜 부모 컴포넌트에 신호를 보냅니다.@ : 부모 컴포넌트에서 자식 컴포넌트의 이벤트를 리스닝합니다.$emit에 추가 인수를 전달할 수 있습니다prop 타입 유효성 검사와 마찬가지로, 배열 구문 대신 객체 구문으로 정의된 이
부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 데이터입니다.props는 props 옵션을 사용하여 선언됩니다문자열 배열을 사용하여 props를 선언하는 것 외에도 객체 선언 문법을 사용할 수도 있습니다긴 속성명을 선언할 때 obj'kebab-case'와 같이 키에 따
Vue.js에서 감시자 (Watcher) 는 데이터가 변경될 때 반응적으로 특정 로직을 실행할 수 있는 방법입니다.주로 data 속성이나 computed 속성의 변화를 감지하고, 해당 데이터가 변할 때 자동으로 특정 작업을 수행하는 데 사용됩니다.watchedPrope
Vue의 생명주기(lifecycle) 는 Vue 인스턴스가 생성되고 업데이트되며 파괴될 때까지의 일련의 과정을 의미합니다.Vue는 이 과정을 여러 단계로 나누어 각 단계에서 특정 작업을 수행할 수 있는 생명주기 훅(lifecycle hook) 을 제공합니다.Vue의 생
계산된 속성은 Vue의 데이터 변경에 기반하여 자동으로 업데이트되는 읽기 전용 속성입니다.경우에 따라 읽기-쓰기 속성으로도 활용할 수 있습니다.데이터에 기반해서 가공처리를 할 때 사용하고, 연산비용이 높지 않아 Vue에서 권장하는 방법입니다.데이터가 바뀌면 캐싱을 풀고
일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용합니다.v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용합니다.$event를 사용하여 메서드에 전달하거나 인라인 화살표 함수를 사용할 수 있습니다.v-on은 점(.)으
https://school.programmers.co.kr/learn/courses/30/lessons/81301네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는
https://school.programmers.co.kr/learn/courses/30/lessons/68644정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차
https://school.programmers.co.kr/learn/courses/30/lessons/68935자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution
https://school.programmers.co.kr/learn/courses/30/lessons/12982S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문
양방향 데이터 바인딩을 처리하는 디렉티브입니다.checkbox는 체크가 되었을 때의 값과 안되었을때의 값을 따로 지정할 수도 있습니다.여러개의 checkbox
Vue에서 스타일을 사용하는 방법Scoped: 스타일이 현재 컴포넌트에서만 적용됩니다.스타일 파일을 style 태그 내에서 import 할 수 있으며, 이 import도 scoped에 영향을 받습니다.main.js에서 스타일을 import하면 전역으로 적용됩니다.스타일
Vue의 SFC(Single File Component)는 Vue의 독자적인 구성 방식으로, HTML, JavaScript, CSS를 한 파일 안에서 작성하는 시스템입니다.templateVue 컴포넌트의 HTML 구조를 정의합니다.반드시 한 개의 최상위 루트 요소가 있

뷰는 사용자 인터페이스(UI, User Interface)를 만드는 데 사용하는 자바스크립트 기반 오픈소스프로그레시브 프레임워크입니다.프로그레시브 프레임워크란 이미 다른 사양으로 개발된 웹 애플리케이션에서 일부분만 ‘점진적으로(progressive)’ 적용할 수 있도록
React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리입니다.이를 통해 URL을 기반으로 화면을 렌더링하고, SPA(Single Page Application)에서 라우트 간 전환을 부드럽게 처리할 수 있습니다.React R
리액트에서 데이터 통신을 할 때는 axios 라이브러리나 fetch API를 사용하여 처리합니다.여러가지 편의 기능은 axios 라이브러리가 더 뛰어나지만, 별도의 라이브러리를 설치해서 사용해야 한다는 단점이 있습니다.