wan2.land

AWS CDK에서 Terraform으로 이주하기

Fri, 30 Sep 2022 01:01:53 +0000

2018년, 처음 저희 회사에 IaC(Infrastructure as Code)를 도입할 땐 Terraform을 사용 했습니다.(과거 포스팅, Infrastructure as Code 삽질기)

이후 2020년쯤(과거 포스팅을 살펴보니), AWS에서 CDK(Cloud Development Kit)라는 인프라 관리 도구가 출시되었습니다. 대부분의 개발자에게 익숙한 Typescript와 Python으로 인프라를 관리할 수 있다는 점을 장점으로 내세웠습니다. 당시 저희회사는 전체 큰 그림은 Terraform을 사용했고, 작은 서비스는 Serverless Framework를 사용하고 있었습니다. Serverless Framework를 사용했기 때문에 CloudFormation에 이미 익숙한 상태였습니다. 인프라 스택을 하나 즉 CloudFormation으로 일원화하고 싶은 욕구가 생겨 CDK를 적극적으로 도입했습니다. ~~그런 짓은 하지 말아야 했는데 난 그 사실을 몰랐어.~~ 그때 당시 CDK와 관련된 포스팅도 여러 차례 올렸습니다. 😅

CDK는 인프라가 복잡해지면 복잡해질수록 사용하기가 어려웠습니다. 결국 Terraform으로 다시 돌아가기로 결정, 그동안 느꼈던 단점에 대해 몇 가지 이야기해보자면,

1. 참고할 내용이 별로 없다.

CDK를 도입하면서 가장 힘들었던 점입니다. 애초에 CDK 출시 초기에 도입했기 때문에 어느 정도의 불편함은 감수하고 있었습니다. CDK를 사용하다가 막히면 CloudFormation의 문서를 참고하였고, 이에 대응되는 CDK의 패키지와 객체 이름을 통해 추론하였습니다. 문제는, CloudFormation도 문서가 친절하지 않습니다. Terraform은 자원(Resource, 예, EC2 Instance, S3 Bucket 등) 별로 문서도 잘 정리되어있고 그에 대한 예시도 충분히 제공합니다. 스택오버플로우는 말할 것도 없지요.

2. 상태를 추적하기 어렵다.

CDK는 CloudFormation을 기반으로 동작합니다. Typescript를 이용해서 CloudFormation Template을 작성합니다. DSL(Domain-specific language)으로서 Typescript를 이용하는 셈이지요. 근데 Typescript는 마크업 언어가 아니고, 프로그래밍 언어입니다. 그래서 그런가.. 코딩 중간 중간 변수의 상태를 보려고 시도하였습니다. 중간에 만들어진 자원을 콘솔로그로 출력해보면 '${Token[AWS.AccountId.7]}', '${Token[TOKEN.116]}'와 같은 문자열을 볼 수 있습니다. 실제 자원의 ARN이나 이름이 나올 줄 알았지만, 유추하기 어려운 문자열입니다. CDK로 작성한 로직이 전부 동작한 후, 위 토큰이 CloudFormation의 자원(CloudFormation 다른 자원의 ARN, ID 등)으로 대치되겠네요.

프로그래밍 언어라서 상태를 추적하면서 코딩 할 수 있을거란 기대가 있었는데, 크게 의미가 없었습니다.

3. AWS 자원 구조에 익숙할 수록, 객체 방식의 추상화가 방해된다.

Typescript 코드 자동완성은 코딩할 때 굉장히 편리합니다. 모든 것을 기억하지 않아도 되기 때문입니다. CDK를 사용하다보면 매개변수로 인터페이스 형식을 요청하는 경우가 많습니다. (물론, 이러한 방식이 실수를 방지하는데 큰 도움이 됩니다.)

다음은 RestAPI(Api Gateway)에 HTTPS를 위해 인증서를 연결하는 코드입니다.

import { RestApi } from '@aws-cdk/aws-apigateway'
import { Certificate } from '@aws-cdk/aws-certificatemanager'

const certificate = Certificate.fromCertificateArn(
  this,
  'Certificate',
  'arn:aws:acm:us-east-1:012345678910:certificate/00000000-1111-dddd-eeee-ffffffffffff',
)
new RestApi(this, 'MyRestApi', {
  domainName: {
    certificate,
  },
})

발급받은 인증서는 ARN을 이용해서 접근할 수 있습니다. RestApi 객체를 생성할 때 인증서 정보는 Certificate 인터페이스의 형태로 요구합니다. 이를 전달하기 위해 (1) @aws-cdk/aws-certificatemanager 패키지를 설치, (2) Certificate 객체를 ARN을 통해 생성, (3) 매개변수로 전달하는 과정을 거쳐야 합니다. 당연히 새롭게 설치한 패키지와 기존에 있던 CDK 관련 패키지끼리 버전도 똑같이 맞춰야 합니다. 😱

반면, Terraform은 자체적으로 구현한 HCL이란 언어를 통해 자원의 ARN을 바로 연결할 수 있습니다..

4. 배포 실패 시 대응하기 어렵다.

배포하다가 에러라도 발생한다면, 결국 AWS Console에 접속, CloudFormation으로 이동해서 로그를 살펴봐야 합니다.

5. 리팩토링 하기가 어렵다.

프로그래밍 과정에서 규모가 커지면 리팩토링이 필요하듯, 인프라도 규모가 커지면 리팩토링이 필요합니다. CloudFormation의 스택이 커지면 배포하는데 걸리는 시간도 점점 길어집니다. CloudFormation은 자원을 삭제하지 않고 자원을 분리해서 다른 스택으로 이동하는 작업이 굉장히 어렵습니다. (심지어 이러한 기능은 비교적 최근에 추가되었습니다.) 코드와 CLI 명령어로만 이러한 작업을 수행하는게 쉽지 않습니다. 거의 웹콘솔로 진행해야합니다.

이게 CDK를 걷어내야겠다고 생각하게된 결정적인 계기입니다. 리팩토링하면서 자원을 CloudFormation에서 분리할거라면 이번 기회에 Terraform으로 모두 옮기자고 생각했습니다.

AWS CDK에서 Terraform으로 자원 이동하기

CloudFormation의 스택을 그냥 삭제하게 되면 그 안에 포함된 자원도 함께 삭제됩니다. S3나, DynamoDB, SQS Queue 등과 같은 자원은 데이터도 함께 삭제 될 수 있습니다. 따라서 이러한 자원의 경우 스택을 삭제하기 전에 자원이 삭제되지 않도록 설정해줘야 합니다.

기존에 관리하는 CDK 소스코드를 수정하는 방법이 있습니다. AWS CDK의 코드를 사용한다면 removalPolicy를 Retain으로 설정합니다. 대부분의 자원에 해당하는 값이 포함되어있습니다.

import { Queue } from '@aws-cdk/aws-sqs'

const queueJobs = new Queue(this, 'Queue', {
  /* ... */
  removalPolicy: RemovalPolicy.RETAIN,
})

만약에 소스코드에 접근할 수 있는 상황이라면 AWS CloudFormation에서 직접 수정하는 방법이 있습니다. 스크린샷과 같이 “스택 업데이트”에 들어갑니다.

그리고 삭제되면 안되는 자원을 찾아서 DeletionPolicy 항목에 Delete라고 적혀있는 부분을 Retain으로 변경합니다.

위와 같은 식으로 서비스가 동작하는데 필요한 자원을 전부 삭제되지 않도록 수정하고 CloudFormation Stack을 제거합니다.

이제 Terraform에 자원을 추가해봅시다. Terraform은 AWS 상에 만들어져있는 자원을 추가하는 과정이 굉장히 쉽습니다. 우선 자원(resource)를 정의합니다. 이 때 상세한 옵션을 다 입력하지 않아도 됩니다. 공식 문서에 나오는 필수값만 채워줍시다.

resource "aws_sqs_queue" "my_queue" {
  name                       = "my_queue"
  delay_seconds              = 0
  max_message_size           = 262144
  visibility_timeout_seconds = 30
}

이제 Terraform tfstate에 자원을 입력(import)합니다. 자원마다 import 할 때 사용하는 고유값이 다릅니다. 대부분은 ARN을 사용하지만 아닌 경우도 있습니다. 공식문서에 import 항목에 잘 나와있습니다.

Terraform - aws_sqs_queue #import

일단 ARN을 넣어보고 에러메시지를 보고 수정하는 방법도 괜찮습니다. 다음과 같이 import 명령어를 입력합니다.

terraform import \
  aws_sqs_queue.my_queue \
  https://sqs.ap-northeast-2.amazonaws.com/012345678910/my-queue

plan 명령어를 이용해서 실제 서비스에 적용되어있는 옵션값과 현재 코드 사이에 다른부분을 비교하면서 코드를 수정합니다. 수정할게 없다고 나올때까지 코드를 수정하거나, 빠져있는 옵션값을 추가합니다.

terraform plan

수정할게 없다고 나오면, apply 명령어를 통해 tfstate에 적용합니다.

terraform apply

plan 명령어를 통해 상태를 보면 (known after apply)과 같은 내용이 나올 때가 있습니다. 한번에 두개 이상의 자원을 정의하고, 이 자원간에 의존관계가 있으면 나옵니다. 이럴 땐, 두 자원 중 기반이 되는 자원을 먼저 추가하고 apply 합니다. 그리고 의존하는 자원을 추가하면 해당 메시지가 나올일이 거의 없습니다.

그 외, CDK에서 자동으로 생성해주는 IAM Role과 같은 자원들도 있는데, 이는 CloudFormation에 들어가서 Template을 살펴보면 자세한 내용을 확인할 수 있습니다.

정리

“현재 사용중인 모든 CloudFormation을 걷어낼건가요?”
“아니오.”

왜냐하면 CloudFormation을 기반으로 사용하는 프로젝트가 CDK만 있는게 아니기 때문입니다. Serverless Framework는 CloudFormation위에 사용하기 쉽게 만들어진 좋은 라이브러리라고 생각합니다. Serverless Framework는 개발자(특히 프론트엔드 개발자)가 CloudFormation의 자세한 구조를 몰라도 바로 사용할 수 있습니다. 만약 Lambda를 사용하기 위해 CDK를 사용한다면 코드를 업로드 하는 과정조차 쉽지 않습니다. node_modules를 함께 넣어줘야 합니다. 하지만 Serverless를 이용한다면? 누구나 손쉽게 AWS에 배포 할 수 있습니다.

“현재 사용중인 CDK를 걷어낼건가요?”
“네.”.

Serverless Framework는 서비스(간단한 WebHook과 같은)에 종속되는 아주 간단한 인프라를 만드는데 특화되어있습니다. 이에 비해서 CDK는 더 큰 인프라를 관리하는데 사용되는 도구 같은데, 규모가 커질 수록 더 관리하기 어려웠습니다. Terraform은 규모가 커질수록 관리하기 쉬웠습니다. AWS를 넘어서 GCloud, Azure로의 확장까지도 고려한다면 Terraform은 선택이 아닌 필수입니다.

혹시라도 IaC를 위해 AWS CDK를 고려하고 있다면 Terraform을 먼저 사용하시는 걸 추천드립니다. 🙂

그 외..

“‘CDK for Terraform’이라는 녀석이 있다는데요?”
“그냥 HCL로 Terraform 사용하세요. 🥲”

WeakRef와 FinalizationRegistry 이해하기

Fri, 16 Sep 2022 17:14:15 +0000

일시적으로 데이터를 담아 둘 때, Map을 활용합니다. 데이터베이스에서 아이디를 통해 사용자 데이터를 가져오는 로직이 있다고 가정해봅시다.

class UserFinder {

  findById(id: string) {
    return await this.db.findUserById(id)
  }
}

매번 데이터베이스에서 사용자 데이터를 가져오게 되면 서버에 많은 부하가 걸리게 됩니다. 이를 완화하기 위해 한번 가져온 사용자는 캐시에 담아두기로 하였습니다. 간단히 구현해보면 다음과 같은 방식이 됩니다.

