본문 바로가기
[vue.js] vue.js 코딩공작소 책 요약 간단한 Vue 튜토리얼을 마무리 지으면서 앞서 배웠었던 내용을 빠르게 다시한번 정리할 시간이 필요하다는것을 느꼈다. 이번에는 코드레벨이 아닌 좀 더 이론적인 부분을 살펴보도록 하자. 1. vue.js를 시작하기 앞서서 - 모델-뷰-뷰모델 패턴: 정제된 MVC모습인 MVVM 패턴의 가장 큰 차이점은 뷰 모델 도입과 데이터바인딩(바인더)에 있다. - 뷰-모델에서 데이터가 변하면 데이터에 연결된 뷰는 자동으로 업데이터된다. 데이터바인더를 데이터에 노출시키고 데이터가 변할때마다 뷰에 반영될 수 있도록 보증한다 2. Vue 인스턴스 모든 Vue 애플리케이션에는 루트 Vue 인스턴스가 있다. 루트 Vue인스턴스는 뷰 생성자인 new Vue()로 생성할 수 있다. * 생성자는 HTML서식을 컴파일하고, 인스턴스 데이.. 2020. 7. 6.
[vue.js] 본격 생존코딩! 밥벌이를 해보자! (4) 컴포넌트 vue component 재사용가능한 코드 조각 SPA 프레임워크로 웹을 개발하게 되면 많은 컴포넌트들이 모여서 하나의 페이지를 만들게 되며 컴포넌트가 개발의 중심이 된다. data는 속성이 아니라 function이여야 한다. * 컴포넌트 이름은 소문자와 하이픈(-)로 이루어 지는것이 좋다(W3C규칙을 적용하지는 않지만 따르는것이 좋다) // 컴포넌트 선언 Vue.component('컴포넌트이름', { // 옵션 }) //커스텀 엘리먼트로 사용할 수 있다. # 컴포넌트 전역등록 예제 Vue 루트 인스턴스 없이 component만 선언할수는 없을까-해서 해봤는데 안된다. vue프로젝트에서 반드시 하나의 Vue루트 인스턴스가 필요한건가.. # 컴포넌트 지역등록 모든 컴포넌트를 전역으로 등록할 필요는 없다. .. 2020. 7. 2.
[vue.js] 본격 생존코딩! 밥벌이를 해보자! (3) //computed 메서드 sale(){ return this.brand + this.product + (this.variants[this.selectedVariant].onsale ? "are on sale!" : "are not on sale" ) } //기억할점은 selectedVariant가 이벤트에의해 계속해서 변경된다는점이다. 이 변수만 바라보고있다가 값이 바뀌면 다시 렌더링 된다. 아마 이런 변수를 부르는 명칭이 있을듯할텐데... computed property란 함수의 형태를 가지고 있지만, 속성처럼 사용한다. 값을 저장하기보다는 값을 계산하는 속성의 문법이다. 메서드일경우 호출되고 항상 로직이 실행된다. 반면 Attribute일경우에는 값이 변하지 않는 이상 캐쉬되므로 성능 향상에 이점이.. 2020. 6. 30.
[vue.js] 본격 생존코딩! 밥벌이를 해보자! (2) 해당 페이지를 참조하였습니다: https://eastflag.co.kr/vue/shop-cdn-link/class-and-style-binding/ Event Handling 지금까지의 데이터 이동은 모델데이터->뷰에서 바인딩했지만, 이벤트 핸들링은 방향이 반대이다. 뷰에서 모델 데이터로 들어온다. 템플릿 문법은 v-on:이벤트 줄여서 @이벤트이다. 예를들어 js의 onclick 이벤트는 v-on:click 혹은 줄여서 @click으로 표현된다. 클릭이벤트 인스턴스안에 data필드처럼 methods필드가 따로 들어있다. 이 영역에 메서드를 선언하고.. addToCart : function(){} (ES5) addToCart() {} (ES6)로 선언한다. 처럼 v-on:이벤트명="메서드명"으로 선언한다... 2020. 6. 30.
[vue.js] 본격 생존코딩! 밥벌이를 해보자! (1) 이르면 9월부터 vue.js를 사용하여 개발하게 되었다.. 조금 갑작스럽지만, 원래 인생은 갑작스러운 법이니까, 차근차근 vue를 배워보도록 하자. 1) Data-Binding Vue 인스턴스 생성시에 옵션으로 들어가는 필드들 el: 뷰 인스턴스가 바인딩할 Dom노드 data: 뷰인스턴스가 관리할 모델 데이터. 뷰에서 {{}} 라는 표현을 사용하면 모델 데이터와 연동된다. javascript DOM API or JQuery처럼 View를 직접 조작하는것이 아니라 View와 바인딩 된 모델 데이터를 수정하면 뷰는 자동으로 렌더링이 일어난다. 콘솔창을 열어서 app.product = "Vue Rendering Test!!"를 입력하니까 자동으로 렌더링이 되어서 화면에 Vue Rendering Test가 표시.. 2020. 6. 29.
[OAuth2] 권한 부여 종류 1)Authorization Code Grant 인증코드 방식 클라이언트가 웹서버일때 사용한다. (권한부여서버가 기능이있다면) Refresh Token으로 AccessToken을 갱신하여 지속적으로 AccessToken을 사용 가능하다. AccessToken은 브라우저에 저장하지않고 세션에 저장하는것이 이상적이고 안전하다. 2) Implicit Grant 클라이언트가 스크립트 언어를 사용하는 브라우저에서 실행될때 사용된다. Refresh Token을 사용할 수 없다. 2020. 6. 19.

티스토리툴바