BEOTIZA♥

Radix Vue는 UI 컴포넌트를 쉽게 사용할 수 있게 도와주는 라이브러리다.그 중 팝업(Dialog) 컴포넌트를 적용하는 방법을 알아보겠다. 1. 프로젝트에 Radix Vue 설치하기yarn add radix-vue 2. 팝업 컴포넌트 만들기Dialog 컴포넌트를 사용해서 팝업을 만들 수 있다.기본적인 구성은 DialogRoot, DialogOverlay, DialogContent로 이루어진다.// Popup.vue 문의하기 닫기  3. 팝업 열기와 닫기팝업을 여는 버튼과 닫는 버튼을 설정해야 한다. 팝업을 열 때는 DialogTrigger를 사용한다.// Ap..

Vue에서 부모와 자식 간 데이터 흐름을 관리하는 방법으로 Props와 Emits를 사용한다.여기에 TypeScript를 적용하면 데이터의 타입을 명확히 정의할 수 있어 코드의 안정성과 가독성이 높아진다. 1. 부모-자식 간 데이터 흐름Props는 부모가 자식에게 데이터를 전달할 때 사용한다.Emits는 자식이 부모에게 데이터를 보낼 때 사용한다. 2. 데이터 흐름 단계1) 부모 → 자식: Props부모 컴포넌트에서 :message로 데이터를 전달하고자식 컴포넌트에서 defineProps로 받는다.부모에서 데이터 전달 :부모에서 parentMessage라는 데이터를 자식 컴포넌트로 :message를 통해 전달한다. // 자식 컴포넌트// props 정의const props = defineProps();자..

Vue 기본 컴포넌트 구조Vue 컴포넌트는 크게 3가지로 나뉜다.: 화면에 보여질 HTML 구조를 작성한다.: 데이터, 메서드, 로직 등을 정의한다.: 컴포넌트의 스타일을 지정한다.Vue 3.x에서 ref 사용하는 법Vue 3.x에서는 Composition API를 통해 ref를 사용한다.ref는 반응형 데이터를 선언하거나 DOM 요소에 접근할 때 사용한다.ref(0)으로 반응형 변수 선언..value를 통해 데이터에 접근하고 수정한다.Vue 3.x는 코드 구조가 간결하고, 반응형 데이터와 DOM 제어를 통합적으로 관리할 수 있다.

Vue.js v-if와 v-show의 차이: 무엇이 다를까?Vue.js에서는 화면에 요소를 보여주거나 숨기는 조건부 렌더링 기능으로 v-if와 v-show를 제공한다.이 둘은 결과는 비슷하지만, 내부 동작 방식이 다르기 때문에 상황에 맞게 선택하는 것이 중요하다. 1. v-if: 필요할 때만 DOM 생성v-if는 조건이 true일 때만 DOM 요소를 생성한다.조건이 false일 경우 해당 요소는 완전히 DOM에서 제거된다. //v-if 사용 예시 환영합니다! 로그인 상태입니다. 사용자가 로그인을 하면 한 번만 화면에 "환영합니다!"를 보여줘요.로그인 상태는 자주 바뀌지 않기 때문에, v-if로 요소를 생성/삭제해도 성능에 문제가 없어요.//v-if 적합하지 않은 경우 메뉴가 열렸습니다. 만약 메뉴를 ..

사용자가 "취소" 버튼을 클릭하면 자식 컴포넌트에서는 close 함수가 실행되고, close 함수에서는 부모 컴포넌트에게 모달을 닫으라는 신호($emit('close'))를 보내게 된다. 이 신호를 받은 부모 컴포넌트는 모달 닫는 작업을 한다. emit은 자식 컴포넌트에서 부모 컴포넌트로 커스텀 이벤트를 전달하는 방법이다.이벤트 발생: 자식 컴포넌트에서 사용자의 동작(예: 버튼 클릭)에 따라 특정 함수가 호출된다.$emit 호출: 함수 내에서 $emit을 사용해 특정 이벤트를 부모 컴포넌트로 전달한다. 이벤트 이름과 필요한 경우 데이터를 포함할 수 있다.부모 컴포넌트 수신: 부모 컴포넌트는 이벤트 리스너를 설정하여 자식 컴포넌트로부터 발신된 이벤트를 감지하고 처리합니다. 자식 컴포넌트//CreateMo..

HTML에서 버튼1을 누르면 내용1 보이고, 버튼2는 내용2, 버튼3은 내용 3이 보여야 되는 UI를 만들어보자. 내용0 내용1 내용2 버튼0 버튼1 버튼2 UI 만드는 법 을 단계별로 작성한다. 1. 현재 상태를 data로 저장 data(){ return { step : 0 //현재 탭 상태 기록할 데이터 } } 2. data에 따라서 HTML 어떻게 보여야하는지 작성 내용0 내용1 내용2 버튼0 버튼1 버튼2 멘탈이 흔들리는 요즘이다. 그래도 조금씩 연습해왔던 마음챙김이 조금은 도움이 되는거 같다. 다 지나간다. 지나갔고, 지금만 있다. 잡히지 않은 불안함보다 보이는 바로 앞, 지금 이 글을 적는 순간 내 힘만 믿자..!

Watch는 객체 또는 배열과 같은 복잡한 데이터 구조에서도 사용할 수 있다. Watch를 사용하면 이터의 변경을 감시하고 , 해당 데이터가 변경될 때 특정 동작을 수행할수 있다. 쇼핑몰 작업 중에 구매수량을 수정한 상태에서 다른 사이즈를 선택하면 구매수량이 초기화되지 않는 이슈가 생겼다 '데이터 감시'라는 단어가 떠오르면서 Watch를 사용해봤다. 관련 글 ▼ ▼ ▼ Vue mitt 컴포넌트간 데이터 전송 mitt은 모든 컴포넌트 간 데이터 통신을 지원한다. 현재 작업의 경우 SizePrice.vue -> OrderPrice.vue 컴포넌트간의 데이터 전송이 필요했다. SizePrice.vue에서 데이터에서 받아오는 각 사이즈(S, M, L) 가격을 rangyi.tistory.com watch를 사용해..