[노마드 코더] Typescript로 블록체인 만들기 회고

MinWoo Park·2021년 4월 17일

retrospect typescript

Retrospect

목록 보기

7/11

노마드코더 Typescript로 블록체인 만들기 강좌를 완료하였습니다.
회고를 통해 앞으로의 어떤 태도로 무엇을 학습할지 고민하는 시간을 갖도록 하겠습니다.

강의 목차

TIL - [노마드 코더] Typescript로 블록체인 만들기(1)

TIL - [노마드 코더] Typescript로 블록체인 만들기(2)

TIL - [노마드 코더] Typescript로 블록체인 만들기(3)

TIL - [노마드코더] Typescript로 블록체인 만들기 (4, 완결)

해당 강좌를 선택한 이유❓

타입스크립트의 타입 기능을 통해 오류의 원인을 찾기 쉬워진다면 협업하는 동료들과 보다 원할한 커뮤니케이션을 할 수 있다는 점이 끌려 타입스크립트를 공부하기 시작했고, 블록체인에 대해 관심이 있었기에 타입스크립트로 블록체인을 만들어보는 노마드 코더의 강좌를 선택했습니다.

무엇을 배웠나 ✍️

타입스크립트 프로젝트 셋업
타입스크립트 변수 선언문
객체와 인터페이스, 클래스
함수와 메서드

프로젝트 셋업

1. typescript 설치

타입스크립트 개발은 node.js 프로젝트를 만든 다음, 개발 언어를 타입스크립트로 설정하는 방식으로 진행합니다.
보통 typescript와 ts-node 패키지를 설치합니다.
글로벌로 설치해 두었더라도 프로젝트를 전달받아서 이용하는 다른 개발자의 컴퓨터에 타입스크립트 패키지가 설치되어 있지 않을 수 있으니 두 패키지를 -D 옵션으로 설치해 줍니다.

yarn add typescript ts-node --dev

2. tsconfig.json 생성

tsconfig.json은 타입스크립트 컴파일러 설정 파일입니다.
node.js는 타입스크립트를 이해하지 못하기 때문에 자바스크립트 코드로 컴파일하는 작업이 필요하기 때문입니다.
tsc --init 명령 또는 직접 파일을 만들 수 있습니다.
저는 개인적으로 tsc --init으로 작성 시 많은 설정들이 생성되어 직접 파일을 만들어 자신에게 필요한 대로 셋업하는 것이 편한 거 같습니다.
타입스크립트를 사용하면서 필요한 설정들이 생기면 tsconfig.json에 추가할 수 있는 옵션에 관한 문서를 찾아보시는 것을 추천합니다.

tsconfig.json 파일 생성 후 셋업

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2015",
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. index.ts 생성

index.ts는 index.js로 컴파일 해야 합니다.
tsc를 터미널에 입력하면 index.js와 index.js.map을 만들어 줍니다.

tsc

4. package.json 설정

index.ts의 소스코드가 변경될 때 마다 계속해서 yarn start를 통해 컴파일하여 index.js를 바꾸는 것이 매우 번거로운 일입니다.
이를 해결하기 위해 TSC watch 설치하고 package.json와 tsconfig.json을 수정합니다.

yarn add tsc-watch -D
src, dist 디렉터리 생성

package.json의 start 수정하여 tsc-watch를 사용합니다.
컴파일 성공 시 dist 디렉토리에 index.js를 생성합니다.

5. 모듈 사용하기

강의 후반부에 해시 함수를 사용하기 위해 crypto-js 모듈을 불러와 사용합니다.
모듈은 셋업과 관련된 내용이라 미리 작성하겠습니다.

타입스크립트에서도 export와 import 키워드를 사용합니다.

외부 패키지를 사용할 때 외부 패키지에서 한 가지 기능만을 제공하는지 다양한 기능을 제공하는지에 따라 import문이 약간 다를 수 있습니다.

crypto-js 패키지는 다양한 기능을 제공하므로 import시 모든 기능을 가져오는 식으로 작성합니다.

import * as CryptoJS from "crypto-js";

변수 선언문

1.타입 주석

타입스크립트와 자바스크립트으 기본 타입은 대소문자의 차이가 있습니다.
자바스크립트는 Number, Boolean.. 대문자라면
타입스크립트는 number, boolean, string, object 이런 식으로 소문자로 작성해야 합니다.

