CRUD (1) - 개념 및 회원가입 구현 실습

☄️CRUD : 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능

 

CRUD	ACTION	HTTP Method	SQL
CREATE	생성	POST	INSERT
READ	조회	GET	SELECT
UPDATE	수정	PUT	UPDATE
DELETE	삭제	DELETE	DELETE

🌪 CRUD 실습 

 

1. Express 프로젝트 생성 (express crud -> cd crud -> npm i)

2. {{uri}}/user 경로 생성하기

2-1. crud/app.js에 있는 8줄, 23줄 없애기

2-2. crud/routes/index.js의 router.use에 user등록

 

3. 기존  index.js 파일

var express = require('express');
var router = express.Router();

router.use("/user", require("./user"));

module.exports = router;

4. 기존에 있던 users.js 파일을 지우고 새로운 user.js 파일 생성

const express = require("express");
const router = express.Router();

router.post('/signup', (req, res) => {

});

module.exports = router;

 

💥 파일을 수정할 때 마다 서버를 켰다 껐다 하기 귀찮음 ! 

nodemon: 프로젝트를 모니터링하고 있다가, 파일이 수정된 게 감지되면 서버를 자동으로 재시작해주는 툴

 

nodemon 전역 설치 (한 번만) 후 프로젝트 경로에서 nodemon으로 시작 

 

🌈CURD Router 

 

router.METHOD('path' , (req, res) => {...});

- Method : .get(...), .post(...)

- path : 접근할 path 설정

- request : request로 전달받은 데이터들이 담겨있음

- response : response로 전달할 데이터를 담음

 

- (req, ...

• req.query : {{url}}?member=server , req.query.member === server
• req.params : {{url}}/post/:idx , req.params.idx === 23
• req.body : {“name”: “Suvera", “part”: “server”} , req.body.name === “Suvera”
• req.headers
• req.file

- res) => ...

• res.status(xxx)send(json)
• .status : status code를 정수로 입력
• .send() : json 형식으로 response body 에 입력 , 이때 규칙적인 데이터로 보내줘야 클라이언트와의 통신이 원활 

 

⚡️실습 

1 단계 : 요청 받고 응답주기

2 단계 : 에러 처리 

3 단계 : JSON 응답

4 단계 : 모듈화

 

1단계 : 요청 & 응답

 

request 데이터 가져오기 - user.js에 유저 추가하기 - response 데이터 내보내기 

const express = require("express");
const router = express.Router();
const users = require("../dbMockup/user");

router.post('/signup', (req, res) => {
    const { id, name, password, email } = req.body;

    const newUser = { id, name, password, email };

    users.push(newUser);
    
    res.status(200).send({ status: 200, message: "success", data: newUser});
});

module.exports = router;

API를 설계,구축,테스트 할 수 있는 협업 플랫폼인 POSTMAN 

회원가입 요청 및 응답이 잘 되는지 확인 완료 !

 

2단계 : 에러처리

1. request data 체크 

2. 해당 이메일을 가진 유저가 이미 있는지 ? 

    // request data 확인 - 4개 중 하나라도 없다면 Bad Request 반환
    if (!id || !name || !password || !email) {
        return res.status(400).send({ status: 400, message: "BAD REQUEST"});
    }

    // 해당 이메일을 가진 유저가 이미 있을 경우 Already Email  반환
    const alreadyUser = users.filter(user => user.email === email).length > 0;
    if (alreadyUser) {
        return res.status(409).send({ status: 409, message: "ALREADY EMAIL"});
    }

.filter() : 주어진 배열의 조건을 통과하는 모든 요소를 모아 새로운 배열로 반환

 

3단계 : JSON 응답 (일관된 형식)

- 일관된 응답 형식을 위해 util.js 파일 만들기 

const util = {
    success: (status, message, data) => {
        return {
            status,
            success: true,
            message,
            data,
        };
    },
    fail: (status, message) => {
        return {
            status,
            success: false,
            message,
        };
    },
};

module.exports = util;

return res.status(400).send(util.fail(400, "BAD REQUEST"));
res.status(200).send(util.success(200, "회원가입 성공", newUser));

클라이언트와의 원활한 소통을 위해 형식 맞춰주기 

 

4단계 : 모듈화

자주 + 반복적으로 사용하는 message, code, util 따로 파일을 생성해 깔끔하게 정리하기 !

responseMessage.js

statusCode.js

 

같은 방법으로 로그인, 업데이트 , 삭제 구현 실습 해보기 !