NextJS, Create React App(CRA)를 사용하지 않고 초기 프로젝트에 TypeScript를 설치하고 설정하는 방법에 대해 알아보겠습니다. 프로젝트 시작 프로젝트 디렉터리를 생성합니다. $ mkdir typescripttest $ cd typescripttest 다음 명령어를 실행하여 package.json을 초기화합니다. $ npm init -y TypeScript 설치 다음 명령어를 실행하여 TypeScript를 설치합니다. $ npm i -D typescript tsconfig.json 설정 TypeScript 설정은 tsconfig.json 파일에서 합니다. 디렉터리에 tsconfig.json 파일이 있으면 해당 디렉터리가 TypeScript 프로젝트의 루트임을 나타냅니다. tsco..

TypeScript에서 인터페이스(Interface)를 생성하고 사용하는 방법에 대해 알아보겠습니다. Interfaces 객체의 모양을 특정해 주기 위해 사용합니다. 여기서는 firstName 및 lastName 필드가 있는 객체를 설명하는 인터페이스를 사용합니다. interface Person { firstName: string; lastName: string; } 다른 인터페이스를 상속 받아 사용할 수 있습니다. interface User { name: string; } interface Player extends User {} const eden: Player = { name: 'eden', }; 인터페이스 이름이 같도록 3번 각각 만들어도 타입스크립트는 알아서 하나로 합쳐줍니다. Type과 차이점..

TypeScript에서 클래스(Class)를 생성하고 사용하는 방법에 대해 알아보겠습니다. 클래스(Class) 가장 기본적인 클래스입니다. class Player {} 필드를 선언해서 사용 가능합니다. class Player { firstname: string; lastname: string; } const eden = new Player(); eden.firstname = 'ko'; eden.lastname = 'eden'; 생성자에 매개변수를 추가해서 선언할 수 있습니다. class Player { constructor( private firstname: string, private lastname: string, public nickname: string ) {} } const eden = new ..

다형성(Polymorphism) 다형성이란, 여러 타입을 받아들임으로써 여러 형태를 가지는 것을 의미합니다. poly: many, serveral, much, multi 등과 같은 뜻 morphos: form, structure 등과 같은 뜻 polymorphos = poly + morphos: 여러 다른 구조 예시 type SuperPrint = { (arr: T[]): T; }; const superPrint: SuperPrint = (arr) => { return arr[0]; }; const a = superPrint([1, 2, 3]); const b = superPrint([true, false, true]); const c = superPrint(['a', 'b']); const d = su..

Function Overloads 동일한 이름에 매개 변수와 매개 변수 타입 또는 리턴 타입이 다른 여러 버전의 함수를 만드는 것을 말합니다. TypeScript에서는 오버로드 signatures을 작성하여 "다양한 방식으로 호출할 수 있는 함수"를 지정할 수 있습니다. 사용 예제 매개변수의 데이터 타입이 다른 경우 매개변수의 데이터 타입이 다른 경우 예외 처리를 합니다. type Add = { (a: number, b: number): number; (a: number, b: string): number; }; const add: Add = (a, b) => { if (typeof b === 'string') return a; return a + b; }; add(1, '2'); add(1, 2); 매..

타입스크립트란? TypeScript는 JavaScript에 추가적인 구문을 추가하여 editor 와의 단단한 통합을 지원합니다. editor에서 초기에 오류를 잡을 수 있습니다. TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다. TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다. Types(기본) ✅ 배열: 자료형[] ✅ 숫자: number ✅ 문자열: string ✅ 논리: boolean type Player = { name: string; age: number; weapons: string[];..

이전 글에서 추가된 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..

Iteration 람다(Lambda)의 forEach 함수를 사용하는 예제입니다. 사용 예 List friends = Arrays.asList("Brian", "Nate", "Neal", "Raju", "Sara", "Scott"); 기존 for 문 for (int i = 0; i < friends.size(); i++) { System.out.println(friends.get(i)); } for (String name : friends) { System.out.println(name); } # 결과 Brian Nate Neal Raju Sara Scott forEach 사용 forEach 함수를 사용한 예제입니다. 첫 번째부터 마지막까지 점점 코드가 간략해지는 것을 볼 수 있습니다. // 1) fri..