Vue Composition API

Vue Composition API는 Vue 3에서 새롭게 도입된 API로, 기존의 Options API를 보완하거나 대체할 수 있는 기능을 제공합니다. 주로 코드의 재사용성과 가독성을 높이고 더 유연한 상태 관리 및 로직 구성을 가능하게 합니다.setup : Comp

2025년 1월 9일
·
0개의 댓글
·

Vue slot

템플릿 조각을 자식 컴포넌트에 전달하고 자식 컴포넌트가 자체 템플릿 내에서 조각을 렌더링하도록 할 수 있습니다.슬롯 사용 시, FancyButton이 button을 렌더링하고, 내부 컨텐츠를 자식 컴포넌트에게 제공합니다.슬롯을 사용하면 재사용한 컴포넌트를 만들 수 있습

2025년 1월 9일
·
0개의 댓글
·

Vue provide/inject

provide와 inject는 Vue.js에서 컴포넌트 간 데이터 전달을 단순화하기 위해 사용됩니다.특히, 부모 컴포넌트와 하위 컴포넌트 간에 중첩 구조가 깊어지는 경우에 유용합니다.data()를 통해 선언된 데이터와 같이 인스턴스별 상태를 제공해야 하는 경우, pro

2025년 1월 8일
·
0개의 댓글
·

Vue 컴포넌트 이벤트

$emit : 자식 컴포넌트에서 이벤트를 발생시켜 부모 컴포넌트에 신호를 보냅니다.@ : 부모 컴포넌트에서 자식 컴포넌트의 이벤트를 리스닝합니다.$emit에 추가 인수를 전달할 수 있습니다prop 타입 유효성 검사와 마찬가지로, 배열 구문 대신 객체 구문으로 정의된 이

2025년 1월 8일
·
0개의 댓글
·

Vue props

부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 데이터입니다.props는 props 옵션을 사용하여 선언됩니다문자열 배열을 사용하여 props를 선언하는 것 외에도 객체 선언 문법을 사용할 수도 있습니다긴 속성명을 선언할 때 obj'kebab-case'와 같이 키에 따

2025년 1월 8일
·
0개의 댓글
·

Vue 감시자 속성

Vue.js에서 감시자 (Watcher) 는 데이터가 변경될 때 반응적으로 특정 로직을 실행할 수 있는 방법입니다.주로 data 속성이나 computed 속성의 변화를 감지하고, 해당 데이터가 변할 때 자동으로 특정 작업을 수행하는 데 사용됩니다.watchedPrope

2025년 1월 7일
·
0개의 댓글
·

Vue 생명주기

Vue의 생명주기(lifecycle) 는 Vue 인스턴스가 생성되고 업데이트되며 파괴될 때까지의 일련의 과정을 의미합니다.Vue는 이 과정을 여러 단계로 나누어 각 단계에서 특정 작업을 수행할 수 있는 생명주기 훅(lifecycle hook) 을 제공합니다.Vue의 생

2025년 1월 7일
·
0개의 댓글
·

Vue 컴포넌트 등록

전역지역

2025년 1월 7일
·
0개의 댓글
·

Vue computed

계산된 속성은 Vue의 데이터 변경에 기반하여 자동으로 업데이트되는 읽기 전용 속성입니다.경우에 따라 읽기-쓰기 속성으로도 활용할 수 있습니다.데이터에 기반해서 가공처리를 할 때 사용하고, 연산비용이 높지 않아 Vue에서 권장하는 방법입니다.데이터가 바뀌면 캐싱을 풀고

2025년 1월 7일
·
0개의 댓글
·

Vue 이벤트

일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용합니다.v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용합니다.$event를 사용하여 메서드에 전달하거나 인라인 화살표 함수를 사용할 수 있습니다.v-on은 점(.)으

2025년 1월 7일
·
0개의 댓글
·

Lv1. 숫자 문자열과 영단어

https://school.programmers.co.kr/learn/courses/30/lessons/81301네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는

2025년 1월 5일
·
0개의 댓글
·

Lv1. 두 개 뽑아서 더하기

https://school.programmers.co.kr/learn/courses/30/lessons/68644정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차

2025년 1월 5일
·
0개의 댓글
·

Lv.1 3진법 뒤집기

https://school.programmers.co.kr/learn/courses/30/lessons/68935자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution

2025년 1월 5일
·
0개의 댓글
·

Lv1. 예산

https://school.programmers.co.kr/learn/courses/30/lessons/12982S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문

2025년 1월 5일
·
0개의 댓글
·

Vue v-model

양방향 데이터 바인딩을 처리하는 디렉티브입니다.checkbox는 체크가 되었을 때의 값과 안되었을때의 값을 따로 지정할 수도 있습니다.여러개의 checkbox

2025년 1월 3일
·
0개의 댓글
·

Vue 스타일

Vue에서 스타일을 사용하는 방법Scoped: 스타일이 현재 컴포넌트에서만 적용됩니다.스타일 파일을 style 태그 내에서 import 할 수 있으며, 이 import도 scoped에 영향을 받습니다.main.js에서 스타일을 import하면 전역으로 적용됩니다.스타일

2025년 1월 3일
·
0개의 댓글
·

Vue 옵션 API, Vue 문법

Vue의 SFC(Single File Component)는 Vue의 독자적인 구성 방식으로, HTML, JavaScript, CSS를 한 파일 안에서 작성하는 시스템입니다.templateVue 컴포넌트의 HTML 구조를 정의합니다.반드시 한 개의 최상위 루트 요소가 있

2025년 1월 2일
·
0개의 댓글
·
post-thumbnail

Vue 시작하기

뷰는 사용자 인터페이스(UI, User Interface)를 만드는 데 사용하는 자바스크립트 기반 오픈소스프로그레시브 프레임워크입니다.프로그레시브 프레임워크란 이미 다른 사양으로 개발된 웹 애플리케이션에서 일부분만 ‘점진적으로(progressive)’ 적용할 수 있도록

2024년 12월 24일
·
0개의 댓글
·

React React-Router

React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리입니다.이를 통해 URL을 기반으로 화면을 렌더링하고, SPA(Single Page Application)에서 라우트 간 전환을 부드럽게 처리할 수 있습니다.React R

2024년 12월 5일
·
0개의 댓글
·

React 데이터 통신

리액트에서 데이터 통신을 할 때는 axios 라이브러리나 fetch API를 사용하여 처리합니다.여러가지 편의 기능은 axios 라이브러리가 더 뛰어나지만, 별도의 라이브러리를 설치해서 사용해야 한다는 단점이 있습니다.

2024년 12월 4일
·
0개의 댓글
·