[데브코스] 빈 객체 초기화 패턴과 app.route()를 활용한 Express API 구조화

🫥빈 객체는 truthy

로그인을 구현하기 위해 loginUser = {}로 선언하고 로직을 작성하였다.

if (loginUser) {
  if (loginUser.password === password) {
    ...
  } else {
    res.status(401).json({ message: "비밀번호가 틀렸습니다" });
  }
} else {
  res.status(401).json({ message: "존재하지 않는 아이디입니다" });
}

위 코드를 실행하면, 비밀번호는 맞고 아이디는 틀리게 요청을 보내도 무조건 "비밀번호가 틀렸습니다"라는 메시지가 나온다.

 

loginUser은 초기값이 {}(빈 객체)로 설정되어 있다. 자바스크립트에서 빈 객체는 무조건 truthy로 평가되기 때문에, 아래 조건은 무조건 참이 된다.

if (loginUser) // 항상 true!

이로 인해 틀린 아이디여도 항상 첫 번째 분기문으로 들어가게 되어, 요청값에 상관없이 "비밀번호가 틀렸습니다"라는 잘못된 응답을 주는 것이다.

 

해결 방법

• loginUser을 null로 초기화하기: 초기값을 null로 설정하여 존재하지 않는 사용자에 대한 정확한 검사를 수행할 수 있다.
• 빈 객체임을 판별하는 로직 추가하기: 객체가 비어 있는지 확인하는 방법을 사용하여 정확한 조건 검사를 수행한다.
• lodash : isEmpty 사용

 

빈 객체를 확인하는 방법-Object.keys()

Object.keys()는 객체의 프로퍼티 이름들을 배열로 반환한다. 빈 객체인지 확인하기 위해서는 배열의 길이를 체크하면 된다.

const obj1 = {};
const obj2 = { message: "not empty" };

console.log(Object.keys(obj1));
console.log(Object.keys(obj2));

const obj1 = {};
const obj2 = { message: "not empty" };
const num = 1;
const str1 = "one";
const str2 = ""; 

console.log(Object.keys(obj1).length === 0); //true
console.log(Object.keys(obj2).length === 0); //false
console.log(Object.keys(num).length === 0); //true
console.log(Object.keys(str1).length === 0); //false - 문자열도 객체처럼 동작
console.log(Object.keys(str2).length === 0); //true

범용적인 isEmpty 함수를 만들어 사용할 수도 있다. 객체 타입을 먼저 확인하여 빈 객체인지 확인하는 함수이다.

function isEmpty(obj) {
  if (obj.constructor === Object) {
    if (Object.keys(obj).length === 0) {
      return true;
    } else {
      return false;
    }
  } else {
    return false;
  }
}

console.log(isEmpty(obj1));
console.log(isEmpty(obj2));

---

⬆️로그인 고도화

빈 객체 문제를 해결하여 개선된 로그인 코드는 다음과 같다.

app.use(express.json()); //json 미들웨어
app.post("/login", function (req, res) {
  console.log(req.body);

  var hasUserId = false;
  var loginUser = {};

  const { userId, password } = req.body;

  db.forEach(function (user, id) {
    if (user.userId === userId) {
      hasUserId = true;
      loginUser = user;
    }
  });

  if (Object.keys(loginUser).length) {
    if (loginUser.password === password) {
      if (user.password === password) {
        res.status(200).json({ message: "로그인 성공", user: user });
      } else {
        res.status(401).json({ message: "비밀번호가 틀렸습니다" });
      }
    } else {
      res.status(401).json({ message: "존재하지 않는 아이디입니다" });
    }
  }
});

