[Back-end🦁] #41 node.js - CRUD 서버 구축하기!

오늘은 실시간 강의가 아니라 코드라이언의 '일단 만드는 node.js'를 수강하는 날이었다!! 하루만에 노드를 다 듣는다고..? 백엔드에 ㅂ도 모르는데..? 싶었지만, 강의를 듣다보니 조금은 감이 왔다. 이 감을 놓치지 않고 복습해야할 것 같아서, 펫 프로젝트 부분은 복습 끝나고 이어서 듣기로 하고 오늘 들은 CRUD 서버 만들기를 복습해보려고 한다.

1. node.js

Node.js는 JavaScript 런타임 (실행할 수 있는 환경)이다.

• 이벤트 기반
• Non-blocking I/O
• Single Thread

-> 이 키워드에 대해서 제대로 설명할 수 있으면 제대로 이해하고 있는 것이다!! 자세한 내용은 #40 node.js 에 node.js의 특징과 장단점을 추가로 정리했다.

2. promise, async, await

콜백 지옥에서 빠져나오기 위한 문법들! #29 비동기 첫걸음 수업을 들었었지만, 아직 개발을 하면서 사용해 볼 기회는 없었어서 다시 정리를 하려고 한다.

Promise의 상태

• pending : 대기 상태
• fulfilled : 이행상태
• rejected : 실패 상태

1. Promise

function sayHello() {
    return new Promise((resolve, reject) => {
        const hello = "Hello Hello";
        resolve(hello);
        // reject(new Error());
    });
}

sayHello()
    .then((resolvedData) => {
        console.log(resolvedData);
      // 앞에서 return 하면 뒤의 then의 인자로 넘겨짐.
        return resolvedData;
    })
    .then((resolvedData) => {
        console.log(resolvedData);
        return resolvedData;
    })
    .then((resolvedData) => {
        console.log(resolvedData);
    })
    .catch((error) => {
        console.log(error)
    });

전에 다뤘던 것처럼 Promise를 생성하고 then, catch, finally 로 다음에 할 작업을 적어서 수행한다. 그러나 then을 너무 많이 쓰는 것도 읽기 어렵고 어떤 동작을 할 지 예측하기 힘들기 때문에 async, await를 사용하는 것이 좋다.

2. async, await

async function test() {
    // await : 해당 함수의 실행이 끝난 다음에 밑에 있는 코드를 실행하겠다. (동기)
    // await를 쓰려면 함수에 async를 명시해야 한다.
    const hello1 = await sayHello();
    console.log(hello1);
}
test();

3. 서버 구축 준비

• 서버 : 클라이언트의 요청에 대한 응답을 해주는 장치. literally server (요청에 맞는 정보를 serve 해 준다.)
• localhost : 현재 컴퓨터의 내부 주소 - 서버 개발 시 테스트 용으로 많이 사용한다. 1학년 프로젝트 과목 들을때, 아팟치 + php로 localhost 로그인창 만들었었는데 그게 서버를 켜고 접속한건지... 4년만에 알았다....
• port : 서버 내의 프로세스 번호 - 서버에서는 다양한 일을 멀티 프로세스로 수행하기 때문에, 포트 번호가 필요하다.

1. Postman

-> 브라우저로 접근하면 서버의 일부분에만 접근할 수 있기 때문에 Postman을 설치해서 사용한다.

method, url, body 를 넣고 요청을 보내면 응답이 어떻게 오는지 보여준다. 처음에는 얼레벌레 선생님을 따라 설치했는데, UI가 깔끔해서 보기 편하다.

2. 간단한 API 서버

클라이언트가 요청을 보내면, 요청에 대한 응답을 처리해서 보내는 식의 서버이다.

const http = require("http");

// http : 서버를 쉽게 구축할 수 있게 하는 모듈.
http
    // createServer : 서버를 구축하고, callback 함수를 통해 요청, 응답을 처리하는 함수.
    .createServer((request, response) => {
        // url에 따른 분기 처리
        if(request.url === "/") {
          
            // 응답에 200번(잘 들어가면 200)을 써서 준다.
            response.writeHead(200);
          
            // 응답이 끝날 때, "main url" 도 함께 준다.
            // end에 내용을 작성하면 http body에 이 내용이 들어간다.
            response.end("main url");
          
        } else if (request.url === "/upload") {
            response.writeHead(200);
            response.end("upload url");
        } else if (request.url === "/delete") {
            response.writeHead(200);
            response.end("delete url");
        } else {
            response.writeHead(404);
            response.end("Not found!!");
        }
    }).listen(3000, () => {
        console.log("port 3000 접속 완료");
    });

