angular

Angular 에러 발생 이벤트를 모두 캐치하는 클래스를 만들어 봅시다. 내장 함수인 ErrorHandler를 활용하며, 최상위 모둘에 적용합니다.에러를 처리하는 handleError 함수를 사용하여 에러 처리를 한 곳에서 진행할 수 있습니다.

Module 또는 Component 단위로 Lazy Loading 하는 방법을 정리합니다. SPA의 특성상 모든 파일이 로드 되어야 서버의 호출 없이 다음 페이지로의 전환이 이루어 지는데이를 Lazy Loading으로 처리하여 초기 로딩을 분산하는 방법입니다.기존 로딩

이 가이드에서는 Angular 애플리케이션에서 ngx-translate를 사용하여 다국어 처리를 구현하는 방법을 다룹니다. NgModule 방식과 Standalone 방식을 모두 지원하며, 엔터프라이즈급 애플리케이션을 위한 고급 설정 옵션과 모범 사례를 설명합니다.필요

서버와 클라이언트에서 구성하는 라우팅의 비교 입니다.Server-side (서버 측): 서버에서 라우팅을 처리하기 때문에 사용자가 해당 페이지에 직접 접근하는 방식입니다. 즉, 웹 페이지 요청이 서버에 도달하면 서버에서 해당 페이지를 렌더링하고 클라이언트에게 반환합니다

컴포넌트 없이 라우팅을 구성하는 방법입니다. Routing을 설정하면 Component를 일반적으로 아래와 같이 설정합니다.이 때 "/" 나 "/main"을 입력하여 MainComponent에 접근하려면 반드시 AppComponent를 거친 후 redirectTo에 의

기본적으로 적용된 모든 애니메이션 또는 특정 Material 요소의 애니메이션을 중지하고자 할 때, 몇 가지 간단한 제어 방법을 사용할 수 있습니다.원하는 애니메이션을 중지하려는 대상 요소를 식별합니다.해당 요소에 애니메이션을 비활성화하기 위해 @.disabled="t

Angular의 @Input 데이터 전달 문제에 대해 자세히 설명해드리겠습니다.@Input은 Angular에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 데코레이터입니다. React의 props와 비슷한 개념이라고 생각하시면 됩니다.페이지 새로고침이

중복 사용되는 모듈을 Shared Module로 공유하는 방법 입니다.다른 module에서 선언한 component를 또 다른 module에서 중복 선언하면 에러가 발생합니다.에러를 분석해보면 이러한 경우 상위 또는 다른 module에 선언하고 그 module을 참조하

ng test와 ng e2e 적용 방법과 차이점을 알아봅시다.목적: 개별 컴포넌트, 서비스, 파이프 등 내부 로직과 의존성 주입(DI)을 검증합니다.jasmine, karmabrowser에 표시되는 데이터의 결과까지 포함합니다.component와 service를 모두

route에서 canActivate와 canDeactivate, canActivateChild, canLoad 옵션처리 방식을 알아보고, 함께 Guard 사용 방법을 알아보겠습니다. canLoad: 모듈 사용을 방지. LazyLoad 된 모듈에서만 사용한다. canL

rxjs에서 pipe에서 주로 사용하는 명령들을 정리하였습니다.n번 subscribe 후 해제?fname=http%3A%2F%2Fcfile30.uf.tistory.com%2Fimage%2F997D983359BA8B6804950DObservable이 데이터를 받거나 완료

Subject를 Subscribe를 할 때 Subscription으로 받아둔 뒤 해당 Subscription을 unsubscribe 하는 방법입니다.아래 코드에서는 onInit 일 때 mountSubject를 subscribe 하고, onDestroy 일 때 unsub

PWA를 활용하여 점검 또는 오프라인 공지를 만드는 방법입니다.쉽게 점검 표시를 하기 위한 방법을 PWA에 적용하기offline일 때 앱은 살아 있되 사용자가 offline임을 인지할 수 있도록 함가장 빠른 점검 메시지를 적용하기 위해 .json 에 기록 후 읽어가는