class UserFinder {
  #cachedUsers = new Map()
  
  findById(id: string) {
    if (!this.#cachedUsers.has(id)) {
      const user = await this.db.findUserById(id)
      this.#cachedUsers.set(id, user)
    }
    return this.#cachedUsers.get(id)
  }
}

물론.. 위 로직으로 서비스를 운영하다보면 다음과 같은 에러 메시지를 만날 수 있습니다. 😅

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

사용자가 많으면 많을수록 Map(#cachedUsers)에도 많은 객체가 쌓이게 됩니다. 더이상 사용하지 않는 객체는 적절히 삭제되어야 합니다. 자바스크립트에서는 사용하지 않는 객체는 가비지 콜렉터(Garbage Collector)에 의해 삭제됩니다. 하지만 Map에 담겨있는 객체는 참조를 잃지 않기 때문에 가비지 콜렉션(Garbage Collection)의 대상이 되지 않습니다.

가비지 콜렉션 하면 가장 먼저 WeakMap이 생각납니다. WeakMap은 키를 객체로 갖고 해당 키가 가비지 콜렉터의 대상이 될 때 키에 해당하는 값이 삭제되는 방식입니다.

const user = { id: 1 }

const map = new WeakMap()

map.set(user, { username: 'wan2land' })

map.get(user) // { username: 'wan2land' }
map.get({ id: 1 }) // undefined

WeakMap은 값({ id: 1 })이 같아도 객체가 다르면 원하는 결과를 가져올 수 없습니다. 그래서 처음에 작성한 UserFinder예제에서 사용하기 적절하지 않습니다. 더 자세한 WeakMap의 내용은 다음 링크를 참고해주세요.

The Modern JavaScript Tutorial - WeakMap을 사용한 캐싱의 예시

WeakMap은 키를 객체로 가집니다. 우리는 스칼라값(String, Number, Boolean …)을 키로 갖는 WeakMap과 유사한 가비지 콜렉터의 대상이 되는 ~~어메이징한(?)~~ 무언가(?!)를 원합니다. 이때 ES2021에 추가된 WeakRef를 이용해봅시다. :-)

WeakRef는 참조된 객체가 가비지 콜렉터의 대상이 될 때, 그 내부의 객체가 사라집니다. WeakMap의 deref() 메서드를 호출하게 되면, 가비지 콜렉션 전에는 포함하고 있는 내부의 값이 정상적으로 불러옵니다. 가비지 콜렉션 뒤에는 내부의 값이 사라져서 undefined 값을 반환합니다. 이를 코드로 표현하면 다음과 같습니다.

let user = { id: 1 }
const ref = new WeakRef(user)

ref.deref() // { id: 1 }

user = null // 가비지 콜렉션 발생! (..실제로는 환경에 따라 일어나지 않을 수도 있습니다..)

ref.deref() // undefined

이제 WeakRef를 활용해서 UserFinder를 개선해봅시다.

class UserFinder {
  #cachedUsers = new Map()
  
  findById(id: string) {
    if (!this.#cachedUsers.has(id)) {
      const user = await this.db.findUserById(id)
      this.#cachedUsers.set(id, new WeakRef(user)) // WeakRef!
    }
    return this.#cachedUsers.get(id).deref()
  }
}

모든 문제가 해결된 것 같지만, WeakRef 자체를 가지고 있는 Map은 여전히 쓸모없는 WeakRef객체로 가득합니다. WeakRef 내부의 객체가 사라질 때, Map에서 WeakRef 객체도 삭제해야 합니다. 이 때 FinalizationRegistry를 사용하면 됩니다. FinalizationRegistry는 등록된 객체가 가비지 컬레션의 대상이 될 때 함께 등록된 값을 이벤트로 불러줍니다.

const registry = new FinalizationRegistry((heldValue) => {
  console.log(heldValue)
})

let user = { id: 2 }

registry.register(user, 'id is 2')

user = null // 가비지 콜렉션 발생! (..실제로는 환경에 따라 일어나지 않을 수도 있습니다..)
// 여기서 위 핸들러의 console.log("id is 2") 호출!

이제 FinalizationRegistry를 이용해서 코드를 보완하면 다음과 같이 됩니다.

class UserFinder {
  #cachedUsers = new Map()
  #registry
  
  constructor() {
    this.#registry = new FinalizationRegistry((id) => {
      this.#cachedUsers.delete(id)
    })
  }
  
  findById(id: string) {
    if (!this.#cachedUsers.has(id)) {
      const user = await this.db.findUserById(id)
      this.#cachedUsers.set(id, new WeakRef(user))
      this.#registry.register(user, id)
    }
    return this.#cachedUsers.get(id).deref()
  }
}

기획이 추가되어 UserFinder 말고 ArticleFinder에서도 구현해야합니다. 그 다음에는 CommentFinder에도 적용해야 한다고 합니다…. 매번 위와 같은 코드를 반복해서 사용하기에는 좀 귀찮습니다. 😅

다음과 같이 InvertedWeakMap 클래스를 만들고 사용하면 됩니다. (이게 젤 중요!!)

class InvertedWeakMap<K extends string | symbol, V extends object> {
  _map = new Map<K, WeakRef<V>>()
  _registry: FinalizationRegistry<K>

  constructor() {
    this._registry = new FinalizationRegistry<K>((key) => {
      this._map.delete(key)
    })
  }

  set(key: K, value: V) {
    this._map.set(key, new WeakRef(value))
    this._registry.register(value, key)
  }

  get(key: K): V | undefined {
    const ref = this._map.get(key)
    if (ref) {
      return ref.deref()
    }
  }

  has(key: K): boolean {
    return this._map.has(key) && this.get(key) !== undefined
  }
}

이제 UserFinder를 개선해봅시다.

class UserFinder {
  #cachedUsers = new InvertedWeakMap()
  
  findById(id: string) {
    if (!this.#cachedUsers.has(id)) {
      const user = await this.db.findUserById(id)
      this.#cachedUsers.set(id, user)
    }
    return this.#cachedUsers.get(id)
  }
}

실제 서비스에서 캐싱은 레디스(Redis)와 같은 Key-Value Storage를 이용합니다. 위 예시는 어디까지나 WeakRef와 FinalizationRegistry의 이해를 위해 작성되었습니다. 가비지 콜렉션의 타이밍이 예측불가능하기 때문에 확실한 이해 없이 사용하게 되면 위험할 수 있습니다. 음.. 언젠가 ORM같은 라이브러리에서 트랜잭션 캐시 목적으로 사용되지 않을까 조심스럽게 예측해봅니다. 🙂

참고

superserial 라이브러리 개발기

Wed, 14 Sep 2022 08:07:08 +0000

github.com/denostack/superserial

업무를 하다가 오래걸리는 로직을 별도의 프로세스에서 처리하도록 분리할 일이 생겼고, Job Queue를 활용해서 구현하였습니다. Job을 Queue로 전달 할 때, Job 데이터를 전달할 때 객체 그대로 전달 할 수 없기 때문에 직렬화(Serialized)된 데이터로 변경해야합니다. 자바스크립트로 구현 할 땐, JSON을 주로 사용합니다.

하지만 JSON을 사용하다 보면 부족한 부분이 종종 있습니다. Number 타입의 경우 Infinity 같은 값이 존재합니다. 이를 JSON으로 변경하게 되면 null로 변경됩니다. 이를 실제로 활용하려면 직렬화(Serialize) 할 때 문자열(혹은 JSON이 지원하는 다른 Object 형태)로 변경해주어야 합니다. 그리고 이 값을 역직렬화(Deserialize) 할 때 다시 Infinity에 매핑해서 사용해야합니다.

// 두번째 매개변수인 Replacer를 활용
const serialized = JSON.stringify(data, (key, value) => {
  if (value === Infinity) {
    return "Infinity"
  }
  return value
}) // {"value":"Infinity"}

const deserialized = JSON.parse(serialized, (key, value) => {
  if (value === 'Infinity') {
    return Infinity
  }
  return value
})

위와 같이 사용한다고 했을 때, 직렬화된 데이터({"value":"Infinity"})에서 Infinity를 표현한 숫자와, "Infinity"를 표현한 문자열을 어떻게 구분할 수 있을까요? 편의를 위해서 다양한 객체를 위와 같이 변경해서 사용한다고 했을 때 변경된 객체인지, 단순 오브젝트의 변경형인지 어떻게 구분할 수 있을까요? 이를 위해서는 문법의 확장이 필요해보였습니다.

이미 기존에 만들어져있는 라이브러리가 있는지 탐색하고, 원하는 기능이 있는지 정리하였습니다.

JSON5 : undefined, Infinity, NaN 등의 특수한 값 사용가능
flatted : Circular 형식의 데이터 제공, JSON 형식의 확장
v8.serialize : Circular 사용 가능, 내장객체(Map, Set 등) 사용가능, 완전한 의미의 Serialize, Node.js에서만 사용가능. 사용자 정의 클래스 안됨.
esserializer : BigInt, RegExp, Set 객체 지원 (circular, Map은 유료..)

Circular한 맵, 사용자 정의 클래스를 사용하고 싶은데, 만족스러운 라이브러리를 찾을 수 없었습니다. 만족스런 라이브러리가 없으니… (올커니) 한번 만들어보기로 했습니다.

Undefined, Infinity, NaN

이 부분은 과거에 한번 만들었던 적 있습니다. 또한 과거에 만들었던 코드를 기반으로 확장했습니다.

파서 만들기 (1) - JSON.stringify

Circular

가장 해결하고 싶었던(=가장 재미있어 보이는 🤩) 문제는 Circular 였습니다. 객체(Object)와 배열(Array)은 자바스크립트 내에서도 Call by Reference를 통해 사용됩니다. Call by Reference를 통해 사용되는 객체는 직렬화 실행 이후에도 참조할 위치를 보내주면 되겠다고 생각했습니다. 이러한 방식을 구현하기 위해, JSON구조를 세미콜론을 이용해 묶고, $0, $1 와 같은 형식의 문법을 추가해서 접근할 객체의 위치를 표현하였습니다.

const data1 = {} as any
const data2 = {} as any
data1.ref = data2
data2.ref = data1

const serialized = serializer.serialize(data1) // {"ref":$1};{"ref":$0}

serializer.deserialize(serialized) // <ref *1> { ref: { ref: [Circular *1] } }

배열은 다음과 같이 나타낼 수 있습니다.

const arr = [
  { name: 'wan2land', pet: { name: "boririce" } },
  { name: 'wan3land' },
  { name: 'wan4land' },
  { name: 'wan5land' },
  { name: 'wan6land' },
]

serializer.serialize(arr)
// [$1,$2,$3,$4,$5];{"name":"wan2land","pet":$6};{"name":"wan3land"};{"name":"wan4land"};{"name":"wan5land"};{"name":"wan6land"};{"name":"boririce"}

가장 구현하면서 머리가 아팠던 부분은 자기 자신을 참조하는 형태입니다. 이 경우도 $0을 이용하면 쉽게 표현할 수 있었습니다.

const data = {} as any
data.data = data

const serialized = serializer.serialize(data) // {"data":$0}

serializer.deserialize(serialized) // <ref *1> { data: [Circular *1] }

조금 더 극단적인 상황

다음과 같은 케이스도 고민해보았습니다.

serializer.deserialize('$0')

말하자면, 나 자신을 바라보는 포인터인데 애초에 자바스크립트에서는 이런 형태의 객체는 불가능했고, 다른 언어라고 하더라고 필요 없어보여서 문법 에러(Syntax Error) 처리하였습니다.

Uncaught SyntaxError: Unexpected token $ in SuperSerial at position 0

추가 자료형 (BigInt, RegExp, Date, Map, Set)

BigInt와 RegExp는 실제 자바스크립트에서 사용하는 표현 그대로 사용하였습니다.

serializer.serialize(100n) // 100n
serializer.serialize(/abc/gmi) // /abc/gmi

