[Cabinet Project] 사물함 배정 프로그램 개발일지 1 - 로그인 화면, API 개발

시작하며

이번에 학과에서 회장을 맡게되면서 해결해야할 여러 문제들이 많이 생겼다. 사실 이 문제들은 모든게 코로나때문에 생겨난 문제들이다.
작년부터 갑자기 모든 것들이 비대면으로 진행되면서 학생들을 대상으로하는 여러 업무처리가 대부분 대면으로만 있던 것들이 결국 발목을 잡았다.
그 중 가장 큰 문제 중 하나가 바로 학생들의 사물함을 배정하는 일이었다. 사실 랜덤으로 지정해도 된다고 생각할 지 모르지만 엄연히 본인들이 자치비를 지불하고 사용하는 것이라 본인들이 선택권을 갖는 것이 맞다고 생각한다.
그래서 이번 기회에 사물함을 본인이 골라서 선택하는 웹 어플리케이션을 개발하자고 생각했다. 전체적인 풀스택 개발경험을 가질 수 있는 토이 프로젝트라고 생각되기도 한다.

고려할 점

우선 학과 학생들을 대상으로 하는 어플리케이션이니 고려해야할 것들이 많다.

1. 우선 가장 걱정되는건 상대는 컴퓨터공학과 학생들이라는 점이다.
   허술한 웹 어플리케이션을 만들고 배포해서 사용한다면 이런 점을 뚫어내려하는 사람들이 존재할 것이 분명하다. 보안적인 측면도 어느정도 고려를 해야할 것 같다.
2. 어떤 서버언어를 사용할 것인가?
   spring boot, Node.js, Golang이 내가 머릿속에 리스트에 올려둔 서버개발 언어들이다. 하지만 spring boot는 책을 보면서 공부하는 것도 굉장히 힘들어 하는 상황이다. 일단 진입장벽이 높다는 점은 누구나 인정하는 것이니 말이다.
   그래서 요즘 핫하다는 Golang을 해보려 했으나…. Golang으로 web서버를 개발하는 것은 자료를 찾기가 생각보다 어려웠다. 그리고 무엇보다 서버언어를 선택하는 과정에서 나는 서버개발자는 뭘 개발하는거지…?라는 생각이 강했다.
   결국 웹 어플리케이션에서 많이 사용하는 Node.js로 선택했다.
3. 데이터베이스는 어떤 것을 선택할 것인가?
   Node.js를 공부하는 도중에 mongoose를 활용해서 MongoDB와 연결하는 것을 자주 접했다. 이전에 프로젝트로 MongoDB를 구축해 본 경험도 있어서 MongoDB로 선택했다.
4. 과 자치비 지불여부를 확인해서 약 1000여명의 데이터베이스를 구축해야한다.
   작년 1학기 기준으로 우리 과는 전체 인원이 약 960여명이 재학중이었다. 평균적으로 1학기에 1000여명이 재학 등록을 한다는 것이다. 물론 나는 작년과 올해 학생회 간부(前부비상대책위원장, 올해 現비상대책위원장)라 과자치비 납부 여부 자료에 접근이 가능하다. 해당 자료가 엑셀 자료인데, 그 데이터를 파이썬으로 읽어와서 파싱 후 MongoDB에 저장할 예정이다. (이 부분은 좀 테스트를 해봐야 할 듯)

어플리케이션 설계

우선 개발은 Node.js로 진행하고 Node.js 개발 프레임워크인 Express.js를 사용할 것이다. 전체적인 프론트엔트는 ejs를 사용할 예정이다.

프로젝트 구조

서버 개발과정을 알아보던 도중 폴더와 파일 구조 설계가 중요하다는 것을 알았다. 하지만 이 부분을 자세히 알기엔 우선은 개발을 목적으로 한 것이라 대략적인 폴더 구성을 했다. 완성된 후 설계 구조를 공부하고 리팩토링을 해야할 듯 하다.

Cabinet-Project
├─ server.js
├─ config
├─ models
│   ├─ cabinet_info.js
│   └─ user.js
├─ package.json
├─ node_modules
├─ public
│   ├─ images
│   └─ css
│       └─ style.css
├─ routes
│   └─ index.js
└─ views

기본적이 프로젝트 구조는 이렇게 설정했다. 초기 구조는 이렇게 했고 이후에 변하게 될 경우 변한 지점 포스팅에 남겨둘 예정이다.
대부분의 API는 routs/index.js에 구현을 할 예정이다.

Front End