3. Express

1. npm (node package manager)

npm

• node.js로 이미 만들어놓은 패키지(프로그램)를 사용하기 위해서, 패키지를 설치하고 관리하기 위한 툴!
• 패키지 중에는 서로 의존성을 가진 것들도 있고, 버젼마다 기능이 다를 수 있기 때문에, package.json 을 통해 버젼, 의존성을 고려하여 관리해준다.

npm을 사용해서 프로젝트 폴더를 초기화하고, package에 대한 초기 설정을 해보았다.

npm init
# 을 진행하면, package.json 에 정보를 넣는 창이 뜬다.
# 대부분의 정보를 알아서 채워줘서 프로젝트 이름과 저자 이름을 제외하곤 그냥 비우고 진행했다.
# 입력한 정보를 기반으로 package.json 을 생성해준다.

// package.json
{
  "name": "npm_test", // 이름
  "version": "1.0.0", // 프로젝트 버젼
  "description": "", // 설명
  "main": "index.js", // 실행할 js 파일 이름
  "scripts": { // 테스트를 하기 위해 입력할 명령어
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello": "echo hello"
  },
  // git repository : 사용할 깃 저장소 주소
  // keywords : 나중에 찾을 때 사용할 키워드
  "author": "EJ",
  "license": "ISC"
}

npm run test # test command 에서 설정한 이름으로 부르면, 해당 동작을 한다.
npm run hello # hello

2. express

• express : 빠르고 간편한 웹 프레임워크.
• framework : 코드를 짤 수 있는 'frame', 기초 틀을 만들어주는 것. 코드를 체계적으로 관리할 수 있고, 유지보수가 쉽다. <-> library : 코드를 이미 만들어 놓은 것. 가져다 쓰기만 하면 된다.
• express-generator : express의 기본 구조를 만들어 준다.

express 기본 디렉토리 구조

# 처음에는 이게 무슨 말인가 했는데, 복습하면서 다시 보니까 이해가 간다.
bin/www - 서버를 실행하는 파일. 사용할 포트 번호를 여기서 지정 가능.
public/images js css - 리소스 파일들
routes - 페이지 라우팅과 관련된 파일 저장, 실제 서버 로직 작성 # 어떤 url을 입력했을 때 어떤 페이지를 보여주고, 어떤 동작을 할 것인지를 말하고, 실제로 우리 코드도 거의 여기서 작성했다.
views - 템플릿 파일 .jade .ejs : HTML 안에 <% js %> 코드를 넣을 수 있게 만들어진 형식의 파일이다. #.ejs가 html과 더 유사해서 우리는 .ejs를 사용했다.
app.js - 핵심적인 서버 역할. 라우팅의 시작점
package.json - 의존성/버젼 관리

express 를 설치하고, 서버를 실행해 보았다.

npm install express
# package-lock.json : 설치한 모든 패키지 파일 버젼 정보 저장
# node-modules : 모든 의존성 있는 패키지들을 해당 폴더에 넣어서 관리
npm install -D nodemon
# -D : 개발 환경에서만 사용 (실제 배포 환경에서는 사용 X)
sudo npm install -g express-generator nodemon
# -g : global 모든 패키지에서 공통적으로 사용. 한번 설치해서 여러가지 프로젝트해서 사용
sudo npm install -g express-generator

express --ejs first-project # views 파일을 ejs 형식으로 사용하겠다. 
cd first-project
npm install # package.json에 있는 모든 것 설치
npm start # express로 구성된 서버 실행.

index.ejs 를 수정해서 express project 기본 문구를 확인할 수 있다. 원래는 변경사항을 적용할 때 마다 서버를 껐다 켜야 하는데, nodemon ./bin/www 으로 서버를 실행하면 서버를 껐다 켜지 않아도 변경 사항이 적용된다.

  // 이렇게 바꾸면 npm start로 nodemon을 사용할 수 있다.
  "scripts": {
    "start": "nodemon ./bin/www"
  },

3. Routing

routing : 요청에 따른 처리를 해주는 것. 길 찾기!
express 환경에서는 routing 을 효율적인 방법으로 설계할 수 있다.

// app.js
// url이 / 이면 indexRouter로, /users면 usersRouter에 해당 요청을 보낸다. 
// 뒤로 url이 더 붙으면 index.js, users.js 안에서 코드를 작성해서 처리한다. 4에서 구현할 것임!
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