Date 객체는 타임존에 따라서 시간이 다르게 노출됩니다. 하지만 타임스탬프는 전세계 어느 런타임 환경에서도 고유의 값이 보장됩니다. Date 객체의 본질은 타임스탬프라고 생각하여 이를 사용했습니다.

serializer.serialize(new Date("2022-02-02")) // Date(1643760000000)

Map의 경우 키 값에 객체가 들어올 수 있습니다. 따라서 새로운 문법을 만들어야 했습니다. Map을 console.log로 찍어보면 다음과 같이 나옵니다.

console.log(new Map([[1, 2], [3, 4]]))
// Map { 1 => 2, 3 => 4 }

이러한 표현 방법을 사용했습니다.

const map =  new Map()
map.set({}, "object value")
map.set("string", "string value")

serializer.serialize(map)
// Map($1=>"object value","string"=>"string value");{}

Set 또한 유사하게 구현하였습니다.

const set = new Set([1, 2, 3, 4])
serializer.serialize(set)
// Set(1,2,3,4)

클래스 지원

클래스를 생각하기에 앞서, 원래는 함수 자체를 직렬화 하고 싶었습니다. 함수의 toString 메서드를 이용하면 쉽게 문자열로 받을 수 있습니다. 이를 응용하면 되지 않을까 생각했습니다.

function hello() {
  return "world!"
}

console.log(hello.toString()) // 위의 함수 그대로 출력됨

테스트를 진행하다가, 해결할 수 없는 문제에 맞닥뜨리게 되었습니다. 바로 클로져 영역 바깥의 변수였습니다. 다음의 예시를 보면, 함수 add가 있는데 이를 문자열로 변환해서 보게되면 내부에 ADDED_VALUE라는 내용이 포함되어있습니다. 이 문자열을 다시 함수로 변환하게 되면 ADDED_VALUE라는 변수에 접근할 수 있어야 하는데 이 클로져 변수를 설정할 수가 없습니다.

const ADDED_VALUE = 10
function add(n: number) {
  return n + ADDED_VALUE
}

함수를 직렬화해서 얻을 수 있는 이점이 무엇인지, 본질이 무엇인지 고민해보았습니다. 함수는 행동이고, 이 행동을 전달할만한 요소는 함수 말고도 클래스가 있습니다. 클래스 내부에도 메서드가 있기 때문입니다. 따라서 직렬화 할 때 클래스 내부 프로퍼티를 직렬화하고, 역직렬화 할 때 해당 클래스에 매핑해주면 쉽게 이용할 수 있겠다 싶었습니다. 즉, 클로져 변수를 인스턴스 내부에 가둬버리고 이 인스턴스를 직렬화하는 겁니다.

class Adder {
  constructor(
    public n: number
  ) {
  }

  add(n: number) {
    return this.n + n;
  }
}

위와 같은 클래스를 선언하고, Serializer를 선언할 때, 사용할 클래스를 매개변수로 전달해주어야 합니다.

const serializer = new Serializer({ classes: { Adder } });

const serialized = serializer.serialize(new Adder(100));
// Adder{"n":100}

const deserialized = serializer.deserialize(serialized)
deserialized.add(200) // 300

toSerialize, toDeserialize

객체를 다루다보면 Private 값에는 접근할 수 없습니다. 위의 예시에서 n값을 private 프로퍼티로 변경하고 직렬화하면 내부 n값이 출력되지 않습니다.

class Adder {
  #n: number
  constructor(
    n: number
  ) {
    this.#n = n
  }

  add(n: number) {
    return this.#n + n;
  }
}

const serializer = new Serializer({ classes: { Adder } });

serializer.serialize(new Adder(100));
// Adder{} - private에는 접근할 수 없음

이 또한 JSON에서 이미 해결할 수 있는 방법이 있었습니다. toJSON을 사용하면 됩니다. (잡설. toString이나, toJSON과 같은 과거의 특수 메서드들은 이름을 문자열로 제공해왔습니다. 이는 과거에는 심볼타입이 없던 시절에 구현되었기 때문입니다. 요즘에는 이러한 특수 메서드는 심볼 형식으로 제공하고 있습니다. Symbol.iterator가 대표적인 예입니다.) 이를 응용해서 특수메서드인 toSerialize, toDeserialize를 구현하였습니다. 이 두 특수메서드는 심볼로 제공됩니다.

import { toSerialize, toDeserialize } from "superserial";

class Adder {
  #n: number
  constructor(
    n: number
  ) {
    this.#n = n
  }

  add(n: number) {
    return this.#n + n;
  }

	[toSerialize]() {
    return { n: this.#n };
  }

  [toDeserialize](data: { n: number }) {
    this.#n = data.n;
  }
}

const serializer = new Serializer({ classes: { Adder } });

// serialize 호출 시, toSerialize가 정의되어있으면 이를 사용함.
const serialized = serializer.serialize(new Adder(100)); // Adder{"n":100}

// deserialize 호출 시, toDeserialize가 정의되어있으면 이를 사용함.
const deserialized = serializer.deserialize(serialized)
deserialized.add(200) // 300

자바스크립트에서는 객체를 생성할 때 생성자(constructor)를 무조건 호출합니다. (우회 방법을 찾지 못했습니다.) 따라서 생성자에 특수한 처리가 있다면 toDeserialize에도 동일한 처리가 필요합니다.

마무리

.. 그리하여 쓸만한 직렬화 라이브러리를 만들었습니다. 굉장히 저수준의 라이브러리라서 쓰임이 많지는 않을 거 같습니다. 다만, 아마도 저와 비슷한 문제를 겪은 사람이라면 꽤나 좋아할만한 라이브러리라고 생각합니다. (사실, 프레임워크 만드는 사람이 가져다가 사용하면 정말 기분좋을 거 같습니다. 🤣)

실제 내부에 파서 만드는 과정은 복잡해서 생략하였는데 더 자세한 과정이 궁금하시면, 과거에 파서에 관한 글(파서 만들기 (2) - JSON.parse)을 한번 읽어보시는 걸 추천드립니다. 파서에서는 어떻게 표현하게 만드는지가 중요하지, 만드는 방법 자체는 크게 다르지 않기 때문입니다.

Typescript SOLID (2) - 개방폐쇄원칙(OCP)

Thu, 01 Sep 2022 13:37:12 +0000

개방-폐쇄 원칙(OCP, Open-Closed Principle)이란,

소프트웨어 개체는 확장에 대해 열려 있어야 하고, 수정에 대해서는 닫혀 있어야 한다.

위 정의에서 이야기하는 개체는 함수단위가 아닌 클래스(혹은 객체)를 이야기합니다. 좀 더 크게 보면 모듈까지 확장할 수 있습니다.

“확장에는 열려 있다”는 말은 기존 기능에 새로운 기능을 확장하기 쉬워야 한다는 의미입니다. “수정에 대해서는 닫혀 있다”는 말은 새로운 기능을 확장하면서 기존의 코드에는 변화가 없어야 한다는 의미입니다. 이를 위해서는 인터페이스(혹은 추상클래스)를 잘 활용해야합니다.

예를 들어봅시다. 웹 컨트롤러를 호출 했을 때, 사용자 정보에 대한 로그를 쌓고, 메시지를 반환하는 프로그램이 있다고 해봅시다.

class HomeController {

	welcome(user: User) {
		this.#log(`${user.name}님이 방문했습니다.`)
		return "hello world!"
	}

	#log(message: string) {
		this.writeMessageToFile(message, 'info.log')
	}
}

아주 단순하게 작성하였습니다. 이제 여기에 추가 요구사항이 들어옵니다. 파일에 작성하는 로그 메시지를 슬랙으로도 전달 받고 싶다고 합니다. 그렇다면 다음과 같이 코드가 추가됩니다.

class HomeController {
	constructor(public slack: Slack) {
	}

	welcome(user: User) {
		this.#log(`${user.name}님이 방문했습니다.`)
		this.slack.sendMessage(`${user.name}님이 방문했습니다.`)
	}

	#log(message: string) {
		this.writeMessageToFile(message, 'info.log')
	}
}

기능을 확장하는데 있어서 수정에는 닫혀있어야 하는데, HomeController 코드 전체가 수정되었습니다. 지금은 HomeController에 welcome 한곳에서만 Log를 사용하니까 한곳만 수정하면 됩니다. 만약에 로그를 사용하는 곳이 여러곳이 있다면 모든 부분을 찾아서 슬랙 코드를 삽입해주어야 합니다. 그리고 이 과정에서 누락이 있을 수 있겠지요.

어떤 식으로 코드를 작성하면 OCP를 만족할 수 있을까요? 인터페이스를 통해서 로그를 사용하고, 이 인터페이스를 구현하였다면 더 프로그램이 유연해집니다. 인터페이스를 사용하게 되면 기존 기능은 수정하지 않아도 새로운 기능을 확장할 수 있습니다.

다음과 같이 Logger를 정의해봅시다.

interface Logger {
	log(message: string): void
}

그리고 기존의 HomeController는 다음과 같이 작성할 수 있습니다.

class HomeController {
	constructor(public logger: Logger) {
	}

	welcome(user: User) {
		this.logger.log(`${user.name}님이 방문했습니다.`)
	}
}

그리고 파일에 로그를 작성하는 FileLogger는 다음과 같이 작성할 수 있습니다.

class FileLogger implements Logger {
	constructor(public path: string) {
	}

	log(message: string): void {
		this.#writeToFile(message)
	}

	#writeToFile(message: string) {
		// 생략
	}
}

메인은 아마도 다음과 같을겁니다.

const logger = new FileLogger('./output.log')
const controller = new HomeController(logger)

/* .. 생략 .. */

controller.welcome(user)

이제 슬랙으로 로그를 받고싶다는 요구사항을 반영해봅시다. SlackLogger는 다음과 같이 구현할 수 있습니다.

class SlackLogger implements Logger {
	constructor(public slack: SlackClient) {}

	log(message: string): void {
		this.slack.sendMessage(message)
	}
}

복수의 Logger를 호출하기 위해 컴포지트 패턴(Composite Pattern)으로 이 FileLogger, SlackLogger를 감쌉니다. 여기서도 FileLogger, SlackLogger를 직접 호출하지 않고 Logger 인터페이스를 호출 하고 있다는 점에 유의합시다.

class CompositeLogger implements Logger {
	loggers: Logger[] = []

	addLogger(logger: Logger) {
		this.loggers.push(logger)
	}

	log(message: string): void {
		this.loggers.forEach(logger => logger.log(message))
	}
}

이제 메인은 다음과 같이 변경됩니다.

const logger = new CompositeLogger()
logger.addLogger(new FileLogger('./output.log'))
logger.addLogger(new SlackLogger(slackClient))

const controller = new HomeController(logger)

/* .. 생략 .. */

controller.welcome(user)

주요 프로그램인 HomeController는 변경하지 않았지만 기능이 확장되었습니다. 만약에 로그를 이메일로 받고 싶다고 하면, 이와 같은 식으로 EmailLogger만 추가하면 됩니다.

물론, 이를 위해서 메인코드가 변경되었지만 이또한 DI Container를 활용하게 되면 메인 코드도 최소한의 변경을 통해 쉽게 기능을 변경 또는 확장할 수 있습니다.

Measurement Protocol을 이용하여 Google Analytics 적용하기 (feat. Lambda)

Mon, 16 Mar 2020 13:35:06 +0000

취미로 Corgi Ipsum(corgi.photos)라는 사이트를 운영중입니다.

간단한 목업용 이미지 사이트입니다. URL에 이미지 사이즈 형식이 포함되어있고, 이 URL로 요청을 하면 이미지로 응답을 반환합니다.

일반적으로 Google Analytics(이하 GA)를 설치할 땐, 프론트엔드에 구글에서 제공된 스크립트를 입력합니다. 이 스크립트를 실행하려면 아무래도 Javascript를 실행할 수 있는 환경이 필요합니다. 그런데 이 목업용 사이트는 이미지로 응답(image/jpg)하기 때문에 스크립트를 입력하는 방식으로는 GA를 설치할 수 없습니다.

