[MEMO APP] Back-end/ REST API-Register (2)

 

👨‍💻 REST API (2)

저번시간에 우리는 사전에 만들어두었던 몽고DB의 모델들을 사용하기 위해서 REST API의 Controller를 만들었습니다.

(정확히는 틀만 만들었죠)

 

오늘은 그때 만든 두개의 함수들에 내용을 채워넣어 보도록 하겠습니다.

📌 LocalRegister Controller

회원가입절차이니 사용자로부터 요청된 혹은 보내진 데이터를 받아서 사용해야합니다. 그렇다면 사용자로부터 전송된 데이터를 어떻게 확인할 수 있을까요?

 

아마 express 사용하셨던 분들이라면, 파라미터로 req, res 를 사용하여서 req를 통해 꺼내올 수 있었을겁니다. 하지만 Koa에서는 ctx 하나만 파라미터로 받고있어요.

 

사실 ctx 객체안에 req, res 둘다 들어있습니다. 정확히는 request, response라는 이름으로 들어있습니다.

 

const { body } = ctx.request; 이렇게 작성하게 되면 request 정보에서 body안의 내용을 추출해 사용이 가능해집니다.

 

한번 이 body의 정보를 출력해보고싶은데... 사실 지금 당장은 확인이 불가능합니다. 

이유즉슨, 우리가 서버로 어떠한 데이터도 post 방식으로 보낼 방법이 없고, 또 아직 body를 읽어줄 모듈을 설치해 주지 않았습니다.

 

모듈은 나중에 우리가 설치해 Back단에서 처리가 가능하지만, post방식으로 데이터를 보내는 작업은 Client단 즉 Front에서 해줘야 하는 작업입니다.

 

그래도 걱정하지 마세요, 세상엔 정말 편한 도구들이 많이 있으니까요!

PostMan이라는 프로그램을 받아 데이터를 보내고 그 결과를 확인해보는 테스트를 해볼 수 있습니다.

 

PostMan 설치에 대한것은 이번에 포스팅하진 않겠습니다.
(시간이 된다면 따로 포스팅해드릴게요 ^^)

 

포스트맨을 이용하면 POST방식으로 http://localhost:4000/api/v1.0/auth/register/local 경로로 접속했을때 다음과 같은 결과를 확인할 수 있습니다.

뿐만 아니라 아래와 같이 수정후 postman으로 재 요청해보면 ctx.request 객체의 정보도 확인이 가능합니다.

(아직 Body 정보는 확인이 불가능해요)

auth.ctrl.js

auth/index.js

 

하지만 아래에 보는것처럼 undefined 라고 뜨는것을 볼 수 있어요

우리가 아직 아무 데이터도 보내주지 않아서 이렇게 나오는건데, 한번 데이터도 담아서 보내주도록 해볼껀데요 그전에 GET과 POST 방식의 차이를 알아보도록 하겠습니다.

 

GET은 데이터를 전송할때 헤더라는 영역에 담아서 데이터를 보내주고 POST는 바디라는 영역에 데이터를 담아서 보내줍니다. 여기서 바디는 일반적으로 쉽게 읽어올수 없는데요, 이를 읽어오기 위해서는 parser라는 모듈이 필요합니다. 

 

그래서 koa-bodyparser 를 설치해 줄게요 yarn add koa-bodyparser 해주세요.

그리고 미들웨어를 우리의 앱에 추가해주겠습니다. 

(src/index.js로 이동해서 진행하겠습니다.)

이렇게 해주게 되면 우리가 post로 보낸 데이터를 우리 앱에서 읽어올수가 있습니다.

 

한번 테스트를 진행해 보겠습니다.

다시 auth.ctrl.js 로 이동해서 아래와 같이 수정해주세요.

그리고 다시 postman으로 돌아와 아래와 같이 설정하여 데이터를 보내보도록 하겠습니다.

그렇다면 아래와 같이 우리가 보낸 데이터를 받아서 확인이 가능합니다.

이런식으로 클라이언트로부터 받아와 저장을 할껍니다. 

 

자 그럼 클라이언트가 보낸 데이터가 우리가 원하는 형식에 맞게 와야 정확한 데이터 처리가 이루어질껍니다. 그래서 joi라는 모듈을 이용해 일종의 형식 검증절차를 진행해 보도록 할게요!