app.use('/', indexRouter);
app.use('/users', usersRouter);

4. HTTP method

CRUD (서버의 기본)

• POST : CREATE - 요청된 자원을 생성
• GET : READ - 요청된 자원을 읽음
• PUT : UPDATE - 요청된 자원을 수정
• DELETE : DELETE - 요청된 자원을 삭제

// GET, POST, PUT, DELETE 메서드로 data를 보내고 받아서 처리해보는 것!
var express = require('express');
var router = express.Router();

// post, put, delete를 할 때 data를 저장하기 위한 배열.
let arr = [];

/* GET home page. */
router.get('/read', (req, res) => {
  res.status(200).json({
    message: "read 성공"
  });
});

// POST method
router.post('/create', (req, res) => {
  // req.body.data 는 request에서 보내는 이름으로 가져오면 된다. 
  // request에 보낸게 { "key": "123" } 이면 req.body.key로 뽑아야한다.
  // const data = req.body.data; 
  const { data } = req.body; // 구조분해할당으로 한번에 뽑기
  arr.push(data);
  res.status(200).json({
    message: "create 성공",
    result: arr // response에 data도 같이 담아서 보낸다.
  });
});

// PUT method
router.put("/update/:id", (req, res) => {
  // update 하려면 배열 안의 데이터가 몇번째인지를 알아야 함.
  // router를 이용해서 알려주는 과정.
  const { id } = req.params; // url에 포함된 정보를 가져올 때는 params에서 가져온다. /update/0 이렇게 날리면 id = 0이 됨.
  const { data } = req.body;
  arr[id] = data;
  res.status(200).json({
    message: "update 성공",
    result: arr
  });
});

// DELETE method
router.delete("/delete/:id", (req, res) => {
  const { id } = req.params;
  arr.splice(id, 1); // 해당 id부터 하나만 삭제. splice를 서버에서도 쓸 수 있구나..!!!
  res.status(200).json({
    message: "delete 성공",
    result: arr
  });
});

module.exports = router;

5. middleware

request와 response 중간에서 처리해주는 함수들.

ex) 로그인 체크 : create, delete, update 같은 로그인 했을 때만 수행할 수 있는 method를 날렸을 때, 각각에 대해서 로그인을 체크하는 함수를 만들지 않는다. 3개 메서드 전체에 대해 하나의 로그인 체크하는 함수를 만들어서 대응한다. 그 하나의 함수를 middleware 라고 한다.

// app.js
// 어떤 요청이 들어와도 middleware 함수는 한번은 실행이 된다.
app.use((req, res, next) => {
  console.log("middleware");
  next();
});

어떤 요청을 해도 실행이 되는 모습!

// middleware 함수.
// module 폴더에 만들기.
const loginCheck = (req, res, next) => {
    const userLogin = true;
    if (userLogin) {
        next();
    } else {
        res.status(400).json({
            message: "login fail!!",
        });
    }
};

module.exports = loginCheck;

여기서 module export 하는걸 export - import로 바꿔보고 싶은데 안돼서 한참 헤맸는데... 내가 잘못한 게 아니었다... package.json을 변경해야 하는 거였다...

// index.js
router.get('/', loginCheck, (req, res) => {
  res.status(200).json({
    message: "login success",
  });
});

6. multer

multer package - form-data 파일을 업로드할 때 유용한 패키지.

이미지 업로드 서버 만들기 실습을 진행했다.

npm install multer

upload.single("image");
// upload : 파일 업로드 방식을 upload 에 저장.
// single("image") : 파일 1개를 업로드. image라는 form data를 전송하여 업로드.
// 업로드 된 파일은 req.file로, 나머지 데이터는 req.body 로 받아오면 된다.

// module/imageUpload.js
const multer = require("multer");
// const upload = multer({ dest : "uploads/" });
// 파일 저장 경로, 파일 이름을 조정하기 위한 middleware 함수.
const storage = multer.diskStorage({
    destination : (req, file, cb) => {
      // public/images 에 저장.
        cb(null, 'public/images/');
    },
    filename : (req, file, cb) => {
      // file 이름 지정.
        cb(null, file.originalname);
    }
});
const upload = multer({ storage : storage });

module.exports = upload;

