vue.js [Vue.js] vue devtools not detected 해결방법 크롬 브라우저 기준 오른쪽 상단 확장 프로그램에서 vue.js devtools 옵션 더보기 클릭(세로점 세개) -> 확장 프로그램 관리 -> 파일 URL에 대한 엑세스 허용 체크 예시 2.x 버전 압축버전 사용하지 않았을 때 문제 해결되었다는 사람들이 많았다. 어떤 사람은 개발자 도구에서 테마 변경하고 재시작 했을 경우 되었다고 한다.. 저는 cdn 변경으로 해결 되었습니다..... vue.jsvue devtools not detectedvue devtools not detected [백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기 v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페이지에서 사용자가 입력한 데이터(텍스트, 선택값 등등)를 Vue로 읽어오려면 v-model 디렉티브를 사용하면 됩니다. Vue 관점에서 봤을 때 웹 페이지로부터 데이터를 읽어오기도... vue.js프론트엔드vue.js [Vue2] Antd으로 custom validator 만들기 Vue2 AntDv 1.7.8 antd는 기본으로 편하게 사용할 수 있는 validator를 제공해준다 Vue.js 에서는 위와 같이 속성값을 주어서 사용하면 된다 antd에서 기본으로 제공하는 type은 다음과 같다 ✏️ Type ⬆️ 이런 형태로 속성값을 입력하면 알아서 입력 중 바로바로 유효성 체크를 해준다 (너무 편해 ...!!) 그러면 이번엔 기본으로 제공해주는 validator 이... FEvue.jsantdFE [백견불여일타/Vue.js] 5장 - 이벤트 처리 이벤트 v-on 지난 장에서는 v-model를 활용해서 페이지에서 데이터를 가져오는 법에 대해 공부했습니다. 이번 시간에는 vue에서 v-on을 활용하여 이벤트 처리하는 법에 대해 공부합니다. v-on 디렉티브는 Vue 메소드를 실행시키는 이벤트 핸들러입니다. 여기서 이벤트란 사용자로부터의 키 입력, 클릭 등의 조작을 의미합니다. 사용자의 조작을 감지하여 특정 메소드를 실행시켜주는 것이 v-... vue.js프론트엔드vue.js [백견불여일타/Vue.js] 6장 - 조건문 & 반복문 4/1부터 Spring framework를 공부를 시작했습니다. 이 얘기를 지금 vue 포스팅하는 시점에 왜 언급을 하냐면은, 곧 vue를 활용하여 to do list와 게시판 토이 프로젝틀를 할 예정이기 때문입니다. 프론트엔드 공부하는 겸에 spring으로 백 단을 구축해놓으면 더 간지날 것 같습니다. 조건 반복 v-if v-for 이번시간에는 Vue를 활용하여 조건을 만족했을 때 태그가 ... vue.js프론트엔드vue.js [Vue.js] Intro 웹 프로그래밍은 '프론트엔드(Front-end)' 그리고 '백엔드(Back-end)', 이렇게 크게 2가지로 나누어 생각할 수 있다. 정리해보면, 프론트엔드는 웹 페이지에서 눈에 보이는 것을 담당하고, 백엔드는 웹페이지 상에서는 바로 볼 수 없는 데이터 처리를 담당한다고 할 수 있다. 웹 프로그래밍 시 '개발자 도구'를 사용하면 보다 더 편리하고 빠르게 작업을 진행할 수 있다. CSS, Ja... vue.jsvue.js Vue - 프로젝트 회고 (2) (1) 에 이어서 이번 포스팅에서는 프로젝트에서 사용했던 Flux 패턴에 대해서 소개하고자 한다. 그를 위해 사전지식부터 차근차근 정리하려고 한다. Vue 나 React 의 경우 무수히 많은 컴포넌트로 구성되어 있다. 데이터를 관리하기 위한 상태관리 패턴인 Vuex는 React의 Flux 패턴에서 영향을 받았다고 한다. MVC 패턴의 복잡한 데이터 흐름의 문제를 해결하는 개발패턴이다. 1. ... vue.jsvue.js [ Vue.js ] webpack-project npx degit 'github 프로젝트 경로' '복제할프로젝트이름' * npx degit == git clone git clone와 다르게 버전이 삭제된 상태로 프로젝트를 복제하여 리파짓토리를 받아옴 [ 새로운 프로젝트 생성 유용 ] npm i vue@next - 3 version install [ 개발 의존성 install ] npm i -D vue-loader@next - 3 versi... vue.jsvue.js [Vue] 3. Composition API, 넌 도대체 뭐냐! (feat. Vue.js 3) 2020년 9월 19일, 오랜 기다림 끝에 vue-next, vue.js 3(이하 Vue3)가 정식 릴리즈 되었습니다. 그로부터 1년이 지났지만 아직도 사용하기엔 많은 라이브러리나 플러그인들이 Vue3을 지원을 해주지 않고있습니다. 과연 이 변화가 Vue를 더 나은 생태계를 가지게 할지, 다른 라이브러리처럼 역사 속으로 사라지게할지 Vue를 사용하는 개발자로써 궁금하네요. 에서 달라진 점은 ... vuevue.jsvue 24. watch 캡틴판교 장기효님의 를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. IDE: Visual Studio Code 크롬 뷰 개발자 도구: Vue.js devtools 데이터의 변화에 따라 특정 로직을 실행할 수 있는 뷰 인스턴스의 속성이다. 실습을 통해 알아보자. 1. 버튼을 누르면 숫자가 증가하도록 만들자. 'increase'라는 버튼을 누르면, 'num'이라는 데이터... vue.jsvue.js 💡뷰 템플릿 뷰의 템플릿은 HTML,CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다. 데이터 바인딩은 HTML화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않을 때, v-once 속성을 사용한다. 아이디, 클래스, 스타일 등의 HTML속성 값에 뷰 데이... TILvue.jsTIL 2. 기존 웹 개발 방식 캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. 처음이니까 기본 단축키, 자동완성, Live Server 실행을 자세히 캡쳐해두었다. visual studio code visual studio code plugin Live Server Vue.js 라는 프레임워크 없이, 기존 웹 개발 방식으로 코딩해보자. 기본 htm... vue.jsvue.js [ Vue.js ] what about Vue.js? ( using Vscode ) 🎶 Vetur - .vue 하일라이팅 형태 플러그인 npm install -g @vue/cli === npm i -g @vue/cli vue upgrade --next - vue.js project upgrade cli version # terminal in Vscode vue create 'projectName' - 프로젝트 생성... workvue.jsvue.js 4. Reactivity 코드 라이브러리화 하기 캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. 지난 포스팅에서 객체의 속성을 변경하는 Object.defineProperty()를 작성했다. 이를 라이브러리화 한 것을 기록한다. 이제 init()이라는 함수가 정의 되었다. init()함수의 기능은 2가지다. viewModel 객체의 str의 접근했을 때의 동작과 할... vue.jsvue.js [Vue.js]Routing 정리(2) 선택한 태그에 생기는 class 예를 들어, 운영하는 서비스 nav에 중학교, 고등학교 라우터 링크 두 가지가 있다. 이때 중학교를 선택한 상태면 개발자 도구로 중학교 라우터 링크를 살펴볼 때 router-link-active와 router-link-exact-active 두 클래스를 확인할 수 있다. router-link-active 선택된 router-link와 이 선택된 router-l... routerroutingvue.jsrouter Vue.js 라이브러리 추천 목록 유용하게 사용하는 Vue 라이브러리 화면 우측의 Scroll의 경우 시스템 Scroll 디자인을 사용해도 디자인상 큰 문제는 없지만, 화면 안쪽에 overflow을 넣어 만든 element에 시스템 Scroll이 생길 경우 디자인을 해치는 경우가 많았다. 이럴 경우 Scroll의 디자인을 커스텀해서 넣어줄 경우 사이트의 완성도가 올라간다. vue bar 적용 전 후, 확실히 완성도가 올라간걸... 프론트엔드라이브러리vue.jsvue.js
[Vue.js] vue devtools not detected 해결방법 크롬 브라우저 기준 오른쪽 상단 확장 프로그램에서 vue.js devtools 옵션 더보기 클릭(세로점 세개) -> 확장 프로그램 관리 -> 파일 URL에 대한 엑세스 허용 체크 예시 2.x 버전 압축버전 사용하지 않았을 때 문제 해결되었다는 사람들이 많았다. 어떤 사람은 개발자 도구에서 테마 변경하고 재시작 했을 경우 되었다고 한다.. 저는 cdn 변경으로 해결 되었습니다..... vue.jsvue devtools not detectedvue devtools not detected [백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기 v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페이지에서 사용자가 입력한 데이터(텍스트, 선택값 등등)를 Vue로 읽어오려면 v-model 디렉티브를 사용하면 됩니다. Vue 관점에서 봤을 때 웹 페이지로부터 데이터를 읽어오기도... vue.js프론트엔드vue.js [Vue2] Antd으로 custom validator 만들기 Vue2 AntDv 1.7.8 antd는 기본으로 편하게 사용할 수 있는 validator를 제공해준다 Vue.js 에서는 위와 같이 속성값을 주어서 사용하면 된다 antd에서 기본으로 제공하는 type은 다음과 같다 ✏️ Type ⬆️ 이런 형태로 속성값을 입력하면 알아서 입력 중 바로바로 유효성 체크를 해준다 (너무 편해 ...!!) 그러면 이번엔 기본으로 제공해주는 validator 이... FEvue.jsantdFE [백견불여일타/Vue.js] 5장 - 이벤트 처리 이벤트 v-on 지난 장에서는 v-model를 활용해서 페이지에서 데이터를 가져오는 법에 대해 공부했습니다. 이번 시간에는 vue에서 v-on을 활용하여 이벤트 처리하는 법에 대해 공부합니다. v-on 디렉티브는 Vue 메소드를 실행시키는 이벤트 핸들러입니다. 여기서 이벤트란 사용자로부터의 키 입력, 클릭 등의 조작을 의미합니다. 사용자의 조작을 감지하여 특정 메소드를 실행시켜주는 것이 v-... vue.js프론트엔드vue.js [백견불여일타/Vue.js] 6장 - 조건문 & 반복문 4/1부터 Spring framework를 공부를 시작했습니다. 이 얘기를 지금 vue 포스팅하는 시점에 왜 언급을 하냐면은, 곧 vue를 활용하여 to do list와 게시판 토이 프로젝틀를 할 예정이기 때문입니다. 프론트엔드 공부하는 겸에 spring으로 백 단을 구축해놓으면 더 간지날 것 같습니다. 조건 반복 v-if v-for 이번시간에는 Vue를 활용하여 조건을 만족했을 때 태그가 ... vue.js프론트엔드vue.js [Vue.js] Intro 웹 프로그래밍은 '프론트엔드(Front-end)' 그리고 '백엔드(Back-end)', 이렇게 크게 2가지로 나누어 생각할 수 있다. 정리해보면, 프론트엔드는 웹 페이지에서 눈에 보이는 것을 담당하고, 백엔드는 웹페이지 상에서는 바로 볼 수 없는 데이터 처리를 담당한다고 할 수 있다. 웹 프로그래밍 시 '개발자 도구'를 사용하면 보다 더 편리하고 빠르게 작업을 진행할 수 있다. CSS, Ja... vue.jsvue.js Vue - 프로젝트 회고 (2) (1) 에 이어서 이번 포스팅에서는 프로젝트에서 사용했던 Flux 패턴에 대해서 소개하고자 한다. 그를 위해 사전지식부터 차근차근 정리하려고 한다. Vue 나 React 의 경우 무수히 많은 컴포넌트로 구성되어 있다. 데이터를 관리하기 위한 상태관리 패턴인 Vuex는 React의 Flux 패턴에서 영향을 받았다고 한다. MVC 패턴의 복잡한 데이터 흐름의 문제를 해결하는 개발패턴이다. 1. ... vue.jsvue.js [ Vue.js ] webpack-project npx degit 'github 프로젝트 경로' '복제할프로젝트이름' * npx degit == git clone git clone와 다르게 버전이 삭제된 상태로 프로젝트를 복제하여 리파짓토리를 받아옴 [ 새로운 프로젝트 생성 유용 ] npm i vue@next - 3 version install [ 개발 의존성 install ] npm i -D vue-loader@next - 3 versi... vue.jsvue.js [Vue] 3. Composition API, 넌 도대체 뭐냐! (feat. Vue.js 3) 2020년 9월 19일, 오랜 기다림 끝에 vue-next, vue.js 3(이하 Vue3)가 정식 릴리즈 되었습니다. 그로부터 1년이 지났지만 아직도 사용하기엔 많은 라이브러리나 플러그인들이 Vue3을 지원을 해주지 않고있습니다. 과연 이 변화가 Vue를 더 나은 생태계를 가지게 할지, 다른 라이브러리처럼 역사 속으로 사라지게할지 Vue를 사용하는 개발자로써 궁금하네요. 에서 달라진 점은 ... vuevue.jsvue 24. watch 캡틴판교 장기효님의 를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. IDE: Visual Studio Code 크롬 뷰 개발자 도구: Vue.js devtools 데이터의 변화에 따라 특정 로직을 실행할 수 있는 뷰 인스턴스의 속성이다. 실습을 통해 알아보자. 1. 버튼을 누르면 숫자가 증가하도록 만들자. 'increase'라는 버튼을 누르면, 'num'이라는 데이터... vue.jsvue.js 💡뷰 템플릿 뷰의 템플릿은 HTML,CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다. 데이터 바인딩은 HTML화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않을 때, v-once 속성을 사용한다. 아이디, 클래스, 스타일 등의 HTML속성 값에 뷰 데이... TILvue.jsTIL 2. 기존 웹 개발 방식 캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. 처음이니까 기본 단축키, 자동완성, Live Server 실행을 자세히 캡쳐해두었다. visual studio code visual studio code plugin Live Server Vue.js 라는 프레임워크 없이, 기존 웹 개발 방식으로 코딩해보자. 기본 htm... vue.jsvue.js [ Vue.js ] what about Vue.js? ( using Vscode ) 🎶 Vetur - .vue 하일라이팅 형태 플러그인 npm install -g @vue/cli === npm i -g @vue/cli vue upgrade --next - vue.js project upgrade cli version # terminal in Vscode vue create 'projectName' - 프로젝트 생성... workvue.jsvue.js 4. Reactivity 코드 라이브러리화 하기 캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. 지난 포스팅에서 객체의 속성을 변경하는 Object.defineProperty()를 작성했다. 이를 라이브러리화 한 것을 기록한다. 이제 init()이라는 함수가 정의 되었다. init()함수의 기능은 2가지다. viewModel 객체의 str의 접근했을 때의 동작과 할... vue.jsvue.js [Vue.js]Routing 정리(2) 선택한 태그에 생기는 class 예를 들어, 운영하는 서비스 nav에 중학교, 고등학교 라우터 링크 두 가지가 있다. 이때 중학교를 선택한 상태면 개발자 도구로 중학교 라우터 링크를 살펴볼 때 router-link-active와 router-link-exact-active 두 클래스를 확인할 수 있다. router-link-active 선택된 router-link와 이 선택된 router-l... routerroutingvue.jsrouter Vue.js 라이브러리 추천 목록 유용하게 사용하는 Vue 라이브러리 화면 우측의 Scroll의 경우 시스템 Scroll 디자인을 사용해도 디자인상 큰 문제는 없지만, 화면 안쪽에 overflow을 넣어 만든 element에 시스템 Scroll이 생길 경우 디자인을 해치는 경우가 많았다. 이럴 경우 Scroll의 디자인을 커스텀해서 넣어줄 경우 사이트의 완성도가 올라간다. vue bar 적용 전 후, 확실히 완성도가 올라간걸... 프론트엔드라이브러리vue.jsvue.js