본문 바로가기

반응형

전체 글

(484)
앵귤러 라이브러리 - Angular PWA 앵귤러는 서비스 워커 등을 활용하여 Progressive Web App (PWA)을 구현할 수 있도록 해줍니다. 앵귤러 서비스 워커는 User Experience를 향상하기 위해 아래와 같은 규제를 따릅니다. 애플리케이션은 한 단위의 캐시로 저장되어 업데이트 시 애플리케이션의 모든 파일이 업데이트됨 애플리케이션은 새로고침 (reloading)이 있기 전까지 새로운 버전의 캐시가 생성되더라도 이전 버전으로 계속 구동됨 애플리케이션의 업데이트 작업은 뒤에서 이루어지며 완료되어야만 업데이트된 버전으로 구동됨 필요한 자원은 변화가 있는 경우만 다운로드됨 위와 같은 기능을 지원하기 위해 ngse.json이라는 manifest 파일을 통해 모든 내용물의 캐시 및 해시 정보가 저장, 정보의 변화 인지하고 이를 서비스..
앵귤러 라이브러리 - Angular Animations 애니메이션을 사용하기 위해서는 BrowserModule과 BrowserAnimationsModule이 필요한데요. 이는 애플리케이션 생성 시 자동으로 추가됩니다. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], declarations: [ ], bootstrap: [ ] }) export class AppModule {..
앵귤러 라이브러리 - 앵귤러 HTTP클라이언트 앵귤러의 http모듈은 서버에 정보를 요청할 때 사용됩니다. HTML 삽입 미리보기할 수 없는 소스
앵귤러 라이브러리 - Angular Forms 폼은 많은 애플리케이션에서 사용되는 기능 중 하나이죠. 앵귤러 폼 라이브러리 사용 시 validation 등 다양한 기능을 사용할 수 있는데요. 앵귤러 폼 라이브러리에서 제공하는 폼은 크게 'reactive'와 'template-driven' 방식으로 나누어집니다. 차이점 reactive 폼은 컴포넌트에서 폼객체 생성, 설정 (제약조건 포함) 하고 이를 템플릿에서 binding의 형식으로 사용하기 때문에 확장성이 높고 보안성이 뛰어난 장점이 있습니다. 반면, template-driven 폼은 템플릿에서 폼객체 생성, 설정 (제약조건 포함)을 하기 때문에 가시성이 좋으나 확장성은 떨어집니다. reactive template-driven Setup of form model Explicit, created i..
앵귤러 라이브러리 - Angular Router 앵귤러는 싱글페이지 애플리케이션으로 URL경로가 바뀌지 않는데요. 하지만 앱의 구조상 페이지 분리가 필요할 때도 있습니다. 앵귤러 라우팅은 이러한 기능을 담당하는 모듈로 사용법을 알아보겠습니다. 모듈생성 라우팅을 사용하기 위해서는 라우터를 만들어야 하는데요. 라우팅을 위한 모듈을 따로 만드는 것을 권장합니다. 해당 모듈은 최초 애플리케이션을 만들 때 라우팅을 사용할 건지 물어보는데 이때 'y'를 선택하면 자동 생성됩니다 (추후 따로 생성하는 것도 물론 가능합니다). 만약, no를 선택한 경우 아래 커멘드를 통해 추가할 수 있습니다. ng new my-app --routing 라우터모듈은 아래와 같이 AppModule에 자동으로 등록됩니다. 모듈은 등록된 순서대로 위에서부터 순차적으로 발동되기 때문에 Ap..
[태그관리자] - UA 설정 (구성) 사이트에 연결된 태그관리자 아이디 확인 UA 계정에서 좌측 하단에 '관리' -> 속성 항목에 '추적정보' 선택 열린 목록에서 '추적코드' 선택 열린 창에서 '추적 ID' 복사 태그관리자 계정에서 '작업공간' -> '태그' -> '새로 만들기' 선택 '태그구성' 박스 누름 'Google 애널리틱스: 유니버설 애널리틱스' 선택 'Google 애널리틱스 설정' 항목에 '설정변수선택' -> '새 변수' 선택 UA에서 복사한 추적 ID 붙여 넣고 '저장' 트리거 박스 선택 'All Pages' 선택 후 '저장' 생성된 UA 구성 태그
[태그관리자] - GA4 설정 (구성) 태그관리자를 사용하여 GA4 구성태그를 설치하는 방법을 볼까요? HTML 삽입 미리보기할 수 없는 소스
앵귤러 라이브러리 라이브러리는 자주 쓰이는 기능들을 개별적으로 구해 놓은 코드의 집합을 말합니다 (JavaScript의 대표적 라이브러리로 Jquery 등 이 있죠). 앵귤러는 다양한 기능을 구현하게 해 주는 자체 라이브러리를 가지고 있는데요. 앵귤러 라이브러리에 대해서 알아보겠습니다. 라이브러리들 Angular Router Angular Forms Angular HttpClient Angular Animations Angular PWA Angular Schematics 참고 Angular angular.io HTML 삽입 미리보기할 수 없는 소스

728x90