// index.js
// upload 를 통해서 이미지를 보냈을 때, middleware (multer 패키지의 함수) 를 이용해서 이미지 업로드.
router.post("/upload", upload.single('image'), (req, res) => {
  // const file = req.file;
  // console.log(file);
  res.status(200).json({
    message : "upload success",
  })
});

7. ejs (Embedded JavaScript Template)

HTML로 만들던 정적 웹페이지에서 벗어나, JavaScript 변수를 View 파일에서도 사용하여 동적 웹페이지로 기능하게 하는 형식. 같은 템플릿을 쓰는데 내용만 바뀌는 경우에 사용하기 좋다. <% %> 안에 js 코드를 넣으면 된다.

// routes/template.js
const express = require("express");
const router = express.Router();

router.get('/ejs', (req, res) => {
    res.render("template", { data: "test data" });
});

module.exports = router;

// localhost:3000/template/ejs
// app.js
const templateRouter = require('./routes/template');

app.use('/template', templateRouter);

<!-- view/template.ejs-->
<!DOCTYPE html>
<html lang="ko">
<head>
    <title></title>
</head>
<body>
    <% include ./layout/navbar.ejs %>
    <%= data %> <!-- = 붙이면 data가 문자열이 아니라 js 변수가 됨.-->
      
    <% if(false) { %>
        <div>ejs working</div>
    <% } else {  %>
        <div>ejs not working</div>
    <% } %>
    <div>ejs template</div>
</body>
</html>
      
<!-- view/layout/template.ejs-->
<nav style="height: 30px; background-color: skyblue; width: 100%;">
    nav
</nav>

8. express-session

express-session : express 환경에서 세션을 쉽게 사용할 수 있게 해주는 패키지

세션 : 로그인을 할 때, 사용자가 id와 pw를 보내면 서버가 응답을 보냄. 그치만 통신 특성상 이 상태를 저장하지 않기 때문에, 로그인 후에 로그인 정보가 저장되어 있지 않아서 업로드를 할 때마다 로그인을 해야한다. 그래서 세션을 사용해서 서버는 세션에 정보를 가지고 있다가, 해당 사용자가 로그인 되어있는지를 파악한다.

npm install express-session

// app.js
const session = require("express-session");

var app = express();

app.use(session({
  secret: "first project", // 세션 암호화를 위해 필요한 값 -> 세션 하이재킹 공격에 대비하여 해시에 사용된다고 한다! salt로 사용되는걸까? -> 찾아본 결과 맞다고 한다!
  resave: false, // 세션이 변경되지 않으면 저장하지 않는다.
  saveUninitialized: true, // 세션이 저장되기 전에 초기화
}));

// localhost:3000/users
// localhost:3000/users/login/lim/asdf 로 로그인 후에 
// localhost:3000/users 로 다시 돌아가면 정보를 가지고 있다.
// routes/user.js : 로그인 관련 기능이니 user로!
var express = require('express');
var router = express.Router();

// 로그인 시 DB에 user id pw가 있는지 없는지 확인하는 과정을 거쳐야 한다.
const userInfo = {
  lim: {
    password: "asdf",
  },
  kim: {
    password: "qwer",
  },
};

router.get("/", (req, res) => {
  const session = req.session;
  res.render('index', {
    username: session.username,
  });
});

/* GET users listing. */
router.get('/login/:username/:password', (req, res) => {
  const session = req.session;
  const {username, password} = req.params;
  if(!userInfo[username]) {
    res.status(400).json({
      message: "user not found",
    });
  }

  if(userInfo[username]["password"] === password) {
    // session에 저장
    session.username = username;
    res.status(200).json({
      message: "login success",
    });
  } else {
    res.status(400).json({
      message: "user pw incorrect!!",
    });
  }
});

router.get('/logout', (req,res) => {
  const session = req.session;
  if(session.username) {
    req.session.destroy((err) => {
      if (err) {
        console.log(err);
      } else {
        res.redirect("/users");
      }
    });
  } else {
    res.redirect("/users");
  }
})

module.exports = router;

4. DB

• DB : 데이터를 구조화하여 저장시켜 놓은 집합체
• Query : DB를 관리 하거나 정보를 요청하기 위한 명령어

1. SQL vs No SQL

SQL(Structured Query Language)

• 쿼리를 구조화 해둔 것. 스키마가 엄격하게 존재한다.
• schema : 어떤 구조로 어떤 제약조건으로 저장되어야 하는지 정의한 것.
• 장점 : 명확하게 정의된 스키마로 인해 데이터를 중복 없이 저장할 수 있음.
• 단점 : 유연하지 않다. 스키마 수정하기가 어렵다.