Angular에서는 PWA를 매우 쉽게 적용할 수 있습니다. Cli에서 단순히 추가만 하면 알아서 필요한 요소들이 모두 설정되기 때문입니다.이번 시간은 생성된 프로젝트에 PWA를 적용하고 작동여부 확인 테스트까지 진행해보겠습니다.먼저 프로젝트를 하나 생성합니다. 기존

Component에서 라우팅 적용 시 사용할 수 있는 옵션 목록 입니다.Angular Docs링크가 어디에 기초하는지 정의URL에 파라미터 붙이는 방법frament를 붙이는 방법다른 주소로 이동할 때 현재 가진 파라미터를 전달.7버전부터 폐기되므로 대신 queryPar

component가 onInit 에서 service에서 가져온 값을 template에 적용할 때 template에서 에러가 발생합니다. 이는 변수에 값이 할당되기 전에 template에서 변수를 읽으려고 시도하기 때문인데 이를 해결하려면 nullable을 허용하는 ?

Enum의 정의와 종류에 대해 정리합니다.Enum은 상수 값의 의미있는 정의라고 볼 수 있습니다.아래와 같이 단순히 숫자를 yes와 no로 가정하여 처리할 수도 있습니다.그러나 다른 사람이 보았을 때는 숫자가 무엇을 의미하는지 왜 쓰였는지 쉽게 이해하기 어렵습니다. 그

Angular-cli에서 발생하는 다양한 WARN / ERROR의 해결 방법을 정리합니다.보통 update 후 에러 혹은 WARN이 발생하는데 @angular/core만 업데이트가 되고 dependence가 있는 @angular/http는 업데이트 되지 않아 발생한 에

compodoc에서 문서화를 시도할 때 Angular 8 에서 변경된 routing 방식 ( import().then(m->m.Module) ) 을 인식하지 못하는 문제가 발생합니다.딱히 해결 방법은 없고 이 문제가 해결될 때까지 문서를 구성할 때 routing 구조를

Angular의 Routing Lazy Loading 방법이 변경되었습니다.이는 Ivy에 동적 import 방식을 적용하기 위함이며, 기존 방식도 여전히 유효하나 앞으로 새로운 방식을 유지할 것으로 보입니다.기존 lazy loading 방식은 텍스트로 해당 모듈까지의

앱이 실행되는 시점에서 component보다 빠르게 실행하는 함수를 만들어 보고자 합니다.프로젝트를 만들다보면 종종 component보다 빠르게 함수를 실행하여 값을 설정하거나 불러올 필요가 있습니다.예를 들면, json 값을 가져와야 하거나 로그를 남길지의 여부를 세

Angular의 FormControl 이나 FormGroup을 Material과 연동해서 사용하다보면 에러처리를 커스터마이징 해야할 때가 있습니다.예를 들자면 동의 체크박스가 반드시 체크 되어야 하므로 체크가 되지 않으면 에러 메시지를 보여주어야 한다는 것 등입니다.물

Html에서 Form은 자주 사용되는데 Angular에서는 이 사용법이 은근 쉽지 않습니다.몇 가지 설정과 세팅을 해주어야 비로소 유용하고 편리하게 사용할 수 있는데 이 과정이 매번 프로젝트 생성할 때마다 맞는지 꼼꼼히 확인하지 않으면 에러가 발생합니다.앞으로도 자주

기본으로 제공되는 validation외에 cusom validation을 사용하는 방법을 알아보겠습니다.여기에서는 정규식 적용하기와 새로운 validation 적용하는 방법을 간단히 로그인 form을 활용해 알아보겠습니다.먼저 template을 작성합니다.materia

Angular에서 SSR을 사용하는 방법입니다. 우수한 Framework 답게 쉽고 빠르게 적용할 수 있도록 잘 구성되어 있기 때문에, 아래의 예제만 따라해도 충분히 실전에 사용할 수 있을 것 입니다.Universal 웹 서버는 static HTML 페이지를 templ

