angular

[angular] Control flow - defer

6 분 소요

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

[angular] Control flow - If, Switch and For

2 분 소요

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

[angular] Signal

9 분 소요

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

[angular] Angular Standalone Component와 새로운 의존성 주입 방식

3 분 소요

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

[angular] Standalone Routing

3 분 소요

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

[angular] Standalone의 개념과 main.ts의 중요성

6 분 소요

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

[angular] Angular Route를 활용한 Modal 관리(Manage Modal with Angular Route)

1 분 소요

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

[angular] ngDoc - API

1 분 소요

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

[angular] What is charts variables of Highcharts in Highcharts-angular?

1 분 소요

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

[angular] How to Use This of Highchart in Typescript

최대 1 분 소요

예제들을 검색하다보면 javascript 또는 jquery로 된 예제들을 볼 수 있는데, 그런 예제들 중에 this로 처리되어 있는 예제들을 간혹 확인할 수 있습니다. 하지만 typescript나 angular 에서의 this는 그 의미가 다르므로 그대로 코드를 옮기면 에러가 발생...

[angular] How to setup highcharts-angular

2 분 소요

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

[angular] WebSocket in Angular

2 분 소요

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

[angular] trackBy Directive

1 분 소요

ngFor에 연결된 배열의 값이 변경될 때 refresh가 발생하여 rendering이 일어나는데, 이를 방지하기 위해 trackBy를 사용합니다. 즉, trackBy를 사용하면 값이 변경되어도 rendering이 되지 않으므로 성능을 향상 시킬 수 있습니다.

[angular] Scully로 SSG 구현하기 (Creating SSG with Scully)

5 분 소요

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

[angular] ngFor with TrackBy

최대 1 분 소요

ngFor는 DOM을 반복해서 출력해주는 기능을 합니다. 여기에 몇가지 추가 요소를 붙일 수 있는데 대표적인 것으로는 index가 있습니다.

[angular] Could Not Find Plugin proposal-numeric-separator

최대 1 분 소요

원인 @babel/compat-data에 새로운 플러그인이 추가될 때 기존 @babel/preset-env의 버전과 충돌합니다. available-plugins.js 파일에 정의되어 있지 않은 플러그인인 경우 에러를 던집니다.

[angular] StaticInjectorError

최대 1 분 소요

StaticInjectorError(AppServerModule)[InjectionToken ng-toolkit-window] 에러를 해결해보겠습니다.

[angular] How to import js from Typescript

2 분 소요

Typescript에서 외부 js 파일을 가져오는 방법을 몇 가지 알아보겠습니다. 5년전 만해도 매우 생소했던 Typescript가 Angular를 필두로 최근 몇 년 사이에 활용 빈도가 급격히 증가하여 React나 Vue.js를 비롯하여 심지어 node.js도 사용할 정도로 대세...

[angular] Angular8 New Feature

1 분 소요

Angular8에서는 기대하던 Ivy Rendering이 추가되고, 그 외에 많은 개선 및 추가 기능들이 포함되었습니다. 그 중에서 Angular를 제대로 활용하기 위해 반드시 알아야 할 새 기능과 변경된 기능을 추려서 정리해보겠습니다. 이해하지 못해 빠진 부분도 있으므로 댓글로 ...

[angular] Angular Universal

4 분 소요

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

[angular] 왜 SSR은 SEO에 친화적인가 (Why SSR for SPA Sites SEO Friendly)

1 분 소요

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

[angular] Form Custom Validation

2 분 소요

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

[angular] 폼 그룹 에러처리 커스터마이징 (Customizing Form Group Error)

최대 1 분 소요

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

[angular] Form Group

1 분 소요

Html에서 Form은 자주 사용되는데 Angular에서는 이 사용법이 은근 쉽지 않습니다.

[angular] Angular-Cli Update

2 분 소요

버전 업데이트 과정을 설명합니다. 여기에서는 7버전에서 8버전 업데이트를 설명합니다. 모든 버전 업데이트의 방식이 동일하므로 다른 버전도 아래와 같이 진행하면 됩니다.

[angular] Enum

2 분 소요

Enum의 정의와 종류에 대해 정리합니다.

[angular] PWA (Progressive Web App)

2 분 소요

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

[angular] Routing Resolve More Detail

1 분 소요

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

[angular] Componentless Routing

1 분 소요

Analysis When setting up routing, components are typically configured as follows: {path: '', component: AppComponent, children: [ { path: '', redirectTo: '...

Back to Top ↑

rust

[rust] 강좌12-Enum

1 분 소요

Enum 기본 기능은 다른 언어의 Enum과 유사합니다. 다만, 구조체와 같이 implement로 확장이 가능하며, Nullable 변수를 선언할 때 사용하는 등 활용도가 더 넓습니다.

[rust] 강좌11-구조체의 확장: Implement

1 분 소요

구조체에 implement를 적용하면 함수를 추가할 수 있습니다. 이는 마치 Class 구조와 비슷하게 동작하는 효과를 주므로 매우 유용하게 사용할 수 있습니다.

[rust] 강좌07-Ownership

3 분 소요

Rust는 Ownership이라는 개념이 존재합니다. Ownership은 값이 담긴 메모리의 실제 소유자(사용자)가 누구인가를 의미합니다.

[rust] 강좌05-함수

최대 1 분 소요

함수의 기본 사용법은 javascript와 유사하나 rust에서는 function 대신 fn을 사용합니다.

Back to Top ↑

javascript

[javascript] How to prototyping with the Github AI models

2 분 소요

Github Models 는 GitHub의 AI 및 머신 러닝 모델을 쉽게 관리하고 배포할 수 있도록 돕는 기능입니다. GitHub에서 제공하는 모델 저장소나 API를 통해 개발자는 자신만의 머신 러닝 모델을 관리하거나 다른 사람이 만든 모델을 활용할 수 있습니다. 이러한 모델...

[javascript] Decorator 란? (What is decorator?)

3 분 소요

함수가 실행 되기 전에 반복적으로 선행되어야 할 명령을 별도의 함수로 구현한 뒤 이를 한줄의 명령어로 쉽게 호출하는 방법 입니다. 일반적으로 @Decorator와 같이 앞에 @을 붙여서 호출하며, 클래스, 함수, 변수, 심지어 함수의 파라미터에도 적용할 수 있으나 각각의 적용하는 ...

[javascript] JAMStack과 SSG (Definition of JAMStack and SSG)

3 분 소요

1. 개요 JAMStack은 기존 용어인 ‘LAMPStack (Linux, Apache, MySql, PHP)’ 혹은 ‘MEANStack (MongoDB, ExpressJS, AngularJS, NodeJS)’ 같은 단어와 비슷한 최근 웹 기술에서 구성해야할 요소의 모음입니다. ...

Back to Top ↑

mongodb

Back to Top ↑