• hasUserId: 사용자가 존재하는지 여부를 추적하기 위한 플래그 변수
• loginUser: 사용자의 정보를 저장하기 위한 객체. 초기값은 빈 객체로 설정
• db.forEach(): 데이터베이스를 순회하며 userId를 비교하여 사용자가 존재하는지 확인하고, 해당 사용자의 정보를 loginUser에 저장
• Object.keys(loginUser).length: loginUser가 빈 객체인지 확인하여 사용자가 존재하는지 판별
• 사용자가 존재하고 비밀번호가 일치하면 로그인 성공 메시지를 반환하고, 그렇지 않으면 적절한 오류 메시지를 반환한다

 

로그인 고도화-리팩토링

위 코드에서는 hasUserId라는 플래그 변수를 사용하여 사용자 존재 여부를 추적하고 있다. 또한 loginUser을 빈 객체로 초기화하고 이후 Object.keys(loginUser).length를 사용하는 등 불필요한 객체 조작을 포함하고 있어 코드가 복잡하고 가독성이 상당히 떨어졌다.

 

불필요한 변수와 객체 사용 없이 동일한 동작을 수행하도록 코드를 리팩토링 해보았다.

app.use(express.json());

app.post("/login", function (req, res) {
  console.log(req.body);
  const { userId, password } = req.body;

  let loginUser = null;

  db.forEach((user) => {
    if (user.userId === userId) {
      loginUser = user;
    }
  });

  if (!loginUser) {
    return res.status(401).json({ message: "존재하지 않는 아이디입니다" });
  }

  if (loginUser.password === password) {
    return res.status(200).json({ message: "로그인 성공", user: loginUser });
  } else {
    return res.status(401).json({ message: "비밀번호가 틀렸습니다" });
  }
});

• loginUser 초기화: null로 초기화하여 사용자가 존재하지 않는 경우를 판별
• db.forEach(): 데이터베이스를 순회하여 userId를 비교하여 loginUser을 설정한다. 이 과정에서 loginUser가 null인지 확인하여 존재 여부 판별

 

❌오류: db.find is not a function

로그인 기능을 고도화할 때, find() 메서드를 사용을 시도해보았다. find() 메서드는 특정 조건을 만족하는 첫 번째 요소를 쉽게 찾을 수 있는 기능을 제공하여, 사용자를 찾는데 적합하고 직관적이라고 생각했기 때문. 따라서 아래 코드를 작성하고, 실행해보았다.

app.post("/login", function (req, res) {
  console.log(req.body);

  const { userId, password } = req.body;

  const loginUser = db.find((user) => user.userId === userId);

  if (!loginUser) {
    return res.status(401).json({ message: "존재하지 않는 아이디입니다" });
  }

  if (loginUser.password === password) {
    return res.status(200).json({ message: "로그인 성공", user: loginUser });
  } else {
    return res.status(401).json({ message: "비밀번호가 틀렸습니다" });
  }
});

기대와는 달리, 오류가 발생하였다.

 

원인

db를 Map 객체로 사용하고 있어서 발생하는 문제였다. Map 객체는 키-값 쌍을 데이터로 저장하며, find()를 지원하지 않는다...find() 대신 forEach, entries(), values() 같은 메서드를 사용하여 데이터를 순회해야 한다.

 

해결방법

forEach를 썼다. 로그인 고도화-리팩토링 코드..!

 

Map 관련 메서드

메서드	설명
db.get(key)	키로 요소 찾기
db.set(key, value)	요소 추가
db.forEach((value, key) => {...})	전체 순회
Array.from(db.values())	Map 값을 배열로 변환

---

✂️채널 API 실습

API 설계

생성

method	post
path	/channels
req	body(channelName)
res	201: ${channelName}님 채널을 응원합니다. 400: 채널 이름을 입력해주세요.

 

수정

method	put
path	/channels/:id
req	URL(id), body(channelName)
res	200: 채널명이 성공적으로 수정되었습니다, 404: 채널을 찾을 수 없습니다.

 

삭제

method	delete
path	/channels/:id
req	URL(id)
res	200: ${channelName} 채널을 삭제했습니다. 404: 채널을 찾을 수 없습니다.

 

조회

