[Back-end🦁] #42 node.js - SNS 서버 만들기

또상·2021년 12월 28일

JavaScript back node.js

front-end

목록 보기

58/58

회원가입, 로그인
글쓰기 / 조회 / 수정 / 삭제
좋아요, 댓글
실시간 채팅 (socket io)

1. 프로젝트 환경 설정

1. package 설치

npm install multer multer -s3 mongoose socket.io jsonwebtoken bcrypt aws-sdk
# multer : 이미지 업로드
# multer -s3, aws-sdk : 이미지 업로드를 우리 서버가 아니라 아마존 S3 저장소에 업로드하기 쉽게 해주는 패키지.
# mongoose : mongoDB 사용을 쉽게 해줌.
# socket.io : 실시간 채팅 서버를 쉽게 해주는!!
# jsonwebtoken : 로그인 세션 대신 사용자 로그인 인증을 JWT 로 진행
# bcrypt : 비밀번호 해시함수 적용을 위한 패키지

2. html, css 파일

프론트엔드 ejs, css 파일은 전부 복붙하고(!!!) 들어갔다. 백엔드 강의라서 자세히는 몰라도 된다고 하셨지만... 우리는 프론트엔드 과정이니까 알아야겠지... 그치만 서버 테스트를 위한 간단한 구조였어서 어려운 구조는 없을 듯 하다! ejs 파일이라 자바스크립트 로직 들어가는 부분만 더 보면 될듯!!

3. routes 경로 지정.

express 기본 설정인 routes/users.js 삭제, app.js에서 users.js 관련 코드 삭제한다.

routes/auth/index.js, routes/posts/index.js 로 회원가입, 로그인과 게시물 관련 코드를 다른 폴더로 관리한다. 개발 중에는 파일을 왔다갔다 해야해서

// routes/index.js
// 어제 프로젝트는 app.js에 바로 나눠서 처리 했었는데
// routes 폴더를 정리하면서 app.js에서 어떤 로직이 필요할 때, index.js로 가게 만들고 거기서 다시 나뉘게 처리를 했다. 
var express = require('express');
var router = express.Router();

const authRouter = require('./auth');
const postRouter = require('./posts');
const postCtr = require('../controller/postCtr');

// 게시물 리스트 조회 : 메인화면에 들어가자마자 게시물 리스트가 뜨니까.
router.get("/", postCtr.list);

// auth, posts 관련 내용은 해당 라우터로 이동하도록.
router.use('/auth', authRouter);
router.use('/posts', postRouter);

module.exports = router;

// routes/auth/index.js
// 회원가입, 로그인 관련 로직을 처리.
const express = require("express");
const router = express.Router();

// 로직을 아직 구현하지 않아서 페이지만 먼저 보여주는 식으로 처리.
router.get('/login', (req, res) => {
    res.render("login");
});
router.get('/register', (req, res) => {
    res.render("register");
});

module.exports = router;

// routes/posts/index.js
// 게시물 CRUD, 좋아요, 댓글 로직을 담당.
const express = require("express");
const { route } = require("..");
const router = express.Router();

// 역시 아직 로직을 짜지 않았으므로 화면을 보여주기만 한다.
router.get('/upload', (req, res) => {
    res.render('upload');
});
router.get('/:id', (req, res) => {
    res.render('update');
});

module.exports = router;

4. mongoDB 연결

어제도 했었기 때문에, 자세한 설명은 생략한다.

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

mongoose.connect(
  `mongodb+srv://ddosang:${dbConfig.password}@first-project.7rouh.mongodb.net/${dbConfig.name}?retryWrites=true&w=majority`
);

5. schema 작성

mongoDB의 장점은 noSQL이지만 SQL처럼 빡빡하게는 아니더라도 형식을 정해두어야 요청/응답, 협업 관리가 편하기 때문에 잡았다. 크게 게시물 관련 모델과 로그인 관련 모델이 있는데, 수업 내용을 따라갈 때는 아 이거 필요하겠네~ 싶은데 혼자 짜보면 뭔가 놓치는 부분이 있을 것 같다는 생각이 들었다.

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

// 게시글 : 제목, 내용, 사진, 업로드 날짜, 좋아요 수, 좋아요 한 사용자 목록, 댓글 목록, 게시글을 쓴 사용자 를 가지고 있다.
const postSchema = new Schema({
    title: String,
    content: String,
    image: String,
    publishedDate: String,
    likeCount: {
        type: Number,
        default: 0
    },
    // 댓글 단 user 정보를 Array로 관리하는게 머리로는 이해가 가는데 이렇게 타입, default를 주니까 신기하다..
    likeUser: {
        type: Array,
        default: []
    },
    comment: {
        type: Array,
        default: []
    },
    user: {
        // user 정보를 기반으로 가져옴.
        _id: mongoose.Types.ObjectId, 
        username: String
    }
});

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

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

