[angular] A Guide to ControlValueAccessor for Custom Angular Form Controls
When developing large-scale, complex applications with Angular, it’s common to build a shared library of UI components to maintain consistent design standard...
angular
[angular] Control flow - How to use async pipe with alias
이번 시간에는 Control folw에서 async pipe를 사용하는 방법과 alias 설정하는 방법을 알아보겠습니다.
[angular] Control flow - defer
지연 가능한 뷰, 즉 @defer 블록은 페이지의 초기 렌더링에 엄격히 필요하지 않은 코드의 로딩을 지연시켜 애플리케이션의 초기 번들 크기를 줄입니다. 이로 인해 초기 로드 속도가 빨라지고 Core Web Vitals(CWV), 특히 Largest Contentful Paint(L...
[angular] Control flow - If, Switch and For
Angular는 강력한 프레임워크로, 개발자들이 효율적으로 웹 애플리케이션을 구축할 수 있도록 다양한 기능을 제공하는데 그 중 하나가 바로 Control Flow입니다. 이번 글에서는 Control Flow가 무엇인지, 어떻게 사용되는지, 그리고 그로 인해 얻는 이점에 대해 자세...
[angular] Signal
Signal은 Angular 16에서 새롭게 도입된 반응형 프로그래밍 모델로, 상태 변화를 추적하기 위한 로직을 간소화하고 성능을 높이는 데 사용됩니다. 기존의 RxJS Observable과 달리, Signal은 값 자체를 캡슐화하여 값의 변경을 직접 감지하고 관련된 종속성을 자동...
[angular] Error Fix for Keycloak with Angular Module Federation (Angular Module Federation에서 keycloak 에러 해결하기)
오늘은 keycloak과 module federation이 무엇인지 정의하고 발생한 에러를 해결할 방법을 알아보겠습니다.
[angular] Angular Standalone Component와 새로운 의존성 주입 방식
Angular는 최신 버전에서 개발자 경험을 크게 개선하는 여러 기능을 도입했습니다. 그 중에서도 Standalone Component와 inject API는 Angular 애플리케이션의 구조와 의존성 관리 방식을 변화시키는 핵심 요소입니다. 이 글에서는 이러한 변화들이 Angul...
[angular] Standalone Routing
Angular Standalone에서는 특히 라우팅(Routing) 부분에서 많은 변화가 있습니다. 독립적인 컴포넌트 관리와 더불어 성능 최적화 및 코드 구조 단순화에 기여합니다. 이 글에서는 Standalone 방식의 라우팅을 살펴보고, 기존의 모듈 기반 라우팅과 어떻게 다른지 ...
[angular] Standalone의 개념과 main.ts의 중요성
Angular는 애플리케이션 아키텍처를 간소화하고 성능을 최적화하기 위한 여러 기능을 도입했습니다. 그중에서도 가장 중요한 변화인 Standalone는 Angular 애플리케이션 개발 방식에 큰 변화를 가져온 중요한 기능입니다. 기존의 NgModule 기반 아키텍처에서 벗어나 컴포...
[angular] private 라이브러리 만들기 (Creating Private Library) - revised
2019년 7월에 작성한 Creating Library 문서가 미흡하여 보다 이해하기 쉽게 재작성하였습니다. 이 글에서는 자체 개발한 라이브러리를 마치 외부 라이브러리처럼 사용하는 방법에 대해 다루어 보겠습니다.
[angular] Angular 프로젝트에 Native Federation에서 동적으로 Micro Frontend 구축(Micro Frotend with Native Federation without Manifest)
이전 글에서는 Manifest를 사용하여 remote를 정의하는 정적인 방식으로 Micro Frontend를 구축하는 방법을 살펴봤습니다. 이번 글에서는 Native Federation에서 manifest를 정의하지 않고 동적으로 remote를 정의하여 Micro Frontend를...
[angular] Angular 프로젝트에 Native Federation의 manifest를 활용한 Micro Frontend 구축(Micro Frotend with Native Federation by Manifest)
이 글에서는 Native Federation을 활용하여 Micro Frontend를 구축하는 과정을 예제를 통해 살펴보겠습니다.
[angular] Angular에 작성한 Web Component 사용하기 (How to use webcomponent in Angular)
이번 글에서는 webcomponent를 Angular 프로젝트에서 사용하는 방법에 대해 살펴보겠습니다. 특히, index.html이 아닌 Angular component 에서 WebComponent를 호출하는 방법에 중점을 둘 것입니다.
[angular] Angular에서 지연된 템플릿 업데이트 해결(Resolving Delayed Template Updates in Angular)
소개 이 글에서는 Angular 애플리케이션에서 값이 템플릿에 즉시 반영되지 않는 문제를 해결하는 방법에 대해 탐구합니다. 보통 선언된 변수는 즉시 템플릿에 반영되지만 OnPush 변경 감지를 사용하는 경우와 같이 특정 상황에서는 그렇지 않을 수 있습니다. 이 글은 변경 감지에 ...
[angular] Angular Standalone 환경에서 Web Component 만들기 (Creating Web Component in Angular: Standalone Based)
이 글에서는 Angular에서 Web Component를 만드는 과정을 살펴보겠습니다. 많은 글들이 Module 방식에 중점을 두고 있으므로 Module 방식은 다른 문서를 확인하시고, 여기에서는 Angular Standalone 환경일 때 Web Component를 만드는 방법...
[angular] Standalone Component에서 imports 방법 (Managing Imports in Standalone Angular Components)
소개 Standalone Component에서 Component, Pipe, Directive 의 적절한 Imports 관리는 깨끗하고 최적화된 코드 구조를 유지하는 데 필수적입니다. 이 글에서는 Template에서의 Component, Pipe, Directive 다루기, Com...
[angular] outlet name attribute으로 생성한 route 제거하기 - How to clear route made with outlet name attribute
Angular 애플리케이션에서 Route Outlet Name을 활용하여 동적으로 삽입된 컴포넌트에 대한 Route를 관리하는 것은 효율적인 UI 구성을 위한 강력한 수단입니다. 그러나 동시에 현재 Route를 Outlet에서 제거하는 것은 일반적인 Route 제거 방법과는 다른 ...
[angular] Angular Route를 활용한 Modal 관리(Manage Modal with Angular Route)
Angular에서 Modal을 열고 닫는 방법은 다양하게 존재합니다. 그 중에서도 Route를 활용하여 Modal을 제어하는 방법을 살펴보겠습니다. 이 방식은 특정 주소로 이동할 때 Modal이 열리고, 해당 주소에서 벗어나면 Modal이 닫히는 간편하면서도 효과적인 방법입니다.
[angular] Setting Contextmenu Event to all Points in a series of Highcharts without highcharts-custom-events
Highcharts에서는 points에 contextmenu를 기본 event로 제공하지 않습니다. 그래서 일반적으로 npm에서 highcharts-custom-events 를 설치하는 방법을 추천합니다.
[angular] Web Worker in Angular
Angular에서 Worker 활용하기
[angular] ngDoc - API
Angular 애플리케이션에서 API 문서 생성하기 Angular 애플리케이션에서 API 문서를 자동으로 생성하는 방법에 대해 설명드리겠습니다. 이를 위해서 @ng-doc/builder와 @ng-doc/core를 사용하여 API 문서를 생성할 수 있습니다.
[angular] All about Highcharts Tooltip (Options, Clone, Customize)
Tooltip Options 먼저, Highcharts의 툴팁 옵션에 대해 알아봅시다. 툴팁은 데이터 포인트를 가리킬 때 정보를 표시하는데 사용됩니다. 다양한 옵션을 통해 툴팁을 사용자 정의할 수 있습니다.
[angular] Highcharts Label - Changing Attributes Dynamically)
이 글에서는 Highchart에서 label을 사용할 때 style을 변경하는 방법에 대해 알아보겠습니다.
[angular] ngDoc - Install
ngdoc으로 앵귤러 프로젝트를 간단히 문서화하기
[angular] Template에서 타입 검사 우회하기(Bypass type checking on Template)
Typescript는 Javascript와 다르게 Type을 검사하고, 알맞은 Type이 아닌 경우 에러를 발생시키며, 올바른 타입을 지정할 것을 요구합니다. 이번 시간은 때때로 변수의 정확한 타입을 알 수 없을 경우 타입 검사를 무시하는 방법에 대해 알아봅시다.
[angular] typeof, instanceof, keyof and in의 차이점(difference among typeof, instanceof, keyof and in)
TypeScript에서 typeof, instanceof, keyof, in 연산자는 각각 다음과 같은 역할을 합니다.
[angular] Highcharts Drag로 다중 포인트 선택하기 - Multiple Point Selection by Draging
이 글에서는 Highchart에서 지원하지 않는 마우스 drag로 point를 선택하는 방법을 알아봅시다.
[angular] Highcharts 선택한 모든 Points 가져오기 - Getting All Selected Points by .getSelectedPoints()
이 글에서는 Highchart에서 유저가 선택한 모든 point의 정보를 가져오는 방법을 알아봅시다.
[angular] useClass와 useExisting의 비교 - different between useClass and useExisting
이번 시간은 module에서 providers를 설정 시 useClass와 useExisting 의 차이를 알아보겠습니다.
[angular] router-outlet에서 name attr 사용 방법 - how to use name attribute of router-outlet
이번 시간은 router-outlet 태그의 name attribute의 활용에 대해 알아보겠습니다.
[angular] 브라우저 닫을 때 이벤트 정리 - How to handle browser close (unload event)
이번 시간은 Browser를 닫을 때 이벤트를 처리하는 방법에 대해 정리해보고 예제를 통해 알아보겠습니다.
[angular] Highcharts-angular oneToOne 옵션으로 쉽게 데이터 업데이트 하기 - easy update with oneToOne Option
Highchart는 데이터를 수정하기 위한 다양한 옵션을 가지고 있고, 관련 api 문서도 잘 구성되어 있기 때문에 highcharts-angular를 사용함에 있어서도 큰 어려움이 없습니다. 다만 모든 상황에서 모든 명령을 일일이 찾기란 번거로운 일이며, 아마도 값을 주입하는대로...
[angular] svg 적용 실패 해결 - How to solve svg unsafe
이미지 파일을 업로드하기 위해서는 <input type="file">을 사용해야하며, 이 결과를 base64 string으로 변환하면 <img>에 표시할 수 있습니다.
[angular] What is charts variables of Highcharts in Highcharts-angular?
Highcharts에서는 chart 변수에 직접 options을 주입하기 때문에 api 의 활용은 물론, 값의 수정도 쉽게 적용할 수 있습니다. 하지만 highcharts-angular에서는 chart 변수에 직접 적용하려고 하면 다른 상황을 겪게 됩니다. 이 글에서는 highc...
[angular] How to Use This of Highchart in Typescript
예제들을 검색하다보면 javascript 또는 jquery로 된 예제들을 볼 수 있는데, 그런 예제들 중에 this로 처리되어 있는 예제들을 간혹 확인할 수 있습니다. 하지만 typescript나 angular 에서의 this는 그 의미가 다르므로 그대로 코드를 옮기면 에러가 발생...
[angular] How to setup highcharts-angular
Highcharts-Angular는 Highcharts를 Angular에서 사용하기 쉽도록 작성된 library 입니다. 이 글에서는 Highcharts와 Highcharts-Angular를 설치하는 방법을 알아보고, Highchart-Angular에서 제공하는 기본 Input에...
[angular] WebSocket in Angular
Let’s explore how to use WebSockets with Angular. Due to the extensive nature of the topic, this guide will focus on utilizing standard WebSockets provided b...
[angular] Angular Devtool in Chrome DevTools
This article explores how to add and utilize the Angular tab within Chrome’s Developer Tools (DevTools).
[angular] How to create getter and setter in interface?
Let’s delve into understanding getters and setters in classes and how to implement them with interfaces.
[angular] sorting of keyvalue pipe data
Customizing Sort Order with the KeyValue Pipe in Angular Templates
[angular] Create Modal with createComponent
createComponent provides lower-level control over dynamic components than ngComponentOutlet, making it ideal for building complex features like a full-fledge...
[angular] Create Tooltip with createComponent
Let’s build a dynamic tooltip that appears on hover, leveraging Angular’s powerful createComponent API for dynamic component rendering.
[angular] Dynamic Component with createComponent
Implementing dynamic components with createComponent offers a flexible approach to component management, especially useful in more versatile versions.
[angular] Dynamic Component with ngComponentOutlet
Displaying Components Conditionally with @if Traditionally, dynamically swapping components in a template based on a condition can be tricky. A common approa...
[angular] trackBy Directive
When rendering lists in Angular, any change to the data array can cause Angular to re-render the entire DOM for that list. This can lead to performance degra...
[angular] Creating SSG with Scully
Task: Scully Integration and SEO Optimization
[angular] Angulr-cli Error Fix
Resolving Common WARN/ERROR Messages in Angular CLI
[angular] the term ‘ng’ is not recognized as an internal or external command, operable program or batch file.
Issue Description
[angular] Prevent 2byte-word Input
Implementing a Digit-Only Directive in Angular: Addressing Korean Input Issues
[angular] ngFor with TrackBy
ngFor is a structural directive in Angular that iterates over a collection and renders a template for each item. While powerful, it has a potential performan...
[angular] Unknown Type
The unknown type was introduced in TypeScript 3.0.
[angular] Could Not Find Plugin proposal-numeric-separator
원인 @babel/compat-data에 새로운 플러그인이 추가될 때 기존 @babel/preset-env의 버전과 충돌합니다. available-plugins.js 파일에 정의되어 있지 않은 플러그인인 경우 에러를 던집니다.
[angular] transfer data js to angular
Analysis: Accessing Angular from JavaScript
[angular] angular project on electron
Setting up Electron
[angular] StaticInjectorError
Let’s investigate the @ng-toolkit/universal ERROR: Cannot read property 'unshift' of undefined error.
[angular] @ng-toolkit/universal ERROR: Cannot read property ‘unshift’ of undefined
Let’s investigate the @ng-toolkit/universal ERROR: Cannot read property 'unshift' of undefined error.
[angular] Deploy Angular Universal Project from GitHub to Heroku
Let’s explore how to deploy an Angular Universal project uploaded to GitHub to Heroku.
[angular] How to import js from Typescript
Let’s explore several methods for importing external JavaScript files within TypeScript. A few years ago, TypeScript was relatively unknown. However, spearhe...
[angular] Creating Sparkline Chart Directive with ng2-nvd3
I’m attempting to create a Sparkline Chart because most typical chart libraries don’t support it, especially those compatible with Angular. I plan to build t...
[angular] Angular8 New Feature
Angular8에서는 기대하던 Ivy Rendering이 추가되고, 그 외에 많은 개선 및 추가 기능들이 포함되었습니다. 그 중에서 Angular를 제대로 활용하기 위해 반드시 알아야 할 새 기능과 변경된 기능을 추려서 정리해보겠습니다. 이해하지 못해 빠진 부분도 있으므로 댓글로 ...
[angular] Angular Universal Location
How to Use window.location in Angular Universal Projects on the Server Platform
[angular] Angular Universal Platform Check
Checking whether the platform Angular is running on is a browser or a server.
[angular] Angular Universal
Implementing Server-Side Rendering (SSR) in Angular
[angular] Why SSR for SPA Sites SEO Friendly
Single-page application (SPA) development using frameworks like React, Angular, and Vue has become highly popular in recent years. This approach offers very ...
[angular] Creating Library
This Document Has Been Updated
[angular] Form Custom Validation
Let’s explore how to implement custom validations beyond the default offerings. This demonstration will leverage a simple login form to illustrate applying r...
[angular] Customizing Form Group Error
When working with Angular’s FormControl or FormGroup in conjunction with Angular Material, customizing error handling often becomes necessary. For instance, ...
[angular] Execute Function on Init (App Initializer)
I aim to create a function that executes faster than a component at the point when an app is executed.
[angular] Form Group
Implementing Angular Forms: A Comprehensive Guide
[angular] Fail to Understand New Routing Structure
When attempting documentation with Compodoc, an issue arises where it fails to recognize the routing method introduced in Angular 8 ( import().then(m => m...
[angular] Recommend Angular Documentation Tool - compodoc
Angular developers often seek automated documentation tools akin to JSDoc.
[angular] Angular 8 New Lazy Loading Routing
Angular’s lazy loading routing method has been updated.
[angular] Angular-Cli Update
Describing the version update process. Here, we will explain updating from version 7 to version 8. Since all version updates follow the same method, you can ...
[angular] Enum
Understanding Enums: Definition and Usage in TypeScript
[angular] Make Matenenance or Offline Notice using PWA
How to Implement Maintenance or Offline Notices Using a PWA
[angular] PWA (Progressive Web App)
Implementing Progressive Web App (PWA) functionality within Angular is remarkably straightforward. The Angular CLI simplifies the process by automatically co...
[angular] Routing Options
A comprehensive list of options for applying routing in Angular components.
[angular] Routing Resolve More Detail
When a component attempts to apply a value fetched from a service within its onInit lifecycle hook to its template, an error can arise if the template tries ...
[angular] How to Unsubscribe Subject
Implementing unsubscribe when subscribing to a Subject involves storing the Subscription and then unsubscribing from it when appropriate, such as during comp...
[angular] Rxjs Pipe Operators
take(n)
[angular] @Input Failes Passing Data
This post analyzes why @Input fails to pass data.
[angular] ng test and ng e2e
Let’s explore how to apply ng test and ng e2e, as well as their differences.
[angular] Understanding Angular Route Guards: canActivate, canDeactivate, canActivateChild, and canLoad
This article explores the use of route guards in Angular, focusing on canActivate, canDeactivate, canActivateChild, and canLoad. We’ll demonstrate how to imp...
[angular] How to Stop Angular Material Animation
When you need to disable animations in Angular Material components, whether it’s for all animations or specific Material elements, there are several simple c...
[angular] Shared Module
Sharing Duplicate Modules Using a Shared Module
[angular] Difference between Server-side Routing and Client-side Routing
This post compares routing implementations between server-side and client-side approaches.
[angular] Componentless Routing
Analysis When setting up routing, components are typically configured as follows: {path: '', component: AppComponent, children: [ { path: '', redirectTo: '...
[angular] Apply Multiple Languages with ngx-translate
Apply multiple languages instantly using ngx-translate without server requests or reloading.
[angular] All Error Handler Class
Catch All Angular Errors with a Custom Error Handler
[angular] Lazy Loading Module and Component
Angular Lazy Loading: A Comprehensive Guide to Module and Component Implementation
rust
[rust] 강좌13-Match
match
[rust] 강좌12-Enum
Enum 기본 기능은 다른 언어의 Enum과 유사합니다. 다만, 구조체와 같이 implement로 확장이 가능하며, Nullable 변수를 선언할 때 사용하는 등 활용도가 더 넓습니다.
[rust] 강좌11-구조체의 확장: Implement
구조체에 implement를 적용하면 함수를 추가할 수 있습니다. 이는 마치 Class 구조와 비슷하게 동작하는 효과를 주므로 매우 유용하게 사용할 수 있습니다.
[rust] 강좌10-Struct 구조체
Struct에 대해 알아봅시다.
[rust] 강좌08-Reference and Borrowing
이제 Reference와 Borrowing에 대해 알아보겠습니다.
[rust] 강좌07-Ownership
Rust는 Ownership이라는 개념이 존재합니다. Ownership은 값이 담긴 메모리의 실제 소유자(사용자)가 누구인가를 의미합니다.
[rust] 강좌06-제어문과 반복문
일반적으로 모든 언어에는 if와 switch 같은 제어문과 for나 while과 같은 반복문이 있습니다.
[rust] 강좌05-함수
함수의 기본 사용법은 javascript와 유사하나 rust에서는 function 대신 fn을 사용합니다.
[rust] 강좌04-출력
Println!
[rust] 강좌03-변수
1. immutable과 mutable 선언
[rust] 강좌02-주석과 변수 타입
1. 주석
[rust] 강좌01-Rust 설치하기
1설치하기
javascript
[javascript] git push할 때 security로 인한 에러 우회(How to avoid git push security)
개발 중 git push 과정에서 GitHub Push Protection으로 인해 코드 푸시가 차단된 경험이 있으신가요? 이 기능은 중요한 보안 정보(예: Access Key, Token 등)가 저장소에 푸시되는 것을 방지하기 위한 GitHub의 보안 시스템입니다.
[javascript] How to prototyping with the Github AI models
Github Models 는 GitHub의 AI 및 머신 러닝 모델을 쉽게 관리하고 배포할 수 있도록 돕는 기능입니다. GitHub에서 제공하는 모델 저장소나 API를 통해 개발자는 자신만의 머신 러닝 모델을 관리하거나 다른 사람이 만든 모델을 활용할 수 있습니다. 이러한 모델...
[javascript] Json Deep Copy
Deep Copy Explained for Developers
[javascript] Remove a Specific Key Value in JSON Dynamically
Removing specific entries from an array during development is a common task, and the filter() method provides a straightforward solution. However, when deali...
[javascript] How to create decounce and throttle directives and decorators?
After searching extensively for examples of Debounce or Throttle Decorators suitable for Angular or TypeScript, I found myself needing to craft my own. I hop...
[javascript] What is decorator?
A decorator is a way to implement instructions that need to be executed repeatedly before a function is executed, as a separate function, and then easily cal...
[javascript] Definition of JAMStack and SSG
1. Overview
[javascript] yield pattern
Understanding the JavaScript yield Keyword and Generators
[javascript] Excution Time
Let’s explore methods for measuring JavaScript execution time.
mongodb
[mongodb] Differenct between update and replace
Let’s compare update and replace operations in MongoDB. This explanation is based on a review of resources.
[mongodb] entire search and range search query for 2-byte-letters
Implementing Full-Text and Range Queries in MongoDB
typescript
[typescript] How To Use Double Question Marks: ??
When comparing values, developers often use if statements or ternary operators to check for undefined or null.