개발 일기

Vuex ? Vuex는 Vue.js에서 제공하는 상태 관리 패턴 + 라이브러리 입니다. React에서 Redux처럼 중앙 집중식 저장소 역할을 하며 상태를 변경할 수가 있습니다. 그리고 Vue에 공식 확장 프로그램을 사용해서 디버깅을 제공합니다. 상태 관리 패턴 ? new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { increment () { this.count++ } } }) 이러한 공통된 상태를 공유하는 여러 컴포넌트가 존재했을 때에는 복잡해지기 시작합니다. 먼저 여러 뷰가 같은 상태를 의존하기 위해서는 prop가 장황해질수가 있고 이벤트를 통해 넘겨야 하는데 이러한 코드들은 유..

Vue-router ? Vue.js에서 제공하는 공식 라우터 (웹 페이지간의 이동하는 방법) 입니다. Vue-router을 사용하여 요청 URL을 클라이언트에서 DOM을 변경하는 방식을 사용해서 Single Page Application을 구축을 할수가 있습니다. 라우터 설치 및 적용 npm i vue-router --save 위와 같이 vue-router을 설치 후 다음으로 프로젝트에 적용합니다. import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' // 이내용은 vue-cli을 이용했을 때 해줘야하는 내용입니다. Vue.use(Router) // 라우트를 정의를 합니다. // 각 라우트는 반드시..

v-bind Vue.js에서 v-bind을 통해서 데이터 바인딩을 할수가 있습니다. 하지만 표현식을 계속 사용하다보면 가독성도 떨어지고 오류가 발생할수 있기 때문에 이러한 이유로 객체 또는 배열을 제공을 합니다. HTML 클래스 바인딩 위와 같이 class안에 객체로 전달을 하였습니다. 이렇게 전달을 했을때 데이터안의 isActivity 참속성에 의해서 존재 여부를 결정짓게 됩니다. data: { isActive: true } 또는 위와같이 인라인 객체를 할필요는 없습니다. 아래와 같이 객체를 넣어도 동일한 작업을 합니다. data: { classObject: { active: true, 'text-danger': false } } 보통은 data안에 다가 정의하지만 경우에 따라서 computed속성에 ..

Vue.js에서는 렌더링 된 DOM에 데이터를 바인딩 할수 있는 HTML 기반의 템플릿 구문을 사용할수가 있습니다. 템플릿은 내부적으로는 가상 DOM 렌더링 함수로 컴파일 합니다. 따라서 앱 상태가 변경이 됬을 때 최소한의 DOM을 조작하고 변경합니다. 보간법 문자열 데이터 바인딩에 가장 기본적인 형태는 이중 중괄호를 사용한 텍스트 보간입니다. 메시지: {{ msg }} 위에서 msg값이 변경이 될 때마다 갱신됩니다. 업데이트를 진행하고 싶지 않은 경우에는 v-once 디렉티브를 사용할수가 있습니다. 원시 HTML 이중 중괄호는 html로 표시하는게 아닌 일반 텍스트로 표시를 진행합니다. 따라서 안에 HTML 관련된 값을 넣고 싶은 경우에는 v-html 을 사용해야 합니다. Using mustaches:..

Vue.js 란? Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크(Progressive framework)입니다. 다시 설명을 하자면 Vue는 뷰만을 다루는 단순한 라이브러리입니다. 기본적인 설계 방식으로 MVVM 패턴에 영감을 받았습니다. "프레임워크는 어떤 경우든지 규모와 상관없이 단계적으로 유연하게 사용할수 있도록 설계되었습니다". Vue.js 에서는 컴포넌트를 통해서 재사용을 할수도 있고 기존에 HTML , Javascript에 이미 익숙하다면 쉽게 사용이 가능합니다. 또한 리액티브 데이터 바인딩을 통해서 HTML 템플릿 안에서 대상 DOM 요소에 바인딩을 지정하여 해당 데이터가 변화가 일어날때마다 바인딩된 DOM 요소에 내용도 함께 업테이트를 진행합니다. 그리고 양방향 바인..

Retry 예를 들어 네트워크가 일시적으로 불안정하거나 혹은 어떠한 상황에서 재시도를 하고 싶을때에는 Retry를 사용할수가 있습니다. var count = 0 Observable.create { println(count++) it.onError(Error("error")) }.retry(3).subscribeBy ( onError = { println(it) } ) RetryUntil 특정 조건에 충족될 때 까지 반복을 진행을 합니다. var count = 0 Observable.create { println(count++) it.onError(Error("error")) }.retryUntil { count > 3 }.subscribeBy ( onError = { println(it) } ) Retr..

Debounce 특정 시간을 지난 후에 마지막의 하나의 이벤트만 발생을 합니다. val subject = BehaviorSubject.create() subject.debounce(1, TimeUnit.SECONDS).subscribeBy { println(it) } subject.onNext(1) subject.onNext(2) Thread.sleep(2000) subject.onNext(3) Thread.sleep(5000) // 2 , 3 출력 Distinct Stream에서 중복된 값을 제거를 합니다. Observable.fromArray(1,2,3,4,5,6,1,2,3).distinct().subscribeBy { println(it) } // 1,2,3,4,5,6 마지막에 들어온 값하고 바로이..

Buffer 매개변수에 주어진 값만큼 데이터를 모아두었다가 발행을 합니다. Observable.just(1,2,3,4,5) .buffer(3) .subscribeBy { println(it) } [1, 2, 3] [4, 5] FlatMap FlatMap을 통해서 어떠한 입력 값을 받아서 Observable로 변환을 합니다. Observable.just(1,2,3,4,5) .flatMap { Observable.just(it).map { data -> data + 1 } } .subscribeBy { println(it) } 2 3 4 5 6 GroupBy 어떤 기준으로 여러 개로 이루어진 Observable 그룹을 생성합니다. val array = listOf(1, 1, 2, 2, 3, 3) Observ..