// 로그인은 유저 이름과 비밀번호가 있으면 된다.
const authSchema = new Schema({
    username: String,
    password: String
});

module.exports = mongoose.model("auth", schema);

2. 게시물 CRUD

게시물 생성
게시물 전체 조회 / 게시물 하나 조회
게시물 수정
게시물 삭제

1. AWS s3

저번에는 이미지를 서버에 저장을 했었지만, 이번에는 AWS S3에 업로드를 하고 받아왔다. -> multer-s3 패키지 사용.

그런데.. 내 AWS 계정의 free-tier 기간이 한 달 차이로 끝나서... 그냥 지켜보면서 코드와 로직을 이해하는 방향으로 수업을 들었는데, 아마 서버 켜고 실습을 했으면... 오류 잡느라 시간 내로 강의를 다 못들었을 것 같다.

AWS 가입 후 s3 버킷 생성
사용자 추가 : 권한에서 기존 정책 직접 연결 -> AmazonS3FullAccess - 엑세스키, 비밀 엑세스 키 잘 관리하기!!!!!!! ~~어제 gitignore에 config 추가하는거 잊어버려서 또 부랴부랴 깃헙에 커밋 이력 삭제하는 방법 찾고.. 난리였다.~~

// module/multer.js
// AWS S3 에 대한 설정을 담당하는 모듈
const mutler = require("multer");
const multerS3 = require("multer-s3");
const aws = require("aws-sdk");
aws.config.loadFromPath(__dirname + "/../config/s3Info.json"); // AWS 키를 저장한 파일 s3Info
const s3 = new aws.S3();


// upload를 할 때 사용하는 multer 모듈
const upload = multer({
    storage: multerS3({
        s3: s3,
        bucket: 'bucketname',
        acl: 'public-read-write',
        key: (req, file, cb) => {
            cb(null, Date.now() + "." + file.originalname.split(".").pop()); // 파일 이름을 유니크한이름.확장자 형태로
        }
    })
});

module.exports = upload;

2. controller

routes 폴더 안에 있는 것에는 정말 route에 관한 코드만 작성하고, 로직은 Controller로 빼서 작성했다. ~~MVC가 생각났다..~~ 어제 했던 코드도 controller에서 로직을 담당하는 구조로 바꿔보면 좋을 것 같다.

// controller/postCtr.js
// 게시물 CRUD 로직을 담당하는 컨트롤러
const Post = require("../model/post");

// Date를 2021-12-28 형식으로 바꿔주는 함수.
const formatDate = (date) => {
    let d = new Date(date);
    let month = ("" + (d.getMonth() + 1)).padStart(2, "0");
    let day = ("" + d.getDate()).padStart(2, "0");
    let year = d.getFullYear();
  
    return [year, month, day].join('-');
}

// 게시물 컨트롤러 객체
const postCtr = {
  
    // 1. create : upload func
    upload: async (req, res) => {
        const { title, content } = req.body;
        const image = req.file.location; // image 는 S3에서 불러온다.
        const publishedDate = formatDate(new Date());
        const post = new Post({
            title: title,
            content: content,
            image: image,
            publishedDate: publishedDate,
            user: req.userInfo // 항상 jwt 토큰을 요청에 포함해서 보내기 때문에 req에 userInfo가 있다.
        });

        try {
            await post.save();
            res.redirect("/");
        } catch(error) {
            res.status(500).send("upload error!");
        }
    },
  

    // 2. read : 메인 페이지에서 글 전체 list 조회 해야함.
    list : async (req, res) => {
        const posts = await Post.find({}); // 전체 게시물 가져올거라 {}로 찾는다.
        res.render("index", { postList: posts });
    },
  
    // 2. read : 글 하나하나를 조회
    detail: async (req, res) => {
        const { id } = req.params;
        const post = await Post.findById(id);
        res.render("detail", { post : post });
    },
  
    // 3. update : update 할 때 update 페이지에 기존 글의 정보가 넘어오도록
    updateLayout: async (req, res) => {
        const {id} = req.params;
        const post = await Post.findById(id);
        res.render("update", { post : post });
    },
  // 업데이트 버튼 누르면 업데이트 됨.
    update: async (req, res) => {
        try {
            const { id } = req.params;
            const { title, content } = req.body;
            await Post.findByIdAndUpdate(
                id, 
                { title, content }, 
                { new: true } // 업데이트 되면 새로 받아올건지. 안하면 기존 post를 받아오게 됨.
            );
            res.redirect("/");
        } catch(error) {
            res.status(500).send("update error");
        }
    },
  
    // 4. delete
    delete: async (req, res) => {
        try {
            const {id} = req.params;
            await Post.findByIdAndDelete(id);
            res.redirect("/");
        } catch(error) {
            res.status(500).send("delete error");
        }

    }
}

