👨‍💻 Session&Token (1)

지난 포스팅에 저희는 실제로 DB에 데이터들이 저장되는것까지 구현을 완료했습니다.

이제 회원가입시 회원정보가 유지되도록 하는 기능을 구현해 보도록 할껀데요, 이를 위한 토큰을 생성하는 작업을 먼저 이번 포스팅에서 다뤄보도록 하겠습니다. 

📌 Web token

보안 및 인증을 위해 사용하는 일종의 열쇠같은 문자열덩어리 입니다.

주로 의미가 없는 문자열(랜덤한 문자열) 기반으로 구성되어있고 특정한 정보를 암호화해서 문자열화시켜 사용자에게 발급하는 방식입니다.

그리고 사용자는 인증을 위해서 서버에 해당 토큰을 들고와 반납하고 이것을 우리가 읽어서 인증된 유저인지 식별하는것입니다.

우리는 웹토큰중에서도 클래임(Claim)기반 토큰을 사용하겠습니다.

Claim한 토큰이란 일반적인 토큰에는 단순한 문자열덩어리기 때문에 특정한 정보를 담기가 어렵다는 단점이 있습니다.

하지만, 우리가 사용할 Claim기반 토큰은 정보를 담을 수 있는데 이때 Claim은 사용자  정보나 데이터 속성등을 의미합니다. 

직접 구현해서 사용하기에는 저의 내공이 부족함으로 이미 잘 만들어져있는 모듈을 가져다가 사용하도록 할텐데요, 우리가 사용할 모듈은 바로 Json Web Token 입니다.

그럼 우리의 프로젝트에 install 해보도록할게요.

( yarn add jsonwebtoken )

/* Json Web Token에 대한 구체적인 설명은 존경하는 velopert님의 글을 발췌해왔습니다. */

