Web + APP/Angular 썸네일형 리스트형 Angular Hydration Angular는 예전부터 SSR과 Hydration에 대해 지속적인 관심을 가져왔다. 공식 문서에서도 크롬 오로라 팀이랑 협업해서 어떻게든 성능 올리려고 노력했다고 한다. 그렇다면 Hydration이 무엇일까 ? Hydration이란 서버단에서 정적으로 DOM 구조를 넘겨주면, 그걸 받아서 동적인 event를 붙여넣는거라고 하더라. Why is hydration important ? hydration은 DOM 구조를 재생성하지 않는다는 점에서 app 성능을 향상시킬 수 있다. hydration 없이도 SSR이 가능하긴 하지만, app의 DOM을 re-render해야한다. 그렇게 되면, 우리가 app 만들 때, "깜빡" 하는 이슈가 발생하게 되는 것이다. (UI flicker라고 한다) hydration은.. 더보기 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... 더보기 NGRX Store - An Architecture Guide (1) 안녕하세요. 꼬동입니다. 요새 PS5에 빠져서 게임만 하고 삽니다. 그러다 PS5 놔두고 고향에 내려와서 디지털 노마드를 하고 있는데, 퇴근하면 할 게 없고, 글이나 번역해서 쓸까해서 좋은 글을 챙겨와봤습니다. https://blog.angular-university.io/angular-ngrx-store-and-effects-crash-course/ Ngrx Store - An Architecture Guide Learn the benefits of store architectures, when to use them and why, what use cases do they benefit the most? blog.angular-university.io 2022년에 쓴 따끈따근한 좋은 글이더군요. 사실 .. 더보기 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.. 더보기 이전 1 2 3 4 다음