method	get
path	/channels
req	x
res	200: 채널 전체 조회 성공(전체 데이터 list, json array) 404: 채널이 존재하지 않습니다.

 

개별 조회

method	get
path	/channels/:id
req	URL(id)
res	200: 채널 조회 성공 404: 채널을 찾을 수 없습니다.

 

API 구현-app.route()

지금까지는 모든 API의 경로를 하나하나 다 작성해주었다. 하지만, Express의 route() 메서드를 사용하면 동일한 경로에 대한 여러 HTTP 메서드를 체인으로 처리할 수 있다.

⭐ app.route()
동일한 경로에 대해 여러 HTTP 메서드를 체인으로 연결하여 처리할 수 있게 해주는 Express 기능
코드의 가독성을 높이고 중복을 줄일 수 있다.!

app
  .route("/channels")
  .get((req, res) => {
    res.status(200).json({ message: "채널 조회 성공" });
  })
  .post((req, res) => {
    res.status(201).json({ message: "채널 생성 성공" });
  });

app
  .route("/channels/:id")
  .get((req, res) => {
    res.status(200).json({ message: "채널 조회 성공" });
  })
  .put((req, res) => {
    res.status(200).json({ message: "채널 수정 성공" });
  })
  .delete((req, res) => {
    res.status(200).json({ message: "채널 삭제 성공" });
  });

 

🙄라우터 코드 가독성 향상에 대한 고민

라우터를 사용하면 같은 엔드포인트끼리 묶어서 편하고 코드가 한결 간결해지긴 했지만, 여전히 비효율적인 부분이 있는 것 같았다. 모든 HTTP 메서드가 req, res를 인자로 받는데, 이것들을 계속 따로 선언해주고, 또 각자 동작까지 한 코드 내 작성하였더니 route()를 사용하는 의미가 있을까 싶을 정도로 코드가 길어졌다. 더 효율적인 방법은 없을까 고민해보았다.

 

메서드별로 나눠야 하는 이유

사실 라우터에서 콜백을 각각 분리해서 작성하는 이유는 HTTP 메서드마다 수행하는 기능이 다르기 때문이다. 예를 들어, GET 요청과 POST 요청은 같은 엔드포인트를 사용하더라도 전혀 다른 동작을 수행한다.

 

각 HTTP 메서드별 목적과 로직을 살펴보면,

메서드	목적	일반적인 로직
GET /channels	목록 조회	DB에서 모든 채널 불러오기
POST /channels	생성	요청 본문에서 채널 정보 받아 DB에 추가
GET /channels/:id	단일 조회	특정 채널 id로 조회
PUT /channels/:id	수정	해당 채널의 정보 수정
DELETE /channels/:id	삭제	채널 삭제

 

그렇다면 라우터 코드의 중복을 줄이면서 가독성을 높이는 방법은 없을까?

 

✅공통 로직을 함수로 분리하기

첫 번째 해결책은 공통 로직을 함수로 분리하는 것이다. 예를 들어, 성공 응답을 보내는 로직이 여러 엔드포인트에서 반복된다면, 이를 함수로 만들어 재사용할 수 있다.

function sendSuccess(message) {
  return (req, res) => {
    res.status(200).json({ message });
  };
}

app.route("/channels")
  .get(sendSuccess("채널 조회 성공"))
  .post((req, res) => {
    res.status(201).json({ message: "채널 생성 성공" });
  });

이렇게 하면 반복되는 패턴을 함수로 추출하여 코드의 중복을 줄일 수 있다.

 

✅라우터를 따로 파일로 분리하기 (Controller 구조)

두 번째 해결책은 라우터와 컨트롤러를 분리하는 것이다. 이 방식은 MVC 패턴을 따르는 것으로, 라우터는 URL 경로와 HTTP 메서드를 정의하고, 실제 로직은 컨트롤러에서 처리한다.

// channels.controller.js
exports.getAll = (req, res) => {
  // 채널 목록 조회 로직
};