(https://velopert.com/2389)

Json Web Token은 총 3가지의 정보를 가지고 있습니다.

1. Header (헤더)

2. Payload (내용)

3. Signature (서명)

Header는 두가지의 정보를 가지고 있습니다.

• type : 토큰의 타입을 지정합니다.

• alg : 해싱 알고리즘을 지정합니다.

Payload는 토큰에 담을 내용들이 포함되어 있습니다. 여기에 담는 정보의 한 조각을 클레임(Claim)이라고 부르고, 이는 name/value 한쌍을 가지고 있습니다. 그리고 복수개의 클레임을 토큰에 담는것도 가능합니다.

그리고 이 클레임의 종류는 총 3가지가 있으며 각각 아래와같이 구분되어 집니다.

• (등록된) registered claim
• (공개)    public claim
• (비공개) private claim

이중에 registered claim은 서비스에 필요한 정보들이 아닌, 토큰에 대한 정보들을 담기위하여 이름이 이미 정해진 클레임들입니다.

이 클레임에 포함된 클레임들의 이름들은 아래와 같이 있습니다.

Public claim은 충돌이 방지된 이름을 가지고 있어야 합니다. 충돌을 방지하기 위해서는, 클레임 이름을 URI형식으로 짓습니다.

{
    "https://localhost.com/4000/jwt_claims/is_admin": true
}

Private claim은 등록된 클래임도 공개 클래임도 아니고 양측(서버와 클라이언트)간에 협의하에 사용하는 클레임 이름입니다.

Example ( velopert 블로그 예시내용 발췌 )

{
    "iss": "gorillaKim.com",
    "exp": "1485270000000",
    "https://gorillaKim.com/jwt_claims/is_admin": true,
    "userId": "11028373727107",
    "username": "gorillaKim"
}

Signature는 헤더의 인코딩값과, 정보의 인코딩값을 합친후 주어진 비밀키로 해쉬하여 생성합니다.

위의 내용을 토대로 우리가 사용할 토큰 생성함수와 그 토큰을 해독시켜주는 함수를 만들어 보도록 하겠습니다.

token.js 파일을 만들껀데 이렇게 보조로 도와주는 파일들을 src 폴더안에 lib라는 폴더를 만들어서 따로 관리하도록 하겠습니다.

다음의 그림처럼 폴더와 파일을 구성해주세요.

그리고 token.js에 두개의 함수를 마저 작성해보도록 할게요.

처음으로 토큰 생성함수입니다.

• payload는 외부에서 생성하여 받아 jsonwebtoken으로 넘겨줍니다. 
• 그리고 secret은 우리가 만들 토큰을 해쉬화 하기위해 사용하는 salt라 불리는 일종의 문자열입니다.

여기서 secret값은 보안상의 이유로 소스코드상에서 감춰주는것이 좋음으로 .env 파일에 만들어서 불러와 사용해줍니다.

그리고 토큰을 생성했으니 이 토큰을 해독해주는 decode함수도 만들어주겠습니다.

그리고 마지막으로 두 함수를 외부로 보내주는 export작업도 해주겠습니다.

여기까지 오늘은 토큰을 읽고해석하는 함수를 만들어 보았습니다. 다음 포스팅에서는 이 토큰함수들을 활용해서 회원가입 절차 성공시 토큰을 발급하는 부분을 완성시켜주도록 하겠습니다.

👨‍💻 REST API (3)

📌 LocalRegister Controller(3)

지난 포스팅에서는 클라이언트로부터 받은 데이터가 알맞은 형식인지 Validate(확인)하고 그 뒤에 특정 데이터 처리가 가능하도록 셋팅해주었습니다.

오늘은 우리가 받은 데이터를 가지고 DB(MongoDB)에 저장을 해주도록 해볼게요!

(드디어.. 모델을 사용해보는군요)

데이터베이스와 관련된 작업을 할때는 그에대한 오류처리를 해주는것이 중요합니다. 그렇기 때문에 저희는 try catch 블록 안에서 작업을 해주도록 할꺼에요.

우리가 try 블록에서 제일먼저 해주고 싶은것은 유저가 보낸 displayName과 email이 이미 존재하는 정보인지 확인하는것입니다.

이러한 DB에 직접 접근해서 하는 작업들은 auth.ctrl.js에서도 작업이 가능하지만, 가능한 model 파일 즉 User.js에서 처리해주는것이 좋습니다.

그런이유로 User.js를 열어 3가지의 함수를 만들어 내보내줄꺼에요.

나중에 ID/PW를 찾기위한 두개의 메서드와 DisplayName 과 Email을 동시에 검증을 해주는 메서드 하나를 만들겠습니다.

(Model에서는 statics라는 메서드를 통해 사용자 지정함수를 만들 수 있습니다.)

만들었으니 사용해봐야겠죠? findExistancy 함수를 우리가 만든 auth.ctrl.js의 try 블록에서 사용해 볼게요.

이렇게 해주면 중복검사가 잘 작동하게 됩니다.

중복검사까지 했으니 실질적으로 DB에 저장을 해주어야겠죠?

이번에는 DB에 저장을 해주는 메서드를 User.js에 작성해 주겠습니다.

만들었으니 이 함수도 auth.ctrl.js에서 사용해 보도록 하겠습니다.

이렇게 해주면 DB에 회원등록과 동시에 이에 대한 정보를 응답으로 보내주게 되어집니다. 한번 잘 작동하는지 포스트맨으로 확인을 해볼게요.

아래 사진 데이터로 전송을하니 사진 하단의 결과물이 반환된것을 확인이 가능합니다.

이번에는 DB에도 잘 작성되었는지 확인해 볼껀데요, 이를 확인하기위해 MongoDB 설치시 같이 받은 Compass라는 도구를 사용해 보겠습니다.

Compass를 열면 다음과 같은 화면이 나오는데요, 저는 여러 플젝을통해 여러DB가 생성되었지만 처음 사용하시는 분은 memo만 있을꺼에요.

이 memo를 클릭해주면, 다음처럼 users 테이블이 보일겁니다.

users테이블을 클릭하면 우리가 방금 생성한 User 정보가 있습니다.

아주 잘 생성된걸 보실 수 있습니다. 조금 아쉬운점은 비밀번호가 암호화 되어서 저장이 이루어지지 않았다는 것인데요, 이는 나중에 시간적 여유가 될때 처리해 주도록 하겠습니다.

일단 이번포스팅은 여기까지 입니다. 다음 포스팅에서는 회원가입이 이루어졌으니 자동으로 세션을 만들어 로그인이 이루어지고 그 로그인이 유지될 수 있도록 처리해 주도록 하겠습니다.

그럼 다음 포스팅에서 뵈요 ^^

👨‍💻 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 정보는 확인이 불가능해요)

하지만 아래에 보는것처럼 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에 저장하는 소스를 작성할껀데요. 어떻게 포스팅을 작성하다보니 너무 길어진 관계로 다음 포스팅에서 마저 진행을 하도록 하겠습니다. : )

👨‍💻 DB연결 (4)

📌 Controller 작성하기

앞선 포스팅에서 저희가 데이터베이스안에 저장을위한 데이터의 틀인 모델을 작성해주었습니다.

이번에는 유저로부터 데이터를 받아서 실제 데이터베이스에 데이터가 저장이 되어지도록 한번 Controller를 작성해 볼게요.

Controller는 예전에 우리가 생성했던 api 폴더안에 v1.0 폴더에서 작업을 해줄겁니다.

일단 첫번째로 만들 Controller는 회원가입을 위한 컨트롤러를 만들꺼에요.

v1.0폴더안에 auth라는 폴더를 만들어줄게요. 앞으로 인증과 관련된 작업들은 이곳에서 처리를 하게 될겁니다.

(회원가입도 인증이 필요한 절차입니다.)

이전에 했던 작업과 마찬가지로 이곳에서 여러개의 URL경로가 나올예정이니 이 여러개의 경로를 처리할 index.js 와 auth의 controller가 될 auth.ctrl.js 을 만들어 주도록 하겠습니다.

그럼 제일먼저 방금생성한 index.js 부터 수정을 해보도록 하겠습니다.

const Router = require('koa-router'); 

const auth = new Router();