몇년 전부터 React, Angular, Vue와 같은 SPA 방식의 Front-end 개발 방식이 크게 유행하고 있습니다. 이는 매우 빠른 랜더링을 제공하므로 페이지 전환 시 페이지가 하얗게 되는 현상을 방지할 수 있으며 웹앱으로 개발 시에도 Native 앱과 크게

angular universal 프로젝트가 server platform에서 실행 중일 때 window.location 명령을 사용하는 방법 입니다.@angular/common에서 지원하는 Location Service를 활용하는 방법이므로 별도의 라이브러리를 가져올 필

Angular가 실행 중인 플랫폼이 브라우저인지 서버인지 확인하는 코드 입니다.확인하는 이유는 Angular가 서버 플랫폼에서 실행 중인 경우 브라우저에서만 사용 가능한 명령인 window, location, document 등을 사용할 수 없기 때문입니다.이 글은 a

보통의 차트 라이브러리가 Sparkline Chart를 지원하지 않아 (특히 Angular를 지원하는 차트 라이브러리) 직접 만들어 사용해보려고 합니다.다양한 차트 라이브러리 중 ng2-nvd3로 그린 차트가 가장 마음에 들어서 이 라이브러리를 활용하여 만들어 보겠습니

github에 업로드 된 Angular Universal 프로젝트를 Heroku에 업로드 하는 방법을 알아보겠습니다.사실 업로드 방법이 어렵지 않으나 헤맨 부분의 설명이 명확히 없어서 정리해보려고 합니다.먼저 heroku에 가입한 뒤,new를 클릭하여 프로젝트를 생성

@ng-toolkit/universal ERROR: Cannot read property 'unshift' of undefined 에러에 대해 알아보겠습니다.Angular universal에서 window를 사용하기 위해 @ng-toolkit/universal 을 설치

StaticInjectorError(AppServerModule)InjectionToken ng-toolkit-window 에러를 해결해보겠습니다.Angular universal에서 window를 사용하기 위해서 @ng-toolkit/universal에서 import

electron을 npm에서 간단히 받아 설치할 수 있습니다.angular project를 electron에서 실행하려면 우선 프로젝트를 빌드하여 dist 폴더를 생성합니다.electron은 js 파일을 수행하여 html을 load하는 방식이므로 js 파일을 생성하여야

angular에서 js 파일에 접근할 때는 d.ts를 활용하거나 import 하여 사용할 수 있습니다.그러나, 반대의 경우 js에서 angular에 접근하고 싶을 때는 어떻게 할까요?일반적으로는 불가능합니다. 왜냐하면 스코프(Scope)가 다르기 때문입니다.다시 말해서

form 태그에 ngModel을 넣었을 때 Cannot bind to 'ngModel' since it isn't a known property of 'input' 에러가 발생합니다.form을 사용하기 위해서는 반드시 모듈에 FormsModule을 선언해주어야 하는데

form 태그에 formGroup을 설정하였는데 'No provider for ControlContainer' 에러가 발생하였습니다.formGroup 외에 angular에서 사용하는 form 명령을 사용하려면 module에서 ReactiveFormsModule 을 im

ngFor는 DOM을 반복해서 출력해주는 기능을 합니다. 여기에 몇가지 추가 요소를 붙일 수 있는데 대표적인 것으로는 index가 있습니다.ngFor의 단점은 for문 안에 영향을 미치는 이벤트가 발동되면 모든 Dom이 refresh 된다는 점입니다. 즉, 많은 돔이

숫자만 입력 받는 Directive를 만들려고 하다가 마침 아래의 사이트가 있기에 바로 적용하였습니다.Digit Only Directive in Angular이 사이트의 코드를 적용해보니 영어는 입력이 잘 막혀서 문제가 없었는데 2byte 글자인 한글은 막아지지 않는다