타입스크립트에서 자바스크립트의 변수 선언문을 확장하여 타입을 명시할 수 있고 함수의 매개변수와 반환값에도 타입 주석을 붙일 수 있습니다.

변수 선언의 타입 주석은 다음과 같습니다.

let 변수 이름: 타입 [ = 초깃값]
const 변수이름: 타입 = 초깃값

함수의 매개변수에 타입 주석을 하는 코드를 예로 보겠습니다.

const sayHi = (name: string, age: number, gender: string) => {
  console.log(`Hello ${name}, you are ${age}, you are a ${gender}`);
};

sayHi("ParK", 26, "male");

// 이 파일이 모듈이 된다는 것을 이해할 수 있도록 만들어 주는 코드
// 1번 줄에서 "블록 범위 변수 'name'을(를) 다시 선언할 수 없습니다.ts(2451)" 에러가 나는 걸 방지해 줌, 약간 버그같은 느낌
export {};

이처럼 매개변수에 타입을 지정해 주면 함수에 인자를 넣을 때 어떤 타입의 인자를 넣어야 하는지 직관적으로 알 수 있으며 다른 타입을 넣는 경우 타입스크립트가 해당 부분이 잘못됬음을 알려주어 굉장히 편합니다.

객체와 인터페이스, 클래스

위에서 타입 주석을 배운대로 한다면 string 타입의 변수를 만들 때는 다음과 같이 쉽게 만들 수 있습니다.

let name: string = 'Park'

그러나 객체의 타입을 정의하는 각 속성들의 타입을 어떻게 정의해야 하나 궁금증이 드실 수 있을 겁니다.
객체의 타입은 interface 키워드를 이용하여 다음과 같은 형태로 작성합니다.

interface 인터페이스 이름 {
  속성 이름[?]: 속성타입[,...]
}

이렇게 인터페이스를 만들어 두면 객체를 만들 때 위의 name 변수를 만든 것처럼 쉽게 사용이 가능합니다.

interface Person {
	name: string,
  	age: number
}

let park: Person = {name: 'Park', age: 26}

만약 인터페이스를 만들 때 age속성이 선택적으로 필요하다면 속성명 뒤에 ?를 붙여 선택 속성을 만들어 사용할 수 있습니다.
또 interface 키워드를 사용하지 않고 이름이 없는 익명 인터페이스도 존재합니다.

클래스를 살펴보면 자바스크립트에서는 클래스의 속성들을 묘사할 필요가 없었습니다.
하지만 타입스크립트에서는 클래스가 어떤 속성들 을 가져야 하는 지 선언해야 합니다.
그리고 그런 속성들이 가지고 있는 권한(permission)도 선언해야 합니다.

접근 제한자에 관련하여 편리했던 부분은 constructor 생성자의 매개변수에 접근 제한자를 붙이면 해당 매개변수의 이름을 가진 속성이 클래스에 선언된 것처럼 동작합니다.

아래 코드로 예시를 보시면 생성자 함수의 매개변수에 접근 제한자를 붙인 덕분에 많은 코드를 줄일 수 있음을 알 수 있습니다.

class Block {
  // public index: number;
  // public hash: string;
  // public previousHash: string;
  // public timestamp: number;
  // public data: string;

  constructor(
    public index: number,
    public hash: string,
    public previousHash: string,
    public data: string,
    public timestamp: number
  ) {
    // (this.index = index),
    //   (this.hash = hash),
    //   (this.previousHash = previousHash),
    //   (this.data = data),
    //   (this.timestamp = timestamp);
  }
}

함수와 메서드

함수 또한 매개변수와 반환값에 타입 주석이 가능합니다.
이를 통해 매개변수에 잘못된 값을 넣지 않고, 반환값이 무엇인지 직관적으로 알 수 있어 매우 편리했습니다.

아래 코드로 예시를 보면 인자로 Block클래스가 들어가고 리턴 값을 boolean 이라는 점을 한 번에 알수 있습니다.

const isBlockValid = (candidateBlock: Block, previousBlock: Block): boolean => {
  if (!Block.vaildateStructure(candidateBlock)) {
    return false;
  } else if (previousBlock.index + 1 !== candidateBlock.index) {
    return false;
  } else if (getHashForBlock(candidateBlock) !== candidateBlock.hash) {
    return false;
  } else {
    return true;
  }
};