찾아보니 GA에서 API(Measurement Protocol)를 제공하고 있었습니다. 가이드 문서에서 Page Tracking 부분을 참고하였습니다. Axios를 사용하여 코드를 작성하였습니다. 이 API에 본문은 x-www-form-urlencoded 형식으로 전달해야합니다.

const axios = require('axios')
const qs = require('querystring')

axios.post('http://www.google-analytics.com/collect', qs.stringify({
  v: 1,
  tid: 'UA-XXX',
  cid: clientId, // 사용자 Client ID, 랜덤한 키값을 사용하였습니다.

  t: 'pageview',
  dh: 'corgi.photos', // 프로토콜을 제외한 도메인 부분만 전달합니다.
  dp: '/something/something?foo=1', // Path의 전체를 전달합니다. Query String이 있는 경우 뒷 부분 모두를 전달합니다.
}))

이렇게 작성하고 Node로 실행하였습니다. Google Analytics 실시간 페이지에 들어가면 다음과 같이 접속 로그가 입력된 것을 확인할 수 있습니다.

위 코드에서는 단순히 페이지의 Path만을 전달하였습니다. 실제 GA를 활용하려면 URL 뿐 아니라 다른 정보들도 수집해야합니다. 브라우저 환경이나, 이 페이지를 어디서 요청하였는지 등을 예로 들 수 있습니다. GA에서 사용가능한 변수는 이 문서에서 확인할 수 있습니다.

위 문서를 바탕으로 우리가 추가할 내용은 다음과 같습니다.

dr - Document Referrer, 이미지를 어떤 사이트에서 불러오는지 알 수 있습니다.
ua - User Agent
ul - User Language
uip - IP, IP를 통해 접속 지역을 유추할 수 있습니다.

위 내용들은 HTTP Header를 파싱해서 얻을 수 있습니다. 해당 서비스는 Lambda위에서 동작하고 있으며, Lambda의 Request정보는 event 변수안에 들어있습니다. event.headers 안에 헤더값이 들어오는데, 대소문자가 섞여서 들어옵니다. 헤더 이름을 전부 소문자로 변경합니다.

async function handler(event) {

  /* ... */
  const headers = Object.entries(event.headers || {})
    .map(([key, value]) => [key.toLowerCase(), value])
    .reduce((carry, [key, value]) => (carry[key] = value, carry), {})

  /* ... */
}

그리고 이 헤더값을 활용해서 필요한 형태로 가공합니다.

async function handler(event) {

  /* ... */
  const headers = Object.entries(event.headers || {})
    .map(([key, value]) => [key.toLowerCase(), value])
    .reduce((carry, [key, value]) => (carry[key] = value, carry), {})

  await axios.post('http://www.google-analytics.com/collect', qs.stringify({
    v: 1,
    tid: 'UA-151383765-1',
    cid: uuid(), // Client ID는 그냥 랜덤으로 생성합니다.

    t: 'pageview',
    dr: headers.referer,
    dh: headers.host || 'corgi.photos', // 도메인을 바로 사용해도 되지만, 헤더에서 오는 Host값을 우선순위로 사용합니다.
    dp: (event.path || '/') + (Object.keys(event.queryStringParameters || {}).length ? `?${qs.stringify(event.queryStringParameters)}` : ''), // 쿼리스트링을 포함한 전체경로
    dt: 'Corgi Photo',

    ua: headers['user-agent'],
    ul: (headers['accept-language'] || '').split(',').filter(n => n)[0], // `Accept-Language` 헤더의 첫번째 정보를 Language로 전달
    uip: (headers['x-forwarded-for'] || '').split(',').map(n => n.trim()).filter(n => n)[0], // `X-Forwarded-For` 헤더의 첫번째 정보를 IP로 전달
  }))

  /* ... */
}

위와 같이 작성해서 서버에 배포하고 테스트해보니, 데이터가 제대로 들어왔습니다. 이미지를 하나씩 불러왔을 때는 문제가 없었습니다. 실제 목업이미지를 사용할 땐 이미지를 하나씩 불러오지말고 한 페이지내에 여러개의 이미지를 동시에 불러오게 됩니다. Corgi Ipsum 메인화면을 생각하면 이해하기 쉽습니다. 이 화면에 접속하게 되면 동시에 이미지 16개를 불러옵니다. 이런식으로 동시에 이미지를 불러오니 GA에 데이터가 엉망으로 들어오기 시작했습니다. GA에서는 이 16개의 이미지 리퀘스트를 모두 다른 사용자로 인식해버렸습니다. GA를 프론트엔드에서 실행할 때는 cid를 쿠키로 처리하는 로직이 포함되어있습니다. 위 소스코드를 보면 cid 부분을 랜덤한 키로 작성한 것을 볼 수 있습니다. 그래서 매 리퀘스트마다 전부 다른 사용자로 인식하는 문제가 발생하였습니다. 프론트와 마찬가지로 쿠키로 처리하려고 해도, 이미지는 동시에 병렬로 요청하기 때문에 모든 이미지의 첫번째 요청은 다른사용자로 인식해버리기는 마찬가지였습니다.

이 부분은 기존의 fingerprinting 기법을 활용하기로 하였습니다. 브라우저가 같고, 사용하는 언어가 같고, 설정된 쿠키값(우리가 설정하지 않은)이 같다면 같은 사용자라고 봐도 무방합니다. 아주 정교하게 사용자를 구분할 목적이 아니기 때문에 이 정도로도 충분합니다. 이 정보는 모두 헤더에서 얻을 수 있으며, 이 값을 해싱처리해서 Client ID를 얻을 수 있습니다. 코드를 다음과 같이 개선하였습니다.

const fingerprint = [
  headers['user-agent'],
  headers['cookie'],
  headers['accept-encoding'],
  headers['accept-language'],
].join('__')
const clientId = crypto.createHash('sha256').update(fingerprint).digest('hex')

await axios.post('http://www.google-analytics.com/collect', qs.stringify({
  /* 생략 */
  cid: clientId,
  /* 생략 */
})

실제 서비스에서 동작하고있는 코드는 Github Corgi Ipsum 저장소에서 확인할 수 있습니다. :-)

참고문서

Typescript SOLID (1) - 단일책임원칙(SRP)

Tue, 10 Mar 2020 13:38:12 +0000

객체지향에서 가장 모호한게 클래스의 크기를 규정하는 일입니다. 단일 책임 원칙(SRP, Single Responsibility Principle)은 이 문제를 해결 할 수 있도록 가이드라인을 제시합니다.

한 클래스는 하나의 책임만 가져야 한다.

정의는 한문장으로 명확하지만, 막상 정의에 따라 코딩하려고 하면 막막해집니다. 하나의 책임을 어떻게 정의할 수 있을까요?

웹크롤러를 만든다고 가정해봅시다. 웹크롤러는 다음 로직에 따라 동작합니다.

주어진 링크로 페이지에 접속합니다.
페이지를 저장합니다.
페이지에서 링크를 찾습니다.
찾은 링크를 가지고 다시 1번으로 돌아가서 반복합니다.

절차지향적으로 생각하면 쉽습니다. 위의 로직을 코드로 작성하면 다음과 같습니다. 전체를 하나의 메서드로 작성할 수 있으나 구현 자체가 중요하지 않으니, 각 단계마다 private 메서드로 분리하였습니다.

class WebCrawler {

  public async crawl(link: string) {
    const page = await this.getHtmlPage(link) // 1
    await this.savePage(link, page) // 2
    const links = this.findALinks(page) // 3

    for (const link of links) {
      await this.crawl(link) // 4
    }
  }

  private getHtmlPage(link: string): Promise<string> { /* do something */ }
  private savePage(link: string, page: string): Promise<void> { /* do something */ }
  private findALinks(page: string): string[] { /* do something */ }
}

웹크롤러가 가져야 하는 책임은 무엇일까요? 당연한 이야기지만 웹페이지를 수집(Crawl)하는 일 입니다. 로직을 살펴보면 문제가 없어보입니다. 하지만 이 과정을 조금 더 자세히 들여다 봅시다.

주어진 링크로 HTTP(or HTTPS)를 통해서 페이지에 접속합니다.
페이지를 Database에 저장합니다.
HTML 페이지에서 DOMSelector을 이용해서 링크를 찾습니다.
찾은 링크를 가지고 다시 1번으로 돌아가서 반복합니다.

여기서 웹크롤러는 “웹페이지 수집”이라는 책임 뿐 아니라, 다른 3가지의 책임을 더 가지고 있습니다.

HTTP를 통해 페이지를 가져오기
데이터를 Database에 저장하기
HTML 페이지에서 링크 찾기

위 3가지의 행위는 웹크롤러가 해야하는 책임을 넘어서는 일이지요. 이럴 때, 해당 클래스는 SRP(단일 책임 원칙)를 위반했다고 할 수 있습니다. 이 문제를 해결하기 위해서 3가지 책임을 담당할 적당한 주체(클래스)를 만들어야 합니다. 그 클래스는 다음과 같습니다.

HttpClient : 주어진 a 링크의 URL을 통해 페이지를 가지고 옵니다.
Database : 수집한 HTML 문서를 저장합니다.
DOMSelector : 수집한 HTML 문서에서 a 링크를 찾습니다.

위의 코드는 다음과 같이 개선되어야 합니다.

interface HttpClient {
  request(link: string): Promise<{ body: string }>
}

interface Database {
  save(link: string, contents: string): Promise<void>
}

interface DomSelector {
  find(body: string, selector: string): { link: string }[]
}

class WebCrawler {

  public constructor(
    public http: HttpClient,
    public database: Database,
    public dom: DomSelector,
  ) {
  }

  public async crawl(link: string) {
    const { body } = await this.http.request(link) // 1
    await this.database.save(link, body) // 2
    const elems = this.dom.find(body, 'a') // 3
    for (const elem of elems) {
      await this.crawl(elem.link) // 4
    }
  }
}

classDiagram WebCrawler --> HttpClient WebCrawler --> Database WebCrawler --> DOMSelector WebCrawler : +crawl() HttpClient : +request() Database : +save() DOMSelector : +find()

객체지향 프로그래밍에서 주체는 “객체”입니다. 영어 문장의 구성을 떠올려보면 쉽게 이해할 수 있습니다.

주어 + 동사 + 목적어

주어(객체 / 클래스)가 누구인지, 동사(메서드)가 무엇인지, 목적어(매개변수)는 무엇인지를 떠올려보면 SRP에서 이야기하는 책임이 무엇인지 추상적으로 그려질겁니다.

자칫 메서드를 “책임”으로 오인할 수 있습니다. 책임은 메서드보다는 해당 클래스가 할 수 있는 행동, 좀 더 근본적인거라 할 수 있습니다. 데이터베이스라면 읽고, 쓰고, 삭제하는 행동 등을 가지고 있고, 데이터를 관리하는 책임을 가지고 있다고 할 수 있습니다.

이처럼 책임을 분리하는 것은 정말 어려운(모호한!) 일입니다. 사실 깊게 생각하면 사소한 것 하나하나 전부 클래스로 나눌 수 있습니다. 처음부터 이렇게 디테일하게 구성하려고 하면 많은 시간이 필요합니다. 처음부터 세세하게 나눌 필요는 없습니다. 처음에는 위의 처음 예시처럼 private를 사용해도 됩니다. 하지만 어떻게 책임을 나눌 수 있을지는 미리 고민해보아야 합니다. 나중에 프로그램의 규모가 커졌을 때, 미리 어떻게 책임을 나눌지 고민하고 코딩했을 때와, 그렇지 않을 때, 리팩토링하는데 들어가는 시간에는 차이가 클 것입니다.

언제 리팩토링하는지는 다른 좋은 코드를 많이 보고, 많이 생각하고, 많이 코딩해보는 수 밖에 없습니다. :-)

파서 만들기 (2) - JSON.parse

Sat, 22 Feb 2020 08:02:51 +0000

