본문 바로가기

반응형
SMALL

RxJs

RxJS 구독해제 패턴 심화편 안녕하세요. 꼬동입니다. 오늘은 RxJS 구독해제 패턴 심화편을 알아보려합니다. 사실 제 주제에 "심화편"이라고 글 쓰는 것도 웃기지만, 폼 좀 잡아보고자 심화편이라고 썼습니다. 글을 시작하기 전에 "심화편" 전에 다룰 수 있는 구독해제 내용은 async / unsubscribe 메소드 / take / takeWhile / takeUntil 등이 있을텐데요. 뭐 이런 구독해제 패턴이야 RxJS 홈페이지 들어가면 더 자세히 알려주니, 사용 방법은 홈페이지를 참고하시면 될거 같고, 저는 좀 더 딥하게 알아보려고 합니답. 오늘 다룰 주제는 takeWhile vs takeUntil과 ngneat/until-destroy입니다. takeWhile vs takeUntil 구독해제를 위한 오퍼레이터 두 개를 둘고 왔.. 더보기
Async Pipe 뜯어먹기 안녕하세요. 꼬동입니다. 오늘은 Angular에서 Observable Data를 template에서 사용할 때, 함께 쓰는 Async Pipe를 알아볼 예정입니다. 우선 Observable Data를 사용하기 위해서는 Observable Stream의 subscribe() 메소드를 이용해야 합니다. 허나 subscribe()의 경우엔 저희가 unsubscribe()도 해줘야 하고, 코드도 복잡해지고 어휴 지지입니다. Async Pipe는 해당 로직을 이미 Angular에서 제공을 해줘, subscribe() 메소드를 사용하는 것보다, 위의 그림처럼 3가지의 이점을 가질 수 있습니다. 구독할 필요가 없습니다. Async Pipe가 Observable Stream을 Subscription으로 만들어줘 다뤄주.. 더보기
RxJS가 해결하려고 했던 문제 3 안녕하세요. 꼬동입니다. 마지막으로 로직 오류 남았었죠? RxJS는 과연 어떻게 로직 오류를 해결하려했는지 알아보도록 합시다. 웹 애플리케이션은 전달받은 입력값을 로직을 통해 새로운 결과를 반환하거나 표현합니다. 이 과정에서 반복문과 분기문 그리고 변수가 사용되는데 이러한 것들은 우리의 코드를 복잡하게 만듭니다. 반복문은 가독성을 떨어뜨리고, 분기문은 파악해야하는 프로그램 흐름을 나누며, 변수의 값은 변경될 수 있습니다. JS의 경우엔 이를 함수형 프로그래밍의 특성으로 해결하려 했습니다. JS 함수는 일급 객체이기 때문에 이와 같은 솔루션이 가능했습니다. 거기에 더불어 고차 함수를 이용해서 문제를 손쉽게 해결하는 프로그래밍 기법이 탄생했습니다. function process(people) { return.. 더보기
RxJS가 해결하려고 했던 문제 2 안녕하세요. 꼬동입니다. https://ggodong.tistory.com/281 RxJS를 시작하기 전에 안녕하세요. 꼬동입니다. Angular를 공부하다보면, 피할 수 없는 RxJS를 공부하고 있습니다. 뭐... Angular가 RxJS를 좋아한다고 했기 때문에, 공부를 하는 감도 있지만, 사실 fetch와 같은 메소드를 써도 ggodong.tistory.com 위 글에서 저희는 웹 애플리케이션 개발을 하면서 발생하는 오류 3개를 마주했습니다. 입력 오류 상태 오류 로직 오류 여기서 입력 오류는 'RxJS가 해결하려고 했던 문제 1'에서 설명을 드렸습니다. 이번에는 상태 오류를 알아보도록 합시다. 위의 링크 글에서 웹 애플리케이션은 하나의 큰 상태 머신이라고 했습니다. 이러한 상태는 서로 유기적으로 .. 더보기
RxJS가 해결하려고 했던 문제 1 https://ggodong.tistory.com/281 RxJS를 시작하기 전에 안녕하세요. 꼬동입니다. Angular를 공부하다보면, 피할 수 없는 RxJS를 공부하고 있습니다. 뭐... Angular가 RxJS를 좋아한다고 했기 때문에, 공부를 하는 감도 있지만, 사실 fetch와 같은 메소드를 써도 ggodong.tistory.com 이 전 글에서 RxJS가 해결하려고 했던 문제를 3가지 말했습니다. 입력 오류 상태 오류 로직 오류 여기서 입력 문제를 RxJS는 어떻게 해결하려 했는지를 알아봅시다. 간단한 게시판 애플리케이션을 생각해보면, 아래와 같은 Data Flow를 상상할 수 있습니다. 목록화면과 조회화면은 서버로부터 데이터를 불러와 브라우저에 전달 브라우저에 전달된 정보를 브라우저의 UI .. 더보기
RxJS를 시작하기 전에 안녕하세요. 꼬동입니다. Angular를 공부하다보면, 피할 수 없는 RxJS를 공부하고 있습니다. 뭐... Angular가 RxJS를 좋아한다고 했기 때문에, 공부를 하는 감도 있지만, 사실 fetch와 같은 메소드를 써도 충분히 구현이 가능한 것도 RxJS를 이용해서 구현하니 그 이유가 좀 궁굼했고, 책을 하나 구매해서 읽어 보았습니다. 그래서 해당 글은 'RxJS 퀵스타트'를 참고 했으며, 해당 글에 대한 정리가 될 수 있겠습니다. 개발을 좀 하는 사람들은 구현 자체에 초점을 맞추기보단, 소프트웨어를 얼마나 효과적으로 유지보수 할 수 있는지, 설계를 통해 얼마나 많은 문제점을 해결할 수 있는지를 고민합니다. 그래서 저희는 라이브러리, 디자인 패턴을 연구하게 되었고, 이런 고민이 녹아든 프레임워크에 .. 더보기

반응형
LIST