/* /api/v1.0/auth */
auth.get('/', (ctx) => {
  ctx.body = '✅ Welcome to auth!!';
});

module.exports = auth;

위와같이 수정을 했다면, 이 index.js를 api안에 v1.0폴더안의 index.js와 연결해 주어야겠죠?

그럼 마저 auth의 index.js와 v1.0의 index.js를 연결해 주도록 하겠습니다.

const Router = require('koa-router');
const auth = require('./auth');

const api = new Router();

/* /api/v1.0/... */
api.use('/auth', auth.routes());

module.exports = api;

이렇게까지 완료했다면 서버를 켜고 http://localhost:4000/api/v1.0/auth 에 접속해보시기 바랍니다.

위와같이 나왔다면 auth와 연동도 성공입니다! 

그리고 이 auth 안에서 회원가입(register)를 위한 Url 경로와 로그인(Login)을 위한 Url 경로를 만들어주도록 하겠습니다.

( auth/index.js에서 작업합니다. )

여기서 회원가입과 로그인과정은 보안상으로 노출이되면 안되는 정보들(pw등..)이 포함됨으로 POST방식으로 전송을 해줄겁니다. 

( 아래의 사진처럼 수정을 해주세요. )

const Router = require('koa-router'); 

const auth = new Router();

/* /api/v1.0/auth */
auth.get('/', (ctx) => {
  ctx.body = '✅ Welcome to auth!!';
});
auth.post('/register/local', (ctx) => {
  ctx.body = '✅ Welcome to register!!';
});
auth.post('/login/local', (ctx) => {
  ctx.body = '✅ Welcome to login!!';
});

module.exports = auth;

그리고 각각의 경로로 접속을 해보도록 하겠습니다.

아마 우리가 지정했던 ✅ Welcome to login!! 이 문구가 나오지 않는것을 보실 수 있을겁니다. 이 이유는 우리가 post방식으로 전송을 했기때문입니다. 일단은 이렇게 그대로 두시면 됩니다.

우리가 작성한 소스를 보면 auth.post() 안에서 파라미터로 두개를 받는데 하나는 경로(URL경로) 이고 다른 하나는 해당 URL로의 요청에 대한 처리를 담당하는 함수가 들어가 있습니다. 
( Arrow function = " ()=>{} " 로 되어있습니다. )

즉 사용자가 보낸 회원가입정보를 가지고 특정 데이터 처리라든가 DB에 저장한다든가 하는곳이라는 말입니다.

우리는 이부분을 auth.ctrl.js에 하나로 모아서 생성하고 관리할꺼에요. 자 auth.ctrl.js를 열어주세요.

그리고 다음의 소스를 작성해줍니다.

우리가 만들고자 했던 local로그인 부분과 local회원가입 관련 데이터 처리를 담당하는 컨트롤러를 만들어주었습니다.

그리고 이안에서 우리가 원하는대로 데이터 핸들링을 해줄꺼에요.

오늘은 여기까지만 하고 다음 포스팅에서 방금생성한 두 함수의 내용을 마저 채워보도록 하겠습니다.

👨‍💻 DB연결 (3)

📌 model 만들기

이번에는 데이터베이스 안에 생성될 데이터들의 틀을 만들어줄겁니다.

이 틀을 model 이라고 불러요. 음.. 뭐랄까 사용해본 사람의 입장으로서 말씀드리자면 장고의 ORM과 비슷합니다. 아니 몽고디비도 ORM을 지원해준다고 하네요 ^^

아무튼! 한번 만들어 보도록 하죠!

우리가 어떤 데이터를 집어넣을지를 생각하기 위해서는 일단 어떤 서비스를 만들것인가부터 시작해야합니다.

(사실 이러한 IT 서비스를 개발하는것은 설계단계가 정말 중요해요. 먼저 선수되어야 하는 과정이지만, 사이드 프로젝트이기 때문에 과감히 생략합니다. 이후 생기는 문제는 미래의 나에게 맡기.. )

일단 우리가 만들 서비스는 간단한 TodoList 메모장을 만들겁니다.

근데 너무 간단하면 재미가 없으니깐, 회원가입을 통해 유저별 메모장을 관리해주고 그룹생성을 통해 그룹별 공통 할일을 지정할 수 있도록 할게요.

자 그럼 어떤 테이블들이 필요할까요?

1. 유저 테이블 (회원관리)
2. Todolist 테이블 (메모들)
3. 그룹 테이블 (그룹정보)

정리해 보니 이정도가 될꺼같네요. 추후 필요해지는 정보들을 그때가서 update하도록 하겠습니다.

그럼 유저테이블 생성을 위한 모델을 만들어볼까요? 이름은 User 로 할게요.

모델을 생성하기전에 이 모델들을 관리할 models라는 이름의 폴더를 db폴더안에 생성해주고 그안에 User.js를 만들어주도록 할게요.

이안에 모델을 위한 소스코드를 작성해보도록 할게요.

들어갈 내용은 닉네임, 이메일, 패스워드, 그리고 계정생성시간 정도?

