Dev/[Vue.js] 썸네일형 리스트형 [Vue.js] v-model로 한글을 처리하는 방법에 대하여 INTRO vue.js에는 v-model이라는 양방향 바인딩 디렉티브가 있다. v-model은 한국어/중국어/일본어를 입력할 경우, 즉시 바인딩 되지 않는 현상이 있다. 이를 처리하는 방법에 대해 정리해본다. 0. 서론 - 일반적인 웹 페이지에서는 입력 후 submit 버튼을 클릭한다거나 하는 별도의 추가 동작이 대부분 이어지며, input 엘리먼트에서 focus를 잃는 순간 정상 바인딩 되므로 v-model로 사용해도 무방한 경우가 많다. - 그러나 화면에 즉각 반영되어야 할 필요가 있기에 이 글을 보고 계실것이다.. - 이 방법에 대해 고민해본 결과들을 정리해본다. 1. 대중적인 해결 방법 - 구글링해보면 아래와 같이 v-model 을 @input으로 대체하는 방법이 가장 많이 등장한다. (types.. 더보기 [Javascript+Vue.js] Scrollbar 여부에 반응하는 엘리먼트 만들기(with Class and Style Binding) INTRO 웹 페이지를 개발하다보면, 유효성 체크를 위해 기존 엘리먼트에 별도의 아이콘을 배치하는 경우가 있다. 본 포스팅에서는 아이콘과 스크롤바가 겹치는 현상을 해결한 경험을 공유한다. 1. 하고자 했던 것 - 위의 네이버 예시를 보면, 자물쇠 모양은 해당 필드의 유효성 통과 유무에 따라 달라진다. - 프로젝트 진행 도중, - input 이 아닌 text area에 해당 기능을 똑같이 구현해야 할 일이 생겼다. - 그래서 v-model로 바인딩 된 변수를 감지하며 유효성 체크 로직을 적용하였고, - 유효성 검증 통과 여부에 따라 동적으로 style을 다르게 적용하여 해결. :class="{ 'check-ok': isValid === true, 'check-false': isValid === false,.. 더보기 [Vue.js] vue 3.0 + Typescript 에서 vue-router적용기 1. 하고자 했던 것 - vue3.0과 typescript를 사용한 개발을 공부해보고자 프로젝트를 생성했다. - 프로젝트 생성 커맨드는 아래와 같다. npm init vite@latest - 생성 후 이것 저것 테스트 해보던 도중, - router 설정을 아무리 맞게 했는데도 정상 동작하지 않는 현상이 있었다. - package.json, main.ts, router/index.ts 설정 방법은 pass 2. 문제의 시작 - @ = 프로젝트의 루트 디렉토리를 지정하는 문법으로 알고있었고, vue2사용시에는 이 부분에서 문제가 없었기에.. 당연하게 사용했다. - 그런데 위 에러처럼 찾을 수 없다는 에러가 계속 발생하였다. - 경로를 @/~ 에서 ../~ 로 변경하니 정상 동작하였고, 경로문법에서 @를 사용.. 더보기 [Vue.js] vue 2.0 에서 LifeCycle에 대한 삽질 후기 (Error in mounted hook) 1. 하고자 했던 것 - 회사에서 하는 프로젝트를 진행 중에 Vue.js 2.0 버전 내 echart 라이브러리를 도입해야 하는 일이 생겼다. - 회사에서 진행하는 프로젝트는 특이하게도 구 버전인 Vue 2.0 버전과.. 2.0버전과 호환성을 보장할 수 없는 Typescript를 사용하여 개발중이다. - 무튼.. - 도입을 위해 echart라이브러리를 dependency에 추가했다. - 이후 component화를 위해 아래와 같은 .vue 파일을 만들었다. - 도넛 차트를 그려보고 싶었고, view파일에서는 Props 로 형식에 맞는 option 을 전달만 하면 되게 하고싶었다. - 아래는 전달하는 View 파일에서 Component를 사용하는 모습 2. 문제의 시작 - 해당 option변수를 props.. 더보기 [vue.js] view에 바인딩 된 '배열' 변수를 업데이트 할 때, 감지 안되는 문제 1. 기존 하려고 했던 기능 우선 컨트롤하고자 하는 변수는 아래와 같이 선언되어있다. isError:boolean = false view에 아래와 같이 notiMessage를 띄워주기 위해, v-if로 감지하고 있었다. {{ notiMessage }} script에서 이 isError 플래그를 변경시킬 때는 아래와 같이 변경했다. // 에러일 경우 this.isError = true; or // 에러가 아닐 경우 this.isError = false; 위 코드는 잘 동작했다. 2. 문제의 시작 그런데 이 isError 변수를 2차원 배열 형식으로 변경하고 싶어 아래와 같이 변경하였다. 기능적인 이유로 인해 1차원 배열로 변경하였고, flag 변수와 notiMessage변수를 따로 가져가지 않기 위해 2차.. 더보기 [Vue.js] parent <-> child간 양방향 바인딩(with custom Tag) 방법1. .sync를 사용하기 parent child v-model 활용하기 parent child {{ inputNm }} {{ validCheck }} 더보기 [Vue.js] Vue Axios 적용해보기 - Axios는 Ajax 처럼, 서버와 비동기 통신을 해주는 라이브러리이다. - 현재 정식 버전이 릴리즈 되지 않았으나, 인기가 좋음. - 특징으로 요청 취소와 TypeScript를 지원하는 것이다. - Promise API를 활용한다. 1. axios와 vue-axios 설치 npm install --save axios vue-axios 2. import import Vue from 'vue'; import Vuex from 'vuex'; import axios from 'axios'; import VueAxios from 'vue-axios'; Vue.use(Vuex); Vue.use(VueAxios, axios); 3. 사용 방법 아래와 같이 get/post/delete 등의 헤더를 붙여 서버와 통.. 더보기 [Vue.js] Vuex 를 적용해보기 0. Vuex 설치. npm install --save vuex 명령어를 터미널에 입력 이후 설치가 완료되면 프로젝트의 package.json을 열어본다. 아래처럼 종속성이 추가되어있으면 성공이다. "dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "vue": "^2.6.11", "vue-axios": "^3.2.4", "vuex": "^3.6.2" }, 1. Vuex는 왜 필요한가? -> 복잡한 App에서 컴포넌트의 갯수가 많아지면 컴포넌트 간에 데이터 전달이 어려워짐. -> 중앙 집중화된 상태 정보 관리가 필요하고, 상태 정보가 변경되는 상황과 시간을 추적해야 함 -> 컴포넌트에서 상태 정보에 안전하게 접근가능 2. Vuex 개념 State : .. 더보기 이전 1 2 다음
