4부. 처음부터 끝까지 CRUD 만들어 보기 (1)

JeungJoo Lee

Published in

CrocusEnergy

8 min readOct 27, 2019

지난 편 ▶︎ 3부. Serverless Framework 소개 및 컨셉 및 개발 환경 설치

자 이제 가장 간단한 CRUD 성 Back-End API 를 만들어 보도록 하겠다. 스펙은 아래와 같다.

RestFul API 개발 스펙

1. DB 준비하기

DB는 대부분 Dynamo DB나 AWS MongoDB NoSQL 을 많이 사용하고 있지만 저자는 Amazon RDS Aurora DB 로 사용하겠다. 개발(dev) 와 운영(prod) 두 인스턴스를 준비하면 된다. Aurora DB는 MySQL 엔진을 토대로 만든 DB 이기때문에 만약 준비가 되어있지 않다면 Docker 를 이용해서 간단하게 로컬에서 띄우면 될 것이다.

MySQL Docker Hub ->  https://hub.docker.com/_/mysql

2. Scheme 정의하기

스키마는 굉장히 간단하게 test 라는 Entity 로 만들었다. DDL 은 아래와 같다. test 는 이름과 메모 컬럼만 존재하는 단순한 Entity 이다.

create table test
(
	id int unsigned auto_increment comment 'ID (PK)'
		primary key,
	name varchar(255) not null comment '이름',
	memo varchar(255) not null comment '메모'
)
comment 'test' collate=utf8mb4_unicode_ci;

3. API 설계

/api/items GET (모든 아이템을 조회함)
/api/item/{itemId} GET (특정 아이템 하나를 조회함)
/api/item POST (아이템을 저장함)
/api/item PUT (아이템을 수정함)
/api/item/{itemId} DELETE (아이템을 삭제함)

총 5개의 API를 만들도록 하겠다.

개발 프로세스

뭐 이 부분은 딱히 스탠다드라고 말할 순 없지만 아래와 같은 과정으로 개발하도록 하겠다. 아쉬운 것은 Lambda-Tester 라는 라이브러리로 Test 코드를 작성할 수 있었지만 Babel과 Webpack 과의 충돌로 잘 동작하지 않아 일단 이 과정은 Pass 하기로 했다.

대신, 배포 전 serverless-offline 라이브러리를 사용해서 localhost 에서 API를 테스트 해보도록 하겠다. 그 과정이 완료되면 최종적으로 AWS 에 배포하고 정상적으로 서비스가 되는지 확인하는 과정으로 마무리 하겠다.

테스트 코드 작성 → 테스트 → Lambda 만들기 → 배포전 offline 테스트 → 배포 → API 확인

먼저 AWS NodeJS 템플릿을 설치해보자.

AWS NodeJS 템플릿 설치

먼저 Serverless CLI 의 옵션중 create를 통해 AWS NodeJS boilerplate 를 설치하도록 하겠다. 적당한 위치에서 다음과 같은 CLI 를 쳐보자

sls create -t aws-nodejs -p ./sample

제대로 생성이 된다면 아래와 같이 완성이 되었다고 나올 것이다.

sample이라는 디렉토리가 생겼을 것이고 해당 디렉토리로 이동해서 어떤 파일이 생겼는지 보자

boilerplate 라고 해서 굉장한 것들을 미리 만들어 주는 줄 알았는데 생각보다 심플 해서 당황했다. 딱 두 가지 파일이 생긴다. serverless.yml 과 handler.js….

자 파일을 잠깐 살펴 보도록 하겠다.

주석을 제외하면 위와 같이 심플하게 만들어진다. 이제 CRUD 를 만들기 위한 기본적인 템플릿 설치는 끝났고 개발 시 필요한 npm 라이브러리들을 설치하도록 하겠다.

개발에 필요한 npm 라이브러리 설치하기

이 Chapter 에서는 Serverless Framework과 무관한 부분이긴 하다. 실제로 개발할 때 ES6 의 문법을 사용하기 위해 Babel 사용과 테스트 코드 작성 시 필요한 Jest 라이브러리를 설치 그리고 코드 컨벤션을 사용하기 위해 Prettier 라이브러리를 사용해 보도록 하겠다.

ES6 설정을 위한 Babel 설정

npm install --save source-map-supportnpm install --save-dev @babel/core @babel/plugin-transform-modules-commonjs @babel/preset-env babel-jest babel-loader babel-plugin-source-map-support babel-plugin-transform-runtime babel-preset babel-preset-es2015

설치 후 sample 프로젝트에 .babelrc 파일을 만들어 준 후 아래와 같이 입력한다.

{
  "plugins": ["source-map-support"],
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ]
  ]
}

코드 컨벤션을 위한 Prettier 사용

npm install --save-dev prettier

설치 후 sample 프로젝트에 .prettierrc.yaml 파일을 만든 후 아래와 같이 설정하여 준다.

trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

좀 더 자세한 설정은 prettier.io 에서 확인할 수 있다.

Prettier를 IntelliJ 같은 IDE 에서 설정하여 사용하면 Reformatting Code를 할 수 있다. 예를 들어, 아래와 같이 입력된 코드가 있다고 하자.

위의 Prettier 적용을 위해선 IntelliJ의 Prettier 플러그인을 설치 후 Enable 하고 Prettier package 에서 아래와 같이 경로를 설정해 주어야 한다. 완료가 되면 CMD+ALT+SHIFT+P 를 누르면 Prettier 설정에 맞게 Reformat Code 가 수행된다.

코딩 스타일 가이드는 AirBnB 가 어떻게 하는지 참고하면 좋을 듯 하다.

AirBnB 코딩 스타일 가이드 관련 https://github.com/airbnb/javascript

테스트 코드 작성을 위한 Jest 사용

이제 마지막으로 test 코드를 위한 라이브러리를 설치하겠다.

npm install --save-dev jest

jest 설치가 완료되면 아래와 같이 프로젝트의 src 와 test 디렉토리를 만든다.

test 에서는 테스트 코드를 위한 Javascript 파일들을 그리고 src 폴더에는 실제로 BackEnd 를 구성하는 어플리케이션 코드를 작성하도록 할 것이다. 우선 라이브러리가 잘 작동 하는지 테스트를 해보자.

간단하게 아래와 같은 코드를 넣어 제대로 작동 되는지 살펴보자

const arr = [1, 2, 3]test('테스트 코드가 잘 작동하는지?', () => {
    expect(arr.length).toBe(3)
})

package.json 에 아래와 같이 jest를 test 스크립트로 만들어 터미널에서 npm run test 해주면 테스트가 수행 된다. 각 테스트 파일 별로 단위 테스트를 하기 위해선 jest 다음 파일명을 지정 해주면 테스트 파일 별로 테스트를 할 수 있다.

IntelliJ를 사용한다면 이보다 더 쉽게 Shortcut으로 테스트를 수행할 수 있는데 먼저, Run/Debug Configuration에서 Jest 를 추가한 후

해당 테스트코드 파일에서 Ctrl+Shift+R을 누르면 아래와 같이 결과가 나온다. 역시 툴은 JetBrain이다..!

반대로 Test가 실패하면 Passed가 아닌 Failed 가 떨어질 것이다. Jest의 더 자세한 사항을 알고 싶다면 아래 참고로 들어가서 Docs를 확인하면 된다.

참고. Jest Documantion 테스트 API

이제 다음 편에서는 Serverless 커뮤니티 및 개인들이 오픈소스로 제공하는 플러그인을 설치 해 보도록 하겠다.

다음 편 ▶︎ 5부. 처음부터 끝까지 CRUD 만들어 보기 (2)