지난 1편에서 만들어진 문자열을 자바스크립트 객체로 파싱하는 작업을 진행하겠습니다.

파싱(구문분석)은 크게 두개의 과정을 통해 진행됩니다.

어휘 분석(Lexical Analysis): 텍스트를 분석해서 토큰으로 만들어냅니다.
구문 분석(Syntax Analysis) : 생성된 토큰의 구조를 분석하여 컴퓨터가 이해할 수 있는 자료구조인 파스 트리(Parse Tree)를 만듭니다.
작성된 파스트리를 기반으로 원하는 작업을 만듭니다.

파싱의 꽃, 컴파일러의 꽃, 어휘분석부터 진행해보겠습니다.

어휘 분석(Lexical Analysis)

JSON을 분석하기전에 가장 기본적인 JSON 타입을 몇개 살펴보겠습니다.

NULL - null
불리언 - true
문자열 - "abc"
숫자 - 3.1415
배열 - ["foo"]
객체 - {"foo":null}

컴퓨터는 이 각각의 문자열을 어떻게 구분할까요? 그 전에, 우리(사람)는 이 문자열이 어떤타입인지 어떻게 유추할까요?

불리언과 NULL은 문자열이 정해져있어서 간단히 찾을 수 있습니다. 문자열은 처음과 끝이 "로 되어있는 문자열을 찾으면 됩니다. 숫자는 0-9와 .으로 구성되어있습니다. 배열은 [, ], 객체는 {, }로 감싸져있습니다. 그리고 배열과 객체는 내부에 다시 저러한 타입을 재귀적으로 포함하고 있습니다.

이러한 규칙을 통해 구성되는 최소의 단위를 토큰이라고 합니다. 그리고 이렇게 토큰으로 처리하는 과정을 어휘 분석(Lexical Analysis)이라고 합니다. 컴파일러를 만들 때 토큰은 정규표현식으로 표현 가능합니다. JSON의 경우 다음과 같이 정리할 수 있습니다.

T_NULL = /null/
T_BOOLEAN = /false|true/
T_STRING = /"(?:[^"\\]*|\\")*"/
T_NUMBER = /(-?[0-9]+(?:\.[0-9]*)?)/

그리고, {, }, [, ], :, ,와 같은 특수문자도 토큰이라고 할 수 있습니다.

다음과 같은 JSON 구문을 토큰으로 변환해보겠습니다.

{
  "null": null,
  "string": "hello world",
  "array": ["string", true, false, 3.141592],
  "object": {
    "array": [1, 2, 3]
  }
}

{
  T_STRING: T_NULL,
  T_STRING: T_STRING,
  T_STRING: [T_STRING, T_BOOLEAN, T_BOOLEAN, T_NUMBER],
  T_STRING: {
    T_STRING: [T_NUMBER, T_NUMBER, T_NUMBER]
  }
}

구문 분석(Syntax Analysis)

다음의 JSON문장을 보면 모두 토큰으로 변환이 가능합니다.

{
  "abcd", 50, true, ["abc": "def"]
}

{
  T_STRING, T_NUMBER, T_BOOLEAN, [T_STRING: T_STRING]
}

하지만, 우리는 잘못된 JSON 문법이란걸 알 수 있습니다. 이 문법이 잘못되었다는 것을 어떻게 알 수 있었을까요? 바로 순서입니다. 이 토큰간의 순서를 통해서 JSON 문법을 정의해야 합니다. 이러한 과정을 구문 분석(Syntax Analysis)라고 합니다.

JSON은 null, boolean, number, string, array, object 중 하나의 형태를 가집니다. 즉 다음과 같이 정의할 수 있습니다. 여기서 파이프문자(|)는 or을 의미합니다.

json = T_NULL
  | T_BOOLEAN
  | T_NUMBER
  | T_STRING
  | array
  | object

배열(array)은 어떻게 생겼을까요? 배열은 3개의 특수문자([, ,, ])와 내부에는 재귀적으로 json을 다시 포함할 수 있습니다.

array: '[' ']'         // 빈 배열
  | '[' values ']'     // 다른값이 열거된 형태의 배열

values: json
  | json ',' values   // values를 재귀로 사용합니다.

배열은 빈 배열과, 비어있지 않은 배열 두가지 방식으로 표현됩니다. 그리고 비어있지 않은 배열에는 값(values)이 들어갑니다. 값(values)의 표현식에는 재귀문이 포함되어있습니다. 재귀를 통해 1개부터 n개의 값(json)으로 표현할 수 있습니다. 여기서 json을 통해 재귀적으로 JSON 객체를 다시 가질 수 있다는 점을 보셔야 합니다.

객체(object)를 정의해봅시다.

object: '{' '}'
  | '{' objectpairs '}'

objectpairs: objectpair
  | objectpairs ',' objectpair

objectpair: T_STRING ':' json

객체는 Key-Value로 구성되어있고, 키(Key)값은 string과 규칙을 같이합니다. Key-Value는 objectpair를 이용하여 표현하였고, 1개부터 n개까지 포함할 수 있는 부분은 위의 배열 부분(values)과 굉장히 유사함을 알 수 있습니다.

`JSON.parse` 만들기

이제 위 내용을 그대로 코딩하면 JSON 파서가 구현됩니다.

Lexical Analyzer, Syntax Analyzer라는 키워드를 이용해서 검색하면 언어별로 다양한 라이브러리가 나옵니다. 참고로, 라이브러리 문서에 LL파서, LR파서, LALR파서 등과 같은 용어가 나오는데, 이는 파싱 방법에 대한 내용입니다. 더 관심이 생긴다면 해당 키워드로 검색해보면 많은 자료를 찾아볼 수 있습니다.

자바스크립트에는 다음 3개를 가장 많이 사용하고 있습니다.

이런 손쉬운 라이브러리들이 있음에도 불구하고, 파싱과정을 자세히 이해하기 위해 바닐라(!?!)로 작업하겠습니다. 정규표현식 없이 파서를 작성하였는데, 이는 실제 정규표현식이 어떤 원리로 동작하는지 이해하는데 도움이 될 것입니다. 만약에 파서를 만들고자 한다면, 이 글에서 작성하는 코드는 참고만 하시고, 위의 라이브러리를 이용하시는게 정신건강에 좋습니다.

기본적으로 파서는 주어진 문자열을 앞에서부터 읽으며 처리합니다. 가장 기본 코드는 다음과 같습니다. 다음 코드 중, 실제로 사용자 쪽에 노출되는 함수는 parse입니다.

const WS_CHARS = new Set(['\r', '\n', '\t', ' '])

let buf = null // buffer에는 파싱할 문자열을 저장합니다.
let pos = 0    // 현재 확인 중인 문자열의 위치를 저장합니다.

// 공백 문자열이 있는 경우 무시합니다.
function white() {
  while (WS_CHARS.has(buf[pos])) {
    pos++
  }
}

// 에러처리
function error() {
  return new SyntaxError(`Unexpected ${buf[pos] ? `token ${buf[pos]}` : 'end'} in JSON at position ${pos}`)
}

function parse(ctx) {
  // buffer와 pos를 초기화합니다.
  buf = ctx
  pos = 0

  const result = json() // json 처리한 결과를 저장합니다.
  white()               // json 처리 후, 공백문자열을 제거합니다.
  if (buf.length !== pos) { // 구조상 더이상 파싱할 내용이 없는데, 파싱할 내용이 있으면 에러를 발생시킵니다.
    throw error()
  }
  return result // 문제가 없으면 json 처리한 결과를 반환합니다.
}

편의를 위해서 다음 함수도 하나 추가합니다. 현재 위치한 문자(buf[pos])가 제시한 문자(char)와 같으면 정상처리하고, 아니라면 에러를 발생시킵니다.

function consume(char) {
  if (buf[pos] === char) {
    pos++
    return
  }
  throw error()
}

parse 함수에 있는 json() 함수는 문법 규칙 중 다음 내용에 해당하는 함수입니다.

json = T_NULL
  | T_BOOLEAN
  | T_NUMBER
  | T_STRING
  | array
  | object

컴파일러는 현재 위치한 하나의 문자(buf[pos])만을 읽어들여서 판단해야합니다. 각 토큰의 첫번째 문자를 통해 뒤에 어떤 내용이 나올지 예측할 수 있습니다.

function json() {
  white()                  // 공백문자를 제거합니다.
  switch (buf[pos]) {
    case '{':
      return object()
    case '[':
      return array()
    case '"':
      return string()
    case '-':
    case '0': case '1': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9': {
      return number()
    }
    case 't': {
      pos++
      consume('r')
      consume('u')
      consume('e')
      return true
    }
    case 'f': {
      pos++
      consume('a')
      consume('l')
      consume('s')
      consume('e')
      return false
    }
    case 'n': {
      pos++
      consume('u')
      consume('l')
      consume('l')
      return null
    }
  }
  throw error()
}

true와 false, null 부분을 살펴봅시다. 현재 문자(buf[pos])가 t라면 true가 나올거라고 예측할 수 있습니다. 그 뒤에 r, u, e를 순서대로 제대로 문자가 나타났는지 확인하고, 전부 정상적으로 등장했다면 true를 반환합니다.

switch (buf[pos]) {
  ...
  case 't': {
    pos++
    consume('r')
    consume('u')
    consume('e')
    return true
  }
  ...
}

number() 함수는 다음과 같이 정의합니다.

const NUM_CHARS = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'])

function number() {
  let result = ''
  let isNeg = false
  if (buf[pos] === "-") { // 문자열이 -로 시작하면 음수입니다.
    isNeg = true
    pos++
  }
  if (NUM_CHARS.has(buf[pos])) { // 그 뒤에는 숫자 문자 중에 하나의 값이 나와야 합니다.
    result += buf[pos]
    pos++
  } else {
    throw error()
  }
  while (NUM_CHARS.has(buf[pos])) {
    result += buf[pos]
    pos++
  }
  if (buf[pos] === ".") { // . 문자가 등장하면 소수점을 처리합니다.
    result += ".";
    pos++
    if (NUM_CHARS.has(buf[pos])) { // 소수점 뒤에는 반드시 숫자 문자 중 하나의 값이 나와야 합니다.
      result += buf[pos]
      pos++
    } else {
      throw error()
    }
    while (NUM_CHARS.has(buf[pos])) {
      result += buf[pos]
      pos++
    }
  }
  return isNeg ? -1 * +result : +result // 나온 결과를 숫자로 변경해서 반환합니다.
}

string() 함수는 다음과 같이 정의합니다.

const STRING_ESC = {
  '"': '"',
  '\\': '\\',
  b: '\b',
  f: '\f',
  n: '\n',
  r: '\r',
  t: '\t'
}

function string() {
  let result = ''
  pos++               // 첫번째 " 문자를 처리합니다.
  while (1) {
    if (buf[pos] === '"') { // 다시 " 문자가 나오면 문자열이 끝났음을 알 수 있습니다.
      pos++
      return result // 결과를 그대로 반환합니다.
    }
    if (buf[pos] === '\\') { // 백슬래시 문자를 처리합니다.
      pos++
      if (buf[pos] === 'u') { // 유니코드를 처리합니다.
        pos++
        let uffff = 0
        for (let i = 0; i < 4; i++) {
          let hex = parseInt(buf[pos], 16)
          if (!isFinite(hex)) {
            throw error()
          }
          pos++
          uffff = uffff * 16 + hex;
        }
        result += String.fromCharCode(uffff);
      } else if (STRING_ESC[buf[pos]]) { // 백슬래시와 함께 합쳐서 사용하는 경우를 처리합니다.
        result += STRING_ESC[buf[pos]]
        pos++
      } else {
        throw error()
      }
    } else {
      result += buf[pos]
      pos++
    }
  }
}

배열(array())은 다음과 같이 처리합니다.

