vuejs Vue JS에서 속성을 사용하는 간단한 계산기 [초보자] 이 기사는 아래 애니메이션과 유사한 이벤트를 사용하지 않고 일반 속성과 계산된 속성의 조합으로 사용하는 것만으로도 Vue JS에서 간단한 계산기를 만드는 것이 얼마나 쉬운지 보여줍니다. vue 템플릿에서 4개의 HTML 요소를 선언합니다. 1호용 옵션으로 4개의 피연산자( +, -, * ,/) 포함 2호용 그런 다음 이 구성 요소 내에서 4개의 속성을 선언합니다. data() 모델 내에서 3... programmingbeginnersvuejstutorial 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] Vue Router Vue Router란? Vue에서 지원하는 공식 라이브러리로 라우팅 기능을 구현 할 수 있게 도와주는 것이다. 라우팅이란? 웹 페이지 간의 이동방법을 말한다. 페이지를 이동할때 서버에 요청해서 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 페이지 이동시 클라이언트의 라우팅을 이용하여 화면을 갱신하는 것이다. 화면간의 전환을 매끄럽게 해준다. CDN 위 src 순서를 준수해야 한다.... vuejsvuejs [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 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에서 속성을 사용하는 간단한 계산기 [초보자] 이 기사는 아래 애니메이션과 유사한 이벤트를 사용하지 않고 일반 속성과 계산된 속성의 조합으로 사용하는 것만으로도 Vue JS에서 간단한 계산기를 만드는 것이 얼마나 쉬운지 보여줍니다. vue 템플릿에서 4개의 HTML 요소를 선언합니다. 1호용 옵션으로 4개의 피연산자( +, -, * ,/) 포함 2호용 그런 다음 이 구성 요소 내에서 4개의 속성을 선언합니다. data() 모델 내에서 3... programmingbeginnersvuejstutorial 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] Vue Router Vue Router란? Vue에서 지원하는 공식 라이브러리로 라우팅 기능을 구현 할 수 있게 도와주는 것이다. 라우팅이란? 웹 페이지 간의 이동방법을 말한다. 페이지를 이동할때 서버에 요청해서 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 페이지 이동시 클라이언트의 라우팅을 이용하여 화면을 갱신하는 것이다. 화면간의 전환을 매끄럽게 해준다. CDN 위 src 순서를 준수해야 한다.... vuejsvuejs [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 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