vuejs Vue.js + Google Places: 여러 입력 필드 자동 완성 경우에 따라 두 개 이상의 입력 필드에 장소 자동 완성 기능을 추가할 수 있습니다. 일반적인 예는 두 위치 사이의 이동 거리를 찾는 것입니다. 이 경우 사용자는 자동 완성 기능이 활성화된 두 개의 입력 필드를 갖게 됩니다. 단일 입력 필드에 대한 자동 완성 개체를 인스턴스화하는 방법을 살펴보겠습니다. 단일 입력 필드에 대한 자동 완성 배치 vue 템플릿에서 ref 속성으로 입력 필드를 정의합... vuejstutorialprogramming [axios] post, get, delete에 객체 전달하기 DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣어주면 된다. Axios - delete 요청 시 body에 데이터 넣는 법 출처 :... vuejsvuejs TIL# 156 서버 하나에서 백엔드 프론트엔드 같이 배포하기 아마존 lightsail을 처음 사용해보게 되면서 하나의 서버에서 backend, frontend를 같이 배포하게 되었다. 하나의 nginx에서 같이 배포를 하게 된거라 많은 시행착오가 있었고 시간이 오래 걸렸지만 앞으로는 절대 안 까먹을 것 같다😅 📌 IP가 하나이기 때문에 프론트 엔드 프로젝트에서 백엔드로 요청 보내는 uri를 프론트엔드와 같은 IP로 설정해주면 된다. 물론 백엔드 api... TILgunicornawsNginxdjangovuejsNginx spring boot + vue.js 환경 구성하기 그러다 기회가 생겨 웹 개발을 잠시하게 되었는데 spring boot안에 vue.js를 함께 쓰는 아키텍처로 구성이 된 프로젝트였다. 프리랜서에 도움이 받아 개발을 진행하게 되었는데 그때 당시에는 너무 모르는게 많아 원래 그런가보다 하고 일을 진행하다가 프로젝트가 마무리되고 나서 spring boot에 vue가 들어가면 router를 사용 할 수 없는건가? 하는 의구심이 들어 찾아보았고 답을... vuejs스프링부트vuejs [basic] Vuex? Vuex 란? 복잡한 애플리케이션의 컴포너트들을 효율적으로 관리하는 Vuex 라이브러리 Vuex 라이브러리 주요 속성은 state(data), getter(computed), mutation(methods), actions(비동기 methods) 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태관리 패턴이자 라이브러리 Vuejs 중고급 개발자로 성장하기 위한 필수 관문 vuex로 해결할 수... vuexvuejsvuejs [기업협업] 3주차 - 메디스트림 1. 2주차 작업 내용 slot 구조 변경(아래 와 같이) 버튼 UI 변경 디테일 에디터 버튼 위에 비율 버튼들이 뜨게끔하는 것이 덜 불편할 거 같다. 굳이 뒤로 되돌아가는 번거로움을 줄일 수 있다. 즉,ratio slot이 imageEditor template 하위로 들어가는 게 좋을 거 같음 ->slot 구조 변경 이름 구체화 -> 컴포넌트 이름, 변수 이름 등도 변경 - 라이브러리 이름... 포토에디터메디스트림corpper js오픈소스라이브러리fabric js기업협업vuejscorpper js Vuejs 토이프로젝트 시작하기 version java: 13.0.1 nodejs: 12.18.4 npm: 6.14.6 vuejs: 2.6.11 vscode Terminal 열어서 vue cli 설치 프로젝트 설치 경로로 이동 후 프로젝트 설치 프로젝트 이동 후 실행... vuejsvuejs [VueJS] 데이터 바라보기 - computed computed는 vue 공식 홈페이지에서 잘 설명이 되어있다. 제가 computed를 사용해야한 이슈로는 총 3개의 컴포넌트가 존재했습니다. (1) 메뉴 컴포넌트 (2) 메뉴 수정 컴포넌트 (3) 메뉴 추가 컴포넌트 1. 메뉴 추가 컴포넌트에서 메뉴를 추가시킨다. 2. 해당 메뉴는 메뉴 컴포넌트와 메뉴수정 컴포넌트에 반영되어야 한다. 기존의 vuex의 store를 활용하고 있던 프로젝트이기... vuejscomputedcomputed Vuex의 store.js state 전역 데이터 저장소 getters computed처럼 state의 데이터를 계산하는 함수 mutations state의 값을 변경 actions mutations와 유사하나 비동기방식. 보통 여기에서 조건체크를 하고 mutations 호출... vuejsvuejs [Vue.js] input 태그 value와 :value 차이 1. value value의 경우, 뷰의 input 창 안에 "originHeight" 하드코딩으로 나타남 2. :value :value의 경우 뷰의 input 창 안에 computed 단계에서 불러온 originHeight 값(data)으로 나타남 TIP) @change.prevent="$_hValidateHn" @change는 해당 input 태그 내 값이 변경됐을 경우 $_hValida... vuejsSpringSpring BootstrapVue 스타일이 효과가 없어서 곤란해요. BootstrapVue에 창을 설치하고 싶은데 문서의 출처를 시험해 봤는데 밑에 있는 목록과 체크 상자의 양식이 작동하지 않아서 곤란합니다 검사기에서 보기에 마땅한class가 지정되지 않았습니다.원래form-control 적용을 희망하는 곳custom-select류를 지정했다. 같은 증상을 보인 이슈가 발견됐는데, 이에 따라 부유custom-select반은 정상인 것 같다. form-cont... Bootstrapvuejsbootstrapvuetech Nuxt.js의 Vuex의 점포 분할에 따른 구조 구성 요소 간의 값 교환이 필요 없음 구성 요소의 상업 논리를 상점으로 잘라내기 Vuex에서 state로 값을 유지하고 Getter로 구성 요소 측면에서 가져옵니다.mutaations를 통해 값을 변경하여 actions에서 API 통신과 외부 저장소에 접근하는 등 mutaations에서 무책임하게 처리합니다. 상점을 이용하면 이런 구성 요소의 상업 논리가 상점에 집중돼 관리가 쉬워진다는 것이... Nuxt.jsvuejsVuexfrontendstoretech [Jest-puppeteer] 테스트에 사용된 사용자 정의 속성을 추가하고 가져오는 방법은 무엇입니까? Vue.js의 브라우저 테스트에서 Jest-puppeteer를 사용했습니다. 만약에 id와class를 테스트에 사용되는 요소의 목표로 삼으면 규격이 변경될 때 어떤 요소가 테스트와 관련이 있는지 모르고 예상치 못한 부분에 오류가 발생할 수 있습니다.이러한 상황을 피하기 위해서는 사용자 정의 속성을 추가해야 한다. 저는 예전에 Cypress의 설치data-cy를 접해 봤습니다. 사용자 정의 속... vuejsTestJestPuppeteertech [Jest-puppeteer] 테스트에서 자주 사용하는 사용자 정의 연결 일람 Vue.js의 브라우저 테스트에서 Jest-puppeteer를 사용했습니다. 상기 보도에 추가된 형식なぜ必要で、どういう時に使うのか의 구체적인 예로 소개한다.주로 이 글에서 제작하고 인용한 코드(링크 게재)를 참고해 동작을 확인했다. waitForSelector에서 지정한 요소가 보이기 전에 설치를 기다릴 수 있지만 요소가 보이지 않으면 오류가 발생하고 테스트가 정지됩니다. 원소가 존재할 때(... vuejsTestJestPuppeteertech [Vue.js] 상태 관리 라이브러리 Pinia 정보 Vue3이 공식 버젼이 된 지 두 달이 지났고 드디어 새로운 공식 상태 관리 라이브러리인 Pinia를 접하게 돼서 정리해봤습니다. Pinia는 Vue입니다.js를 위한 상태 관리 라이브러리입니다. Vue.js를 대상으로 하는 상태 관리 라이브러리에 대해 말하자면 Vuex가 가장 생각나는 부분이다. Pinia에는 Vuex5를 대상으로 하는 아이디어가 많이 들어갔고 현재의 Vuex가 부족한 부분... Vue.jsvuejsPiniatech
Vue.js + Google Places: 여러 입력 필드 자동 완성 경우에 따라 두 개 이상의 입력 필드에 장소 자동 완성 기능을 추가할 수 있습니다. 일반적인 예는 두 위치 사이의 이동 거리를 찾는 것입니다. 이 경우 사용자는 자동 완성 기능이 활성화된 두 개의 입력 필드를 갖게 됩니다. 단일 입력 필드에 대한 자동 완성 개체를 인스턴스화하는 방법을 살펴보겠습니다. 단일 입력 필드에 대한 자동 완성 배치 vue 템플릿에서 ref 속성으로 입력 필드를 정의합... vuejstutorialprogramming [axios] post, get, delete에 객체 전달하기 DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣어주면 된다. Axios - delete 요청 시 body에 데이터 넣는 법 출처 :... vuejsvuejs TIL# 156 서버 하나에서 백엔드 프론트엔드 같이 배포하기 아마존 lightsail을 처음 사용해보게 되면서 하나의 서버에서 backend, frontend를 같이 배포하게 되었다. 하나의 nginx에서 같이 배포를 하게 된거라 많은 시행착오가 있었고 시간이 오래 걸렸지만 앞으로는 절대 안 까먹을 것 같다😅 📌 IP가 하나이기 때문에 프론트 엔드 프로젝트에서 백엔드로 요청 보내는 uri를 프론트엔드와 같은 IP로 설정해주면 된다. 물론 백엔드 api... TILgunicornawsNginxdjangovuejsNginx spring boot + vue.js 환경 구성하기 그러다 기회가 생겨 웹 개발을 잠시하게 되었는데 spring boot안에 vue.js를 함께 쓰는 아키텍처로 구성이 된 프로젝트였다. 프리랜서에 도움이 받아 개발을 진행하게 되었는데 그때 당시에는 너무 모르는게 많아 원래 그런가보다 하고 일을 진행하다가 프로젝트가 마무리되고 나서 spring boot에 vue가 들어가면 router를 사용 할 수 없는건가? 하는 의구심이 들어 찾아보았고 답을... vuejs스프링부트vuejs [basic] Vuex? Vuex 란? 복잡한 애플리케이션의 컴포너트들을 효율적으로 관리하는 Vuex 라이브러리 Vuex 라이브러리 주요 속성은 state(data), getter(computed), mutation(methods), actions(비동기 methods) 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태관리 패턴이자 라이브러리 Vuejs 중고급 개발자로 성장하기 위한 필수 관문 vuex로 해결할 수... vuexvuejsvuejs [기업협업] 3주차 - 메디스트림 1. 2주차 작업 내용 slot 구조 변경(아래 와 같이) 버튼 UI 변경 디테일 에디터 버튼 위에 비율 버튼들이 뜨게끔하는 것이 덜 불편할 거 같다. 굳이 뒤로 되돌아가는 번거로움을 줄일 수 있다. 즉,ratio slot이 imageEditor template 하위로 들어가는 게 좋을 거 같음 ->slot 구조 변경 이름 구체화 -> 컴포넌트 이름, 변수 이름 등도 변경 - 라이브러리 이름... 포토에디터메디스트림corpper js오픈소스라이브러리fabric js기업협업vuejscorpper js Vuejs 토이프로젝트 시작하기 version java: 13.0.1 nodejs: 12.18.4 npm: 6.14.6 vuejs: 2.6.11 vscode Terminal 열어서 vue cli 설치 프로젝트 설치 경로로 이동 후 프로젝트 설치 프로젝트 이동 후 실행... vuejsvuejs [VueJS] 데이터 바라보기 - computed computed는 vue 공식 홈페이지에서 잘 설명이 되어있다. 제가 computed를 사용해야한 이슈로는 총 3개의 컴포넌트가 존재했습니다. (1) 메뉴 컴포넌트 (2) 메뉴 수정 컴포넌트 (3) 메뉴 추가 컴포넌트 1. 메뉴 추가 컴포넌트에서 메뉴를 추가시킨다. 2. 해당 메뉴는 메뉴 컴포넌트와 메뉴수정 컴포넌트에 반영되어야 한다. 기존의 vuex의 store를 활용하고 있던 프로젝트이기... vuejscomputedcomputed Vuex의 store.js state 전역 데이터 저장소 getters computed처럼 state의 데이터를 계산하는 함수 mutations state의 값을 변경 actions mutations와 유사하나 비동기방식. 보통 여기에서 조건체크를 하고 mutations 호출... vuejsvuejs [Vue.js] input 태그 value와 :value 차이 1. value value의 경우, 뷰의 input 창 안에 "originHeight" 하드코딩으로 나타남 2. :value :value의 경우 뷰의 input 창 안에 computed 단계에서 불러온 originHeight 값(data)으로 나타남 TIP) @change.prevent="$_hValidateHn" @change는 해당 input 태그 내 값이 변경됐을 경우 $_hValida... vuejsSpringSpring BootstrapVue 스타일이 효과가 없어서 곤란해요. BootstrapVue에 창을 설치하고 싶은데 문서의 출처를 시험해 봤는데 밑에 있는 목록과 체크 상자의 양식이 작동하지 않아서 곤란합니다 검사기에서 보기에 마땅한class가 지정되지 않았습니다.원래form-control 적용을 희망하는 곳custom-select류를 지정했다. 같은 증상을 보인 이슈가 발견됐는데, 이에 따라 부유custom-select반은 정상인 것 같다. form-cont... Bootstrapvuejsbootstrapvuetech Nuxt.js의 Vuex의 점포 분할에 따른 구조 구성 요소 간의 값 교환이 필요 없음 구성 요소의 상업 논리를 상점으로 잘라내기 Vuex에서 state로 값을 유지하고 Getter로 구성 요소 측면에서 가져옵니다.mutaations를 통해 값을 변경하여 actions에서 API 통신과 외부 저장소에 접근하는 등 mutaations에서 무책임하게 처리합니다. 상점을 이용하면 이런 구성 요소의 상업 논리가 상점에 집중돼 관리가 쉬워진다는 것이... Nuxt.jsvuejsVuexfrontendstoretech [Jest-puppeteer] 테스트에 사용된 사용자 정의 속성을 추가하고 가져오는 방법은 무엇입니까? Vue.js의 브라우저 테스트에서 Jest-puppeteer를 사용했습니다. 만약에 id와class를 테스트에 사용되는 요소의 목표로 삼으면 규격이 변경될 때 어떤 요소가 테스트와 관련이 있는지 모르고 예상치 못한 부분에 오류가 발생할 수 있습니다.이러한 상황을 피하기 위해서는 사용자 정의 속성을 추가해야 한다. 저는 예전에 Cypress의 설치data-cy를 접해 봤습니다. 사용자 정의 속... vuejsTestJestPuppeteertech [Jest-puppeteer] 테스트에서 자주 사용하는 사용자 정의 연결 일람 Vue.js의 브라우저 테스트에서 Jest-puppeteer를 사용했습니다. 상기 보도에 추가된 형식なぜ必要で、どういう時に使うのか의 구체적인 예로 소개한다.주로 이 글에서 제작하고 인용한 코드(링크 게재)를 참고해 동작을 확인했다. waitForSelector에서 지정한 요소가 보이기 전에 설치를 기다릴 수 있지만 요소가 보이지 않으면 오류가 발생하고 테스트가 정지됩니다. 원소가 존재할 때(... vuejsTestJestPuppeteertech [Vue.js] 상태 관리 라이브러리 Pinia 정보 Vue3이 공식 버젼이 된 지 두 달이 지났고 드디어 새로운 공식 상태 관리 라이브러리인 Pinia를 접하게 돼서 정리해봤습니다. Pinia는 Vue입니다.js를 위한 상태 관리 라이브러리입니다. Vue.js를 대상으로 하는 상태 관리 라이브러리에 대해 말하자면 Vuex가 가장 생각나는 부분이다. Pinia에는 Vuex5를 대상으로 하는 아이디어가 많이 들어갔고 현재의 Vuex가 부족한 부분... Vue.jsvuejsPiniatech