일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 타입스크립트
- 커스텀
- typescript
- 2022
- 누구나 자료구조와 알고리즘
- react
- utilty type
- 티스토리꾸미기
- CSS
- TSDoc
- 폰트적용하기
- vue.js
- reactjs
- 리액트
- click and drag
- React.js
- 레이아웃쪼개기
- 반복줄이기
- 타입좁히기
- JS console
- returnType
- Chart.js
- 공통컴포넌트
- const 단언문
- javascript
- 타입선언
- 제네릭
- 개발콘텐츠
- 성능최적화
- NonNullable
- Today
- Total
목록Development/Vue.js (69)
몽땅뚝딱 개발자
각종 데이터의 포맷을 변경하기 위해 computed를 쓸 수도 있지만 한 번도 만들어보지 않은 filter를 사용하기로 했다. 날짜포맷 예제를 만들기 위해 Date 자료형을 simpleDateFormat을 사용하여 'yyyy-MM-dd' 형태로 바꾸려고했는데.. 자바스크립트는.. simpleDateFormat이 없네.. 그래서 다른 사람들은 어떻게 쓰나 찾아보니 moment.js를 많이 사용한다고 한다. 난... 어차피 예제용이라 그냥 하나씩 변경해주었다. ◽ 컴포넌트 옵션에서 사용하기 📄 HTML mustache 표현 안에 '|'(=파이프)를 사용하면 된다. {{ date | dateFormatFilter }} 📄 Script export default { data() { return { date: n..
토스트를 띄우려고 컴포넌트를 만들던 중, 메세지 하나 띄우는데 많은 작업이 필요없다고 판단하여 플러그인으로 만들었다. 실행되면 에 토스트용 가 추가되고 2초뒤에 사라지는 로직이다. 📄 plugins/toast.js import Vue from 'vue' const customToast = { install(Vue) { Vue.prototype.$_toast = function (msg) { removeToast() // 1. id가 'toast'인 div 생성 let toastDiv = document.createElement('div') toastDiv.setAttribute('id', 'toast') // 2. 태그안에 매개변수 msg를 append let textEl = document.create..
이 에디터를 적용하게 된 계기는 네이버 스마트에디터를 Vue에 적용하는 과정이 힘들었기 때문이다. html, css가 모인 폴더를 통째로 넣는 방식인데 일단 그렇게 구현하는게 spring에서는 익숙한 구성이지만 Vue는 아니다. 그리고 스마트에디터 git에서 Vue를 지원하는지에 대한 질문에 대답이 없었다. 직접 만들어야하나 고민을 하다가(재밌을 것 같음) 배보다 배꼽이 더 큰 상황이라 일단 킵하고 Vue2Editor를 찾았다. ◽ 설치하기 npm install vue2-editor ◽ 적용하기 에서 import로 VueEditor를 가져와서 components 옵션에 넣어준다. Toolbar에 필요없는 도구가 있어 커스텀해야하는 경우 아래와 같이 설정하면 된다. import { VueEditor } f..
◽ router.push(...) 히스토리 스택에 추가되어 사용자가 뒤로가기를 하는 경우 이전 URL로 이동한다. [방법 1.] router.push('/main/home') router.push({ path: '/main/home' }) router.push({ name: 'home', params: { username: 'vinch' } }) [방법 2.] let username = 'vinch' router.push(`/main/${username}`) router.push({ path: `/main/${username}` }) router.push({ name: 'home`, params: { username } }) ◽ router.replace() url을 새 항목으로 대체한다. push와 달..
📄 HTML 📋️️ 📋️️ 📄 JS 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
trello를 쓰면서 항상 궁금했던 Drag & Drop... vue-draggable도 있지만 직접 만들어보려고 츄라이해보았다. (🤗) 요소를 클릭한 상태에서 요소를 올렸을 때, 요소 간 간격이 벌어지거나 부드럽게 떨어지는 CSS는 추후에 추가해보려한다. 📄 HTML v-for로 요소를 감싸는 와 드래그가 가능한 요소를 뿌린다. 드래그가 가능한 요소들을 감싸는 곳(여기서는 class명이 'col'인 )에는 @drop 이벤트를 추가한다. 이 때, @dragenter와 @dragover에는 기본 동작을 막는 .prevent를 적용해주어야 @drop이 실행된다. 드래그가 가능해야하는 요소에는 draggable="true"를 추가해준다. {{ numItem.content }} 📄 JS 📄 CSS 개인적으로 공..
◽ 개요 부모와 자식 컴포넌트 사이의 데이터 전달은 일반적으로 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..