[ 독후감 ] 한 권으로 끝내는 Node & Express 2판을 읽고...

📍 [ 독후감 ] Web Development with Node & Express 2판을 읽고...

---

✏️ 서론

이 책을 보게 된 계기는 엘리스 팀 프로젝트에서 프론트엔드를 준비하고 있던 나에게 무지했던 백엔드 파트를 담당하게 되었고, 맨땅에 헤딩하는 격으로 백엔드에 관한 정보를 이리저리 찾아보던 중 비교적 최근(2021.5.21.)에 출판했고 Spring을 다루는 책이 아니라 Express.js를 다루는 서적이어서 구매했다. 책은 알라딘에서 주문했고, 책은 약 450페이지로 구성되어있으며 독서기간은 2022.01.25 ~ 2022.02.19이다.

---

728x90

✏️ 본론

틈틈이 책을 읽으며 당장에 백엔드를 구현해야하는터라 내가 필요한 주제만 먼저 살펴봤다. 익스프레스 소개, 품질보증, 쿠키와 세션, 미들웨어, 지속성, 라우팅, REST API와 JSON, SPA, 보안 파트였다. 이 중에서 가장 기억에 남는 부분은 바로 미들웨어, 쿠키와 세션인데, 나는 JWT를 이용하여 인증을 구현했지만 서버에서 쿠키를 전혀 인식하지 못하는 문제가 있었는데 결국 cookie-parser 미들웨어를 작성하지 않아서 생기는 문제였다.. (이 문제를 해결하기 위해 약 3시간을 삽질했다.) 덕분에 미들웨어의 중요성을 깨달았다. 그리고 쿠키에 대해 기존에 알고 있던 지식과 더불어 몇 가지 새로운 사실을 알게 되었는데, 쿠키의 관해 알아둬야 할 중요한 내용은 다음과 같다.

1. 사용자가 쿠키 내용을 볼 수 있다.
  - 서버에서 클라이언트에 보내는 쿠키는 모두 클라이언트에서 볼 수 있다. 쿠키를 암호화해서 콘텐츠를 보호할 수 있긴 하지만, 떳떳한 목적으로만 사용한다면 굳이 암호화할 이유가 없다. 서명된 (Signed)쿠키는 콘텐츠를 읽기 어렵게 만들긴 하겠지만, 암호화라고 할 수 있는 수준이 아니다.

2. 사용자가 쿠키를 삭제하거나 금지할 수 있다.
  - 사용자는 쿠키 전체에 대한 권한이 있고, 브라우저에는 쿠키를 개별적으로, 또는 한꺼번에 삭제하는 기능이 있다. 또한, 사용자가 쿠키를 금지할 수도 있는데 이럴 땐 쿠키 없이도 제대로 동작할 수 있는 웹 애플리케이션은 정말 단순한 기능 말고는 수행하기 어렵다.

3. 쿠키는 공격에 사용될 수 있다.
  - XSS(cross-site-scripting attack) 공격 중 악의적인 자바스크립트 코드로 쿠키 콘텐츠를 바꾸는 방법도 있다. 서버에 전손되는 쿠키를 맹신해서는 안 되는 이유 중 하나다. `서명된 쿠키(Signed cookie)`를 사용하면 사용자나 자바스크립트 코드로 쿠키를 변조했을 경우 그 흔적이 명백히 드러나므로 공격을 막는데 도움이 된다. (서명된 쿠키는 일반적인 쿠키보다 우선순위가 높다. 서명된 쿠키에서 사용된 이름을 일반 쿠키에서는 사용할 수 없다.) 또는 `httpOnly` 옵션을 사용하여 클라이언트에서 쿠키를 수정하지 못하고 서버에서만 가능하게끔 설정할 수도 있다. 이런 경우 활용도가 조금 떨어지지만 훨씬 안전하다.

