하수도키의 성장일기

개발일기/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을 ..

개발일기/Javascript

[Javascript] replace를 이용해 문자열을 치환하는 방법(How to replace a string in javascript)

JS - replace(regx) 오늘 포스팅할 주제는 자바스크립트를 이용해 문자열을 치환하는 방법이다.(How to replace a string in javascript) 우리는 코드를 작성하면서 일괄 수정할때 보통 CTRL + F로 찾은 다음 바꾸기를 하거나 일괄적으로 한번에 원하는 단어를 치환한다. 에디터에서 하는 기능을 자바스크립트에서는 어떻게 구현하는지 알아보자. replace 를 한국어로 치환한다고 정의해서 포스팅 글을 쓰겠다. 목차 1. replace 알아보기 2. replace 활용하기 전체 문자열 모두 치환하기 대소문자 구분하여 치환하기 전체 문자열 대소문자 구분없이 치환하기 replace 알아보기 replace 메서드는 원하는 패턴을 정해서 치환할 문자열에 적용해 문자열을 원하는 대로..

개발일기/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 컴포넌트..

개발일기/Javascript

디버깅에 유용한 콘솔(Console) 사용법 알아보기

개발도중 브라우저에서 디버깅으로 주로 사용하는 명령어는 consoel.log이다.(데이터 값을 확인할때 주로 사용한다.) 브라우저에서는 console.log 말고 다른 명령어를 사용하여 더 효율적인 디버깅을 알아보자. console.dir() 이 명령어를 사용하기 위한 객체를 만들어 보자. const infomation = { name : 'doki', phone : 010-0000-1111, location : 'Seoul' } console.log(infomation) console.dir(infomation) Object 라고 명시적으로 표시를 해줘서 정확한 타입을 알 수 있다. console.table() 이 명령어는 서버 응답으로 받은 긴 데이터를 확인할때 유용하다. const infomatio..

개발일기/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..