no SQL (Not Only SQL)

• 스키마가 없다. 따라서 구조화된 관계도 없다.
• JSON 형태로 저장한다.
• 장 : 유연하고 속도가 빠르다.
• 단 : 데이터에 일관성이 없다.

2. mongoDB

no SQL의 대표적인 DB이다. 맨날 몽고디비 몽고디비 할 때 그게 뭐여 백엔드랑 관련된건가봐 하고 말았는데, 실체를 알게 되니까 즐거웠다.

특징

• Document Oriented : document 단위로 데이터를 저장한다. document 집합은 collection
• schema 제약 X : no SQL 의 대표적인 DB
• json 형태 : Node.js 호환성이 좋다.

mongoDB 호스팅 업체 중 atlas를 이용해서 클러스터를 생성했다.
생성 시 유의 점 : 개발 단계에는 어떤 IP 주소에서도 접근할 수 있게 해두자!

클러스터 생성 후, DB를 쉽게 관리하기 위해서 compass GUI 툴로 내 로컬 컴퓨터와 atlas 쪽 데이터실에 생성된 나의 mongoDB 클러스터를 연결했다. 이 때 username, password를 하나 만들어서 접속해야 한다!

3. mongoose + CRUD 서버 만들기

mongoose : mongoDB ODM (Object Document Mapping)

• mongoDB를 더욱 사용하기 쉽게 해주는 패키지.
• Document를 조회할 때 document를 js의 Object로 바꿔주는 역할을 한다.

npm install mongoose

// bin/www
const dbConfig = require("../config/dbConfig.json"); // 키관리

/**
 * Get port from environment and store in Express.
 */

const mongoose = require("mongoose");
const db = mongoose.connection;
db.on("error", console.error);
db.once("open", () => {
  console.log("Connected to mongodb server");
});

// connect your application을 통해 연결.
mongoose.connect(
  `mongodb+srv://ddosang:${dbConfig.password}@first-project.7rouh.mongodb.net/${dbConfig.name}?retryWrites=true&w=majority`,
  { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false  }
)

schema 작성

스키마가 없는게 몽고디비의 장점이지만, 협업을 할 때는 위험성이 있으므로 몽구스에서는 스키마를 작성한다.

// model/post.js
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const postSchema = new Schema({
    title: String,
    content: String,
    create_date: { type: Date, default: new Date() }, // default 설정 가능.
});

module.exports = mongoose.model("post", postSchema);

// routes/index.js
const postModel = require("../model/post");

router.post('/', async (req, res) => {
  const { title, content } = req.body;
  const post = new postModel({
    title: title,
    content: content,
  });

  try {
    // 응답을 하는 시점은 동기적이어야한다.
    const result = await post.save();
    res.status(200).json({
      message: "upload success",
      data: result,
    });
  } catch(error) {
    res.status(500).json({
      message: error,
    });
  }
});

// 게시물 제목으로 조회
router.get('/', async (req, res) => {
  try {
    const result = await postModel.find({ title : "first" });
    res.status(200).json({
      message: "read success",
      data: result,
    });
  } catch(error) {
    res.status(500).json({
      message: error,
    });
  }
});

// 게시물 id로 조회
router.get('/:id', async (req, res) => {
  const { id } = req.params;
  try {
    const result = await postModel.findById(id);
    res.status(200).json({
      message: "detail success",
      data: result,
    });
  } catch(error) {
    res.status(500).json({
      message: error,
    });
  }
});

router.put("/:id", async (req, res) => {
  const {id} = req.params;
  const {title, content} = req.body;
  try {
    const result = await postModel.findByIdAndUpdate(id, {
      title: title,
      content: content,
    }, {
      // 업데이트 후에 업데이트 된 게시물을 반환할지. 없으면 업데이트 전 게시물을 반환함.
      new: true, 
    });
    res.status(200).json({
      message: "update success",
      data: result,
    });
  } catch(error) {
    res.status(500).json({
      message: error,
    });
  } 
});


// delete
router.delete("/:id", (req, res) => {
  const { id } = req.params;
  try {
    await postModel.findByIdAndDelete(id);
    res.status(200).json({
      message: "delete success"
    });
  } catch(error) {
    res.status(500).json({
      message: error
    });
  }
});

postman으로 요청을 날려서 mongoDB에 쌓이는 것을 확인해 보았다.

출처

코드라이언 일단 만드는 node.js - 이동훈 강사님