BehaviorSubject와 ReplaySubject의 차이점을 예제를 통해 알아보려고 한다. Official Documentation - BehaviorSubject A variant of Subject that requires an initial value and emits its current value whenever it is subscribed to. initial 값을 지정해야 하고, 구독이 됐을 때 현재의 값을 emit 하는 Subject. - ReplaySubject A variant of Subject that “replays” or emits old values to new subscribers. It buffers a set number of values and will emit ..

levelup.gitconnected.com/rxjs-operator-tips-startwith-d67109c8883e RxJS Operator Tips — startWith Creating awesome by combining startWith and EventEmitter levelup.gitconnected.com 해당 글은 Wandering Developer님의 'RxJS Operator Tips - startWith'를 번역한 글입니다. startWith와 EventEmitter를 조합하여 멋진 것을 만들어보자. RxJS documentation에 따르면, startWith : source observable에서 값들을 emit 하기 전에 당신이 정해둔 특정 값들을 먼저 emit 한다. The ..

SVG 파일을 사용할 때 stoke(외곽선)의 두께를 고정해야 하는 경우가 있다. 예를 들면 지도에서 2px값의 외곽선을 그려넣은 도로가 있는데 사용자가 지도를 zoom 했을 경우, 외곽선도 같이 확대되어 두께가 달라지면 곤란하다. 그림판 같이 도형을 넣고 색상을 바꿀 수 있는 프로그램을 개발하고 있었는데, 외곽선 두께에 대한 이슈가 발생했다. 왼쪽의 도형의 세로 길이를 늘리면 오른쪽 도형과 같이 외곽선의 두께가 일정하지 않게 된다. 이럴때는 'vector-effect'의 속성을 'non-scaling-stroke'으로 변경해주면 된다. 안에 있는 에 style="stroke-width: 5px; vector-effect: non-scaling-stroke;" 스타일 속성을 넣어주었다. 그 결과, 가로로..

Angular로 검색 기능의 input box를 개발하려고 한다. 그냥 단순한 input box라고 생각할 수도 있겠지만, 여러 번의 불필요한 검색 호출을 막아 좀 더 효율적인 검색 기능을 만들기로 한다. 이를 위해 나는RxJS의 debounceTime + distinctUntilChanged 조합을 사용하기로 했다. 내가 원하는 검색 input은 대충 위와 같은 모습이다. 크게 2가지 조건이 있는데, 1. 시간을 정해서 지정된 시간 안에 여러 번 검색 버튼을 연속으로 눌러도 한 번의 결과값만 검색되도록 한다. 2. 직전의 검색어와 현재 검색한 검색어를 비교하여 같은 검색어가 두 번 검색되지 않도록 한다. debounceTime과 distinctUntilChanged을 아주 깔끔하게 정리해놓은 포스트가 ..

RxJS에 대해 이것저것 자료를 찾아보다가 의 저자이신 sculove님의 강의를 보게되었다. 쉽고 깔끔하게 RxJS를 써야하는 이유를 개발자들이 평상시 하는 고민과 함께 연결하여 설명해주셨는데 강의 내용을 두고두고 기억하고 싶어서 내용을 정리해보았다. 이제 아무 생각 없이 RxJS를 쓰는 것이 아니라 쓰는 이유를 알고 효율적으로 코드를 짤 수 있겠..지? ㅠㅠ? (영상과 블로그는 아래 링크 참고) https://www.youtube.com/watch?v=2f09-veX4HA&feature=youtu.be http://sculove.github.io/blog/2017/10/21/shoulduserxjs/ RxJS 써야겠어요? 안써야겠어요? RxJS는 일관된 방식으로 안전하게 데이터 흐름을 처리하는 라이브러..

상황: 배열을 console.log를 통해 chrome 개발자 도구에서 값을 찍으려고 했다. NodeList라는 배열에 총 두개의 childDiv가 들어간 것을 볼 수 있었는데 '▶'를 눌러 펼쳐보면 length가 1이고, childDiv가 하나만 찍혀있다. 오른쪽 상단의 'i' 네모상자에 마우스로 갖다대면 "value below was evaluated just now" 라고 hover message가 뜬다. 이유: 이렇게 뜨는 이유를 찾아본 결과, 스택오버플로우에 의하면 객체를 console.log를 통해 보는 것은 비동기적으로 실행이 되는데, console은 객체의 레퍼런스를 동기적으로 받지만 해당 객체가 expand되기 전까지는 객체의 속성들을 보여주지 않는다. 만약 객체에 console에 찍히기..