개발 관련 서적 스터디

[RxJS] Subjects

Hot Observable 은 구독하고 있는 Observer들과 데이터를 공유하기 때문에 구독하기 전까지는 데이터를 전달받을 수 없다. 그렇다면 구독 전에 Observable이 전달했던 데이터들은 그대로 소실되는 게 아닌가? RxJS에서는 이를 위해 다양한 Subject를 제공한다. BehaviorSubject 데이터가 전달되기 전에 구독되어있다면, 초기값을 전달해주는 Subject. 데이터가 전달된 이후로는 구독된 시점과 상관없이 마지막 상태를 전달한다. 유일하게 getValue() 메서드를 제공하여 마지막 값을 얻을 수 있다. import { BehaviorSubject } from 'rxjs'; const subject = new BehaviorSubject('start&#39..

함수, Observable, Promise

함수와 Observable의 공통점 const xhr = new XMLHttpRequest(); xhr.onload = function(e) { afterAjaxResult = JSON.parse(xhr.responseText); const result = foo(atferAjaxResult); console.log(result); } const {interval} = rxjs; const numbers$ = interval(100); numbers$.subscribe(value => console.log(value)); 함수와 observable은 데이터를 받는 시점을 지연할 수 있다. 함수는 넘겨줄 파라미터가 아직 존재하지않거나 준비되지 않았을 때, Observable은 subscribe를 호출하기 ..

[RxJS] RxJs가 나온 이유???

회사에서 Vue.js를 사용하고 있는데, 상태관리와 비동기 처리를 위해 vuex를 사용하지 않고 RxJS를 쓰고 있어서 어쩔 수 없이 스터디를 해야 하는 상황이다. 사실 다른 공부를 하기에도 벅찬데... 코드를 보면 RxJS가 빠져있는 곳이 없어서 모르면 코드를 이해하지 못한다. 입사한지는 좀 됐고, 사실 어느정도 대충 이해를 하고 사용하고 있는 중인데 정확하게 공부를 하기 위해서 동기들이랑 스터디를 진행하려고 한다. RxJS 퀵 스타트라는 책을 추천받아 읽으면서 책의 내용에 대해 정리를 해볼 생각이다. RxJS가 나온 이유?? 책의 전반부를 살펴보면 다짜고짜 RxJS에 대해 설명하지 않고, 웹 애플리케이션에서 어떤 문제들이 생겼는지, 그 문제들을 해결하기 위해 RxJS는 어떤 방법을 사용해서 해결하는지..

프레임워크 없는 프론트엔드 개발 3장(DOM 이벤트 관리)

DOM 이벤트 관리 웹 애플리케이션은 고정된 그림이 아니기 때문에 내용은 시간이 지남에 따라 변경됩니다. 이린 변경이 발생하게 만드는 것이 이벤트입니다. 이벤트는 사용자에 의해 또는 시스템에 의해 생성됐는지 여부와 관계없이 DOM API에 매우 중요한 부분입니다. YAGNI 원칙 앞 장에서는 이벤트를 무시한 불완전한 엔진을 학습했는데 그 이유는 가독성과 단순성 때문이라고 합니다. 저자는 실제 프로젝트에도 동일한 접근 방식을 사용한다고 합니다. 가장 중요한 기능에 초점을 맞춰 개발하고 새로운 요구가 생기면 이에 따라 아키텍처를 지속적으로 발전시켜나가는 형태를 선호한다고 합니다. 이러한 형식을 YAGNI(You are't gonna need it : 정말 필요하다고 간주할 때까지 기능을 추가하지 마라)라고 ..

프레임워크 없는 프론트엔드 개발 2장(렌더링)

모든 웹 애플리케이션에서 가장 중요한 기능 중 하나는 데이터의 표시라고 합니다. 데이터를 표시한다는 것은 요소를 화면이나 출력 장치에 렌더링하는 것을 의미합니다. W3C는 프로그래밍 방식으로 요소를 렌더링하는 방식을 문서 객체 모델(Document Object Model, DOM)로 정의했습니다. 문서 객체 모델이란? DOM은 웹 애플리케이션을 구성하는 요소를 조작할 수 있는 API입니다. HTML 페이지는 트리로 구성되는데 아래와 같은 HTML 코드는 다음과 같은 DOM으로 표현됩니다. Framework GitHub Stars Vue 118917 React 115392 이 예제를에서 DOM이 HTML 요소로 정의된 트리를 관리하는 방법임을 알 수 있습니다. 다음은 리액트 셀의 배경색을 변경하는 방법에 ..

프레임워크 없는 프론트엔드 개발 1장(프레임워크에 대한 이야기)

프레임워크에 대한 이야기 프레임워크는 필요 없다. 중요한 것은 그림이지 프레임(그림틀)이 아니다. - 클라우스 킨스키(Klauis Kinski) - 이 책의 저자는 프레임워크 없이 프론트엔드 애플리케이션을 개발하는 방법에 관한 책을 읽어야 하는 이유로 가끔 프레임워크만으로 작업을 수행하기가 충분하지 않기 때문이라고 말하고 있다. 1장에서는 프레임워크에 대한 저자의 생각과 프레임워크 없이 개발하는 방법을 배우는 것이 왜 중요한지에 대한 저자의 믿음으로 시작한다. 프레임워크란? 캠브리지 사전의 프레임워크의 정의는 다음과 같다. 무언가를 만들 수 있는 지지 구조 이 정의는 SW 프레임워크의 일반적인 개념과 일치한다. 앵귤러 애플리케이션의 구조를 생각해 보면 이 정의와 정확히 일치하는 것을 알 수 있다. 앵귤러..