네이버 오픈소스 세미나 - Performance does matter 2019.07.11 <세션 요약> 웹 어플리케이션의 핵심은 컴포넌트(요소)간의 상태 전달 및 공유입니다. 본 발표에서는 요즘 웹 개발분야에서 제일 핫한 라이브러리 중 하나인 Rxjs를 Pinpoint의 각 페이지들에서 어떻게 활용하여 컴포넌트 간 통신을 구현했는지, 그리고 Rxjs의 활용이 신규개발/유지보수에서 어떤 도움이 되었는지 이야기합니다. <연사 소개> Pinpoint front-end engineer since 2017, pursuing simple yet solid user experience.

1. About Pinpoint Front-End(v2)
Rxjs가 있었기에 가능했던 Pinpoint UI 개발기
김동빈

2. 저는..
•Front-End Engineer in Naver(17.09 ~)
•Joined Pinpoint Team(17.12 ~)
•Currently struggling with Pinpoint V2 UI ON MY OWN

3. Contents
•Pinpoint V2 UI 간략히 살펴보기
•Rxjs를 Pinpoint UI 개발에 사용하게 된 계기
•Rxjs가 뭐야?
•Rxjs in Pinpoint
•Rxjs 기반으로 개발하면서 힘들었던 점

4. Pinpoint V2 UI
Main Page

5. Pinpoint V2 UI
Inspector Page

6. Pinpoint V2 UI
Configuration Page

7. Rxjs를 사용하게 된 계기
•Angular 프레임워크 사용
•Rxjs기반의 비동기/이벤트핸들링
단순히 그래서 쓰기 시작했습니다.
그런데, 계속 쓰다보니..

8. What is Rxjs?
•Designed to Handle synchronous/asynchronous(mainly) calls
nicely
•Observable
•Provides a various of operators(map, filter, switchMap..)

9. Rxjs 코드 예시
최소 1초의 텀을 두고 버튼을 클릭한 횟수를 기록하고 싶을때
Normal Code Rxjs

10. Rxjs in Pinpoint
Cases
•http request
•컴포넌트 간 상호작용/상태공유
•기타 동기적 상황

11. Rxjs in Pinpoint
컴포넌트 간 상호작용/상태공유
Operator lists
•takeUntil
•filter
•switchMap
•tap
•concatMap

12. Rxjs in Pinpoint
기타 상황
Operator lists
•fromArray
•mergeMap
•fromEvent
•switchMap
•map
•take
•tap
•reduce

13. 힘들었던 점
내가 Rxjs를 올바르게 사용하고 있는건가?
굳이?
Learning Curve Alternatives

14. Signed in Stackoverflow

15. 감사합니다.