사이드 프로젝트 10편 | 로그인 & 회원가입 페이지 (서버 구축, Koa, MongoDB, api 명세서)

 

💡 로그인 & 회원가입 페이지

• 현재 상황 :
  • 로그인&회원가입 페이지 마크업, CSS 스타일링 완료
  • 임시 서버 구축해서 postman으로 api 일부 테스트 완료
• 다음 과제 : 
  
  • 회원인증 api 만들기 (feat. JWT) 
  • 로그인 여부에 따라 헤더 UI 동적 표시 (로그인, 회원가입 -> 마이페이지, 로그아웃)

 

진행 과정 

서버 개발자님.. 회원인증 해주기로 했잖아요.. 돌아오세요...
서버 구축하기 (feat. Koa, JWT, 도망간 서버개발자님) 

상황 

• 서버 개발자님의 개인적인 사유로 인해 서버 개발 진행이 뒤로 밀려난 상황 (약 3개월?..) 
  • 간단한 api만 만들면 되므로 express기반 라이브러리 Koa로 임시 서버 구축하기로 결정
  • express보다 Koa가 커뮤니티와 생태계가 부족하지만 기능들이 단순해서 사용하기 좋고 나중에 기능 확장될 때쯤에는 서버가 대체될 것이기 때문에 간단하게 사용하기 좋은 Koa로 진행하기로 결정, 데이터베이스도 단순한 MongoDB로 진행

과정

🎈 1. 들어가기에 앞서 API 명세서를 작성한다.

아래 링크는 제가 작성한 API 명세서입니다.

https://docs.google.com/spreadsheets/d/1Mw29rgx13xgGz6MueBDWv8czGrRrUCyrVQhwevv-2TI/edit?usp=sharing

 

🎈  2. Koa를 설치 및 세팅한다.

아래 링크는 제가 서버 세팅을 정리해 둔 글입니다 

https://neuri.tistory.com/entry/Koa-Koa-%EC%9E%91%EC%97%85-%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-%EC%84%A4%EC%B9%98-ESLint-Prettier

 

🎈  3. MongoDB를 설치 및 세팅한다.

• MongoDB를 선택한 이유는 스키마가 recipe랑 user 2개뿐이고 MonogoDB는 NoSQL을 사용하기 때문에 SQL보다 진입장벽이 낮고 단순해서 이 데이터베이스를 고르게 되었습니다.

아래 링크는 제가 MongoDB 설치 및 세팅을 정리해둔 글 입니다.

https://neuri.tistory.com/entry/MongoDB-MongoDB-%EC%9E%91%EC%97%85-%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

 

🎈  4. mongoose 설치 및 적용한다.

1. mongoose는 Node.js환경에서 사용하는 MongoDB 기반 ODM(Object Data Modeling) 라이브러리입니다. 이 라이브러리는 데이터베이스 문서들을 자바스크립트 객체처럼 사용할 수 있게 해 줍니다.
2. dotenv는 환경변수들을 파일에 넣고 사용할 수 있게 하는 개발 도구입니다
   • mogoose를 사용하여 MongoDB에 접속할 때, 서버에 주소나 계정 및 비밀번호가 필요한 경우도 있습니다. 민감하거나 환경별로 달라질 수 있는 값은 코드 안에 직접 작성하지 않고, 환경변수로 설정하는 것이 좋습니다. 프로젝트를 깃허브나 깃랩등의 서비스에 올릴 때는. gitignore를 작성하여 환경변수가 들어있는 파일은 제외시켜 주어야 합니다.
3. mongoose와 dotenv를 설치
   
   • yarn add mogoose dotenv
4. .env 환경변수 파일 생성
   1. 환경변수에는 서버에서 사용할 포트와 MongoDB 주소를 넣어주겠습니다. 프로젝트 루트 경로에 .env 파일을 만들고 아래와 같이 입력합시다.

.env
PORT=4000
MONGO_URI=mongodb://localhost:27017

5.   src/index.js 에서 환경변수 조회하기

• dotenv를 불러와서 config() 함수를 호출합시다. Node.js에서 환경변수는 process.env 값을 통해 조회할 수 있습니다.

src/index.js
require('dotenv').config()
...

// 비구조화 할당을 통해 process.env 내부 값에 대한 레퍼런스 만들기
const {PORT} = process.env;
...