windows에서 Angular cli를 설치합니다.ng 명령을 실행하면 다음과 같은 에러가 발생합니다.환경변수 (Environment Variables)를 엽니다.시스템 환경에서 Path를 찾아 엽니다. %AppData%\\npm 를 추가합니다. nodejs 보다 위

windowsvscodepowershellAngular 10.0.8Environment Variables를 설정하였음에도 스크립트를 실행할 수 없다는 에러가 발생합니다.C:\\Users\\< username >\\AppData\\Roaming\\npm\\ng.ps

여러 앱에서도 종종 발생하는 문제로 input에서 한글 또는 2-byte 글자를 입력하다보면 마지막 글자가 빠지는 현상이 나타납니다.이는 글자와 관계없는 키(예를들어, 화살표나 doc키 등)을 한 번 더 입력하면 해결되는데 매우 불편한 것이 사실입니다.Angular에서

js에는 부모와 자식간 이벤트 버블링이 발생하는데 대부분의 경우 이벤트 버블링 때문에 불 필요한 이벤트를 처리하는 등의 문제를 겪습니다.Angular에서도 역시 이벤트 버블링이 발생하는데 이는 랜더링 성능에 영향을 끼치게 됩니다.이를 해결하기 위해 changeDetec

(서버에서 xsrf 또는 csrf를 허용한 경우)Angular 6 이하에서는 http 전송 시 csrf 쿠키값을 헤더에 넣기 위해 HttpInterceptor를 사용하였는데, 여기에 csrf의 값이 담긴 쿠키값을 가져와 헤더를 생성하여야 하는 불편함이 있었습니다.Ang

Lazy Loading은 초기 로딩 시간을 줄여주는 역할을 하는 장점이 있지만, 해당 페이지가 로딩될 때 SPA의 특징인 즉시 페이지가 변경되는 빠른 로딩이 되지 않는다는 문제가 있습니다.이 두 가지를 모두 만족하는 방법은 없을까요?여기 PreloadAllModules

Scully를 적용하였을 때, 아래의 과제를 테스트 해봅니다.1\. 빌드 타임에 모든 형태의 routing 별로 index.html 이 만들어지는가?2\. 공통 meta, title 설정이 가능한가?3\. 만일 그렇다면 routing별로 각각 다른 dynamic met

scully에 ngx-translate 적용하기실행 후 언어를 변경하고 refresh 했을 때 rehydration 현상 확인처음부터 변경된 언어로 작성된 static html을 화면에 노출하기LocalStorage를 활용하여 변경된 언어를 저장합니다.리로드 시 페이지

@if나 ngIf에서 하나의 Observable 정의합니다.@if나 ngIf에서 둘 이상의 Observable 정의합니다.async를 적용하려면 변수명 뒤에 async pipe를 추가하고 as로 사용할 변수명을 정의해줍니다.여러 개의 Observable을 정의할 때,

Angular에서 리스트를 렌더링할 때, 배열의 데이터가 변경되면 Angular는 DOM 전체를 다시 렌더링할 수 있습니다. 이는 성능 저하의 원인이 될 수 있습니다. 이 문제를 해결하기 위해 Angular는 각 아이템을 고유하게 식별하여 변경된 부분만 업데이트하는 메

일반적으로 템플릿에서 조건에 따라 표시할 컴포넌트를 동적으로 교체하는 것은 까다로울 수 있습니다. 전통적으로는 여러 컴포넌트를 템플릿에 나열하고, @if나 @switch 같은 조건부 렌더링 구문을 사용해 원하는 컴포넌트만 노출하는 방법을 사용했습니다.이러한 방식은 템플

Angular로 대규모의 복잡한 애플리케이션을 개발하다 보면, 일관된 디자인 표준을 유지하기 위해 공통으로 사용할 수 있는 UI 컴포넌트 라이브러리를 구축하는 경우가 많습니다. 특히 input, select와 같은 폼 컨트롤(Form Control)은 애플리케이션 전반

