Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[네이버오픈소스세미나] Rxjs가 있었기에 가능했던 Pinpoint UI 개발기 - 김동빈

2,405 views

Published on

네이버 오픈소스 세미나 - Performance does matter
2019.07.11

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

[네이버오픈소스세미나] Rxjs가 있었기에 가능했던 Pinpoint UI 개발기 - 김동빈

  1. 1. About Pinpoint Front-End(v2) Rxjs가 있었기에 가능했던 Pinpoint UI 개발기 김동빈
  2. 2. 저는.. •Front-End Engineer in Naver(17.09 ~) •Joined Pinpoint Team(17.12 ~) •Currently struggling with Pinpoint V2 UI ON MY OWN
  3. 3. Contents •Pinpoint V2 UI 간략히 살펴보기 •Rxjs를 Pinpoint UI 개발에 사용하게 된 계기 •Rxjs가 뭐야? •Rxjs in Pinpoint •Rxjs 기반으로 개발하면서 힘들었던 점
  4. 4. Pinpoint V2 UI Main Page
  5. 5. Pinpoint V2 UI Inspector Page
  6. 6. Pinpoint V2 UI Configuration Page
  7. 7. Rxjs를 사용하게 된 계기 •Angular 프레임워크 사용 •Rxjs기반의 비동기/이벤트핸들링 단순히 그래서 쓰기 시작했습니다. 그런데, 계속 쓰다보니..
  8. 8. What is Rxjs? •Designed to Handle synchronous/asynchronous(mainly) calls nicely •Observable •Provides a various of operators(map, filter, switchMap..)
  9. 9. Rxjs 코드 예시 최소 1초의 텀을 두고 버튼을 클릭한 횟수를 기록하고 싶을때 Normal Code Rxjs
  10. 10. Rxjs in Pinpoint Cases •http request •컴포넌트 간 상호작용/상태공유 •기타 동기적 상황
  11. 11. Rxjs in Pinpoint 컴포넌트 간 상호작용/상태공유 Operator lists •takeUntil •filter •switchMap •tap •concatMap
  12. 12. Rxjs in Pinpoint 기타 상황 Operator lists •fromArray •mergeMap •fromEvent •switchMap •map •take •tap •reduce
  13. 13. 힘들었던 점 내가 Rxjs를 올바르게 사용하고 있는건가? 굳이? Learning Curve Alternatives
  14. 14. Signed in Stackoverflow
  15. 15. 감사합니다.

×