function array() {
  pos++                 // 처음 등장한 [ 문자를 처리합니다.
  white()
  if (buf[pos] === ']') { // 바로 ] 문자로 끝나면 빈 배열을 반환합니다.
    pos++
    return []
  }
  const result = [json()]    // 빈배열이 아니라면 현재 값을 기준으로 json()를 다시 처리합니다.
  white()
  while (buf[pos] === ',') { // 콤마가 있으면 계속 반복합니다.
    pos++
    result.push(json())
    white()
  }
  if (buf[pos] === ']') { // 마지막에 ] 문자로 끝나면 정상적인 배열을 반환합니다.
    pos++
    return result
  }
  throw error()
}

객체(object())는 다음과 같이 처리합니다.

function object() {
  pos++
  white()
  if (buf[pos] === "}") {   // 빈 객체를 반환
    pos++
    return {}
  }
  const result = {}
  while (1) {
    const key = string()    // key는 string 처리와 같습니다.
    white()
    if (buf[pos] !== ':') { // key 뒤에 콜론(:)이 나오지 않으면 잘못된 문법입니다.
      throw error()
    }
    pos++
    result[key] = json()    // value는 json이 재귀적으로 포함될 수 있습니다.
    white()
    if (buf[pos] === ',') { // 콤마가 나오면 계속 반복합니다.
      pos++
      white()
      continue
    }
    if (buf[pos] === '}') {
      pos++
      return result
    }
    throw error()
  }
}

다 만들었습니다. :-) 정상적으로 동작하는지 확인해봅시다.

console.log(parse(JSON.stringify({
  foo: "string!",
}))) // 제대로 출력됩니다. :-)

잘못된 문법을 넣어도 제대로된 에러가 발생합니다. (에러 메시지는 내장 JSON.parse 메시지와 동일하게 맞춰두었습니다.)

parse('{"abc",}')
// Thrown: SyntaxError: Unexpected token , in JSON at position 6

파서 확장하기

지난번 글에서 시리얼라이저를 정규표현식, Infinity, NaN가 처리되도록 하였습니다. 일단 json() 함수를 다음과 같이 개선합니다.

function json() {
  white()
  switch (buf[pos]) {
    ...
    case '/':                     // 정규표현식은 / 문자로 시작합니다.
      return regexp()
    ...
    case '-': case 'I': case 'N': // Infinity, NaN 처리를 위해서 이 부분에 케이스를 2개 추가합니다.
    case '0': case '1': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9': {
      return number()
    }
    ...
  }
  throw error()
}

정규표현식(regexp())은 다음과 같이 구현할 수 있습니다.

function regexp() {
  let result = ''
  pos++
  if (buf[pos] === '/') { // 정규표현식 시작하자마자 슬래시(/)가 등작하면 에러 발생.
    throw error()
  }
  while (1) {
    if (buf[pos] === '/') { // 슬래시가 등장하면 뒤에 플래그를 체크하고 정규표현식을 반환합니다. 여기서는 플래그를 igm으로만 한정하였습니다.
      pos++
      switch (buf[pos]) {
        case 'i': {
          pos++
          switch (buf[pos]) {
            case 'm': {
              pos++
              if (buf[pos] === 'g') {
                pos++
                return new RegExp(result, 'img')
              } else {
                return new RegExp(result, 'im')
              }
            }
            case 'g': {
              pos++
              if (buf[pos] === 'm') {
                pos++
                return new RegExp(result, 'igm')
              } else {
                return new RegExp(result, 'ig')
              }
            }
            default: {
              return new RegExp(result, 'i')
            }
          }
        }
        case 'm': {
          pos++
          switch (buf[pos]) {
            case 'i': {
              pos++
              if (buf[pos] === 'g') {
                pos++
                return new RegExp(result, 'mig')
              } else {
                return new RegExp(result, 'mi')
              }
            }
            case 'g': {
              pos++
              if (buf[pos] === 'i') {
                pos++
                return new RegExp(result, 'mgi')
              } else {
                return new RegExp(result, 'mg')
              }
            }
            default: {
              return new RegExp(result, 'm')
            }
          }
        }
        case 'g': {
          pos++
          switch (buf[pos]) {
            case 'm': {
              pos++
              if (buf[pos] === 'i') {
                pos++
                return new RegExp(result, 'gmi')
              } else {
                return new RegExp(result, 'gm')
              }
            }
            case 'i': {
              pos++
              if (buf[pos] === 'm') {
                pos++
                return new RegExp(result, 'gim')
              } else {
                return new RegExp(result, 'gi')
              }
            }
            default: {
              return new RegExp(result, 'g')
            }
          }
        }
      }
      return new RegExp(result)
    } else if (buf[pos] === '\\') { // 백슬래시가 등장하면 하나의 문자를 더 처리합니다.
      result += buf[pos]
      pos++
      result += buf[pos]
      pos++
    } else {
      result += buf[pos]
      pos++
    }
  }
}

숫자 처리(number())는 다음과 같이 개선합니다.

function number() {
  if (buf[pos] === 'N') { // NaN 처리
    pos++
    consume('a')
    consume('N')
    return NaN
  }

  let result = ''
  let isNeg = false
  if (buf[pos] === "-") {
    isNeg = true
    pos++
  }
  if (buf[pos] === 'I') { // Infinity 처리, 음수 처리 뒤에 위치하여 -Infinity도 처리하도록 합니다.
    pos++
    consume('n')
    consume('f')
    consume('i')
    consume('n')
    consume('i')
    consume('t')
    consume('y')
    return isNeg ? -Infinity : Infinity
  }
  if (NUM_CHARS.has(buf[pos])) {
    result += buf[pos]
    pos++
  } else {
    throw error()
  }
  while (NUM_CHARS.has(buf[pos])) {
    result += buf[pos]
    pos++
  }
  if (buf[pos] === ".") {
    result += ".";
    pos++
    if (NUM_CHARS.has(buf[pos])) {
      result += buf[pos]
      pos++
    } else {
      throw error()
    }
    while (NUM_CHARS.has(buf[pos])) {
      result += buf[pos]
      pos++
    }
  }
  if (buf[pos] === "e" || buf[pos] === "E") { // 3.0e+10 와 같은 숫자를 처리할 수 있도록 합니다.
    result += buf[pos]
    pos++
    if (buf[pos] === "-" || buf[pos] === "+") {
      result += buf[pos]
      pos++
    }
    if (NUM_CHARS.has(buf[pos])) {
      result += buf[pos]
      pos++
    } else {
      throw error()
    }
    while (NUM_CHARS.has(buf[pos])) {
      result += buf[pos]
      pos++
    }
  }
  return isNeg ? -1 * +result : +result
}

전체 동작하는 코드는 Github에서 확인가능합니다. 이 코드를 이용하여 실제로 동작시켜보면 정상적으로 동작합니다.

이제 파서를 만들수 있게 되었습니다. (짝짝짝)

과거에 Safen이라는 Validation 라이브러리를 만든적이 있는데, 이때 이 파싱 기법을 활용하여 만들었습니다. 처음에는 어렵지만 한번 익혀두면 꽤 유용하게 사용할 수 있을겁니다. :^)

AWS CDK로 서버없이 서비스 운영해보기 (3) - Nuxt

Wed, 19 Feb 2020 14:12:55 +0000

AWS Lambda위에 AWS CDK를 이용하여 Vue.js 프레임워크인 Nuxt를 올려보도록 하겠습니다. 저는 Vue.js를 주로 사용하기 때문에 Nuxt를 이용하여 Lambda에 올려보았지만, 원리만 이해한다면 Next나, Sapper 프로젝트도 적용가능하지 않을까 생각해봅니다. :-)

Nuxt는 Vue.js를 기반으로 만들어진 SSR 프레임워크입니다. 서버쪽 렌더링을 필요로 하기 때문에 Lambda위에 올려야 합니다. SSR이 필요없다면 굳이 Lambda위에 올리지 않아도 정적 파일 호스팅을 이용하면 더 쉽게 서버환경 구축이 가능합니다.

일단, 공식문서를 따라서 Nuxt를 설치해봅시다.

npx create-nuxt-app sample-nuxt-app

기본적으로 create-nuxt-app을 물어보면 여러가지 설정을 물어보는데, 전부 기본값으로 설정하였고, 패키지 매니저만 npm을 선택하였습니다. 설정의 자세한 내역은 다음과 같습니다. (전부 엔터 눌러서 빨리 지나갑니다.)

다 설치했으면 일단 한번 실행해봅시다.

npm run dev

잘 실행됩니다. (뿌듯)

실서버(일반적인 리눅스 환경)에서 Nuxt를 운영할 땐 빌드 (npm run build)하고, 서버를 시작(npm run start)합니다. Nuxt 이 실행되면 Http 서버가 실행되고, 이 서버가 HTTP 리퀘스트를 처리합니다.

AWS Lambda 환경은 조금 다릅니다. AWS Lambda는 모든 요청이 함수를 통해서 실행됩니다. HTTP 요청은 API Gateway를 거쳐서 Lambda 함수를 실행합니다. 지난번 예시에서 Lambda위에 Express 앱을 동작시켰었습니다. 근데 Nuxt 가이드에 보면 Express를 통해 서버를 실행할 수 있다고 합니다. 이 과정을 통해 Lambda위에 Nuxt를 실행할 수 있습니다.

즉, HTTP 요청(API Gateway) -> Labmda 함수 -> AWS Serverless Express -> Express -> Nuxt 순으로 실행되는 것이지요.

이 작업을 전부 구현하면 재미있겠지만, 이미 관련 라이브러리(Serverless Nuxt)가 있습니다. ~~이렇게 좋은 라이브러리를 누가 만들었는지..~~ 기존에 Serverless Framework 용도로 제작된 라이브러리인데, Serverless Framework가 AWS Lambda를 사용해서 동작됩니다. 즉, 이 라이브러리를 AWS CDK 환경에서도 사용가능하도록 적용해보도록 하겠습니다.

일단, 설치가이드에서 시키는대로 라이브러리를 설치합니다.

npm install serverless-nuxt
npm install nuxt-start
npm install nuxt -D

그리고 Lambda 핸들러(handler.js)를 다음과 같이 작성합니다.

const { createNuxtApp } = require("serverless-nuxt")
const config = require("./nuxt.config.js")

module.exports.render = createNuxtApp(config)

Nuxt Config 파일(nuxt.config.js)을 불러오는 부분이 있는데, create-nuxt-app을 통해 자동생성된 Config 파일은 Node.js에서 바로 불러올 수 없는 형태입니다. Nuxt가 실행되면 Babel을 거쳐 Config를 읽어오기 때문입니다. Node.js 환경에서 불러올 수 있도록, 맨 처음 한줄(export default = {)을 다음과 같이 수정합니다. 이렇게 변경해도 Nuxt를 개발환경(npm run dev)으로 실행하는데 문제가 없습니다.

module.exports = {
  ...
}

Nuxt쪽에서 해야할일은 다 끝났고, 이 소스를 배포하기 위해 AWS CDK 환경을 구성해보겠습니다. AWS CDK와 함께 추가로 필요한 관련 패키지들도 한번에 설치합니다.

npm install aws-cdk -D
npm install @aws-cdk/core @aws-cdk/aws-lambda @aws-cdk/aws-apigateway -D

1, 2편에서는 AWS CDK 관련 소스를 Babel을 이용하여 Typescript를 빌드하였지만, Nuxt의 경우 babel을 내장하고 있습니다. 자칫 잘못하면 패키지 의존관계가 꼬일 수 있기 때문에 여기서는 Typescript만 사용하여 빌드하도록 하겠습니다.

npm install typescript -D
npm install @types/node -D

tsconfig.json 파일은 다음과 같이 설정합니다. 빌드할 소스(infra/**/*)와 생성될 경로(dist-infra)를 꼭 포함시켜줍니다.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "pretty": true,
    "strict": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "outDir": "dist-infra"
  },
  "include": [
    "infra/**/*"
  ]
}

infra/entry.ts 파일은 다음과 같이 작성합니다.

#!/usr/bin/env node

import { App } from '@aws-cdk/core'

import { NuxtStack } from './nuxt-stack'

const app = new App()