module.exports = postCtr;

3. routes/posts/index.js

// routes/posts/index.js
const express = require("express");
const { route } = require("..");
const router = express.Router();
const upload = require("../../module/multer");
const postCtr = require('../../controller/postCtr');

// 1. create
router.get('/upload', checkUser, (req, res) => {
    res.render('upload');
});

// 2. read 
router.get("/", postCtr.list);  // 게시물 전체 조회.
router.get("/:id", postCtr.detail);  // 게시물 하나 조회

// 3. update
// web에서 form 형태로 데이터를 전송하면 get / post 두가지 밖에 쓸 수 없기 때문에
// update에 PUT이 아니라 POST 메서드를 사용하여 요청 보냄.
router.post('/update:id', postCtr.updateLayout);
router.post('/', upload.single("image"), postCtr.upload);
router.post('/update:id', postCtr.update);

// 4. delete
router.post('/delete/:id', postCtr.delete);

module.exports = router;

3. JWT

어제 사용했던 세션은, 서버에서 세션을 가지고, 클라이언트가 로그인 되어있는지 아닌지 확인한다. 그런데 세션은 저장 데이터가 많아지면 서버에 부하가 걸리기 때문에 클라이언트가 쿠키를 통해 정보를 가지고 있게 하기도 한다. 하지만 쿠키는 보안이 취약해서 id, pw를 담는게 아니라 자동로그인을 할 수 있는 정보를 담아둬야 한다.

JWT는 json Web Token으로 json 형태의 토큰을 서버가 아니라 브라우저(쿠키)에 저장해서 인증할 수 있게 한다.

구조

header : 토큰의 유형(JWT), 암호화 알고리즘 포함
payload : 토큰에 담을 정보 포함
signature : secret key를 이용해서 암호화

클라이언트가 id, pw 를 서버에 보내고 인증이 되었다면, 서버는 자신의 비밀키를 이용해서 JWT 토큰을 암호화해서 보낸다. 그러면 클라이언트는 JWT를 쿠키나 브라우저에 저장해놓고, 모든 요청에 JWT 토큰을 같이 보낸다. 그러면 서버가 토큰을 복호화해보고 정보가 맞으면 그에 맞는 응답을 한다.

1. 로그인

로그인 - 토큰 발급
사용자 확인 - 토큰 확인
로그아웃 - 토큰 삭제

1. routes/auth/index.js

// routes/auth/index.js
const express = require("express");
const router = express.Router();
const authCtr = require('../../controller/authCtr');

// 회원가입
router.get('/register', (req, res) => {
    res.render("register");
});
router.post('/register', authCtr.register);

// 로그인
router.get('/login', authCtr.login);

// 로그아웃
router.post("/logout", (req, res) => {
    res.clearCookie("access_token");
    res.redirect("/");
});

module.exports = router;

2. controller/authCtr.js

// controller/authCtr.js
const bcrypt = require("bcrypt");
const User = require('../model/auth');
const secretKey = require('../config/secretKey.json');
const jwt = require("jsonwebtoken");

const authCtr = {
  
    // 회원가입
    register: async (req, res) => {
        const { username, password } = req.body;

        const exist = await User.findOne({ username: username }); // username 과 일치하는 항목이 있는지
        // user가 있으면 회원가입 불가능
        if (exist) {
            res.status(504).send("user exists");
            return
        }

        const user = new User({
            username: username
        });
        const hashedPassword = await bcrypt(password, 10); // hash 10번
        user.password = hashedPassword;
        await user.save();
        res.redirect('/');
    }, 
  
    // 로그인
    login : async (req, res) => {
        const { username, password } = req.body;

      // 로그인이니까 유저를 찾아와서.
        const user = await User.findOne({ username : username });
        if (!user) {
            res.status(500).send("user not found");
            return;
        }

      // 나는 === 으로 비교할 생각을 했는데, compare라는 메서드가 있었다. 근데 hash 10번했는데 그것도 반영이 되는게 신기하다.
        const valid = await bcrypt.compare(password, user.password); 
        if (!valid) {
            res.status(500).send("password invalid");
            return;
        }

        // 성공. JWT 토큰 발급해서 보낸다.
        // secretKey도 config에 있다. 암호화할 키 값이다.
        const data = user.toJSON();
        delete data.password;
        const token = jwt.sign({
            _id: data.id,
            username: data.username
        }, secretKey.key,
        {
            // 실무에서는 30분 정도로 짧게 줘야하지만 테스트용이니 길게
            expiresIn: "7d"
        });

        res.cookie("access_token", token, {
            maxAge: 1000 * 60 * 60 *  24 * 7,
            httpOnly: true
        });
        res.redirect("/");
    }
};

