angular

[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을 허용하는 ? 를 넣어 해...