우선 프론트 엔드 개발 옵션은 자세한 html과 CSS 구현은 너무 시간소모가 커서 bootstrap을 사용했다. 또한 모든 파일이 ejs이므로 중간중간에 코드를 삽입해서 진행할 예정이다. 부트스트랩으로 레이아웃을 가져오고 일부 레이아웃을 살짝 수정했다.

따로 계정 로그인이 필요하진 않으므로 이름과 학번정보만 가져오면된다.

Back End

이번 토이프로젝트의 핵심이다. 우선 개발 1일차에 활용한 백엔드 옵션은 아래와 같다.

Modules

개발 1일차에 사용한 모듈은 아래와 같다. 원래 hash key를 활용한 비밀번호 암호화를 위해 crypto를 설치했지만 실제로 사용할 지는 아직 고려중인 상황이다. 굳이 사용한다면 학번정보를 암호화하지 않을까 생각중이다.

1. express
2. body-parser
3. express-session
4. mongoose

해당 옵션들을 npm으로 설치해서 진행했다.

$ npm install --save express body-parser express-session mongoose

Models

이번 프로젝트에 사용되는 DTO들을 선언한 폴더이다. 기본적으로 학생정보를 갖는 user.js와 사물함 소유 정보를 저장하는 cabinet_info.js로 구성되어있다.

< user.js >

const mongoose = require("mongoose");
var Schema = mongoose.Schema;

var userSchema = new Schema({
  studentID: { type: Number, unique: true, required: true },
  name: { type: String, required: true },
  isPay: { type: Boolean, required: true },
  isAdmin: { type: Boolean, default: false },
});

module.exports = mongoose.model("User", userSchema);

학생 정보를 저장하는 DTO는 간단한 구성이다. 학번, 이름은 실제로 학생들이 입력한 데이터와 비교하기 위해 존재하고 isPay는 과자치비를 지불했는지 여부이다. 이후에 사물함을 선택하는 경우에 과자치비 지불을 하지 않은 사람은 선택이 불가능하게 할 것이다. 이 부분 데이터는 사용자에게 제공되거나 노출되는 것은 아니다.
user.js의 정보는 user collection에 저장된다.

index.js (API)

1일차에 개발한 API는 로그인 페이지 로드 API와 로그인을 진행할 때 데이터베이스에서 해당 입력 데이터를 잘 가져오는지 확인하는 작업을 진행했다.

< Login Page API >

app.get("/", function (req, res) {
  var sess = req.session;

  res.render("index");
});

로그인 페이지를 기본적으로 로드하는 API이다. 요청의 session값이 가져와지면 해당 값을 저장한다. 향후 로그인 이후 페이지에서 사용될 경우를 대비해서 선언했다.
views 폴더에 있는 index.ejs파일을 render로 응답해주는 간단한 API이다 페이지 로드이므로 GET방식을 사용했다.

< Create User API >

app.post("/create/user", function (req, res) {
  var user = new User();
  user.studentID = req.body.studentID;
  user.name = req.body.name;
  user.isPay = req.body.isPay;

  user.save(funciotn (err) {
    if (err) {
      console.error(err);
      res.json({result : 0});
      return;
    }

    res.json({result:1});
  });
});

POST 방식으로 전달하지만 실제 배포에는 구현하지 않을 API이다. 단순 테스트와 개발을 위해서 만든 API이다.

< Login API >

app.post("/login", function (req, res) {
  const notUser =
    '<script type="text/javascript">alert("존재하지 않는 학생입니다."); window.location="/";</script>';
  var currID = req.body.studentID;
  var currName = req.body.name;

  User.findOne({studentID: currID}, function (err, user) {
    if (err) {
      console.error(err);
      return;
    }

    if (!user) {
      res.send(notUser);
    } else {
      console.log(
          `student id: ${user.studentID}, name: ${user.name}, isPay:${user.isPay}`
        );

        res.redirect("/");
    }
  })
})

우선 로그인 테스트 개발이라 콘솔에 데이터가 잘 불러와 지는지 테스트를 진행했다.

1일차 소감

우선 백엔드 개발자는 뭘 개발하는지 하나도 몰랐다. 막연히 백엔드 개발자, 데이터 사이언티스트가 꿈이라고 했지만 백엔드 개발자는 그냥 데이터베이스 다루는 거 말곤 아는게 없었다.
그런데 이번에 토이 프로젝트를 진행하면서 가장 중요한 백엔드 개발자의 업무를 알았는데, 바로 API 개발이었다.
이번 토이 프로젝트가 좀 더 백엔드 개발자로서 기본 소양을 키울 수 있는 기회가 되면 좋겠다.