차세대 웹 앱에 적합한 Angular 라이브러리를 선택하는 것은 어려운 작업일 수 있습니다. 사용 가능한 옵션이 너무 많기 때문에 프로젝트에 가장 적합한 라이브러리를 결정하기가 어려울 수 있습니다. 하지만 프로젝트의 규모, 앱의 복잡성, 필요한 기능 등의 요소를 고려하면 선택의 폭을 좁히고 정보에 입각한 결정을 내릴 수 있습니다. 또한 라이브러리를 학습하고 구현하는 데 투자해야 하는 시간을 고려하는 것도 중요합니다. 이 글에서는 사용 가능한 라이브러리에 대한 개요와 프로젝트에 적합한 라이브러리를 선택할 때 고려해야 할 요소에 대해 설명합니다. Angular 무엇입니까? Angular는 Google에서 개발하고 유지 관리하는 오픈 소스 웹 애플리케이션 프레임워크입니다. 웹 애플리케이션에서 자주 사용되는 구..

웹 개발 세계에서 Angular, React 및 Vue.js와 같은 JavaScript 프레임워크는 개발자가 웹 애플리케이션을 구축할 수 있는 다양한 도구를 제공합니다. 그러나 각각은 서로 다른 디자인 철학, 학습 곡선(learning curve) 및 사용 사례를 가지고 있습니다. 다음은 이 세 가지 프레임워크를 비교한 것입니다. Angular 장점 모든 기능을 갖춘 프레임워크 Angular는 광범위한 기능들을 자랑하며 필요한 모든 도구를 포함합니다. 따라서 크고 복잡한 애플리케이션에 적합합니다. Type Safety TypeScript 사용 덕분에 컴파일 타임(compile-time) 오류 감지 기능을 제공하여 보다 안전한 코드를 보장합니다. 강력한 데이터 바인딩 Angular의 강력한 기능인 양방향 ..

JavaScript는 배열 작업을 위한 많은 강력한 도구를 제공하는 다용도 언어입니다. 가장 일반적으로 사용되는 도구 중 하나는 배열을 조작하고 변환하기 위한 다양한 메서드를 제공하는 Array 개체입니다. 이 글에서는 JavaScript에서 가장 중요하고 유용한 배열 메서드 중 일부를 자세히 살펴보겠습니다. forEach() forEach() 메서드는 배열을 반복하고 각 요소에 대해 콜백 함수를 실행합니다. 예는 다음과 같습니다. const numbers = [1, 2, 3, 4, 5]; numbers.forEach((number) => { console.log(number); }); 그러면 다음이 출력됩니다. 1 2 3 4 5 map() map() 메서드는 배열의 각 요소에 콜백 함수를 적용하여 새 ..

로그인 또는 회원가입 시 자동 등록 방지가 필요할 경우가 있다. 이를 구현하기 위해 여러 가지가 있는데 CATPCHA를 사용하는 방법을 사용하였다.CAPTCHA는 HIP 기술의 일종으로, 어떠한 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법이다. 사람은 구별할 수 있지만 컴퓨터는 구별하기 힘들게 의도적으로 비틀거나 덧칠한 그림을 주고 그 그림에 쓰여 있는 내용을 물어보는 방법이 자주 사용된다.위키백과 다운로드CATPCHA를 사용하기 위해선 https://sourceforge.net/projects/simplecaptcha/ 사이트로 이동해서 jar 파일을 다운로드 받는다. jar 파일 추가사용하는 툴이 이클립스 일 경우 jar 파일을 프로젝트에 포함시켜야 한다. 아래 이전 글을..

JavaScript 파일에서 TypeScript처럼 코드를 보호받을 수 있도록 하는 방법에 대해 알아보겠습니다. @ts-check JavaScript 파일에서 오류를 활성화하려면 // @ts-check를 .js 파일의 첫 번째 줄에 추가하여 TypeScript가 오류를 발생시키도록 합니다. TypeScript는 여러 오류를 제공할 수 있습니다. 아래 코드는 TypeScript와 같이 함수 파라미터에 정의가 되어 있지 않아 오류가 발생합니다. // @ts-check // [오류] export function init(🚫 config) { return true; } // [오류] export function exit(🚫 code) { return code + 1; } 이러한 오류를 무시하고 싶다면 // @t..

이전 글에서 추가된 Icon Feature를 Drag and Drop 하는 예제입니다. [OpenLayers] Custom Icon Feature 추가 이전 글 [OpenLayers] Static Image 에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추 hgko-dev.tistory.com Script ol.interaction.Modify 을 이용해서 Drag and Drop 기능을 구현합니다. modifystart, modifyend 이벤트를 등록하여 Icon을 선택하거나 이동 시 커서가 변경되도록 하였습니다. const styles..

이전 글에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. [OpenLayers] Static Image OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지 hgko-dev.tistory.com OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추가되었습니다. 먼저 ol.style.Icon 을 이용해서 아이콘 경로를 설정합니다. const styles = { icon:..

OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지도 정보 const mapInfo = { map: null, extent: null, projection: null, setProjection: function (w, h) { this.extent = [0, 0, w, h]; this.projection = new ol.proj.Projection({ code: 'pixel', units: 'pixels', extent: this.extent, }); }, init: funct..

JavaScript 에서 주민등록번호 유효성 검사 방법에 대해 알아보겠습니다. 주민등록번호란 주민등록번호는 “주민의 거주관계를 파악하고 상시로 인구의 동태를 명확히 하여 행정사무의 적정하고 간이 한 처리를 도모함”(1962년 주민등록법) 등을 목적으로 만든 일련번호로서, 개개인의 신원을 명확하게 구분하는 역할을 한다. 나무위키 내국인과 외국인 주민등록번호 유효성을 검사하는 소스코드입니다. 내국인 주민등록번호와 달리 외국인 등록번호는 뒤 7자리 숫자의 첫 숫자가 2000년 이전 출생 외국인에게는 남자는 5, 여자는 6, 2000년 이후 출생 외국인에게는 남자는 7, 여자는 8로 부여하고 있습니다. 내국인 주민등록번호 숫자는 1, 2, 3, 4 로 시작됩니다. 주민등록번호 입력 : - 검증 const Com..

이미지를 Jcrop 라이브러리를 사용하여 자르고 Canvas 영역을 blob 형식으로 바꿔서 a Tag를 생성하여 다운로드를 시도하였습니다. 크롬에서는 잘 동작하였지만 IE에서는 동작하지 않고 에러를 발생하였습니다. 아래 코드처럼 작성하였더니 둘 다 동작하였습니다. 소스 코드 function downloadURI(blob, name) { if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE에서 동작 window.navigator.msSaveBlob(blob, name); } else { // 크롬에서 동작 var link = document.createElement('a'); link.download = name; link.href = U..