본문 바로가기

반응형
SMALL

Angular

Angular : 같은 URL에서 Refetch data 굉장히 직역 같은 제목입니다. 근데, 뭐 쉽게 말하자면, 같은 URL로 라우팅 됐을 때, 데이터를 다시 가져오는 방법을 알아보자 ! 라고 이해하셔도 됩니다. 정말 성격 좋으시고, 일도 잘하시고, 개발자의 마음을 잘 헤아려 주시는 사랑스러우신 기획자 한 분이 계십니다. 이 분이 말하시길, "같은 URL로 라우팅 됐을 때, 새로고침 시켜주실 수 없으실까요 ?" (Angular는 같은 URL일 때, 아무 행동을 하지 않습니다 / 예시) 라고, 저에게 부탁을 주셨죠. 당연히, 제가 하는 일이 그런 일이기 때문에, 그리고 제가 존경하는 기획자 분이시기에 ! "암요 ! 가능합니다 !" 그대로 출동 막 뒤져봅니다. 오호, 생각보다 창의적인 생각이 많더라고요 ? 그 창의적인 생각을 한 번 알아봅시다. 1. TimeSt.. 더보기
Renderer2 in Angular 12 (Why not ElementRef ?) 안녕하세요. 꼬동입니다. Angular로 작업 중, 평소와 같이 ElementRef를 쓰다가 어떤 코드를 봤는데, Renderer2로 DOM에 접근하여, 값을 동적으로 바꾸더라고요 ? 읭 그러면 ElementRef는 왜 있는거야 ? 라는 생각으로 글을 작성해봅니다. Renderer2는 무엇인가요 ? Renderer2는 DOM에 직접적으로 접근하지 않고도, Renderer2 class의 도움을 통해 app에 있는 elements를 조종할 수 있게 해주는 친구입니다. DOM element와 component code 사이를 추상 레이어로 제공해주는 Abstraction class이며, 다양한 이유로 인해서 해당 class를 사용하는 것을 추천합니다. element를 만들거나, text를 넣거나, child .. 더보기
iOS 한글 buffer 문제 안녕하세요. 꼬동입니다. 혹시 여러분들은 한글에 대해서 어떻게 생각하시나요. 저는 정말 한글에 대해서 너무 좋게 생각합니다. 표현력도 좋고, 이쁘고, 편하고 등등이 있죠. 근데, 개발하다 보면 한글이 문제가 되는 경우가 여럿 있는데요. 제가 이번에 들고온 이슈도 해당 한글이기에 생긴 문제입니다. 어떤 이슈일까요 ? 바로 위의 이슈입니다. 한글은 자음 모음으로 구성이 됩니다. 받침에 들어가는 자음이 들어갈 수 있는데,(개발에선 ㄹ이 되겠죠) 이를 넣지 않고, input 내의 값을 한꺼번에 비우면(위의 x 버튼), 자음을 넣을 준비를 한 iOS가 buffer에다 넣어놓은 값을 이용해서 이후의 글자에 영향을 끼치는 이슈입니다. 요게 신기하게 안드로이드에서는 안 이럽니다. iOS에서만 발생하는데, 특히 13 이.. 더보기
Angular Flex-Layout using MediaObserver Angualr Flex-Layout Library에서 mediaOvserver라는게 있단다. 그거는 아래처럼 설치가 가능하며, app.module.ts 파일에 집어넣어서 쓰면 된단다. npm install @angular/flex-layout import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms"; import { AppComponent } from "./app.component"; import { FlexLayoutModule } from "@angular/flex-layout"; @NgModule(.. 더보기
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'에서 설명을 드렸습니다. 이번에는 상태 오류를 알아보도록 합시다. 위의 링크 글에서 웹 애플리케이션은 하나의 큰 상태 머신이라고 했습니다. 이러한 상태는 서로 유기적으로 .. 더보기

반응형
LIST