4. 쿠키를 남용하면 사용자가 눈치챈다.
  - 사용자의 컴퓨터에 쿠키나 데이터를 너무 많이 저장하면 사용자를 짜증나게 할 수 있으므로 피해야 한다. 쿠키는 최소한으로 유지해라.

5. 쿠키에서 사용 할 수 있는 option
  - domain: 쿠키에 도메인을 연결한다. 하지만 현재 서버가 실행 중인 도메인이 아닌 다른 도메인과 연결할 수는 없다.
  - path: 쿠키가 적용될 경로를 지정한다. 기본값인 `/`를 사용하면 사이트의 모든 페이지에 쿠키가 적용된다. 경로를 `/foo`로 설정하면 `/foo`, `/foo/bar` 등에 적용된다.
  - maxAge: 클라이언트가 쿠키를 얼마나 오래 보관하고 있어야 하는지 밀리초 단위로 지정한다. 이 옵션을 설정하지 않으면 쿠키는 브라우저를 닫을 때 삭제된다. `expired` 옵션에서 만료 날짜를 설정할 수도 있지만 문법이 복잡하기 때문에 `maxAge`를 권한다.
  - secure: `HTTPS` 연결을 통해서만 쿠키를 전송한다.
  - httpOnly: 서버에서만 쿠키를 수정한다. 즉, client에서는 쿠리를 수정할 수 없다. XSS공격을 막는데 도움이 된다.
  - signed: 쿠키에 서명을 해서 `res.cookie`가 아니라 `res.signedCookies`에서 접근할 수 있게 한다. 서명된 쿠키가 변조되면 서버는 그 쿠키를 거부하고 원래 값으로 초기화 한다.

또한, passport를 이용해 인증파트를 구현했는데, GitHub Strategy를 사용해서 다음과 같이 인증을 구현했다. 처음에는 passport 홈페이지의 docs와 비슷하게 작성했지만, 다음 코드는 내가 GitFarm 프로젝트에서 작성한 백엔드 코드이다. 코드는 짧아 보이지만 나의 서비스에 필요한 정보에 맞게 수정하는데 그 작업이 생각보다 오래 걸렸다.

// passport/strategy/GitHub.js
import GitHub from "passport-github2";
import keys from "../../config/keys.js";
import { User } from "../../model/index.js";

const GitHubStrategy = GitHub.Strategy;
const { clientID, clientSecret, callbackURL } = keys.GitHub;

const config = {
  clientID,
  clientSecret,
  callbackURL,
};

export default new GitHubStrategy(
  config,
  async (accessToken, refreshToken, profile, done) => {
    const { username } = profile;
    const { id, avatar_url: avatarUrl } = profile._json;

    const findUser = await User.findOne({ id });
    if (!findUser) {
      const newUser = new User({
        id,
        username,
        avatarUrl,
        accessToken,
      });

      newUser.save();
      return done(null, newUser);
    }
    return done(null, findUser);
  },
);

// routes/api/auth.js
router.get(
  "/github",
  passport.authenticate("github", {
    scope: ["repo", "profile", "user"],
    session: false,
  }),
);

router.get(
  "/github/callback",
  passport.authenticate("github", {
     session: false,
    failureRedirect: "/api/auth/login/failed",
  }),
  async (req, res) => {
    const { id, username } = req.user;
    const payload = { id, username };
    const token = await createToken(payload);
    res.cookie("token", token, cookieConfig);
    res.redirect("/loading");
  },
);

 

---

✏️ 결론

이 책을 읽으며 최소한의 백엔드에서 필요한 코드를 작성하는데 도움을 많이 받았다. 아직까지 우리나라에서는 Express.js보다 Spring을 더 많이 사용하지만, 백엔드의 큰 틀은 벗어나지 않을 것이다. JAVA보다 JS를 더 잘 알면서 백엔드를 맛보고 싶은 분들에게 추천해주고 싶은 책이다.

 

reference

1. 한 권으로 끝내는 Node & Express : 모던 웹을 위한 서버 사이드 자바스크립트의 모든 것
2. Passport-GitHub2