보다 범용적인 버전에서 활용할 수 있는 createComponent를 사용하여 dynamic component를 구현합니다.componentFactory를 활용하여 호출할 component의 정보를 가져옵니다.component를 담을 container component

Angular의 동적 컴포넌트 생성 기능인 createComponent를 활용하여, 마우스를 올렸을 때 나타나는 동적 툴팁(Tooltip)을 만들어 봅시다.툴팁으로 사용될 컴포넌트(ATooltipComponent, BTooltipComponent)를 standalone

createComponent는 ngComponentOutlet보다 더 저수준에서 동적 컴포넌트를 제어할 수 있어, 툴팁뿐만 아니라 복잡한 상호작용이 필요한 모달(Modal) 시스템을 구축하는 데 매우 유용합니다.툴팁과 달리 모달은 더 많은 기능을 고려해야 합니다.서비스

template에서 object의 key와 value를 쉽게 구분하여 사용할 수 있도록 기본 제공되는 keyvalue pipe를 활용할 때, 정렬 순서를 커스터마이징 해봅니다.keyvalue pipe는 json값의 key와 value를 쉽게 구분하여 template에

이번 시간은 chrome의 개발자 도구(DevTools)에 Angular 탭을 추가하는 방법과 사용 방법에 대하여 알아보겠습니다. 아래의 단계를 통해 Chrome DevTools에서 Angular 탭을 추가해 봅시다.Chrome Web Store 에 접속하여 Angul

websocket을 angular 사용하는 방법에 대해 알아봅시다.모든 내용을 다루기에는 양이 많으므로 이번에는 js에서 제공하는 일반 websocket을 활용하는 방법만 정리하고, 다음 시간에 rxjs의 websocket을 활용하는 방법에 대해 정리하도록 하겠습니다.

Highcharts-Angular는 Highcharts를 Angular에서 사용하기 쉽도록 작성된 library 입니다.이 글에서는 Highcharts와 Highcharts-Angular를 설치하는 방법을 알아보고,Highchart-Angular에서 제공하는 기본 In

Highcharts에서는 chart 변수에 직접 options을 주입하기 때문에 api 의 활용은 물론, 값의 수정도 쉽게 적용할 수 있습니다.하지만 highcharts-angular에서는 chart 변수에 직접 적용하려고 하면 다른 상황을 겪게 됩니다.이 글에서는 h

이미지 파일을 업로드하기 위해서는 <input type="file">을 사용해야하며, 이 결과를 base64 string으로 변환하면 <img>에 표시할 수 있습니다.그런데 만일 svg 파일을 추가하면 다음과 같은 에러가 발생하며, 깨진 이미지를 볼 수 있습

Highchart는 데이터를 수정하기 위한 다양한 옵션을 가지고 있고, 관련 api 문서도 잘 구성되어 있기 때문에 highcharts-angular를 사용함에 있어서도 큰 어려움이 없습니다.다만 모든 상황에서 모든 명령을 일일이 찾기란 번거로운 일이며, 아마도 값을

이번 시간은 Browser를 닫을 때 이벤트를 처리하는 방법에 대해 정리해보고 예제를 통해 알아보겠습니다.browser를 닫을 경우 beforeunload와 unload 두 가지 이벤트가 발생합니다.우선 각각의 이벤트에 대해 알아봅시다.document unload를 진

이번 시간은 router-outlet 태그의 name attribute의 활용에 대해 알아보겠습니다.name attribute는 다음과 같이 사용합니다.이 name attribute는 Routes의 outlet 설정과 관련이 있습니다.routing을 구성할 때, '@a

이번 시간에는 Angular의 의존성 주입(Dependency Injection)에서 providers를 설정할 때 useClass와 useExisting의 차이를 알아보겠습니다. 이 개념은 NgModule과 Standalone Components 모두에 동일하게 적용

