vue 썸네일형 리스트형 [Vue.js] v-model로 한글을 처리하는 방법에 대하여 INTRO vue.js에는 v-model이라는 양방향 바인딩 디렉티브가 있다. v-model은 한국어/중국어/일본어를 입력할 경우, 즉시 바인딩 되지 않는 현상이 있다. 이를 처리하는 방법에 대해 정리해본다. 0. 서론 - 일반적인 웹 페이지에서는 입력 후 submit 버튼을 클릭한다거나 하는 별도의 추가 동작이 대부분 이어지며, input 엘리먼트에서 focus를 잃는 순간 정상 바인딩 되므로 v-model로 사용해도 무방한 경우가 많다. - 그러나 화면에 즉각 반영되어야 할 필요가 있기에 이 글을 보고 계실것이다.. - 이 방법에 대해 고민해본 결과들을 정리해본다. 1. 대중적인 해결 방법 - 구글링해보면 아래와 같이 v-model 을 @input으로 대체하는 방법이 가장 많이 등장한다. (types.. 더보기 [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차.. 더보기 [spring boot+vue.js+mariaDB] 프로젝트 해보기-2(Spring boot 서버 구축) INTRO Spring boot 서버를 구축해볼것이다. User 테이블을 지난 포스팅에서 생성하였다. 해당 테이블 기반으로 서버를 만들어 보자. 1. DB 연동 -->DB와 연결이 잘 되는지 먼저 테스트할 것이다. --> application.properties 파일에 아래와 같이 DB정보를 적어준다. spring.datasource.driver-class-name=org.mariadb.jdbc.Driver spring.datasource.url=jdbc:mariadb://localhost:3306/test1 spring.datasource.username=root spring.datasource.password=root mybatis.type-aliases-package=com.gg.dto mybati.. 더보기 [spring boot+vue.js+mariaDB] 프로젝트 해보기-1(개발환경 구축) INTRO 1편으로 개발환경을 구축할 것이다. 서버로는 Spring boot, 프론트엔드는 Vue.js DB는 MariaDB를 사용한다. 궁극적으로 해볼 프로젝트는 단말 관리 프로젝트이다. 구체적으로 어떤 단말인지는 밝히기가 힘드니 양해 부탁.. 이 프로젝트는 미리 연습하는 프로젝트임. 나도 초보이기 때문에, 최대한 초보의 입장에서 따라하기 쉽게 글을 적을것이다. 틀린 부분이 보인다면 댓글을 주시길 바란다. 1. DB구축 - mariaDB 설치 --> 마리아디비를 설치한다. 설치 방법으로는 아래 포스팅을 참고한다. rangsub.tistory.com/94 [MariaDB] MariaDB(마리아디비) 설치하기 INTRO 마리아디비를 설치하는 과정. 마리아디비는 오픈 소스 RDBMS이다. MySQL과 동일한.. 더보기 [vue.js] vue.js란? 개발 환경 만들기 Evan you가 만들었다. 2014년 릴리즈를 시작으로 꾸준히 발전하는 자바스크립트 프레임워크. github.com/vuejs/vue vuejs/vue 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. - vuejs/vue github.com 발음 그대로 뷰(View)에 최적화된 프레임워크 컨트롤러 대신 View모델을 가지는 패턴으로 디자인.(M V VM 패턴) SPA(Single Page Application이다.) index.html이 1개. Routing 화면전환(Router가 따로 필요하다) 특징 1. Virtual DOM으로 빠른 렌더링 2. 경량 라이브러리(작은 용.. 더보기 이전 1 다음