new NuxtStack(app, 'WaniSampleNuxtStack')

infra/nuxt-stack.ts 파일도 다음과 같이 작성하며, Labmda로 사용할 소스 코드의 경로는 dist로 설정합니다.

import { LambdaRestApi } from '@aws-cdk/aws-apigateway'
import { Code, Function as LFunction, Runtime } from '@aws-cdk/aws-lambda'
import { Construct, Stack, StackProps } from '@aws-cdk/core'
import { join } from 'path'

export class NuxtStack extends Stack {
  public constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props)

    const code = Code.fromAsset(join(__dirname, '../dist'))

    new LambdaRestApi(this, 'SampleNuxt', {
      handler: new LFunction(this, 'HomeHandler', {
        runtime: Runtime.NODEJS_12_X,
        code,
        handler: 'handler.render',
      }),
    })
  }
}

그리고 package.json 파일의 스크립트 영역에 불필요한 스크립트를 지우고, Infra 빌드 스크립트를 작성합니다.

{
  ...
  "scripts": {
    "dev": "nuxt",
    "build:infra": "tsc",
    "build:nuxt": "nuxt build"
  },
  ...
}

AWS CDK 실행을 위해 cdk.json 파일을 추가합니다.

{
  "app": "node dist-infra/entry"
}

AWS Lambda에서 Nuxt 앱을 실행하려면 빌드된 소스파일이 필요합니다. 다음 명령어를 통해 빌드할 수 있습니다.

npm run build:nuxt

빌드 후에 .nuxt 디렉토리 하위에 파일들이 생성됩니다. 이 디렉토리를 AWS Lambda에 업로드 하게 되면 Nuxt가 동작하게 됩니다. Infra 쪽 코드를 보면 앱 소스 코드 경로를 dist 디렉토리로 잡아두었습니다. Lambda에 배포할 파일들과 모듈들을 해당 경로에 복사하기 위해서 distize라는 라이브러리를 사용합니다.

npm install distize -D

dist 디렉토리에 .nuxt, handler.js, nuxt.config.js 파일을 복사합니다. 이를 스크립트로 작성하면 다음(deploy 참고)과 같습니다.

{
  ...
  "scripts": {
    "dev": "nuxt",
    "build": "npm run build:infra && npm run build:nuxt",
    "build:infra": "tsc",
    "build:nuxt": "nuxt build",
    "deploy": "npm run build && distize .nuxt handler.js nuxt.config.js && cdk deploy"
  },
  ...
}

배포해봅시다.

npm run deploy

배포후에 xxxxx.execute-api.ap-northeast-2.amazonaws.com/prod/ 와 같은 형태의 API Gateway URL이 생성됩니다. 접속해보면 Nuxt로 만든 페이지가 출력됩니다. 하지만 개발자도구에 들어가보면 모든 Static 파일들이 정상적으로 불러와지지 않습니다.

Nuxt에서 빌드할 때, 모든 파일경로는 루트(/)를 기준으로 설정됩니다. 하지만, API Gateway에서는 /prod라는 스테이지 값을 prefix로 설정하게 됩니다. 자바스크립트 파일 경로를 예로 들면, 실제 자바스크립트 파일은 https://xxxxx.execute-api.ap-northeast-2.amazonaws.com/prod/_nuxt/f7d305921b9f7fd593a8.js 경로에 있지만, Nuxt는 https://xxxxx.execute-api.ap-northeast-2.amazonaws.com/_nuxt/f7d305921b9f7fd593a8.js로 요청하게 됩니다. 아쉽게도 Nuxt 빌드 스크립트 쪽에 이와 관련된 옵션은 제공하지 않습니다. 하지만, 실제 앱을 서비스 할땐, API Gateway에서 자동생성된 URL을 사용하지 않습니다. 도메인을 연결하게 되는데, 이 문제는 도메인을 연결하는 해결됩니다.

도메인 연결하기

이 도메인을 연결하는 과정도 AWS CDK로 작성하면 좋겠지만, 도메인 하나에 여러가지 서비스가 운영중이라 이 과정은 AWS Web Console을 통해 설명하곘습니다. 일단 ACM(AWS Certificate Manager)서비스 관리자에 들어갑니다. API Gateway를 최적화된 엣지로 연결하려고 합니다. 이를 위해서는 인증서를 미국 동부(버지니아 북부, us-east-1)에 발급 받아야 합니다. 인증서 요청을 누른 후, 인증서를 발급 받습니다.

APIGateway에 ACM을 연결하기 위해서 관련 AWS CDK 패키지를 설치합니다.

npm i @aws-cdk/aws-certificatemanager -D

entry/nuxt-stack.ts 파일에 다음과 같이 발급받은 인증서를 ARN 경로를 이용하여 연결합니다. 제 도메인은 nuxtsample.dist.be 입니다. 이 부분에 본인이 사용할 도메인을 집어넣어주시면 됩니다. 그리고 arn:aws:acm:us-east-1:xxxxxxxxxx:certificate/xxxxxxxxxxxxxx 부분에는 위 스크린샷에서 ARN(모자이크 처리 된 부분)을 통째로 복사해서 집어넣어줍니다.

import { EndpointType, LambdaRestApi } from '@aws-cdk/aws-apigateway'
import { Certificate } from '@aws-cdk/aws-certificatemanager'
import { Code, Function as LFunction, Runtime } from '@aws-cdk/aws-lambda'
import { Construct, Stack, StackProps } from '@aws-cdk/core'
import { join } from 'path'

export class NuxtStack extends Stack {
  public constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props)

    const code = Code.fromAsset(join(__dirname, '../dist'))

    new LambdaRestApi(this, 'SampleNuxt', {
      domainName: {
        endpointType: EndpointType.EDGE,
        domainName: 'nuxtsample.dist.be',
        certificate: Certificate.fromCertificateArn(this, 'Certificate', 'arn:aws:acm:us-east-1:xxxxxxxxxx:certificate/xxxxxxxxxxxxxx'),
      },
      handler: new LFunction(this, 'HomeHandler', {
        runtime: Runtime.NODEJS_12_X,
        code,
        handler: 'handler.render',
      }),
    })
  }
}

그리고 다시 서버에 적용합니다.

npm run deploy

AWS Console에 들어가서 API Gateway -> “사용자 지정 도메인 이름” 메뉴로 접속하면 다음과 같이 도메인이 설정된 것을 볼 수 있습니다.

여기서 대상 도메인 이름(dxxxxxxxx.cloudfront.net)을 복사하여 도메인의 CNAME으로 설정합니다. Route53에서 도메인을 관리하는 경우, A레코드 Alias를 사용하는 것을 권장드립니다.

도메인에 연결되기까지 꽤 오랜 시간이 걸립니다. API Gateway 관리자에서 ACM 인증서 적용여부를 확인할 수 있습니다. 조금 기다렸다가, 내가 만든 도메인에 접속해봅시다. 위에 처음에 Nuxt 실행했을 때와 같은 화면이 반겨줄겁니다. :-)

전체 소스코드는 Github에 올려두었습니다. 해당 코드로 동작중인 코드는 nuxtsample.dist.be에서 확인할 수 있습니다. (언제 내려갈지 모릅니다..)

간단한 웹앱을 돌리는데는 무리가 없습니다만, 최적화 해야할 부분이 많이 남아있습니다. 최적화에 대한 내용은 추후에 (언젠가) 다뤄보겠습니다.

파서 만들기 (1) - JSON.stringify

Tue, 11 Feb 2020 09:52:55 +0000

프로그래밍을 하다보면 규칙을 가진 문자열에서 필요한 형태로 가공해야할 때가 있습니다. 간단하게는 URL에서 부터 복잡하게는 XML, JSON 등이 있습니다. 다른사람들도 다 사용하고 있는 표준화된 경우 라이브러리를 쉽게 구할 수 있습니다. 하지만 해당 표준이 유명하지 않거나, 또 내가 그 표준을 정의했다면 어쩔 수 없이 파서(Parser)를 만드는 일이 벌어지곤 합니다.

예를들어, 배열과 유사한 문자열을 배열로 파싱해봅시다.

const text = '[1, 2, 3]'
const parsed = text.slice(1, -1).split(',').map(chunk => +chunk.trim())

이와 반대로, 배열을 문자열로 바꿔야하는 경우도 있습니다.

const array = [1, 2, 3]
const serialized = '[' + array.join(',') + ']'

문자열에서 원하는 형태로 가공하는 것을 파싱(Parsing)이라고 하고, 객체에서 문자열로 바꾸는 과정을 시리얼라이즈(Serialize / 직렬화)한다고 합니다. 파싱을 하기 위해서는 파서(Parser)를 만들어야하고, 시리얼라이즈하기 위해서는 시리얼라이저(Serializer)를 만들어야 합니다.

위의 예시처럼 규칙이 단순하다면, 문자열 함수를 통해 쉽게 처리가 가능합니다. 하지만 복잡한 규칙을 만들어야 한다면 어떻게 될까요?

const text = '[1, 2, 3, [4, 5]]'
// parsed = ?

const array = [1, 2, 3, [4, 5]]
// serialized = ?

단순히 재귀를 추가했을 뿐인데 어떻게 만들어야 할지 바로 감이 오지 않습니다. 그런데 자바스크립트의 내장 함수인 JSON.stringify, JSON.parse는 이 작업을 해주고 있고, 우리는 쉽게 가져다 쓰고 있습니다.

const text = '[1, 2, 3, [4, 5]]'
const parsed = JSON.parse(text)

const array = [1, 2, 3, [4, 5]]
const serialized = JSON.stringify(array)

이 우리 눈에 익숙한 JSON.stringify, JSON.parse를 직접 구현하면서 파서와 시리얼라이저의 원리를 알아보도록 하겠습니다. :-)

시리얼라이저(`JSON.stringify`) 만들기

내장 함수 JSON.stringify와 동일하게 동작하는 stringify 함수 즉, 시리얼라이저를 만들어봅시다.

시리얼라이저를 만들기에 앞서 JSON의 구조를 살펴보겠습니다. JSON은 스칼라 자료형 string, number, boolean, null 4개, 여기에 배열(array)과 객체(object)가 추가된 총 6개의 자료형을 지원합니다.

여기서 가장 단순한 자료형인 스칼라 자료형(string, number, boolean, null)을 먼저 작성해봅시다.

function stringify(value) {
  if (value === null) {
    return "null"
  }
  if (typeof value === "number") {
    return `${value}`
  }
  if (typeof value === "boolean") {
    return value ? "true" : "false"
  }
  if (typeof value === "string") {
    return `"${value.replace('"', '\\"')}"` // " 문자는 escape 해야합니다.
  }
}

// test scalar
console.log(stringify(null) === "null") // true
console.log(stringify(true) === "true") // true
console.log(stringify(false) === "false") // true
console.log(stringify("hello") === "\"hello\"") // true
console.log(stringify("he\"llo") === "\"he\\\"llo\"") // true

그 다음은 배열(array)을 만들어 봅시다. 배열내부는 재귀함수를 활용하면 쉽게 처리할 수 있습니다.

function stringify(value) {

  /* ...생략... */

  if (Array.isArray(value)) {
    return `[${value.map(stringify).join(",")}]` // 재귀함수
  }
}

// test array
console.log(stringify([1,2,3]) === "[1,2,3]") // true
console.log(stringify([1,[1,2,3],3]) === "[1,[1,2,3],3]") // true
console.log(stringify([true, false, "hello", null]) === "[true,false,\"hello\",null]") // true

그리고 마지막으로 객체(object)를 만들어봅시다. 위에 스칼라 자료형과 배열을 처리했기 때문에 그외의 케이스는 전부 객체(object)라고 생각해도 괜찮습니다. 물론, 함수(function)도 있긴 한데, 여기서는 무시하겠습니다.

function stringify(value) {

  /* ...생략... */

  // 키 값의 " 문자는 이스케이프 합니다. val 부분은 재귀함수로 처리합니다.
  return `{${Object.entries(value).map(([k, v]) => `"${k.replace('"', '\\"')}":${stringify(v)}`).join(",")}}`
}

