몽땅뚝딱 개발자

📄 HTML 📄 CSS .box { width: 200px; height: 100px; background: linear-gradient(to right, black 4px, transparent 4px) 0 0, linear-gradient(to right, black 4px, transparent 4px) 0 100%, linear-gradient(to left, black 4px, transparent 4px) 100% 0, linear-gradient(to left, black 4px, transparent 4px) 100% 100%, linear-gradient(to bottom, black 4px, transparent 4px) 0 0, linear-gradient(to bottom, blac..

파일 업로드 구현 중, 데이터를 실어보낼 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 개인적으로 공..

에러 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible" 원인 결론부터 말하면 부모 컴포넌트에서 넘겨준 값을 자식 컴포넌트에서 props로 받은 상태에서 그 값을 자식 컴포넌트에서 변경하려고 할 때 생기는 에러이다. Vue의 데이터흐름은 '단방향'으로, 부모 -> 자식으로 넘겨주는 것은 가능하지만 자식 컴포넌트에서 값을 바꾸면 부모의 값이 변경되지 않는다. 따라서 자식에서 부모가 넘겨준 값을..

◽ 문법 // 화면에 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..

에러 TypeError: Cannot read properties of undefined (reading 'includes') TypeError: Cannot read properties of undefined (reading 'includes') 원인 includes를 처리할 변수를 선언도 하지 않은 상태였다. (❗️) 이런 실수는 이제 그만... 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.