Front

router를 쓰고 router의 url로 이동하면 태그 안에 router 의 해당 url 컴포넌트가 출력된다

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리 뷰 라우터 설치 CDN방식과 NPM 방식 2가지가 있음 CDN 방식은 https://router.vuejs.org/installation.html Installation | Vue Router Installation Direct Download / CDN https://unpkg.com/vue-router@4 Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg...

전역 컴포넌트 -> componet 지역 컴포넌트 -> componets (s 붙음). 서비스를 구현할때 필요한 로직이 여러개이기 때문에 차이점 전역: 플러그인, 라이브러리 같은 전역으로 사용해야 하는 것들만 이걸로 사용 지역: 하단에 어떤게 등록되는지 알수있다. 인스턴스를 생성하면 루트 컴포넌트가 된다 전역 컴포넌트는 인스턴스를 생성할때마다 기본적으로 등록 되어있음 실제 실무에서 서비스할땐 인스턴스 하나를 붙이고 그 안에 컴포넌트를 붙이는 식으로 진행한다 전역 인스턴스를 생성할때마다 컴포넌트에 등록할 필요 없다 지역 인스턴스를 생성할때마다 컴포넌트를 등록해줘야 하는게 지역 컴포넌트 지역 컴포넌트는 인스턴스마다 새로 생성해야함 뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖습니다. 따라서, 컴포넌트 간..

생성자함수로 재사용 할수 있는 옵션과 속성 옵션들은 다음과 같다 ↓ 객체는 key, value 형태로 들어오는게 중요하다. new Vue({ el: , template: , data:, methods: , created: , watch: , }); el: 인스턴스가 그려지는 화면의 시작점 (특징 HTML 태그) template: 화면에 표시할 요소 (HTML, CSS등) data: 뷰의 반응성 (Reactivity) 가 반영된 데이터 속성 methods: 화면의 동작과 이벤트 로직을 제어하는 메서드 created: 뷰의 라이프 사이클과 관련된 속성 watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할수 있게 정의 위의 코드를 객체 리터럴 ↓ (객체 정의 형식 변경) 컴포넌트는 화면의 영..

vue.js 스크립트 코드 뷰로 개발할때 필수로 생성해야 하는 코드가 인스턴스★ new Vue(); 이렇게 생성. 생성하고 나면 변수안에 인스턴스 담을수있음 var vm = new Vue(); 이게바로 뷰에서 제공하는 API(기능)와 속성이다 ↑ 기본적으로 자바스크립트에서 함수를 이용하여 인스턴스를 생성하는 방법은 바로 생성자함수를 이용하는것 함수 이름 앞이 대문자로 시작하면 암묵적으로 동의한 생성자 함수를 의미한다. 왜 인스턴스를 생성해서 사용할까? 객체를 생성하는게 생성자함수의 객체생성 패턴. 왜 Vue를 생성자 함수로 찍어내는지, Vue 관점에서 보자. 생성자 함수를 이용해서 logText 라는 속성의 함수를 넣어놨다. 내가 vm(변수) 으로 객체를 생성할때 마다, 객체 안에는 내가 미리 정의한 l..

Reactivity 코드 라이브러리화 1.함수로 특정 기능을 쪼개는 일을 먼저한다. 2. 즉시실행함수 사용 https://developer.mozilla.org/ko/docs/Glossary/IIFE IIFE - 용어 사전 | MDN 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다. developer.mozilla.org

↑전 게시글의 이 문제는 vue.js의 핵심기능인 Reactivity(반응형)를 사용해서 편하게 개발할수 있다. 문법은 ↓ Object.defineProperty(대상객체, 객체의 속성,{ 정의할 내용 }); 이렇게 값을 바꿀때마다 계속 화면이 바뀌는걸 Reactivity라 한다. vue의 핵심은 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 자동으로 그려주는것인 Reactivity ★ 이게 Data Bindings이다.

!입력하고 자동완성 하면 이렇게 자동완성 HTML은 dom의 정보를 넣고, javaScript 는 해당 태그나 dom의 내용을 조작하는것. 일반적인 웹개발은 아래 예시 코드처럼 바뀐 문자를 다시 저장해야지 화면에 마지막 갱신된 값이 출력. 이게 일반적인 웹개발 방식 html,css,javascript였다. 이 일반적인 표현방법을 어떻게 하면 vue.js를 통해서 쉽게 접근할까?

F12 -> vue 클릭 vue는 무엇인가? vue는 MVVM패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 html은 dom 을 이용해서 javaScript로 구성이 되어진다. view에서 사용자가 액션을 입력하면 그 이벤트를 중간에 DOM Listeners로 Vue에서 잡아서 자바스크립트에 있는 데이터를 바꿔주거나 혹은 특정 로직 실행시킨다. 반대로 자바스크립트가 바뀌면 바로 Data Bindings을 이용해서 화면에 반영한다. 이게 바로 뷰에서 가지고 있는 큰 특징중 하나 1. DOM Listeners 2. Data Bindings

이렇게 8개 검색해서 설치하기 - TSLint Vue - Vue Peek (컴포넌트 추적) - Vue 2 Snippets (컴포넌트 속성 지원 및 자동완성 지원) - Vetur (vetur - VScode에서 지원하는 vue.js 플러그인 ) - Night Owl - Material Icon Theme - Live Server - ESLint - Prettier - Auto Close Tag - Atom Keymap