exports.create = (req, res) => {
  // 채널 생성 로직
};

// router.js
router.route("/channels")
  .get(channelsController.getAll)
  .post(channelsController.create);

 

이렇게 하면 라우팅만 선언해두고, 핵심 로직은 다른 곳에서 관리할 수 있어 가독성이 높아진다. 또한, 코드의 유지보수성과 확장성도 향상된다.

 

이러한 방법들을 통해 Express 라우터 코드의 가독성과 효율성을 크게 개선할 수 있다. 특히 프로젝트 규모가 커질수록 이러한 구조화는 더욱 중요해진다!

 

API 구현-완성 코드

const { channel } = require("diagnostics_channel");
const express = require("express");
const app = express();

app.listen(6000);

app.use(express.json());

let db = new Map();
var id = 1;

app
  .route("/channels")
  .get((req, res) => {
    // const channels = Array.from(db.values());
    // res.status(200).json({ message: "채널 전체 조회 성공", channels });

    if (db.size !== 0) {
      var channels = {};
      db.forEach(function (value, key) {
        channels[key] = value;
      });
      console.log(channels);
      res.status(200).json({ message: "채널 전체 조회 성공", channels });
    } else {
      res.status(404).json({ message: "채널이 존재하지 않습니다." });
    }
  })
  .post((req, res) => {
    if (req.body.channelName) {
      db.set(id++, req.body);

      res
        .status(201)
        .json({ message: `${req.body.channelName} 채널을 응원합니다.` });
    } else {
      res.status(400).json({ message: "채널 이름을 입력해주세요." });
    }
  });

app
  .route("/channels/:id")
  .get((req, res) => {
    let { id } = req.params;
    id = parseInt(id);

    var channel = db.get(id);

    if (channel) {
      res.status(200).json({ message: "채널 조회 성공", channel: channel });
    } else {
      res.status(404).json({ message: "채널을 찾을 수 없습니다." });
    }
  })
  .put((req, res) => {
    let { id } = req.params;
    id = parseInt(id);

    var channel = db.get(id);

    if (channel) {
      var newChannel = req.body.channelName;
      channel.channelName = newChannel;
      db.set(id, channel);
      res.status(200).json({
        message: "채널명이 성공적으으로 수정되었습니다.",
        channel: channel,
      });
    } else {
      res.status(404).json({ message: "채널을 찾을 수 없습니다." });
    }
  })
  .delete((req, res) => {
    let { id } = req.params;
    id = parseInt(id);

    var channel = db.get(id);

    if (channel) {
      db.delete(id);
      res
        .status(200)
        .json({ message: `${channel.channelName} 채널을 삭제했습니다.` });
    } else {
      res.status(404).json({ message: "채널을 찾을 수 없습니다." });
    }
  });

---

이번 실습을 통해 JavaScript의 truthy/falsy 개념이 실제 코드에서 어떻게 문제를 일으킬 수 있는지 체감할 수 있었다. 자료구조의 특성과 값의 존재 여부를 명확히 고려하면서 코드를 짜야 한다는 점을 깊이 깨달았다.

 

또한, Express의 라우팅 기능을 활용해 API를 보다 효율적으로 작성하는 방법도 익혔다. app.route()를 사용해서 같은 엔드포인트의 HTTP 메서드를 묶으니 코드의 가독성은 약간 향상되었지만, 전체적으로는 여전히 마음에 들지 않는다. 앞으로 API가 더 복잡해질 텐데, 이 정도 구조가 클린코드의 최선이라면 꽤 답답할 것 같았다.

 

다행히 좀 더 알아보니 핸들러 함수를 분리하거나 컨트롤러 패턴을 적용하는 등 더 구조화된 방식으로 코드를 작성할 수 있는 방법이 많이 있다는 걸 알게 됐다. 특히, Express보다 NestJS를 사용하면 이런 구조를 보다 편리하게 적용할 수 있다는데, Nest 공부 열씸히 해야지