본문 바로가기

반응형
SMALL

앵귤러

Angualr v16 - signal Angular v16가 release가 됐다. 사실 된 지 오래됨 ㅋ 이제서야 부랴부랴 좀 영상 좀 챙겨보는데, 재밌는 기능이 나와서 이거 좀 풀어보려고 한다. Angular에서 Change Detection을 zone JS에 의존하고 있었다. Change Detection 앱 내의 상태가 변화할 때, 브라우저 안 UI를 Angular가 변화시키는 개념 zone JS Angular에게 변화 생겼다고 말해주는 중간 띄기 사업자 몽키패치하여 비동기 변화를 감지한다. 몽키패치 원래 있던 기능에 자기가 원하는 코드 삽입하는 행위 근데, 솔삐 중간 중개업자한테 굳이 수수료 떼면서 동작을 해야하나 싶었는데, Angular 팀에서도 이걸 알았는지, 이제 signal 이라는 기능을 만들었다. 지들도 적합한 솔루션이 아.. 더보기
providers와 viewProviders의 차이 / content child와 view child 안녕하세요. 꼬동입니다. 일을 하다, 모듈 서비스를 Dependency Injection으로 꽂았는데, NullInjectorError가 뜨더라고요 ? 아뿔싸 providers 명시를 안했더라고요 ㅎㅎ 그래서 Service 꽂으려고 하는데 읭 ? viewProviders와 providers 두 방식으로 꽂을 수 있더라고요 엄.. 선택지가 많아지면, 공황이 오는 성격상 둘을 명확하게 알고 가는게 좋을거 같아서 키보드를 잡아봅니다. 사실 간단합니다. viewProviders로 인해 꽂힌 Service를 자식들이 사용하려고 하면, 사용이 안되며, provider로 꽂힌 Service는 자식들이 사용하려하면, 제공해주는 방식입니다. 위의 그림에서도 이를 설명하고 있는데, SimpleService가 Provide.. 더보기
HostListener & HostBinding 안녕하세요. 꼬동입니다. 회사 코드 리팩토링하다가 제대로 알고 있는거 같지않아서, 한 번 글을 써봤습니다. HostListener 와 HostBinding에 관한 글입니다. HostListener HostListener는 DOM event를 선언하여, 이벤트가 발생했을 때 핸들러 메소드가 실행될 수 있게 제공해주는 데코레이터 입니다. Option Description eventName? : string DOM event (ex : 'click') args? : string [] 메소드에 전달할 인수들 @Directive({selector: 'button[counting]'}) class CountClicks { numberOfClicks = 0; @HostListener('click', ['$event... 더보기
attr vs attr.name 개발을 하다가 궁금한게 생겼더랬죠. 이 둘의 차이가 뭘까요. https://stackoverflow.com/questions/60375207/when-use-name-vs-attr-name when use [name] vs [attr.name]? Does anyone know why you can use [id] and you must use [attr.contenteditable] as property binding in Angular? I have researched for some time and I can't find an answer. Why some html native attr... stackoverflow.com 그 대답은 여기서 찾아봤는데요. 설명을 시작해보겠습니다. 그 전에 가정을 해야.. 더보기
Angular 더 빠르게 - On Push 두 번째 이야기 안녕하세요. 지난 글에선 On Push 관련해가지고 얘기를 했더랬죠. https://ggodong.tistory.com/326 Angular 더 빠르게 - On Push CD / Immutability 안녕하세요. 꼬동입니다. 해당 글은 아래의 글을 번역한 글입니다. 약간 제이크 질렌할 닮으셨네여 https://blog.mgechev.com/2017/11/11/faster-angular-applications-onpush-change-detection-immutable-part-1/.. ggodong.tistory.com 이왕 Change Detection 뿌리 뽑죠. https://hackernoon.com/angular-2-4-visualizing-change-detection-default-vs-o.. 더보기
Angular 더 빠르게 - On Push CD / Immutability 안녕하세요. 꼬동입니다. 해당 글은 아래의 글을 번역한 글입니다. 약간 제이크 질렌할 닮으셨네여 https://blog.mgechev.com/2017/11/11/faster-angular-applications-onpush-change-detection-immutable-part-1/ Faster Angular Applications - Part 1. On Push Change Detection and Immutability On AngularConnect 2017 in London, I gave a talk called “Purely Fast.” In the presentation, I showed how step by step we can improve the performance of a busin.. 더보기
NGRX - Actions 안녕하세요 ! 꼬동입니다. 그.... 이번에 한 번 진짜 ! 각 잡고 ! NGRX 훑어보기 할려고 합니다. 이번엔 진심 !! 꾸준히 !! 할거야 !! 우선 유튜브 하나만 보고 NGRX는 Redux 패턴의 상태관리 시스템입니다. 상태관리라 함은 앱의 구동에 있어서 필요한 상태를 관리하는거인데요. 저는 그냥 편하게 전역변수를 둔다. 로 생각을 하고 있는데, 전역변수는 위험하잖아여 ? 이걸 안전하게 전역변수로 둬보자로 쉽게쉽게 이해하고 있습니다. 그 중 Actions에 대해서 적어보려합니다. Actions은 NgRx에서 메인이 되는 시스템입니다. 유일한 이벤트를 표한하는 역할을 하고, 유저의 상호작용, 외부 네트워크 요청, 디바이스 API를 통해 Actions이 묘사되거나 사용되죠. 메인이 되는 Actions.. 더보기
Angular : 같은 URL에서 Refetch data 굉장히 직역 같은 제목입니다. 근데, 뭐 쉽게 말하자면, 같은 URL로 라우팅 됐을 때, 데이터를 다시 가져오는 방법을 알아보자 ! 라고 이해하셔도 됩니다. 정말 성격 좋으시고, 일도 잘하시고, 개발자의 마음을 잘 헤아려 주시는 사랑스러우신 기획자 한 분이 계십니다. 이 분이 말하시길, "같은 URL로 라우팅 됐을 때, 새로고침 시켜주실 수 없으실까요 ?" (Angular는 같은 URL일 때, 아무 행동을 하지 않습니다 / 예시) 라고, 저에게 부탁을 주셨죠. 당연히, 제가 하는 일이 그런 일이기 때문에, 그리고 제가 존경하는 기획자 분이시기에 ! "암요 ! 가능합니다 !" 그대로 출동 막 뒤져봅니다. 오호, 생각보다 창의적인 생각이 많더라고요 ? 그 창의적인 생각을 한 번 알아봅시다. 1. TimeSt.. 더보기

반응형
LIST