BEOTIZA♥

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

Vue의 생명주기에 대해 기록해보려고 한다.이 개념은 Vue 컴포넌트가 만들어지고, 화면에 나타나고, 업데이트될 때 우리가 할 일을 지정하는 기능이다.1. created: 컴포넌트가 만들어졌을 때 실행되는 예제created 훅은 컴포넌트가 화면에 나타나기 전에 실행됩니다. 여기서 API를 호출해서데이터를 가져오는 등의 초기 설정 작업을 할 수 있습니다. Fetched Data {{ data }}  설명: 컴포넌트가 생성되면 created 훅이 실행된다. 2초 후 데이터가 업데이트된다.출력: created가 실행되고, 2초 후 "API로부터 가져온 데이터입니다!"가 화면에 나타난다.2. mounted: 컴포넌트가 화면에 나타난 후 실행mounted 훅은 컴포넌트가 화면에 완전히 나타난 직후..

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를 사용해..

에 숫자로 입력 받고 싶을 땐 v-model.number="데이터이름" 으로 작성하면 num 숫자자료형으로 바꿔서 저장된다. 누군가가 에 문자를 넣는걸 막으려면 watcher를 쓰면 된다. watcher 는 데이터를 감시하면서 특정 데이터가 변경될 때마다 실행되는 코드 이다. 코드를 적용해 보겠다. data에 month 데이터를 감시하고 싶으면 watch안에 함수명을 감시할 데이터이름으로 만들어준다. export default { data(){ return { month : 1 } }, watch : { month(){ //사용자가 month를 문자로 입력하면 alert 띄우기 } } } watch 함수안에 month 데이터가 변할 때마다 실행하고 싶은 코드를 적어준다. export default { d..

에 뭔가 입력하고 기능을 만들 수 있다. 1. 에 유저가 입력한 내용을 data(){} 안에 저장하는 법 month 데이터에 $event.target.value를 작성하면 에 입력한 값을 가져올 수 있다. ( $event는 js에서 e.target의 e랑 똑같은 의미 .) //생략 // @input, @click, @change 이벤트핸들러 축약해서 편하게 쓸수 있다. v-model="데이터이름" 쓰면, 데이터에 사용자가 입력한 값을 저장한다 . // 2. 데이터바인딩해서 input에 입력되는 데이터를 출력한다. {{month}}개월 선택함 : {{원룸들[누른거].price * month}}만원 3. input에 입력한 데이터는 '문자자료형'으로 저장된다. 숫자자료형을 정해준다. v-model.numbe..

모달창을 클릭하면 id에 맞춰 내용이 데이터 바인딩 될 수 있도록 작업해 보겠다. 서버가 있으면 서버에서 데이터를 받아와서 보여주는게 일반적이지만 테스트를 위해 임시로 데이터 파일을 준비해 둔다. // info.js, 제품영양정보 [{ id : 1, title: "아메리카노", info: ['나트륨', '단백질', '포화지방','당류'], made: "없음", etc: "제공되는 영양 정보는 메뉴 기본 옵션 항목을 기반으로 하며 사용자별로 선택한 옵션을 반영하지 않습니다. 성인과 청소년(13세 이상)은 하루 평균 2,000칼로리가 필요하고 어린이(4~12세)는 하루 평균 1,500칼로리가 필요합니다. 그러나 개인에 따라 다를 수 있습니다." }, { id : 2, title: "라떼", info: ['단..