[angular] Control flow - How to use async pipe with alias
이번 시간에는 Control folw에서 async pipe를 사용하는 방법과 alias 설정하는 방법을 알아보겠습니다.
이번 시간에는 Control folw에서 async pipe를 사용하는 방법과 alias 설정하는 방법을 알아보겠습니다.
지연 가능한 뷰, 즉 @defer 블록은 페이지의 초기 렌더링에 엄격히 필요하지 않은 코드의 로딩을 지연시켜 애플리케이션의 초기 번들 크기를 줄입니다. 이로 인해 초기 로드 속도가 빨라지고 Core Web Vitals(CWV), 특히 Largest Contentful Paint(L...
Angular는 강력한 프레임워크로, 개발자들이 효율적으로 웹 애플리케이션을 구축할 수 있도록 다양한 기능을 제공하는데 그 중 하나가 바로 Control Flow입니다. 이번 글에서는 Control Flow가 무엇인지, 어떻게 사용되는지, 그리고 그로 인해 얻는 이점에 대해 자세...
Signal은 Angular 16에서 새롭게 도입된 반응형 프로그래밍 모델로, 상태 변화를 추적하기 위한 로직을 간소화하고 성능을 높이는 데 사용됩니다. 기존의 RxJS Observable과 달리, Signal은 값 자체를 캡슐화하여 값의 변경을 직접 감지하고 관련된 종속성을 자동...
오늘은 keycloak과 module federation이 무엇인지 정의하고 발생한 에러를 해결할 방법을 알아보겠습니다.
Angular는 최신 버전에서 개발자 경험을 크게 개선하는 여러 기능을 도입했습니다. 그 중에서도 Standalone Component와 inject API는 Angular 애플리케이션의 구조와 의존성 관리 방식을 변화시키는 핵심 요소입니다. 이 글에서는 이러한 변화들이 Angul...
Angular Standalone에서는 특히 라우팅(Routing) 부분에서 많은 변화가 있습니다. 독립적인 컴포넌트 관리와 더불어 성능 최적화 및 코드 구조 단순화에 기여합니다. 이 글에서는 Standalone 방식의 라우팅을 살펴보고, 기존의 모듈 기반 라우팅과 어떻게 다른지 ...
Angular는 애플리케이션 아키텍처를 간소화하고 성능을 최적화하기 위한 여러 기능을 도입했습니다. 그중에서도 가장 중요한 변화인 Standalone는 Angular 애플리케이션 개발 방식에 큰 변화를 가져온 중요한 기능입니다. 기존의 NgModule 기반 아키텍처에서 벗어나 컴포...
2019년 7월에 작성한 Creating Library 문서가 미흡하여 보다 이해하기 쉽게 재작성하였습니다. 이 글에서는 자체 개발한 라이브러리를 마치 외부 라이브러리처럼 사용하는 방법에 대해 다루어 보겠습니다.
이전 글에서는 Manifest를 사용하여 remote를 정의하는 정적인 방식으로 Micro Frontend를 구축하는 방법을 살펴봤습니다. 이번 글에서는 Native Federation에서 manifest를 정의하지 않고 동적으로 remote를 정의하여 Micro Frontend를...
이 글에서는 Native Federation을 활용하여 Micro Frontend를 구축하는 과정을 예제를 통해 살펴보겠습니다.
이번 글에서는 webcomponent를 Angular 프로젝트에서 사용하는 방법에 대해 살펴보겠습니다. 특히, index.html이 아닌 Angular component 에서 WebComponent를 호출하는 방법에 중점을 둘 것입니다.
소개 이 글에서는 Angular 애플리케이션에서 값이 템플릿에 즉시 반영되지 않는 문제를 해결하는 방법에 대해 탐구합니다. 보통 선언된 변수는 즉시 템플릿에 반영되지만 OnPush 변경 감지를 사용하는 경우와 같이 특정 상황에서는 그렇지 않을 수 있습니다. 이 글은 변경 감지에 ...
이 글에서는 Angular에서 Web Component를 만드는 과정을 살펴보겠습니다. 많은 글들이 Module 방식에 중점을 두고 있으므로 Module 방식은 다른 문서를 확인하시고, 여기에서는 Angular Standalone 환경일 때 Web Component를 만드는 방법...
소개 Standalone Component에서 Component, Pipe, Directive 의 적절한 Imports 관리는 깨끗하고 최적화된 코드 구조를 유지하는 데 필수적입니다. 이 글에서는 Template에서의 Component, Pipe, Directive 다루기, Com...
Angular 애플리케이션에서 Route Outlet Name을 활용하여 동적으로 삽입된 컴포넌트에 대한 Route를 관리하는 것은 효율적인 UI 구성을 위한 강력한 수단입니다. 그러나 동시에 현재 Route를 Outlet에서 제거하는 것은 일반적인 Route 제거 방법과는 다른 ...
Angular에서 Modal을 열고 닫는 방법은 다양하게 존재합니다. 그 중에서도 Route를 활용하여 Modal을 제어하는 방법을 살펴보겠습니다. 이 방식은 특정 주소로 이동할 때 Modal이 열리고, 해당 주소에서 벗어나면 Modal이 닫히는 간편하면서도 효과적인 방법입니다.
Highcharts에서는 points에 contextmenu를 기본 event로 제공하지 않습니다. 그래서 일반적으로 npm에서 highcharts-custom-events 를 설치하는 방법을 추천합니다.
Angular에서 Worker 활용하기
Angular 애플리케이션에서 API 문서 생성하기 Angular 애플리케이션에서 API 문서를 자동으로 생성하는 방법에 대해 설명드리겠습니다. 이를 위해서 @ng-doc/builder와 @ng-doc/core를 사용하여 API 문서를 생성할 수 있습니다.
Tooltip Options 먼저, Highcharts의 툴팁 옵션에 대해 알아봅시다. 툴팁은 데이터 포인트를 가리킬 때 정보를 표시하는데 사용됩니다. 다양한 옵션을 통해 툴팁을 사용자 정의할 수 있습니다.
이 글에서는 Highchart에서 label을 사용할 때 style을 변경하는 방법에 대해 알아보겠습니다.
ngdoc으로 앵귤러 프로젝트를 간단히 문서화하기
Typescript는 Javascript와 다르게 Type을 검사하고, 알맞은 Type이 아닌 경우 에러를 발생시키며, 올바른 타입을 지정할 것을 요구합니다. 이번 시간은 때때로 변수의 정확한 타입을 알 수 없을 경우 타입 검사를 무시하는 방법에 대해 알아봅시다.
TypeScript에서 typeof, instanceof, keyof, in 연산자는 각각 다음과 같은 역할을 합니다.
이 글에서는 Highchart에서 지원하지 않는 마우스 drag로 point를 선택하는 방법을 알아봅시다.
이 글에서는 Highchart에서 유저가 선택한 모든 point의 정보를 가져오는 방법을 알아봅시다.
이번 시간은 module에서 providers를 설정 시 useClass와 useExisting 의 차이를 알아보겠습니다.
이번 시간은 router-outlet 태그의 name attribute의 활용에 대해 알아보겠습니다.
이번 시간은 Browser를 닫을 때 이벤트를 처리하는 방법에 대해 정리해보고 예제를 통해 알아보겠습니다.
Highchart는 데이터를 수정하기 위한 다양한 옵션을 가지고 있고, 관련 api 문서도 잘 구성되어 있기 때문에 highcharts-angular를 사용함에 있어서도 큰 어려움이 없습니다. 다만 모든 상황에서 모든 명령을 일일이 찾기란 번거로운 일이며, 아마도 값을 주입하는대로...
이미지 파일을 업로드하기 위해서는 <input type="file">을 사용해야하며, 이 결과를 base64 string으로 변환하면 <img>에 표시할 수 있습니다.
Highcharts에서는 chart 변수에 직접 options을 주입하기 때문에 api 의 활용은 물론, 값의 수정도 쉽게 적용할 수 있습니다. 하지만 highcharts-angular에서는 chart 변수에 직접 적용하려고 하면 다른 상황을 겪게 됩니다. 이 글에서는 highc...
예제들을 검색하다보면 javascript 또는 jquery로 된 예제들을 볼 수 있는데, 그런 예제들 중에 this로 처리되어 있는 예제들을 간혹 확인할 수 있습니다. 하지만 typescript나 angular 에서의 this는 그 의미가 다르므로 그대로 코드를 옮기면 에러가 발생...
Highcharts-Angular는 Highcharts를 Angular에서 사용하기 쉽도록 작성된 library 입니다. 이 글에서는 Highcharts와 Highcharts-Angular를 설치하는 방법을 알아보고, Highchart-Angular에서 제공하는 기본 Input에...
websocket을 angular 사용하는 방법에 대해 알아봅시다. 모든 내용을 다루기에는 양이 많으므로 이번에는 js에서 제공하는 일반 websocket을 활용하는 방법만 정리하고, 다음 시간에 rxjs의 websocket을 활용하는 방법에 대해 정리하도록 하겠습니다.
값을 비교할 때, undefined 또는 null을 비교하기 위해 우리는 일반적으로 if 또는 삼항연산자를 활용합니다. ```tsx if (value !== undefined || value !== null) { return value; } return ‘’;
이번 시간은 chrome의 개발자 도구(DevTools)에 Angular 탭을 추가하는 방법과 사용 방법에 대하여 알아보겠습니다.
class의 getter와 setter에 대해 알아보고, 이를 interface에서 구현합니다.
template에서 object의 key와 value를 쉽게 구분하여 사용할 수 있도록 기본 제공되는 keyvalue pipe를 활용할 때, 정렬 순서를 커스터마이징 해봅니다.
dynamic component 기능인 createComponent를 활용하여 Modal 만들어 봅시다.
dynamic component 기능인 createComponent를 활용하여 Tooltip을 만들어 봅시다. 기본 동작
보다 범용적인 버전에서 활용할 수 있는 createComponent를 사용하여 dynamic component를 구현합니다.
ngIf를 활용하여 조건에 맞는 component만 노출하기
ngFor에 연결된 배열의 값이 변경될 때 refresh가 발생하여 rendering이 일어나는데, 이를 방지하기 위해 trackBy를 사용합니다. 즉, trackBy를 사용하면 값이 변경되어도 rendering이 되지 않으므로 성능을 향상 시킬 수 있습니다.
계획 ngIf에서 하나의 Observable 정의합니다. ngIf에서 둘 이상의 Observable 정의합니다.
과제 scully에 ngx-translate 적용하기 실행 후 언어를 변경하고 refresh 했을 때 rehydration 현상 확인 처음부터 변경된 언어로 작성된 static html을 화면에 노출하기
과제 Scully를 적용하였을 때, 아래의 과제를 테스트 해봅니다. 빌드 타임에 모든 형태의 routing 별로 index.html 이 만들어지는가? 공통 meta, title 설정이 가능한가? 만일 그렇다면 routing별로 각각 다른 dynamic meta, tit...
환경 Angular 10
Angular-cli에서 발생하는 다양한 WARN / ERROR의 해결 방법을 정리합니다.
원인 여러 앱에서도 종종 발생하는 문제로 input에서 한글 또는 2-byte 글자를 입력하다보면 마지막 글자가 빠지는 현상이 나타납니다. 이는 글자와 관계없는 키(예를들어, 화살표나 doc키 등)을 한 번 더 입력하면 해결되는데 매우 불편한 것이 사실입니다.
환경 Angular 9
환경 windows vscode powershell Angular 10.0.8
현상 windows에서 Angular cli를 설치합니다.
숫자만 입력 받는 Directive를 만들려고 하다가 마침 아래의 사이트가 있기에 바로 적용하였습니다.
ngFor는 DOM을 반복해서 출력해주는 기능을 합니다. 여기에 몇가지 추가 요소를 붙일 수 있는데 대표적인 것으로는 index가 있습니다.
Unknown 타입은 Typescript 3.0 부터 적용 되었습니다.
원인 @babel/compat-data에 새로운 플러그인이 추가될 때 기존 @babel/preset-env의 버전과 충돌합니다. available-plugins.js 파일에 정의되어 있지 않은 플러그인인 경우 에러를 던집니다.
원인 form 태그에 formGroup을 설정하였는데 ‘No provider for ControlContainer’ 에러가 발생하였습니다.
원인 form 태그에 ngModel을 넣었을 때 Cannot bind to ‘ngModel’ since it isn’t a known property of ‘input’ 에러가 발생합니다.
분석 angular에서 js 파일에 접근할 때는 d.ts를 활용하거나 import 하여 사용할 수 있습니다. 그러나, 반대의 경우 js에서 angular에 접근하고 싶을 때는 어떻게 할까요?
electron 설치 electron을 npm에서 간단히 받아 설치할 수 있습니다.
StaticInjectorError(AppServerModule)[InjectionToken ng-toolkit-window] 에러를 해결해보겠습니다.
@ng-toolkit/universal ERROR: Cannot read property 'unshift' of undefined 에러에 대해 알아보겠습니다.
github에 업로드 된 Angular Universal 프로젝트를 Heroku에 업로드 하는 방법을 알아보겠습니다.
Typescript에서 외부 js 파일을 가져오는 방법을 몇 가지 알아보겠습니다. 5년전 만해도 매우 생소했던 Typescript가 Angular를 필두로 최근 몇 년 사이에 활용 빈도가 급격히 증가하여 React나 Vue.js를 비롯하여 심지어 node.js도 사용할 정도로 대세...
보통의 차트 라이브러리가 Sparkline Chart를 지원하지 않아 (특히 Angular를 지원하는 차트 라이브러리) 직접 만들어 사용해보려고 합니다. 다양한 차트 라이브러리 중 ng2-nvd3로 그린 차트가 가장 마음에 들어서 이 라이브러리를 활용하여 만들어 보겠습니다. 손쉬운...
Angular8에서는 기대하던 Ivy Rendering이 추가되고, 그 외에 많은 개선 및 추가 기능들이 포함되었습니다. 그 중에서 Angular를 제대로 활용하기 위해 반드시 알아야 할 새 기능과 변경된 기능을 추려서 정리해보겠습니다. 이해하지 못해 빠진 부분도 있으므로 댓글로 ...
angular universal 프로젝트가 server platform에서 실행 중일 때 window.location 명령을 사용하는 방법 입니다. @angular/common에서 지원하는 Location Service를 활용하는 방법이므로 별도의 라이브러리를 가져올 필요는 없습니...
Angular가 실행 중인 플랫폼이 브라우저인지 서버인지 확인하는 코드 입니다.
Angular에서 SSR을 사용하는 방법입니다. 우수한 Framework 답게 쉽고 빠르게 적용할 수 있도록 잘 구성되어 있기 때문에, 아래의 예제만 따라해도 충분히 실전에 사용할 수 있을 것 입니다.
몇년 전부터 React, Angular, Vue와 같은 SPA 방식의 Front-end 개발 방식이 크게 유행하고 있습니다. 이는 매우 빠른 랜더링을 제공하므로 페이지 전환 시 페이지가 하얗게 되는 현상을 방지할 수 있으며 웹앱으로 개발 시에도 Native 앱과 크게 차이가 없는 ...
이 문서는 새로 업데이트 되었습니다. 업데이트된 글로 바로가기 자체 개발한 라이브러리를 마치 외부 라이브러리를 사용하는 것처럼 만들 수 있습니다.
기본으로 제공되는 validation외에 cusom validation을 사용하는 방법을 알아보겠습니다. 여기에서는 정규식 적용하기와 새로운 validation 적용하는 방법을 간단히 로그인 form을 활용해 알아보겠습니다.
Angular의 FormControl 이나 FormGroup을 Material과 연동해서 사용하다보면 에러처리를 커스터마이징 해야할 때가 있습니다. 예를 들자면 동의 체크박스가 반드시 체크 되어야 하므로 체크가 되지 않으면 에러 메시지를 보여주어야 한다는 것 등입니다.
앱이 실행되는 시점에서 component보다 빠르게 실행하는 함수를 만들어 보고자 합니다.
Html에서 Form은 자주 사용되는데 Angular에서는 이 사용법이 은근 쉽지 않습니다.
compodoc에서 문서화를 시도할 때 Angular 8 에서 변경된 routing 방식 ( import().then(m->m.Module) ) 을 인식하지 못하는 문제가 발생합니다.
Angular에 JSDoc과 같은 자동 문서화 라이브러리를 사용하고자 하실 것입니다.
Angular의 Routing Lazy Loading 방법이 변경되었습니다.
버전 업데이트 과정을 설명합니다. 여기에서는 7버전에서 8버전 업데이트를 설명합니다. 모든 버전 업데이트의 방식이 동일하므로 다른 버전도 아래와 같이 진행하면 됩니다.
Enum의 정의와 종류에 대해 정리합니다.
PWA를 활용하여 점검 또는 오프라인 공지를 만드는 방법입니다.
Angular에서는 PWA를 매우 쉽게 적용할 수 있습니다. Cli에서 단순히 추가만 하면 알아서 필요한 요소들이 모두 설정되기 때문입니다. 이번 시간은 생성된 프로젝트에 PWA를 적용하고 작동여부 확인 테스트까지 진행해보겠습니다.
Component에서 라우팅 적용 시 사용할 수 있는 옵션 목록 입니다.
component가 onInit 에서 service에서 가져온 값을 template에 적용할 때 template에서 에러가 발생합니다. 이는 변수에 값이 할당되기 전에 template에서 변수를 읽으려고 시도하기 때문인데 이를 해결하려면 nullable을 허용하는 ? 를 넣어 해...
Subject를 Subscribe를 할 때 Subscription으로 받아둔 뒤 해당 Subscription을 unsubscribe 하는 방법입니다.
rxjs에서 pipe에서 주로 사용하는 명령들을 정리하였습니다.
@Input이 데이터를 전달하지 못하는 원인을 분석합니다.
ng test와 ng e2e 적용 방법과 차이점을 알아봅시다.
route에서 canActivate와 canDeactivate, canActivateChild, canLoad 옵션처리 방식을 알아보고, 함께 Guard 사용 방법을 알아보겠습니다.
기본적으로 적용된 모든 애니메이션 또는 특정 Material 요소의 애니메이션을 중지하고자 할 때, 몇 가지 간단한 제어 방법을 사용할 수 있습니다.
중복 사용되는 모듈을 Shared Module로 공유하는 방법 입니다.
## Server-side vs. Client-side Routing
Analysis When setting up routing, components are typically configured as follows: {path: '', component: AppComponent, children: [ { path: '', redirectTo: '...
Apply multiple languages instantly using ngx-translate without server requests or reloading.
Catch All Angular Errors with a Custom Error Handler
Angular Lazy Loading: A Comprehensive Guide to Module and Component Implementation
match
Enum 기본 기능은 다른 언어의 Enum과 유사합니다. 다만, 구조체와 같이 implement로 확장이 가능하며, Nullable 변수를 선언할 때 사용하는 등 활용도가 더 넓습니다.
구조체에 implement를 적용하면 함수를 추가할 수 있습니다. 이는 마치 Class 구조와 비슷하게 동작하는 효과를 주므로 매우 유용하게 사용할 수 있습니다.
Struct에 대해 알아봅시다.
이제 Reference와 Borrowing에 대해 알아보겠습니다.
Rust는 Ownership이라는 개념이 존재합니다. Ownership은 값이 담긴 메모리의 실제 소유자(사용자)가 누구인가를 의미합니다.
일반적으로 모든 언어에는 if와 switch 같은 제어문과 for나 while과 같은 반복문이 있습니다.
함수의 기본 사용법은 javascript와 유사하나 rust에서는 function 대신 fn을 사용합니다.
Println!
1. immutable과 mutable 선언
1. 주석
1설치하기
개발 중 git push 과정에서 GitHub Push Protection으로 인해 코드 푸시가 차단된 경험이 있으신가요? 이 기능은 중요한 보안 정보(예: Access Key, Token 등)가 저장소에 푸시되는 것을 방지하기 위한 GitHub의 보안 시스템입니다.
Github Models 는 GitHub의 AI 및 머신 러닝 모델을 쉽게 관리하고 배포할 수 있도록 돕는 기능입니다. GitHub에서 제공하는 모델 저장소나 API를 통해 개발자는 자신만의 머신 러닝 모델을 관리하거나 다른 사람이 만든 모델을 활용할 수 있습니다. 이러한 모델...
Deep Copy
우리는 개발하면서 Array의 특정 항목을 제거할 때가 있습니다. 그럴 때 filter()를 사용하면 간단하게 원하는 항목을 제거할 수 있습니다. 그런데 JSON에서는 filter()를 제공하지 않으므로 골치 아픈 경우가 많습니다. 때로는 이를 위해 아래와 같이 새로운 json ...
Debounce 또는 Throttle Decorator를 만들기 위해 여러 사이트를 검색하였으나, Angular나 Typescript에 적합한 예제를 찾을 수 없어서 직접 만들었습니다. 저와 같이 검색하시는 분들께 도움이 되었으면 좋겠다는 생각을 하며 글을 시작합니다.
함수가 실행 되기 전에 반복적으로 선행되어야 할 명령을 별도의 함수로 구현한 뒤 이를 한줄의 명령어로 쉽게 호출하는 방법 입니다. 일반적으로 @Decorator와 같이 앞에 @을 붙여서 호출하며, 클래스, 함수, 변수, 심지어 함수의 파라미터에도 적용할 수 있으나 각각의 적용하는 ...
1. 개요 JAMStack은 기존 용어인 ‘LAMPStack (Linux, Apache, MySql, PHP)’ 혹은 ‘MEANStack (MongoDB, ExpressJS, AngularJS, NodeJS)’ 같은 단어와 비슷한 최근 웹 기술에서 구성해야할 요소의 모음입니다. ...
yield 패턴에 대해서 알아보겠습니다.
자바스크립트 수행 시간 측정 방법에 대해 알아보겠습니다.
mongoDB에서 update와 replace의 차이를 비교해보겠습니다. 한국어로는 관련 내용이 없어서 stackoverflow를 참고하여 정리하였습니다.
MongoDB에서 전체 검색과 범위 검색 쿼리 만드는 방법입니다.