2. 사용자 정보 확인

사용자 정보는 CUD에서 모두 확인해야 하므로, middleware 함수를 만들어서 이용한다.

// app.js
const jwtMiddleware = require('./module/jwtMiddleware');
// 모든 동작을 할 때 토큰을 확인한다.
app.use(jwtMiddleware);

<!-- navbar.ejs -->
<!-- 로그인이 되어 있으면 버튼이 글쓰기로 안되어 있으면 로그인으로 바뀌게-->
<div class="navbar_menu">
    <div style="font-weight: bolder;font-size:1.5rem;">
        <a style="color:#000000;text-decoration: none;" href="/">SNS</a>
    </div>
    <div class="auth_wrap">
        <% if (isAuthenticated.username) { %>
        <button onclick="location.href='/posts/upload'" style="width: 100%; margin-top: 0" class="ui secondary button">
            글쓰기
        </button>
        <form action="/auth/logout", method="POST">
            <button type="submit" style="margin-top: 0;" class="ui secondary button">로그아웃</button>
        </form>
        <% } else { %>
        <button onclick="location.href='/auth/login'" style="width: 100%; margin-top: 0" class="ui secondary button">
            로그인
        </button>
        <% } %>
    </div>
</div>

// modlue/jwtMiddleware.js
// 사용자 확인 기능
const  jwt = require("jsonnwebtoken");
const secretKey = require("../config/secretKey.json");

const jwtMiddlware = async (req, res, next) => {
    const token = req.cookies.access_token;
    if(!token) {
        // isAuthenticated 에 빈 객체를 넘김 (토큰이 없으니까)
        res.locals.isAuthenticated = {};
        return next();
    }

    try {
        // 토큰이 있으면 검증.
        const decoded = jwt.verify(token, secretKey.key);
        req.userInfo = {
            _id: decoded.id,
            username: decoded.username
        };
        res.locals.isAuthenticated = { username : decoded.username };
        return next();
    } catch(error) {
        res.status(500).send("jwt error");
    }
}

사용자 정보를 확인한 후에만 글쓰기를 할 수 있게.

// module/checkUser.js
// posts/index.js 의 글쓰기, 수정, 삭제 에 middleware로 checkUser 붙이기.
const checkUser = (req, res, next) => {
    if (!req.userInfo) {
        res.status(400).send("user not login!");
        return;
    }
    return next();
}

module.exports = checkUser;

4. 좋아요, 댓글

1. 좋아요

// index.ejs
// 하트 버튼을 누르면, /posts/like/${id} 로 요청을 보내고,
// 성공인 경우 받은 응답을 기반으로 하트가 채워지고 안채워지게.
$(".heart-count").click(function (e) {
  const id = $(this).attr("key");
  $.ajax({
    url: `/posts/like/${id}`,
    type: "POST",
    cache: false,
    dataType: "json",
    success: function (data) {
      $(`#${id} > span`).text(data.post.likeCount);
      if (!data.check) {
        $(`#${id}`).addClass("checked");
      } else {
        $(`#${id}`).removeClass("checked");
      }
    },
    error: function (request, status, error) {
      alert(
        error
      );
    },
  });
});

// routes/posts/index.js
// 좋아요
router.post('/like/:id', postCtr.like);

// controller/postCtr.js/postCtr
    like: async (req, res) => {
        const { id } = req.params;
        const post = await Post.findById(id);
        // jwt 생성시 req.userInfo 를 넣었기 때문에 사용 가능.
        const check = post.likeUser.some(userId => userId === req.userInfo._id);
        if (check) {
            post.likeCount -= 1;
            const idx = post.likeUser.indexOf(req.userInfo._id);
            if (idx > -1) {
                post.likeUser.splice(idx, 1);
            }
        } else {
            post.likeCount += 1;
            post.likeUser.push(req.userInfo._id);
        }
        const result = await post.save();
        res.status(200).json({
            check: check,
            post: result
        });
    }

### 2. 댓글

