하수도키의 성장일기

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#4 ($attrs, $listeners)

2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) 2021/01/28 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#2 (다수의 v-model 사용하기) 2021/01/31 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#3 (v-model custom modifiers) 이번 포스팅에서는 $attrs 가 vue3에서 어떻게 변했는지 살펴보자. vue2에서는 HTML attributes들만 포함했지만 vue3에서는 HTML attributes뿐 아니라 listeners, classes, styles까지 다 포함한다. 이러한 개념을 배우면서 부모에서 자식 컴포넌트로 e..

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#3 (v-model custom modifiers)

v-model 수식어(v-model modifiers) 지난 포스팅에서 2개의 v-model을 사용하는 법을 살펴봤다. 이번 포스팅에서는 vue3에서 v-model 커스텀 수식어(modifiers)를 사용하는 것을 살펴보겠다. v-model 수식어 살펴보기 vue2에서 사용했던 v-model 수식어들도 vue3에서 사용이 가능하다. .lazy : input 이벤트 대신 change 이벤트를 받는다. .number: 문자를 유효한 숫자로 변경한다. trim : 공백을 없애준다. v-model 커스텀 수식어 살펴보기 이전 포스팅에 만들었던 SalutationName 컴포넌트를 이어서 사용한다. capitalize라는 수식어를 만들어 보겠다. v-model:model 선언 후에 . 추가한 다음 수식어를 적어주..

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#2 (다수의 v-model 사용하기)

2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) Vue3가 나오면서 변한 것들이 있는데 그중에서 v-model을 한번 살펴보자. 이번 포스팅에서는 간단하가 vue2에서 v-model과 vue3에서 v-model 에 차이점과 기본 형식에 대해 살펴보겠다. 다음 포스티은 v-mod hasudoki.tistory.com 다수의 v-model 연결하기(Multi v-model bindings) 지난 포스팅에서 vue3에서 v-model 사용하는 일반적인 방법을 살펴봤고, 기본 input과 event listeners를 바인딩하는 방법을 살펴봤다. 이번 포스팅에..

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점)

Vue3가 나오면서 변한 것들이 있는데 그중에서 v-model을 한번 살펴보자. 이번 포스팅에서는 간단하가 vue2에서 v-model과 vue3에서 v-model에 차이점과 기본 형식에 대해 살펴보겠다. 다음 포스티은 v-model를 여러개 쓸 때랑 modifiers에 대해 글을 써보겠다. 새로운 v-model(The new v-model) v-model을 애플리케이션의 상태에 input 입력값을 쉽고 빠르게 얻을 수 있고, 활용이 가능하다. v-model을 사용하여 부모는 입력되는 값을 받을 수 있다. vue3에서 다수의 바인딩을 할 때 더 강력하고 유연하게 설계가 되었다. Navite inputs으로 알아보자(Kicking it off with Native inputs) vue2에서 v-model을 ..

개발일기/Vue.js

[Vue.js] vue-router로 정적 라우트를 만들어보자.

이번에는 Vue Router로 라우트 활용 방법과 동적 라우트를 사용하는 방법에 대해 알아보자. 매번 Vue Cli로 하다 보니 Vue-Router가 자동 설정으로 사용하고 있었는데 이번에 codesandbox를 사용하면서 Vue-Router 처음 설정하는 법부터 살펴보겠다. 우선 codesandbox.io 에 들어가서 Vue2 로 설정해보자. 자세한 사용법은 구글 구글링으로 검색해보자. Vue-router 설치 저기 동그라미 친 부분에 vue-router를 검색해서 추가하자. npm install vue-router 라고 보면 된다. 또는 yarn add vue-router이다. 프로젝트 구조는 Home, Blog 페이지 2개로 예제를 살펴보겠다. views폴더에 Home, Blog 페이지를 만들고 A..

개발일기/Vue.js

[Vue.js] Vue에서 SVG 사용하는 방법(How to use svg in vue app)

Vue에서 .png,.jpg 등의 이미지 파일 대신 svg를 사용하는 방법을 살펴보자. medium.com/javascript-in-plain-english/how-to-use-svg-icons-in-your-vue-app-6e2c30865d7c 이 포스팅을 보고 의역을 하면서 여러 가지 참고 자료를 정리한 포스팅이다. 예전에는(그리고 현재까지) 웹사이트에 아이콘(이미지)를 삽입하려면 .png, .jpg 파일들을 저장해서 불러오는 방식이다. 만약 보여줘야 되는 아이콘들이 많아 질수록 많은 .png,.jpg 파일들이 필요하고 이걸 다 불러와야 된다. 운이 나쁘면, 즉 네트워크가 갑자기 느려질 경우 웹사이트에서 아이콘을 부분적으로 불러오면서 정상적으로 작동되지 않는 느낌을 받을 수 있다. 시간이 지나면서 이..

개발일기/Vue.js

[Vue.js] 모달 컴포넌트(Modal Component) 만들기

이번에는 Vue.js에서 모달 컴포넌트를 만드는 방법을 살펴보겠다. 항상 궁금했다. 모달 팝업, 모달 컴포넌트 등등 모달을 부르는 말을 듣고 대충 어떤건지 감이 오는데 정확히 어떤건지 몰라서 찾아봤다. 모달(Modal)이란? 간단하게 설명하면, 자식 윈도우에서 부모 윈도우로 돌아기전에 뜨는 창을 말한다. 예를 들면, '정말 종료하시겠습니다?','뒤로 가시겠습니까?' 이런 대화의 종류이다. 웹에서는 어떤 액션을 취한 뒤 알려주는 용도나, 긴급상황을 알려주는 용도 등으로 많이 사용 된다. 개요 App, Content, ModalView 컴포넌트를 생성하기 버튼 누르면 모달이 보여지고 컨텐츠 밖을 클릭하면 사라진다. App 컴포넌트 만들기 Content, ModalView 컴포넌트..

개발일기/Vue.js

[Vue.js] textarea 자동 높이 조절 하는법(autosize)

textarea를 사용할때 내용 길이에 따라 자동으로 높이가 조절 되는 방법을 살펴보자. 개요 Vue를 기반으로 설명한다. 총 3개의 방법을 알려준다. 이 포스팅은 번역/의역/오역 다수 같으므로 이해가 되지 않거나 자세히 알고 싶으면 아래 링크를 통해 살펴보자. Vuejs-auto-size 1번째 방법 : window.addEventlistener 사용 // 자동 높이 조절을 하고 싶은 textarea가 있는 컴포넌트 // 여기서는 ResizeByClass.vue 이다. // auto-resize.js function resize() { this.style.height = "auto"; this.style.height = `${this.scrollHeight}px`; } export const setRe..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증 (#7. 자동 로그인)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#5. 유저 로그아웃)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#4. 유저 로그인)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..