Transient Transient 서비스는 주입될 때마다 생성됩니다. 즉, 컴포넌트(component)가 서비스를 주입할 때마다 서비스의 새 인스턴스가 생성됩니다. Transient 서비스의 예는 다음과 같습니다. import { Injectable } from '@angular/core'; @Injectable() export class TransientService { private data: number; constructor() { this.data = Math.random(); } getData() { return this.data; } } 컴포넌트가 TransientService를 주입하면 매번 서비스의 새 인스턴스가 생성됩니다. Scoped Scoped 서비스는 Angular 모듈당 한 번..

OpenLayers는 개인 또는 상업 프로젝트에 지도를 추가해야 하는 경우 광범위한 사용 사례에 적합한 오픈 소스 라이브러리입니다. 아래 단계를 따라 하면 몇 분 안에 빠르게 실행할 수 있습니다. Angular 프로젝트를 한 번도 해본 적이 없는 경우 새 프로젝트를 만드는 방법을 보여 드리겠습니다. 하지만 해당 부분을 건너뛰고 OpenLayers를 기존 프로젝트에 추가할 수 있습니다. 새 Angular 프로젝트 만들기 이 시점에서 첫 번째 Angular 프로젝트를 설정하는 방법을 보여 드리겠습니다. 모든 컴퓨터 운영 체제를 사용할 수 있으며 Angular는 macOS, Linux 및 Windows에서 작동합니다. 이것은 지금 사용하는 설정입니다. Angular CLI: 16.1.0 Node: 18.15...

Angular 개발 시 api 통신을 하기 위한 Fetch API에 대해 알아보겠습니다. Fetch API 란 Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다. 설치 Fetch API를 사용하기 위해 cross-fetch 패키지를 설치한다. # npm 을 사용하여 설치하는 경우 npm install --save cross-fetch # yarn 을 사용하여 설치하는 경우 yarn add cross-fetch ApiService 구축 api는 전역에서 사용하는 것이기 때문에 service로 만..

Angular 개발 시 프로젝트 초기에 api 통신에 대해 설정 파일을 생성하고 설정해 두면 작업하기가 편합니다. Angluar는 @angular/common 안에 존재하는 http 패키지를 사용하면 됩니다. import http 작업을 하기 위해 src/app.module.ts 파일에 HttpClientModule을 import 해야 합니다. // src/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule..

Angular에서 FormGroup 사용 시 아래와 같이 에러가 발생할 경우 해결 방법에 대해 알아보겠습니다. Error ERROR Error: NG01350: ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example: In your class: this.myGroup = new FormGroup({ firstName: new FormControl() }); Or, if you'd like to avoid registering this form control, indicate th..

책 정보 책 소개 Angular는 Google이 주관하는 웹 애플리케이션 프레임워크다. 개발자들에게 큰 인기를 끌었던 이전 버전의 AngularJS는 이제 새로운 구조와 철학을 도입해서 완전히 새로운 프레임워크가 되어 돌아왔다. 새로운 버전의 Angular에서 제공하는 훌륭한 기능과 웹 컴포넌트 기반 철학을 깊이 있게 알아보고, 데이터를 뷰에 표시하는 방법, 사용자가 입력한 폼 데이터 처리, 서버와 통신, 테스트와 배포까지 애플리케이션의 모든 개발 단계를 다룬다. 더불어 현업에 바로 적용할 수 있도록 다양한 예제와 함께 설명하며, 중대형 규모의 애플리케이션 개발에 적합한 TypeScript와 ES6에 대해서도 알아본다. 이 책을 마지막까지 읽고 나면, 실무에 바로 도입할 수준이 될 것이다. 리뷰 최근 A..

Cytoscape 소개 Cytoscape은 점 (node)과 선 (edge)으로 이루어진 네트워크의 가시화, 통합, 분석을 가능하게 하는 프리 오픈소스 소프트웨어입니다. 자바로 구현되어 있어 윈도우, 맥, 리눅스등에서 자유롭게 구동합니다. Cytoscape 라이브러리를 사용하여 노드 간의 절차를 시각화하는 그래프를 구현하는 방법에 대해 알아보겠습니다. 설치 cytoscape 패키지를 설치합니다. npm install --save cytoscape cytoscape-klay # typescript 사용 시 추가 설치 npm install --save-dev @types/cytoscape 설정 angular.json 파일에서 아래 내용을 추가합니다. "scripts": ["./node_modules/cyto..

Markdown 이란 마크다운은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. 위키백과 Angular에서 ngx-markdown 패키지를 사용하여 Markdown 기능을 구현하는 방법에 대해 알아보겠습니다. 설치 ngx-markdown 패키지를 설치합니다. $ npm install ngx-markdown --save 설정 angular.json 파일에서 아래 내용을 추가합니다. { ... "architect": { "build": { "..

Markdown 이란 마크다운은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. 위키백과 Angular에서 ngx-markdown-editor 패키지를 사용하여 Markdown Editor 기능을 구현하는 방법에 대해 알아보겠습니다. 설치 ngx-markdown-editor와 ace-builds, bootstrap, font-awesome 패키지도 필수로 설치합니다. $ npm install ngx-markdown-editor --save..

Angular 에서 Web3를 사용할 경우 아래와 같은 오류가 발생할 경우가 있습니다. Module not found: Error: Can't resolve 'crypto' in ... Module not found: Error: Can't resolve 'stream' in ... Module not found: Error: Can't resolve 'fs' in ... Module not found: Error: Can't resolve 'os' in ... [NG_SERVE] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. [NG_SERVE] This is no longer the c..