몽땅뚝딱 개발자

파일 업로드 구현 중, 데이터를 실어보낼 formdata에 데이터를 넣고 console.log()로 조회했지만 출력되지 않았다. 예전에도 같은 경험을 한 적이 있는데 놀랍게도 어떻게 출력했는지 전혀 기억나지 않았다. 앞으론 기억하자! [방법 1.] submit() { let data = new FormData(); this.fileList.forEach((obj, idx) => { data.append("files", obj); }) // key 조회 for (let key of data.keys()) { console.log(key); } // value 조회 for (let value of data.values()) { console.log(value); } } [방법 2.] submit() { le..

◽ delete의 경우 기존의 key(=index)가 남아있는 채로 삭제된다. 해당 요소를 삭제해도 다른 요소의 key값은 바뀌지 않는다. delete this.fileList[idx]; ◽ splice()의 경우 기존의 key(=index)가 알아서 줄어든다. 해당 요소를 삭제하면 다른 요소의 key값도 바뀐다. this.fileList.splice(idx, 1) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

📄 HTML 📋️️ 📋️️ 📄 JS 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

trello를 쓰면서 항상 궁금했던 Drag & Drop... vue-draggable도 있지만 직접 만들어보려고 츄라이해보았다. (🤗) 요소를 클릭한 상태에서 요소를 올렸을 때, 요소 간 간격이 벌어지거나 부드럽게 떨어지는 CSS는 추후에 추가해보려한다. 📄 HTML v-for로 요소를 감싸는 와 드래그가 가능한 요소를 뿌린다. 드래그가 가능한 요소들을 감싸는 곳(여기서는 class명이 'col'인 )에는 @drop 이벤트를 추가한다. 이 때, @dragenter와 @dragover에는 기본 동작을 막는 .prevent를 적용해주어야 @drop이 실행된다. 드래그가 가능해야하는 요소에는 draggable="true"를 추가해준다. {{ numItem.content }} 📄 JS 📄 CSS 개인적으로 공..

◽ 문법 // 화면에 10,000으로 출력 {{ Number(10000).toLocaleString() }} 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ 개요 부모와 자식 컴포넌트 사이의 데이터 전달은 일반적으로 props를 통해 이루어진다. depth가 깊지않은 경우에는 props로도 충분하지만 더 많은 계층을 가지는 경우에 모든 컴포넌트에 prop를 전달해야한다. 이렇게 depth가 많아지는 경우, provide와 inject를 사용하면 된다. 💡 참고 Vue에서는 아래 2가지 사항을 제외하고는 "장거리 props"라고 생각하면 된다고 말한다. 1. 부모 컴포넌트는 어떤 하위 컴포넌트가 provide된 속성을 사용하는지 알 필요가 없다. 2. 자식 컴포넌트는 inject된 속성이 어디서 왔는지 알 필요가 없다. ◽ provide와 inject - provide - 부모 컴포넌트가 데이터 제공을 위해 사용하는 옵션 - inject - 자식 컴포넌트가..

◽ mixins이란 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법이다. 컴포넌트에 mixin를 사용하면 해당 mixin의 모든 기능이 혼합된다. ◽ mixins의 병합 규칙 mixins는 중복되는 옵션을 적절하게 병합한다. data 옵션의 경우, mixin의 data 함수가 호출될 때 병합될 객체를 return 하여 병합된다. 만약 컴포넌트와 mixin에서 선언된 data의 변수 이름이 겹치는 경우, 컴포넌트의 변수가 우선권을 가진다. const myMixin = { data() { return { message: 'hello', foo: 'abc' } } } const app = Vue.createApp({ mixins: [myMixin], data() { return { message: 'go..

Vue2에서 커스텀 컴포넌트를 사용한경우 사용한 컴포넌트에 v-model을 사용하면 props로 받을 때 'value'라는 명칭으로 받을 수 있었고, Vue3에서는 .sync를 사용하지않아도 [v-model:value]라는 문법을 사용하면 .sync의 역할이 대체된다. Vue 2.x 📄 부모컴포넌트 부모컴포넌트에서 아래와 같이 v-model로 값을 할당한다. 📄 자식컴포넌트 - myComponent.vue 출처 v-model | Vue.js v-model 개요 변경내용: BREAKING: 커스텀 컴포넌트를 사용할때, v-model prop 와 event 기본 명칭이 변경 되었습니다: prop: value -> modelValue; event: input -> update:modelValue; BREAKI..

◽ $attrs Vue 2의 $attrs은 부모가 class, style 속성을 제외하고 모든 속성들을 자식에게 넘겨주는 속성이다. Vue 3의 $attrs은 class, style 속성을 포함하여 모든 속성들을 자식에게 넘겨준다. 또한 자식에서 부모에게 전달되는 이벤트를 모아놓은 $listeners가 사라지고 $attrs 안으로 이벤트가 존재한다. ◽ $attrs 예제 📄 부모 컴포넌트 attrs 📄 자식 컴포넌트 {{ $attrs.menu1 }} {{ $attrs.menu3 }} ◽ inheritAttrs: true/false 부모컴포넌트에서 오는 속성이 자식컴포넌트에 상속되는 것을 막는다. export default { inheritAttrs: false, } 출처 [Vue.js] 새로운 v-mod..

새삼 생각나는 코딩테스트 때 watch 남발했다가 '왜 이렇게 쓰신거예요?'라는 물음에 놀라고 제대로 개념 잡힌 기억..(🥲) watch는 어떤 때에 쓰는 것이며, 성능에 어떤 영향을 미치는지 매우 친절히 설명해주셔서 그 뒤로는 plan B로 사용하게 됐다. 예전에 내가 짠 코드를 보면 왜 그렇게, 왜 그곳에서 써야하는지 명확한 이유도 없이 마구잡이로 사용했었다. 물론 지금도 100% 적절하게 쓴다고 확신할 수는 없지만 그래도 함수 하나, 데이터 하나를 선언할 때도 과연 적절한 옵션에서 사용하고있는건지 고민해보고 판단하는 단계까지는 왔다. ◽ computed 계산해야하는 목표데이터를 정의하는 방식으로, 선언적 프로그래밍 방식이다. computed 속성은 해당 속성이 종속된 대상이 변경될 때만 실행되며 캐..