이 글에서는 Highchart에서 유저가 선택한 모든 point의 정보를 가져오는 방법을 알아봅시다.각 point를 클릭하려면 반드시 allowPointSelect 옵션이 true로 설정되어야 합니다.이 옵션은 각 series에서 설정할 수도 있으나 모든 series에

이 글에서는 Highchart에서 지원하지 않는 마우스 drag로 point를 선택하는 방법을 알아봅시다.Highchart의 기본 기능에는 chart의 background를 drag 하는 기능이 없습니다. 이를 구현하려면 drag를 지원하는 다른 기능을 변형하여 사용하

Typescript는 Javascript와 다르게 Type을 검사하고, 알맞은 Type이 아닌 경우 에러를 발생시키며, 올바른 타입을 지정할 것을 요구합니다. 이번 시간은 때때로 변수의 정확한 타입을 알 수 없을 경우 타입 검사를 무시하는 방법에 대해 알아봅시다.한 j

angular 프로젝트의 문서화를 구글의 라이브러리 나 MS의 Fluent2 등과 같은 형태의 문서로 작성하고 싶을 때 ngdoc를 활용하는 것을 추천합니다.이 라이브러리는 직접 테스트해볼 수 있는 샘플과 샘플에 해당하는 코드를 제공할 수 있으며, md 스타일의 문서를

Angular 애플리케이션에서 API 문서를 자동으로 생성하는 방법에 대해 설명드리겠습니다. 이를 위해서 @ng-doc/builder와 @ng-doc/core를 사용하여 API 문서를 생성할 수 있습니다.먼저, @ng-doc/builder를 사용하여 API 문서를 생성

Worker는 JavaScript 코드를 백그라운드 스레드에서 실행할 수 있게 해주는 강력한 기술입니다. Angular 애플리케이션에서 Worker를 통해 복잡한 연산을 백그라운드에서 처리하면 메인 스레드의 부하를 줄여 사용자 경험(UX)을 크게 향상시킬 수 있습니다.

웹 워커(Worker)는 복잡한 계산이나 무거운 작업을 별도의 스레드에서 실행하여 메인 스레드의 부하를 줄이고 애플리케이션의 반응성을 높이는 강력한 도구입니다.하지만 메인 스레드와 워커 간에 대용량 데이터를 주고받을 때, 데이터를 복사(copy)하는 과정에서 성능 저하

Highcharts에서는 points에 contextmenu를 기본 event로 제공하지 않습니다.그래서 일반적으로 npm에서 highcharts-custom-events 를 설치하는 방법을 추천합니다.그러나 이번 블로그에서는 3rd party없이 Highcharts

Angular에서 Modal을 열고 닫는 방법은 다양하게 존재합니다. 그 중에서도 Route를 활용하여 Modal을 제어하는 방법을 살펴보겠습니다. 이 방식은 특정 주소로 이동할 때 Modal이 열리고, 해당 주소에서 벗어나면 Modal이 닫히는 간편하면서도 효과적인

Angular 애플리케이션에서 Route Outlet Name을 활용하여 동적으로 삽입된 컴포넌트에 대한 Route를 관리하는 것은 효율적인 UI 구성을 위한 강력한 수단입니다. 그러나 동시에 현재 Route를 Outlet에서 제거하는 것은 일반적인 Route 제거 방

Standalone Component에서 Component, Pipe, Directive 의 적절한 Imports 관리는 깨끗하고 최적화된 코드 구조를 유지하는 데 필수적입니다. 이 글에서는 Template에서의 Component, Pipe, Directive 다루기,

이 글에서는 Angular에서 Web Component를 만드는 과정을 살펴보겠습니다. 많은 글들이 Module 방식에 중점을 두고 있으므로 Module 방식은 다른 문서를 확인하시고,여기에서는 Angular Standalone 환경일 때 Web Component를 만

이 글에서는 Angular 애플리케이션에서 값이 템플릿에 즉시 반영되지 않는 문제를 해결하는 방법에 대해 탐구합니다. 보통 선언된 변수는 즉시 템플릿에 반영되지만 OnPush 변경 감지를 사용하는 경우와 같이 특정 상황에서는 그렇지 않을 수 있습니다.이 글은 변경 감지