다음의 사진처럼 작성해주세요.

const mongoose = require('mongoose');

const User = new mongoose.Schema({
  displayName: String,
  email: String,
  password: String,
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

module.exports = mongoose.model('User', User);

유저 모델을 만들었으니 다음은 Todo 모델을 만들어보도록 하겠습니다.

(이름은 Todo.js 라고 할게요.)

안에들어갈 내용은 Todo 제목, 내용, 완료여부, 생성한사람, 생성시간 정도?

다음 사진처럼 만들어보도록 할게요.

const mongoose = require('mongoose');

const Todo = new mongoose.Schema({
  title: String,
  content: String,
  complete: Boolean,
  user: { // 해당 메모를 작성한 User
    type: mongoose.Schema.Types.ObjectId,
    ref: 'User',
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

module.exports = mongoose.model('Todo', Todo);

이렇게 메모를 만들기위한 기초모델은 다 만들어졌고, 그룹을 만들고 그룹별 할일 추가 기능은 유저 기능과 유저별 메모기능을 다 만든 다음에 추가하도록 하겠습니다.

여기까지 DB관련내용이었구 다음 포스팅 부터는 특정 경로로 요청시 회원가입이 이루어지도록 Controller 작성작업등을 진행하도록 하겠습니다.

수고하셨어요

👨‍💻 DB연결 (2)

📌 MongoDB와 서버앱을 연결시켜주기.

지난번 포스팅때에는 MongoDB를 설치해주었고 이 DB와 우리가 개발하고 있는 서버와 연결을 도와주는 Mongoose라는 모듈도 설치해 주었습니다.

그래서 이번 포스팅에서는 mongoose를 우리 서버파일에서 불러오고 실제로 연결까지 해주는 작업을 진행해주도록 하겠습니다.

require('mongoose') 한다음에 index.js에서 직접적으로 연결시켜주는 방법도 있지만, 이렇게 모든 작업들을 한 파일에서 작성하면은 index.js 소스코드가 길어져서 모든 구조를 파악하기 어려워질 뿐더러 관리가 어려워지기 때문에 DB와 관련된 작업은 src 폴더안에 db폴더를 만들어서 그 안에서 작업을 해주도록 하겠습니다.

새로 생성한 db 폴더안에는 index.js 파일이 있고 이 파일에서는 DB 연결과 해제와 관련된 함수들을 작성해 외부에서 쉽게 사용이 가능하도록 만들어 주겠습니다.

(이렇게 하는 이유는, DB에 접근을 한 파일에서만 가능한게 아니라 필요에 따라 재 새용할 수 있는 소스코드로 만들어 다른곳에서도 사용이 가능케 하기 위함입니다.)

const mongoose = require('mongoose');

const mongoUri = 'mongodb://localhost:27017/whereCar';

module.exports = (function () {
  mongoose.promise = global.Promise;

  return {
    connect() {
      mongoose.connect(mongoUri, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
      }).then(
        () => {
          console.log('✅  Successfully connected to mongodb!');
        },
      ).catch((e) => {
        console.error(e);
      });
    },
  };
}());

mongoose는 connect라는 메서드를 지원해주며, 파라미터 값으로는 해당 DB의 위치값을(mondoUri) 넣어주고 그 다음에는 여러 옵션들을 넣어주게 됩니다.

위의 함수는 일반 방식과는 다르게 connect함수가 비동기적으로 이루어진다는 특성을 이용하여 [.then] 과 [.catch] 라는 기능을 통해 연결이 성공적으로 이루어졌는지 여부를 화면에 띄워주게 합니다.

조금 아쉬운점은 mongoUri 와 같이 외부에 알려져서 안되는 부분들 입니다. 그래서 이부분을 .env 파일로 옴겨서 사용하도록 하겠습니다.

이제 src 폴더 안에 index.js에서 우리가 방금 작성한 파일만 호출하여 사용하기만 하면 됩니다.

아래의 사진처럼 말이죠

이제 다시한번 서버를 실행시켜 보도록할게요.

아래의 사진처럼 mongoDB가 연결이 성공했다는 메시지가 뜬다면 성공입니다.

여기까지가 DB연결을하는 작업이었고 무사히 이를 마치었습니다. 그렇다고 DB관련 작업이 모두 끝난것은 아니랍니다.

DB관련 설계작업을 해주어야하는데요. 보통은 스키마 설계같은것들을 해주어야 하지만... 

우리가 사용할 mongoDB는 다른 DB와는 다르게 스키마가 존재하지 않습니다. 왜 없는가를 설명하기 보단 이를통해 얻는 이점을 말씀드리자면, 객체나 리스트같은 구조를 한 칼럼에 저장이 가능하다는 것이죠.

스키마를 작성하는 대신에 mongoDB는 model이라는 파일을 만들어서 데이터베이스에 추가될 데이터에 대한 형식(틀)을 지정해주어야 합니다.

고로 다음 포스팅에서 이러한 작업들을 해주도록 하겠습니다.

👨‍💻 DB 연결 (with MongoDB)

📌 지난 Routing작업 요약

지난 포스팅에서 우리는 라우팅 작업을 원활하게 하기위해서 /api 라는 경로를 들어오는 모든 상황에 대한 처리를 해주는 api 폴더를 만들었습니다.

마치 계층적으로 모든 경로들을 분리하여 각 해당하는 계층들끼리 폴더 및 파일들로 묶어서 관리하는 방법인데요, 이렇게 개발을해야 나중에 특정 경로에대한 수정이나 코드삽입이 필요할때 쉽게 그 위치를 찾아갈 수 있습니다.

뿐만아니라 이렇게 기능별로 나누어 파일을 작성하는것은 한곳에 몽땅 때려박아 작성하는 방식보다 각 기능들간에 의존될 가능성 또한 적어집니다. 

(이 부분은 사실 개발자가 유의해서 작성한다면 한곳에 작성한 코드도 의존성은 없을 수 있어요.)

결론,

• 우리는 api관련 경로를 관리해주는 폴더를 만들었다.
• api는 버전별로 관리가 이루어져야 하기때문에 버젼벌관리를 위한 폴더도 생성했다.
• 앞으로 각 기능별 폴더를 v1.0 폴더(버전1폴더)안에 추가를 할 예정이다.

📌 DB 연결하기

이 포스팅은 프로젝트 연습을 위한 포스팅이기 때문에 DB가 무엇인지 MongoDB가 무엇인지 자세하게는 다루진 않겠습니다.

일단 저희가 사용할 DBMS(DataBaseManagementSystem)은 MongoDB입니다.

MongoDB는 NoSQL을 사용하는 DB의 예로 유명하죠.

사실, 이번 프로젝트에 대한 공부를 진행하면서 NoSQL을 왜사용하는지 어떤 장점이 있는지 잘 몰랐었는데 사용하면서 감탄사를 몇번 내뱉은적이 있었습니다. 나중에 시간이 된다면, MongoDB와 관련된 포스팅때 이야기를 진행하도록 하겠습니다.

서버를 개발하면서 DB는 빼놓을래야 빼놓을수가 없죠!

왜냐하면, 다양한 정보를 저장해야하기 때문인데요. 우리가 만든 서버앱과 별도의 프로그램인 DB를 어떻게 연결할 수 있을까요?

바로 Interface를 이용한 연결을 합니다.

DB가 특정 약속된 interface로 데이터를 주고받아 처리를 해주는겁니다. 사실 정확히는 DB가 처리해주지는 않고 그사이에서 우리가 만든 서버와 DB가 의사소통(데이터 주고받기)를 잘 할수 있도록 번역가가 존재해요. 그 친구가 바로 DBMS입니다. 

그래서 지금부터 DBMS와 우리의 서버앱과 연결을 할꺼에요. 이것을 DB connection이라고 합니다.

이 커넥션을 만들기위해서는 커넥션을 만들어주는 특정 모듈을 받아야합니다. 그 모듈의 이름은 바로 mongoose입니다. 다음의 명령어를 콘솔에 쳐주세요.

yarn add mongoose

방금 우리가 설치한것은 mongoDB와 우리의 앱이 연결될 수 있도록 도와주는 모듈을 설치한것입니다. 즉 아직 MongoDB를 설치하지 않았다는 이야기죠. 그렇다면 이제 mongoDB를 설치해야겠죠?

설치를위해서 mongoDB install center로 이동합니다. 

(https://www.mongodb.com/download-center?)

그리고 다음의 사진을 따라 설치를 진행해 주시기 바랍니다.

이후부터 다운로드된 실행파일을 실행시켜줍니다.

간단하게 계속 next를 눌러주다가. 아래의 화면이 나오게 되면 다음의 절차를 따라줍니다.

1. 처음 사용하는 유저라면 Complete를 눌러 자동설정을 따릅니다.

2. 원하는 기능만 사용하고픈 유저라면 Custom하여 원하는 파일만 설치합니다.

이후 계속 Next를 눌러줍니다.

그러다보면 다음의 사지을 만나게되는데, 이때 원활한 개발테스트를 위해서 Compass를 설치해두는것이 좋음으로 좌측 아래의 install mongodb compass 부분을 체크해줍니다.

여기까지가 몽고DB설치의 끝입니다. 

만약 오류가 난다면 다음의 조건에 해당하는지 확인후 조치를 취하시길 바랍니다.

MongoDB 설치오류

문제1. CMD 창에서 mongod를 쳤을때 인식이 안됩니다.

* 해결1

• C드라이브 안에 Program Files 폴더안에 MongoDB폴더가 있는지 확인하고 없다면 생성해줍니다.

* 해결2

• 환경변수가 추가되어있는지 확인한다.
• 환경변수 추가는 [내컴퓨터]우클릭➡[고급시스템설정]➡[환경변수(N)]으로 들어가면 됩니다.
• 그 후 하단 시스템변수 리스트 중에서 PATH 를 편집 선택한다음 아래와 같이  MognoDB설치경로\bin 를 추가하면 됩니다.

👨‍💻 라우팅 (2)

📌 라우팅 (2)

저번 포스팅까지 내용을 간단히 요약해보겠습니다. 

• 깃허브에 업로드를 원활하게(+보안내용은 가리기) 위해서 gitignore을 설정해 주었습니다.
• Koa-router를 이용해서 '/' 경로로 접근시 특정 메시지가 보이게 하였습니다. 

이번에는 저번에 하던 routing작업을 마저 완료하도록 할껀데요. 그 전에 우리가 알아야할 팁들이 있습니다.

저 뿐만은 아니겠지만 개발을 하다보면, 폴더 혹은 파일정리가 정말이지 중요하게 느껴집니다.

비슷한 역할을하는 파일들을 하나의 폴더에 묶는다거나 여러가지 역할을 하는 소스코드 덩어리들을 각각의 역할을 수행하는 여러개의 소스코드로 분리시켜 별도의 파일로 만드는 작업은 생활화가 되어있어야 나중에 프로젝트 규모가 커져갈때 그나마.. 그!나!마! 유지보수를 조금 편하게 만들어줍니다.

(아 이건 사람바이 사람 그리고 실력바이 실력인것 같아요. 제 코드는 유지보수가 어렵게만 느껴지는건... )

routing작업을 할때에도 이 경로를 잘 구분지어 작업하는것 또한! 같은 맥락으로 중요합니다.

앞으로 우리는 REST API 서버를 만들꺼기 때문에 다음을 유의하며 만들어야 합니다.

1. API 버전별 관리

2. 비슷한 역할을 수행하는 기능끼리 관리

3. 각 경로별 수행하는 함수들(Controller) 관리

자 첫번째 조건부터 클리어 하기전에 라우팅 경로를 위한 폴더를 만들어 그곳에서만 라우팅 작업을 처리하도록 api라는 새로운 폴더를 생성해 보겠습니다.

( 경로는 src 폴더 안에 만들어주세요 )

이제 첫번째 조건을 클리어 해보겠습니다.

버전별 관리를 하기위해 각 버전마다 폴더를 하나 만들어주겠습니다. 폴더 이름은 v1.0으로 할게요.

(처음 만드는 버전이기에 v1.0으로 합니다. 경로는 api 폴더 안에 만들어주세요.)

그리고 각 버전별 폴더들을 관리해줄 수 있도록 소스코드를 작성해야 함으로 api 폴더안에 index.js 파일도 같이 생성해 주도록 하겠습니다.

( 이곳에서 각 버젼별 라우팅 연결을 해줄거에요 )

자 잘따라왔습니다. 근데 여기서 우리가 빠뜨린게 하나 있어요. 그게 무엇이냐면 이 api 폴더를 정확히는 api폴더 안에 있는 파일들을 routing 해줄 api/index.js 를 우리가 만든 서버파일 src/index.js 와 연결을 해주어야 합니다.

다음 작업으로 넘어가기전에 이 작업을 먼저 해주고 가도록 하겠습니다.

src/index.js 파일을 열어주세요.

우리가 이전에는 router객체 내장 메소드를 사용할때 get만 사용해 보았는데요. 이 router객체에도 app객체에 미들웨어를 연결했던것처럼 또다른 router객체를 연결하는것이 가능합니다.

( app객체에서와 같이 use 메서드를 사용합니다. ex/ routes.use('/api ', api.routes()) ) 

바로 use 메서드를 사용하기전에 우리가 만든 api/index.js파일을 먼저 src/index.js 상단에 불러와주도록 하겠습니다.

이제 api 안에 index.js를 불러왔으니 연결을 해봐야겠죠?

사용법은 간단합니다. 아래의 소스코드처럼 작성을 해주면 됩니다.

// about routing
const router = new Router();

router.use('/api', api.routes());
router.get('/', (ctx) => {
  ctx.body = '홈';
});

여기서 api 뒤에 routes에 대하여 알아보도록 하겠습니다. 

( 사진을 보면서 알아볼게요. )

우리는 이전 포스팅에서 koa-router 객체를 app에 적용할때 한번 routes를 사용했었는데요.

routes는 우리가 만든 koa-router 객체 (위의 그림에선 router가 되겠네요) 에 연결한 모든 경로들을 의미합니다. 즉 우리는 get을 이용한 '/'의 경로만 있었겠죠? 

다시 돌아와서 router.use()의 괄호안에 또라른 router객체의 routes를 집어 넣는것은 특정경로(여기선 '/api')로 들어왔을때 모두 새롭게 집어넣은 rotuer객체로 연결함을 의미합니다.

뭐 이런모습일까요?

위의 사진에서 예로들어 '/auth' 경로는 위의 '/api '경로와 합쳐져서 '/api/auth' 가 되어지겠네요.

이렇게 외부에서 라우팅 작업을 하고 메인으로 사용하는 라우팅 객체에 합치는 것이 가능해집니다.

일단 우리가 처음으로 만들 라우팅은 REST API를 위한 것임으로 api라는 경로로 만들었습니다.

따라서 같이 코딩작업을 계속 이어나가 볼게요.

이렇게 연결은 했지만... 사실 우리는 api/index.js에 아무 소스코드도 넣지 않았습니다 ㅎㅎ

위와 같이 작성하기 위해서 api 를 router 객체로 만들어주어야 겠죠? 

그럼 다시 api/index.js 파일로 가서 작업을 진행해 보겠습니다.

src/index.js의 api를 router 객체로 만들어준다는 것은 api/index.js에서 router객체를 밖으로 내보준다는것을 의미합니다. 고로 이곳에서도 router 객체를 새롭게 만들어주도록 할게요.

const Router = require('koa-router');
const ver1 = require('./v1.0');

const api = new Router();
/* /api/... */
api.use('/v1.0', ver1.routes());

module.exports = api;

 ( 여기서 밖으로 내보내주는 소스코드는 module.exports 입니다. )

아마 앞선 내용을 이해하셨다면 눈치채셨을 겁니다. 여기서는 버전별 관리를 하기때문에 우리가 미리 생성한 ver1과 api 라는 이름의 router 객체와 또 연결을 해주었습니다. 이런식으로 계층형식으로 연결을 해주어 관리를 해주면 나중에 특정 라우터에서 오류가 나도 쉽게 찾아가 오류를 수정할 수 있습니다.

근데 velopert님 강좌를 보니깐 버전관리 유지보수를 위해서 ver1변수처럼 쓰지 않고 배열을 만들어서 관리를 하더군요. 우리도 고수님의 가르침을 소스코드에 적용시켜 보겠습니다.

const Router = require('koa-router');
// Version 관리 1.0
const versions = {
  'v1.0': require('./v1.0')
};

const api = new Router();
/* /api/... */
api.use('/v1.0', versions['v1.0'].routes());

module.exports = api;

4번째 줄에서 오류가 난다고 걱정하지마세요. : ) 오류가 나는 이유는 우리가 소스코드를 작성하지 않았기 때문입니다 ^^

후... 이제야 첫번째 조건을 클리어 했습니다. 이제 두번째 조건을 클리어해줄껍니다.

두번째 조건은 비슷한 기능끼리 묶어주는것 이었습니다.

이를 위해서 각 기능별 경로를 관리해주는 v1.0/index.js 파일을 생성해 내부 소스코드를 작성해 보도록 하겠습니다.

설명은 위와 같음으로 설명없이 소스코드 작성을 이어갈게요.

현재까지의 폴더구성을 공유합니다.

v1.0/index.js 안에 소스도 공유드릴게요.

const Router = require('koa-router');

const api = new Router();

/* /api/v1.0/... */

module.exports = api;

이제 2번째 조건도 클리어 했습니다. 앞으로 새로운 api요청에 대한 기능을 만들때 기능별로 v1.0폴더안에 새로운 폴더를 만들어 그 안에서 router 경로를 관리하고 위의 사진6번째 줄에서 use 메서드를 통해 연결만 해주면 됩니다.

마치 아래와 같은 사진처럼 말이죠.
( 공부중인 개인 프로젝트 사진입니다. )

오늘 포스팅은 여기까지 작성할텐데요, 사실 라우팅 작업을 얼릉 끝마치고 DB 연결까지 포스팅할 예정이었지만... 생각보다 이부분에 대한 내용이 많아 포스팅 글이 길어지게 되었습니다.

그래서 다음 포스팅에서 라우팅작업 요약 하고 DB 연결을 해주도록 하겠습니다. 

TodoList

1. 라우팅 요약하기
2. DB 연결하기 ( MongoDB )

안녕하세요 멋쟁이사자처럼 7기회장 Kim_Gorilla 입니다.😉

작년은 한해동안 멋사를 위해 여러자료를 열심히 만들며 가르치고 했었습니다.

마치 엊그제 같네요( 아련.... ) 

이제는 회장직을 훌륭하신 다음분께 넘겨주고 다시 저의 평범한 일상으로 돌아오게 되었습니다.

현재 이 블로그는 교육을 목적으로 멋사 공식블로그로 사용되었으나, 제가 물러남과 동시에 블로그도 공식블로그가 아닌 평범한 Kim_gorilla 블로그로 돌아오게 되었습니다.

하지만, 멋사인이나 제 블로그에 관심을 가져주시는 분들을 위해서 지속적으로 코딩관련 글, 영상들을 포스팅 할 예정이니 많은 관심과 조언 부탁드리겠습니다 ; )

( 공식적인 힘은 없으나, 아직 이전된 블로그가 없는 관계로 경기대 멋쟁이사자처럼 관련 질문도 받으니 언제든지 남겨주시길 바랍니다.  감사합니다. )

👨‍💻 Git ignore 설정/ Router 설정

📌 Git ignore 설정

node를 이용해서 개발하다보면 Django나 Rails혹은 Spring과는 다르게 단점이자 장점인 특징이 한가지 발견되어집니다. 그것은 새로 추가하거나 설정해줘야하는 module들이 많아진다는 것인데요.

왜 장점이고 단점인지 알아보겠습니다.

Django와 비교하여 설명해보도록 하죠!  

장고는 python을이용해 웹앱을 만드는 프레임워크입니다. Django는 설치하는 그 자체로 웹 서버를 구축하기위한 거의 대부분의 것들을 만들어줍니다.

( 뭐야.. 개사기자나... )

하지만 장점도 있지만 단점도 존재합니다. 바로 기초적으로 제공되는 기능들이 워낙 많기때문에 이러한 기능들을 찾아 익혀야만 사용이 가능하고 또, 사용하지 않음에도 우리의 저장공간을 차지한다는 단점을 가지고 있습니다.

(별개로 장고는 특성자체로는 비동기를 사용이 불가능합니다 ㅎㅎ.. 이를 추가해준다는 이야기도 있더군요)

그에비해 node를 이용하는 express 마이크로 즉 웹서버를 구축하기위한 최소한의 모듈을 제공합니다. 여기에 더해서 koa는 더욱더 적은 모듈을 제공해주구요! 그렇기 때문에 초반부터 필요한 모듈을 우리가 딱딱 설치하면되기 때문에 Custom이 자유로운 편입니다.

(대신에 개발기간이 길다는 단점이... 주륵)

그럼 이 이야기를 왜 하였는가... 우리가 개발을 하면서 설치하는 하나하나의 모듈은 솔직히 그렇게 큰 용량을 차지하는것은 아니지만, 깃허브에 올릴때는 크게 느껴지곤 합니다. 그래서 보통 node로 개발할때는 이러한 모듈들을 같이 깃헙에 올리지 않습니다.

이유즉슨, package.json에 우리가 설치한 모듈들이 기록이 되어있기 때문에 이 파일만 있다면 npm install 혹은 yarn add 로 관련 모듈들을 한번에 설치가 가능하기 때문입니다.

그래서 우리가 github에 add할때 우리가 이미 설치한 모듈들까지 인식하지 않도록 몇가지 설정을 해주어야 하는데요, 그것을 해주는것이 바로 gitignore입니다.

방법은 간단합니다.

프로젝트 최상단 경로에 .gitignore 파일을 만들어주세요. .env 파일때처럼 파일명 앞에 . 을 붙이는것을 잊지 마시길바랍니다 ㅎㅎ

생성이 완료되었다면 해당 파일을 열어 아래의 내용을 채워주도록 할게요. 아래의 내용은 google에 gitignore 검색하면 나오는것을 발췌한것이랍니다. 보통 default로 많이 사용해요!

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

자 이렇게 앞으로 깃에 올릴때는 모듈을 올리지 않으니 빨리빨리 업로드가 되겠네요 😉

📌 Router 설정하기

일단 앞선 환경설정에서 koa를 설치할때 koa-router도 같이 설치를 했었습니다.

이번에는 koa-router를 설치하고 경로를 폴더단위로 정리하여 개발하는 방법에 대하여 같이 탐구해보도록 하겠습니다.

일단 공식문서를 보면서 코드를 작성해보도록 하겠습니다.

https://openbase.io/js/koa-router

위에 첫번째 캡쳐는 koa-router document에서 발췌한것입니다. 그리고 그아래는 express routing하는 소스를 발췌한것입니다.

이렇게 express와 koa 둘을 두고 보았을때 크게 사용하는 방법이 다르지는 않은것 같습니다. 다른점이라면 express는 자체에 routing관련 메서드가 내장되어있는 한편, koa는 원하는 미들웨어를 설치해 사용한다는 점? 

(여기만 봤을땐, 소스코드 작성하는 개발자입장에서는 koa가 좀더 간결하고 입맛대로 사용할 수 있는정도?)

일단 소스코드를 작성해 보도록 하겠습니다.

우리가 기존에 사용했던 test 응답용 소스는 과감히 지워주시고, routing 작업을하여 '/'경로로 접속했을 때, hello world라는 메시지가 보이도록 소스코드를 채워 넣어보도록 하겠습니다.

// about routing
// ctx는 express로 치면 res,rep가 담겨있는 객체라보면 됩니다.
// next는 다음 미들웨어로 넘겨주는 역할을 합니다.

const router = new Router();

router.get('/', (ctx, next) => {
  ctx.body = '홈';
});

app.use(router.routes());
app.use(router.allowedMethods());

여기서 next parameter는 아직 사용하지 않기때문에 생략하셔두 됩니다.  (ctx, next) --> (ctx)  

여기까지하고 한번 결과를 확인해보도록 할까요?

위와같이 나오셨다면, routing 기초설정이 완료되었습니다. 축하드려요 ^^

이번포스팅은 여기까지 작성하기로 하고, 다음 포스팅에서는 REST API를 위한 Routing 작업을 진행해 보도록 하겠습니다. 그리고 원래는 DB를 먼저 연결하기로 하였는데 포스팅 하는 사람의 순서 착각관계로 꼬여버린 DB연결까지 마무리 지어보도록 하겠습니다. 😉

TodoList

* REST API 구성

* Mongo DB 연결하기