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..

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..

Angular 14 버전을 사용하면서 ERROR ReferenceError: process is not defined 오류가 발생할 경우 해결 방법입니다. 설치 $ npm install --save-dev process 내용 추가 src/polyfill.ts 파일에 다음 내용을 추가합니다. (window as any).global = window; global.Buffer = global.Buffer || require('buffer').Buffer; global.process = require('process');

Angular 프레임워크로 특정 기능을 구현할 때 어떤 방식으로 사용하는지에 대해 알아보겠습니다. UI Component 구현 클래스에 @Component Annotation을 붙여서 생성합니다. HTML 템플릿 정의 인라인 HTML 코드를 사용할 때는 @Component 어노테이션 template 항목을 사용하고, 외부 파일에서 불러올 때는 templateUrl 항목을 사용합니다. 컴포넌트 Property 를 UI에 표시 템플릿의 이중 중괄호 안에 Property를 사용합니다. {{ customValue }}) 컴포넌트 Property 바인딩 대괄호를 사용해서 Property를 바인딩합니다. 이벤트 처리 이벤트 이름을 괄호로 감싸고 핸들러를 지정합니다. Click 양방향 바인딩 [()] 표기를 사용합니..