(https://www.npmjs.com/package/joi)

 

이를 사용하기위해 joi도 설치해 주겠습니다. yarn add joi

그리고 이를 이용해서 우리가 보내줄 데이터를 검증해 볼게요.

우리가 보내줄 데이터는 회원가입임으로, 총 3가지입니다. (displayName, email, password)

 

이들을 검증해주는 코드를 작성해보면 아래와 같아요.

const Joi = require('joi');

// local register function
exports.localRegister = async (ctx) => {
  const { body } = ctx.request;

  const schema = Joi.object({
    displayName: Joi.string().regex(/^[a-zA-Z0-9ㄱ-힣]{3,12}$/).required(),
    email: Joi.string().email().required(),
    password: Joi.string().min(6).max(30),
  });
};

// local login function
exports.localLogin = async (ctx) => {

};

Displayname은 한글 영어 둘다 가능하고 최소3자에서 12자까지 가능하게 했고, 이메일은 이메일형식만 그리고 패스워드는 6~30자 사이만 가능하게 했습니다.

(pw를 암호화해서 저장해야하지만 이는 나중에 작업해주도록 할게요)

 

이제 우리가 받아온 body 정보가 schema 기준에 맞는지 검증을 진행해 보도록 하겠습니다.

다음의 소스코드를  우리가 만든 schema 아래에 작성해주세요.

const result = Joi.validate(body, schema);
console.log(result);

그리고 서버를 실행시킨후 아래와같이 형식에 맞지않게 서버에 데이터를 보내보도록 하겠습니다.

이렇게 형식에 맞지않는 데이터를 보내주면 아래와같이 ERROR가 출력이되어집니다.

이제 간단하게 if문을 이용해서 result에 error를 통해 에러여부를 확인해 주면 될거같습니다. 

다음의 소스코드를 따라 입력해볼게요.

// local register function
exports.localRegister = async (ctx) => {
  const { body } = ctx.request;

  const schema = Joi.object({
    displayName: Joi.string().regex(/^[a-zA-Z0-9ㄱ-힣]{3,12}$/).required(),
    email: Joi.string().email().required(),
    password: Joi.string().min(6).max(30),
  });
  const result = Joi.validate(body, schema);

  // Schema error
  if (result.error) {
    ctx.status = 400;
    ctx.body = 'Schema error';
    // eslint-disable-next-line no-useless-return
    return;
  }
};

그리고 다시 테스트를 진행해 보겠습니다!

결과로 아래의 사진의 하단처럼 Schema error 라는 우리가 지정한 메시지가 나오는것을 볼 수 있습니다.

형식에 맞춰 보내주게 된다면 body 안에는 displayName, email, password 정보가 들어있을겁니다.

그렇다면 const { displayName, email, password } = body를 통해 추출이 가능해질껍니다.

한번 아래의 소스로 수정해서 확인을 해보죠.

// local register function
exports.localRegister = async (ctx) => {
  const { body } = ctx.request;

  const schema = Joi.object({
    displayName: Joi.string().regex(/^[a-zA-Z0-9ㄱ-힣]{3,12}$/).required(),
    email: Joi.string().email().required(),
    password: Joi.string().min(6).max(30),
  });
  const result = Joi.validate(body, schema);

  // Schema error
  if (result.error) {
    ctx.status = 400;
    ctx.body = 'Schema error';
    // eslint-disable-next-line no-useless-return
    return;
  }
  const { displayName, email, password } = body;
  console.log(displayName, email, password);
};

그리고 포스트맨에 가서 아래의 내용을 담아 보낸후 그 결과를 확인해 보겠습니다.

아래의 사진처럼 우리가 입력한 정보가 우리의 서버에 잘 도착한것을 확인이 가능하다면 여기까지 무사히 잘 따라오신겁니다.

이제 Front에서 데이터를 형식에 맞게 보내주면 특정 처리가 가능해졌습니다.

 

이제 이 받은 데이터를 가지고 DB에 저장하는 소스를 작성할껀데요. 어떻게 포스팅을 작성하다보니 너무 길어진 관계로 다음 포스팅에서 마저 진행을 하도록 하겠습니다. : )