이번 글에서는 webcomponent를 Angular 프로젝트에서 사용하는 방법에 대해 살펴보겠습니다.특히, index.html이 아닌 Angular component 에서 WebComponent를 호출하는 방법에 중점을 둘 것입니다.지난 글을 참조하여 webcompo

이 글에서는 Native Federation을 활용하여 Micro Frontend를 구축하는 과정을 예제를 통해 살펴보겠습니다.Native Federation은 module federation을 esbuild 등 다양한 번들로 Micro Frontend 환경을 구축할

이번 글에서는 Native Federation에서 manifest를 정의하지 않고 동적으로 remote를 정의하여 Micro Frontend를 구축하는 방법을 예제를 통해 살펴보겠습니다.remote의 경우 이전 글에서 작성한 코드와 변화가 없으므로, 여기에서는 호스트

이 글에서는 자체 개발한 라이브러리를 마치 외부 라이브러리처럼 사용하는 방법에 대해 다루어 보겠습니다.Angular6 부터 ng-packagr가 정식 지원 되어 쉽게 만을 수 있으니 자주 사용하는 기능은 라이브러리로 만들고 package화 해서 편리하게 재활용 하시기

Angular는 애플리케이션 아키텍처를 간소화하고 성능을 최적화하기 위한 여러 기능을 도입했습니다. 그중에서도 가장 중요한 변화인 Standalone는 Angular 애플리케이션 개발 방식에 큰 변화를 가져온 중요한 기능입니다. 기존의 NgModule 기반 아키텍처에서

Angular Standalone에서는 특히 라우팅(Routing) 부분에서 많은 변화가 있습니다. 독립적인 컴포넌트 관리와 더불어 성능 최적화 및 코드 구조 단순화에 기여합니다. 이 글에서는 Standalone 방식의 라우팅을 살펴보고, 기존의 모듈 기반 라우팅과 어

Angular는 최신 버전에서 개발자 경험을 크게 개선하는 여러 기능을 도입했습니다. 그 중에서도 Standalone Component와 inject API는 Angular 애플리케이션의 구조와 의존성 관리 방식을 변화시키는 핵심 요소입니다. 이 글에서는 이러한 변화들

오늘은 keycloak과 module federation이 무엇인지 정의하고 발생한 에러를 해결할 방법을 알아보겠습니다.Keycloak은 통합 인증 시스템으로, 아이덴티티 및 접근 관리(Identity and Access Management)를 제공하는 오픈 소스 소프

Signal은 Angular 16에서 새롭게 도입된 반응형 프로그래밍 모델로, 상태 변화를 추적하기 위한 로직을 간소화하고 성능을 높이는 데 사용됩니다.기존의 RxJS Observable과 달리, Signal은 값 자체를 캡슐화하여 값의 변경을 직접 감지하고 관련된 종

Angular는 강력한 프레임워크로, 개발자들이 효율적으로 웹 애플리케이션을 구축할 수 있도록 다양한 기능을 제공하는데 그 중 하나가 바로 Control Flow입니다. 이번 글에서는 Control Flow가 무엇인지, 어떻게 사용되는지, 그리고 그로 인해 얻는 이점에

지연 가능한 뷰, 즉 @defer 블록은 페이지의 초기 렌더링에 엄격히 필요하지 않은 코드의 로딩을 지연시켜 애플리케이션의 초기 번들 크기를 줄입니다.이로 인해 초기 로드 속도가 빨라지고 Core Web Vitals(CWV), 특히 Largest Contentful P

이번 시간에는 Control folw에서 async pipe를 사용하는 방법과 alias 설정하는 방법을 알아보겠습니다.html에서 Observable 변수를 사용할 때 async pipe를 사용하면 Observable이 발행하는 값을 구독할 수 있습니다.하지만 Obs