ABBO 기술 블로그

TypeScript의 Enum은 딱 열거형으로서만 사용할 수 있습니다. 다른 언어에서 Enum을 Static 객체로 사용해본 경험이 있는 분들이라면 이 지점이 굉장히 답답하다는 것을 느낄 수 있는데요. Java에서 Enum을 객체로 활용하면 어떤 큰 장점을 얻게되는지는 배민 기술 블로그 를 참고해보시면 좋습니다. 저와 똑같이 답답함을 느끼신 분이 계시는지, 이미 TypeScript도 Java의 Enum과 같이 Static 객체로 Enum을 다룰 수 있도록 ts-jenum 을 만들어주셨습니다. 이번 시간에는 ts-jenum 을 이용해 응집력 있는 Enum 활용법을 소개드리겠습니다. 1. 설치 ts-jenum 은 Java의 java.lang.Enum 과 같은 사용성을 얻기 위해 제공하는 라이브러리입니다. 별..

Author: 주니용 앞의 글에서 블록들을 연결시켜주는 로직을 작성해보았습니다. 하지만, 이 상태로는 빈 데이터가 들어오는 경우에도 체인이 되는 형태이고, 또 같은 데이터가 동시에 들어와 해시값이 같더라도 문제가 발생하죠. 그렇기 때문에 검증하는 단계를 추가하여야 합니다. 마지막으로 추가하는 검증 소스는 아래와 같습니다. 먼저 Block 클래스 내부에 타입을 검증할 수 있는 로직을 추가해보려 합니다. static checkStruct = (block: Block): boolean => typeof block.index === "number" && typeof block.hash === "string" && typeof block.data === "string"; 자, 이제 typeof 함수를 이용하여 각..

Author: 주니용 이전에 프로토타입을 만들었다면 이제 본격적으로 활용가치가 있는 함수들을 직접 만들어보아야 하겠습니다. 소스를 간단하게 먼저 수정하고 진행하도록 하겠습니다. import * as CryptoJS from "crypto-js"; class Block { static calcBlockHash = (index: number, hash: string, data: string, ts: number): string => CryptoJS.SHA256(`${index}${hash}${ts}${data}`).toString(); private index: number; private hash: string; private prevHash: string; private data: string; priv..

Author: 니용 지금까지는 TypeScript에 문법에 대해서 다루어보는 시간이었습니다. 그럼 이제부터는 본격적으로 블록체인의 프로토타입을 만들어보려 합니다. 가장 먼저 Class를 생성합니다. 클래스의 프로퍼티는 아래와 정의하면 좋을듯 합니다. class Block { private index: number; private hash: string; private prevHash: string; private data: string; private currentTimestamp: number; } index는 인덱싱을 위한 컬럼으로 number 타입을 가집니다. hash, prevHash는 현재 인덱스가 가지고 있는 해시값과 이전 블록이 가지고 있는 해시값을 의미하고 string 타입을 가집니다. d..

이전 글에서는 기본적인 객체는 인터페이스로 만든다고 하였습니다. 하지만 기존의 class는 없을까요? 그렇지 않습니다. TypeScript는 클래스 또한 존재합니다. 기존에 생성되었던 인터페이스 대신에 클래스로 변환을 해보려고 합니다. class Abbo { public group: string; public nowYear: number; public groupMessage: string; constructor(group: string, nowYear: number, groupMessage: string) { this.group = group; this.nowYear = nowYear; this.groupMessage = groupMessage; } } 위의 소스를 보시다시피 어디서 접근이 가능한 것인지..

이번 글에서는 TypeScript 모델을 만들어보려고 합니다. 보통 모델은 다른 파일에 저장하는 경우가 많죠. TypeScript는 이를 인터페이스(interface)라고 칭합니다. 직접 소스를 보시면 이해가 빠를거 같습니다. interface Abbo { group: string; nowYear: number; groupMessage: String; } 위의 소스를 index.ts 파일 내에 상단에 입력합니다. 그리고 이번에는 기존에 각각 떨어져 있던 const를 합쳐줍니다. const niyoung = { group: "ABBO", nowYear: 2020, groupMessage: "Happy new Year!!" } 자 이렇게 하나의 객체가 만들어졌습니다. 그럼 이번에는 기존의 helloWorld..

이번 시간에 다루어볼 내용은 경로(path)입니다. 모든 소스가 한 디렉터리 안에 있는건 찾기도 싫고 보기는 더 싫겠죠. 그렇기에 이제 디렉터리 분류를 할 시기가 온 거 같습니다. 먼저 디렉터리를 생성해보겠습니다. index.ts 파일이 있는 같은 레벨에 src라는 폴더와 dist라는 폴더를 생성합니다. 그 다음 tsconfig.json 파일로 이동하여 수정을 해야 합니다. 컴퓨터는 파일명 앞에 경로가 없으면 나와 같은 레벨로 밖에 인식을 못합니다. 아까 index.js로 되어 있던 "include" 가 바로 그것이죠. 그래서 아래와 같이 바꿔줍니다. "include" : ["src/**/*"] 여기서 **은 src/ 뒤에 있으므로 src 디렉터리 내에 모든 디렉터리를 의미합니다. 예를 들어 src 내에..

이번에는 컴파일 할때마다 yarn start 명령어를 치는 번거로웠던 작업을 해소하기 위해 글을 작성해보았습니다. 먼저 터미널에서 'tsc 시계'를 설치합니다. yarn add tsc-watch --dev --dev라는 옵션이 붙게 되는데 이는 개발중일 때만 작동을 하겠다라는 의미입니다. 정말 쉽게 설치가 완료되었습니다. 다음으로 설정할 것은 package.json 입니다. 기존에 스크립트 구역에 설정되었던 값을 변경하려고 합니다. "scripts" : { "start" : "tsc-watch --onSuccess \" node index.js\"" } 와 같이 치환해줍시다. 의미는 컴파일이 성공하였을 때마다(--onSuccess 옵션) tsc-watch가 작동하여 index.js를 생성한다는 의미입니다..