// index.ejs
// 댓글 버튼을 누르면 댓글 창이 내려오게.
$(".comment_button").click(function (e) {
  const id = $(this).attr("key");
  $(`#comment_wrap_${id}`).slideToggle();
});
// 댓글창에 입력하고 엔터를 누르면 /posts/comment/${id}로 접근하여
// 응답을 받고 해당 정보를 화면에 보여주게 된다.
$(".comment_input").keydown(function (e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    const id = $(this).attr("key");
    const inputCommnet = $(this).val();
    $(this).val("");
    $.ajax({
      url: `/posts/comment/${id}`,
      type: "POST",
      cache: false,
      dataType: "json",
      data: {
        comment: inputCommnet,
      },
      success: function (data) {
        const comment = data.post.comment;
        let comment_body = "";
        const arr = comment.reverse();
        arr.forEach((e) => {
          console.log("EEE");
          comment_body += `
        <div class="comment_body_item">
          <div style="font-weight: bolder;">
            ${e.user.username}
          </div>
          <div>
            ${e.comment} 
          </div>
        </div>
        `;
        });
        $(`#comment_${id}`).html(comment_body);
      },
      error: function (request, status, error) {
        alert(
          error
        );
      },
    });
  }
});

// routes/posts/index.js
// 댓글
router.post('comment/:id', checkUser, postCtr.comment);

// controller/postCtr.js
    comment: async (req, res) => {
        const { id } = req.params;
        const post = await Post.findById(id);
        const user = req.userInfo;
        const { comment } = req.body;
        const commentWrap = {
            comment: comment,
            user: user
        };

        post.comment.push(commentWrap);
        const result = await post.save();
        res.status(200).json({post: result});
    },

5. 실시간 채팅

기존에 하던 방법으로는 실시간 채팅을 구현할 수 없다. 기존의 방식은 클라이언트가 요청을 보내야만 서버가 응답을 해주기 때문! 누군가 채팅을 보내면 서버가 모든 클라이언트에게 채팅 내용을 응답해야하는데, 다른 클라이언트가 요청을 보내지도 않았는데 응답? 불가능.

-> WebSocket이 등장하면서 가능해졌다.

socket.io : WebSocket을 쉽게 만들 수 있게 만들어줌.

emit, on만 알면 쉽게 채팅을 구현할 수 있다. emit으로 보내고, on으로 받고.

// index.ejs
$(() => {
  // 인증받은 정보로 이름 설정.
  const name = "<%= isAuthenticated.username %>";
  const socket = io(); 
  
  // 채팅 폼을 제출했을 때, chat-msg를 emit으로 서버에 보냄.
  $("#chat_form").submit(() => {
    socket.emit("chat-msg", name, $(".chat_input").val());
    $(".chat_input").val("");
    return false;
  });
  
  // chat-msg를 on으로 다시 받아서 화면에 보이게 처리
  socket.on("chat-msg", (name, msg) => {
    let chat = `<div class="chat_block">
    <span style="font-weight: bolder">${name}</span> :
      ${msg}
    </div>`;
    $(".chat_content").append(chat);
  });
});

// bin/www
app.io.attach(server);

// app.js
app.io = require("socket.io");

    // server에서도 on으로 받는다.
app.io.on("connection", (socket) => {
  socket.on("chat-msg", (user, msg) => {
    app.io.emit("chat-msg", user, msg);
  });
});

작은 회고

1. 오늘 정말 공부가 안됐다... 그래도 목표했던 강의라도 다 들어서 다행인건지..

오늘은 빨리 자야겠다.

node가 백엔드 중엔 가장 쉽다고 하던데, 그래서 그런지 겁냈던 것 보다는 정말 할만했다. 물론 혼자 하라고 하면..? 할 수 있을지는 잘 모르겠다.

어떤 걸 서버로 보내고 어떤 걸 받을 것이라 req res에 들어가는 정보가 무엇인지 바로바로 파악하는 것도 능숙해져야 가능할 것 같다. 토큰 생성할 때 req.userInfo 넣어놓고 나중에 이걸 어디서 넣었더라.....??? 하면서 헷갈렸다.

네트워크 연결 부분이 감도 잘 안오고 swift의 경우는 내 상황에 맞는 예제 코드도 찾기가 힘들었는데, 백엔드를 만들면서 응답을 만들어보니까 좀 감이 온다. 멋사 교육과정 js에서 콜백함수, Promise, async await, closure에 대해서 제대로 다루고, 여기서 사용도 해보니까 이제 내 앱이 왜 서버의 응답도 받기 전에 혼자 실행이 돼서 오류가 계속 났는지 알겠다.. async await를 잘 사용해보자.

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