전체 글

[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는 어떤 방법을 사용해서 해결하는지..

[Javascript] window vs document

Window vs Document 현재 프론트엔드 개발을 하고 있지만, window와 document의 차이에 대해 알지 못하고 그냥 사용했다는게 생각이 나서 스터디를 한 후 포스팅한다. 보통 window/document 객체를 참조하는 작업들은 아래와 같다. 이벤트 리스너 등록 window.addEventListener('scroll', function(){}) document.addEventListener('click', function(){}) dom 객체 접근 document.body.style.backgroundColor = '#fcfcfc'; document.getElementById('input').focus(); 스크롤 위치 이동 window.scrollTo(pos); 창 닫기/열기 win..

[Javascript] HTMLVideoElement

HTMLVideoElement HTMLVideoElement 인터페이스는 video object를 조작하는데 필요한 프로퍼티와 메소드를 제공한다. HTMLMediaElement 와 HTMLElement 를 상속한다. 지원하는 미디어 포맷 목록은 브라우저마다 다르다. 그렇기 때문에 적절한 범위의 브라우저에서 지원하는 비디오 포맷을 제공하던가, 모든 브라우저를 위한 여러 종류의 미디어 포맷을 제공해야 한다. 속성(Properties) HTMLMediaElement 와 HTMLElement 의 속성들도 상속 받는다. HTMLVideoElement.height : 표시 영역의 높이를 나타내는 attribute height 값을 DOMString으로 반환. 단위는 px HTMLVideoElement.poster ..

[Vue.js] .sync 수식어 - 양방향 바인딩

.sync vue로 개발을 하다보면 부모 컴포넌트의 data를 자식 컴포넌트에서 값을 변경해야하는 경우가 있는데 이처럼 prop을 사용할 때 양방향 바인딩이 필요한 경우가 있다. 이런 상황에서 여러가지 방법이 있는데, 예를 들어 v-model을 사용할 수도 있고 update 이벤트를 props로 전달하는 방법, 그리고 이번에 포스팅할 .sync 수식어를 사용하는 방법이 있다. .sync 수식어는 2.3.0+부터 추가된 수식어로 위의 방법과 달리 간단한 수식어로 컴포넌트 간의 양방향 바인딩이 가능하게 해준다. 하지만 양방향 바인딩은 유지보수 측면에서 이슈를 발생시킬 수 있다. 자식 컴포넌트가 부모 컴포넌트를 변경할 수 있게 되면, 부모 컴포넌트와 자식 컴포넌트 중 어디에서 변했는지를 특정할 수 없게 될 수..

[Vue.js] vue에서의 이벤트리스너(event listener)

이벤트리스너(event listener) 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다. Vue.js는 Html 이벤트 리스너를 사용한다고 한다. html 이벤트 리스너? 그럼 이벤트 리스너가 여러 종류가 있다는 의미인데 어떤게 있는지 찾아봤다. 이벤트 바인딩하는 방법은 3가지가 있는데 html 이벤트 핸들러 : HTML 요소의 onclick 속성에 JS 함수를 호출하여 바인딩하는 방법. (HTML과 JS 코드는 분리시켜 관리하는 것을 권장하기 때문에 좋은 방법이 아닙니다.) DOM 이벤트 핸들러 : dom 요소에 이벤트를 바인딩하고 이벤트가 ..

[Vue.js] native 이벤트

Native Event vue.js로 개발을 하던 도중 태그에 click, foucs, blur와 같은 이벤트가 먹히지 않아 해결방법을 찾던 중에 .native를 사용하면 이벤트를 쓸 수 있다는 글을 찾고 사용해서 해결했다. 근데 .prevent, .stop은 써봤어도 .native는 처음 봤던 코드인데 "도대체 .native가 뭔데 되는건데?" 라는 생각을 했다. 공식 문서에서는 .native에 대해 아래와 같이 설명하고 있다. "컴포넌트에서 루트 엘리먼트의 네이티브 이벤트를 직접 감지하고 싶은 경우에 사용한다." 솔직히 위 설명만 봤을 때는 이해가 가지 않는다. 네이티브는 v-on 이벤트 장식자로 취급되는데 컴포넌트의 루트 요소 위에 있는 네이티브 이벤트를 호출한다. 선언법은 아래와 같다. 보통의 경..