const port = PORT || 4000;
app.listen(port, ()=>{... }

6. mongoose로 서버와 데이터베이스 연결

• 연결할 때는 mongoose의 connect 함수를 사용합니다.

src/index.js
const mogoose = require('mongoose');
...

const = {PORT, MONGO_URI} = process.env;

mongoose
.connect(MONGO_URI)
.then(()=>{
     console.log('Connected to MongoDB');
    }).
    catch(e=>{
     console.error(e);
});

• 코드를 저장한 뒤 터미널에 다음과 같은 문구가 출력되면 데이터 베이스에 성공적으로 연결된 것입니다.
• Listening to port 4000
  Connected to MongoDB

src/index.js 전체 코드

require('dotenv').config();
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const mongoose = require('mongoose');

const api = require('./api');

const { PORT, MONGO_URI } = process.env;

mongoose
  .connect(MONGO_URI)
  .then(() => {
    console.log('몽고연결');
  })
  .catch((e) => {
    console.error(e);
  });

const app = new Koa();

const port = PORT || 4000;
app.listen(port, () => {
  console.log('Listening to port 4000');
});

 

 

 

 

 

Postman으로 api요청 확인하기

1. 목표 
   
   1. DB에 저장된 데이터 조회하기
      1. Koa 사용법은 생략하고 진행 과정만 올리도록 하겠습니다
2. 과정
   1. 🎈  recipe 스키마 설정하기
      1.  ※ mongoose에는 스키마(schema)와 모델(model)이라는 개념이 있습니다. 스키마는 컬렉션에 들어가는 문서 내부의 각 필드가 어떤 형식으로 되어 있는지 정의하는 객체입니다. 모델은 스키마를 사용하여 만드는 인스턴스로, DB에서 실제 작업을 처리할 수 있는 함수를 지니고 있는 객체입니다. 
      2. 스키마를 만들 때는 mongoose 모듈의 Schema를 사용하여 정의합니다. 각 필드 이름과 필드의 데이터 타입 정보가 들어있는 객체를 작성합니다
      3.  

         

   2. 🎈  모델 생성하기
      1. model() 함수를 사용합니다. 첫 번째 파라미터는 스키마 이름이고, 두 번째 파라미터는 스키마 객체입니다. 데이터베이스는 스키마 이름을 정해주면 그 이름의 복수 형태로 데이터베이스에 컬렉션 이름을 만듭니다.

      2. 

         recipes 이름으로 컬렉션 생성
   3. 🎈  DB에 데이터 넣고 조회하기 

src/index.js
require('dotenv').config();
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const mongoose = require('mongoose');

const api = require('./api');

const { PORT, MONGO_URI } = process.env;

mongoose
  .connect(MONGO_URI)
  .then(() => {
    console.log('몽고연결');
  })
  .catch((e) => {
    console.error(e);
  });

const app = new Koa();
const router = new Router();

router.use('/api', api.routes());

app.use(bodyParser());

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

const port = PORT || 4000;
app.listen(port, () => {
  console.log('Listening to port 4000');
});

recipe 경로의 api를 제작하기에 앞서 먼저 /api/recipe 경로를 위한 api 라우터를 연결하였습니다.

 

src/api/index.js

const Router = require('koa-router');
const recipe = require('./recipe');
const api = new Router();

api.use('/recipe', recipe.routes());

module.exports = api;

api라우터를 등록하고 recipe라우터를 연결하였습니다.

 

src/api/recipe/index.js

const Router = require('koa-router');
const recipeCtrl = require('./recipe.ctrl');

const recipes = new Router();

// 레시피 전체 조회
recipes.get('/', recipeCtrl.list);

module.exports = recipes;

/api/recipe로 GET요청이 왔을 때 recipeCtrl.list로 처리할 수 있도록 작성합니다.

src/api/recipe/recipe.ctrl.js

const Recipe = require('../../models/recipe');
const Joi = require('joi');

// 레시피 전체 조회
exports.list = async (ctx) => {
  try {
    const recipeList = await Recipe.find().exec();
    ctx.body = recipeList;
  } catch (e) {
    ctx.throw(500, e);
  }
};

해당 api로 GET요청이 오면 DB에 있던 Recipe를 recipeList에 저장한 후 ctx.body에 담아 응답합니다.

 

4. 🎈  postman으로 확인하기

설정해 놨던 api로 GET방식으로 조회한 결과 DB에 저장되어 있던 데이터가 잘 조회됩니다.