// test object
console.log(stringify({foo: "hello"}) === "{\"foo\":\"hello\"}") // true
console.log(stringify({
  foo: "string!",
  bar: 30.3333,
  baz: true,
  qux: {
    foo: {},
    bar: {
      foo: "string!!!",
    },
    baz: 20.2222,
  }
}) === "{\"foo\":\"string!\",\"bar\":30.3333,\"baz\":true,\"qux\":{\"foo\":{},\"bar\":{\"foo\":\"string!!!\"},\"baz\":20.2222}}") // true

내장함수 JSON.stringify와 동일하게 동작하는 stringify를 쉽게 만들 수 있었습니다.

시리얼라이저 확장하기

JSON 중에는 좀 더 많은 기능을 지원하는 JSON5라는 표준이 있습니다. 위에서 만든 함수를 확장하여 JSON5와 같이 number타입인 Infinity, NaN을 추가로 구현해봅시다. 또, JSON5에서는 지원하지 않는 정규표현식 자료형도 지원하도록 개선해봅시다.

Infinite, -Infinity, NaN를 추가합니다. 이 3가지 값은 모두 number 타입이니 해당하는 부분을 수정합니다.

function stringify(value) {

  /* ...생략... */

  if (typeof value === "number") {
    if (Number.isNaN(value)) {
      return "NaN"
    }
    if (!Number.isFinite(value)) {
      return value > 0 ? "Infinity" : "-Infinity"
    }
    return `${value}`
  }

  /* ...생략... */

}

// test infinity & nan
console.log(stringify(Infinity) === "Infinity") // true
console.log(stringify(-Infinity) === "-Infinity") // true
console.log(stringify(NaN) === "NaN") // true
console.log(stringify({foo: Infinity}) === "{\"foo\":Infinity}") // true

정규표현식은 instanceof를 통해 확인할 수 있습니다. 또한 toString 메서드를 통해 쉽게 string으로 변환할 수 있습니다.

function stringify(value) {

  /* ...생략... */

  if (Array.isArray(value)) {
    return `[${value.map(stringify).join(",")}]`
  }
  if (value instanceof RegExp) {
    return value.toString()
  }
  return `{${Object.entries(value).map(([k, v]) => `"${k.replace('"', '\\"')}":${stringify(v)}`).join(",")}}`
}

// test regexp
console.log(stringify(/asdf/) === "/asdf/") // true
console.log(stringify(new RegExp("asdf")) === "/asdf/") // true
console.log(stringify(/asdf/gi) === "/asdf/gi") // true
console.log(stringify(new RegExp("asdf", "gi")) === "/asdf/gi") // true

제대로 동작하는지 한번 돌려봅시다.

stringify({
  string: "foo",
  number: 30,
  number2: 3.14156,
  true: true,
  false: false,
  null: null,
  infinity: Infinity,
  ninfinity: -Infinity,
  nan: NaN,
  re: /hello/gi,
  array: [1,2,3],
  object: {
    foo: "hello"
  }
})
// {"string":"foo","number":30,"number2":3.14156,"true":true,"false":false,"null":null,"infinity":Infinity,"ninfinity":-Infinity,"nan":NaN,"re":/hello/gi,"array":[1,2,3],"object":{"foo":"hello"}}

전체 소스는 Github에서 확인할 수 있습니다.

이 시리얼라이즈를 통해서 만들어진 문자열은 해석할 수 있는 파서가 없어 아직은 자바스크립트 객체로 바꿀 수 없습니다. 시리얼라이저에 비해 파서를 만드는 작업은 더 복잡합니다. 하지만, 이 작업은 프로그래밍의 꽃인 컴파일러를 만드는 과정 중의 일부일 뿐입니다. 파서를 만드는 일은 곧 컴파일러의 동작을 이해하게 되고, 이로서 프로그래밍 그 자체를 더 잘 알게되는 계기가 될 것입니다.

파서는 2편에서 만들어보도록 하겠습니다. :-)

AWS CDK로 서버없이 서비스 운영해보기 (2) - Express

Sun, 09 Feb 2020 06:14:15 +0000

1편에서는 간단한 REST Api 앱을 업로드 해보았습니다.

Node.js로 프로그래밍을 하다보면 npm을 사용하는 일이 흔합니다. 이번에는 node_modules를 포함한 패키지를 AWS CDK를 이용하여 어떻게 배포할 수 있는지 설명드리겠습니다. 예제로서 Node.js의 가장 기본 웹 프레임워크인 Express 앱을 만들고 배포해보도록 하겠습니다.

1편에서 작업한 소스를 기반으로 설명합니다. 혹시나 1편을 보지 않으셨다면 먼저 읽어보고 오시는걸 권해드립니다.

가장 먼저 Express 프레임워크를 설치합니다.

npm install express
npm install @types/aws-serverless-express -D

Express 프레임워크는 프로그램을 실행하면 서버를 띄우고 Http 이벤트가 발생하면 해당하는 핸들러(함수)를 실행합니다. 근데 AWS Lambda는 서버를 띄우지 않고 Http 이벤트를 특정한 핸들러(함수) 전달하는 구조로 되어있습니다. 기본 구조가 다르기 때문에 AWS Lambda에서 Express 프레임워크는 사용하기 어렵습니다. 하지만, Express를 Lambda에서 사용할 수 있도록 추상화한 라이브러리(aws-serverless-express)를 이미 AWS에서 만들어서 제공하고 있습니다. 이 패키지도 설치합니다.

npm install aws-serverless-express
npm install @types/aws-serverless-express -D

aws-serverless-express 문서를 참고하여 src/entry.ts 파일을 다음과 같이 작성합니다.

import { APIGatewayProxyHandler } from 'aws-lambda'
import { createServer, proxy } from 'aws-serverless-express'
import express from 'express'

const app = express()

app.get('/', (req, res) => {
  res.json({
    message: 'hello Express!',
  })
})

app.get('/about', (req, res) => {
  res.json({
    message: 'this is about page',
  })
})

const server = createServer(app)

export const handler: APIGatewayProxyHandler = (event, context) => { proxy(server, event, context) }

infra/express-stack.ts 파일을 작성합니다. 지난 1편과는 다르게 LambdaRestApi를 사용합니다.

import { LambdaRestApi } from '@aws-cdk/aws-apigateway'
import { Code, Function as LFunction, Runtime } from '@aws-cdk/aws-lambda'
import { Construct, Stack, StackProps } from '@aws-cdk/core'
import { join } from 'path'

export class ExpressStack extends Stack {
  public constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props)

    const code = Code.fromAsset(join(__dirname, '../dist'))

    new LambdaRestApi(this, 'SampleExpress', {
      handler: new LFunction(this, 'HomeHandler', {
        runtime: Runtime.NODEJS_12_X,
        code,
        handler: 'entry.handler',
      }),
    })
  }
}

RestApi는 AWS Api Gateway의 특정 경로(이를테면, GET /, POST /articles와 같은)에 Labmda 함수를 매핑할 때 사용합니다. 이와는 다르게 LambdaRestApi는 /{proxy+}를 경로로 설정합니다. 그래서 모든 URL 요청 이벤트가 단 하나의 Lambda 함수를 호출합니다.

infra/entry.ts 파일도 조금 손봅니다.

#!/usr/bin/env node

import { App } from '@aws-cdk/core'

import { ExpressStack } from './express-stack'

const app = new App()

new ExpressStack(app, 'WaniSampleExpressStack')

여기까지 작업 후 지난번처럼 배포해봅시다.

npm run deploy

예상했겠지만, 배포후 서비스에 접속해보면 에러가 발생하면서 동작하지 않습니다.

AWS Cloudwatch의 에러로그는 다음과 같이 출력됩니다.

에러로그를 요약하면, npm으로 설치한 패키지인 aws-serverless-express를 찾지 못했다는 내용입니다. aws-serverless-exprss 패키지를 Lambda 배포시에 포함시켜주면 이 문제가 해결됩니다. 간단하게 node_modules 디렉토리를 dist디렉토리에 복사하면 됩니다.

package.json의 deploy 스크립트를 다음과 같이 개선하면 됩니다.

{
  "scripts": {
    "build": "npm run build:infra && npm run build:server",
    "build:server": "babel ./src --out-dir ./dist --extensions \".ts\"",
    "build:infra": "babel ./infra --out-dir ./infra-dist --extensions \".ts\"",
    "deploy": "npm run build && cp -r node_modules dist && cdk deploy"
  }
}

AWS Lambda에는 압축기준 50MB, 압축해제 기준 250MB라는 제한이 있습니다. 초반에 간단한 형태의 API는 문제가 없습니다. 서비스를 개발하면서 패키지를 추가로 몇개 더 설치하면 금방 한계용량에 다다르게됩니다.

패키지 몇개만 설치하면.. (이미지 출처)

node_modules를 복사하게 되면 dependencies와 devDependencies 둘다 복사가 되는데, 실제 서비스를 동작하는데는 dependencies만 필요로 합니다. 즉, 깔끔하게 dependencies 패키지만 복사하면 됩니다. (심플!)

예전에 서버리스 프레임워크(Serverless Framework) 사용했을 때에 있었던 기능이라 패키지 형태로 있을 줄 알았는데, 대충 찾아보니 없었습니다. 그래서 그냥 하나 만들었습니다.

distize를 설치합니다.

npm install distize -D

그리고 package.json의 scripts 부분을 다음과 같이 정리합니다. 서버 소스 결과를 src-dist로 생성하고, 배포시에 src-dist 디렉토리를 dist로 복사합니다. distize에서 별다른 옵션을 지정하지 않으면 node_modules의 dependencies를 dist 디렉토리로 복사합니다.

{
  "scripts": {
    "build": "npm run build:infra && npm run build:server",
    "build:server": "babel ./src --out-dir ./src-dist --extensions \".ts\"",
    "build:infra": "babel ./infra --out-dir ./infra-dist --extensions \".ts\"",
    "deploy": "npm run build && distize ./src-dist/* && cdk deploy"
  }
}

다시 배포합시다.

npm run deploy

그리고 우리가 만든 두개의 페이지에 접속해봅시다.

https://생성된이름.ap-northeast-2.amazonaws.com/prod

https://생성된이름.ap-northeast-2.amazonaws.com/prod/about

이제 우리는 Express를 AWS CDK를 통해 Lambda에 배포하는 방법을 익혔습니다. 만약에 Static 파일을 업로드 해야하는 경우에, distize를 응용하시면 쉽게 업로드 가능합니다.

전체 소스코드를 Github에 올려두었습니다. 다음에는 Vue의 SSR 프레임워크인 Nuxt 앱을 AWS CDK를 활용하여 배포하는 방법에 대해 다루어 보겠습니다.

wan2.land

AWS CDK에서 Terraform으로 이주하기

AWS CDK에서 Terraform으로 자원 이동하기

정리

WeakRef와 FinalizationRegistry 이해하기

참고

superserial 라이브러리 개발기

Undefined, Infinity, NaN

Circular

추가 자료형 (BigInt, RegExp, Date, Map, Set)

클래스 지원

toSerialize, toDeserialize

마무리

Typescript SOLID (2) - 개방폐쇄원칙(OCP)

Measurement Protocol을 이용하여 Google Analytics 적용하기 (feat. Lambda)

참고문서

Typescript SOLID (1) - 단일책임원칙(SRP)

파서 만들기 (2) - JSON.parse

어휘 분석(Lexical Analysis)

구문 분석(Syntax Analysis)

JSON.parse 만들기

파서 확장하기

AWS CDK로 서버없이 서비스 운영해보기 (3) - Nuxt

도메인 연결하기

파서 만들기 (1) - JSON.stringify

시리얼라이저(JSON.stringify) 만들기

시리얼라이저 확장하기

AWS CDK로 서버없이 서비스 운영해보기 (2) - Express

`JSON.parse` 만들기

시리얼라이저(`JSON.stringify`) 만들기