Express.js는 웹 서버를 만들기 위한 Node.js의 웹 프레임워크입니다. Node.js의 http 모듈로도 웹 서버를 만들 수 있지만, Express.js를 사용하면 더 쉽고 편리하게 만들 수 있습니다.

이번 주에는 HTTP, REST 등 네트워크의 기본적인 개념을 배우고, Express.js를 사용하여 웹 서버를 만들어보며 이론을 직접 적용해볼 거예요.

공부할 내용 📚

1. 네트워크 이론 (HTTP, TLS, REST)

서버와 인프라 구축을 위해 알아야 할 기본적인 지식인 네트워크에 대해 배워봅니다. 네트워크의 내용은 매우 방대하기 때문에, 이번 주에는 HTTP와 SSL, REST에 대해서만 배워보고, 나머지는 추후에 필요할 때 배워보도록 합니다.

아래의 개념들을 공부해보세요. 검색으로 찾을 수 있는 자료가 많으니, 자신에게 맞는 자료를 찾아보세요. GPT에게 물어보는 것도 좋은 방법입니다!

  • HTTP의 개념과 흐름, HTTP 메서드, HTTP 상태 코드에 대해 배웁니다.
  • HTTP 헤더와 HTTP 쿠키에 대해 배웁니다.
  • TLS(SSL)의 개념과 인증서, HTTPS에 대해 배웁니다.
  • REST의 개념과 특징, HTTP를 기반으로 한 REST API에 대해 배웁니다.

더 공부해보면 좋을 개념(선택): CORS, JWT

직접 자료를 찾아보는 것이 어렵다면, 아래 자료들을 참고해보세요.

2. Express.js

Express.js를 이용하면 쉽고 편리하게 웹 서버를 만들 수 있습니다. Express.js를 사용하여 웹 서버를 만들어보고, 앞서 배운 HTTP와 REST를 적용해봅니다.

Express.js의 다음 개념을 공부해봅니다.

  • Express.js 설치와 실행
  • 라우팅
  • JSON 형식
  • 미들웨어
  • 오류 처리

아래 자료들 중 원하는 자료를 골라서 공부해보세요. 다른 자료를 찾아봐도 좋아요.

  • Express.js 공식 문서: 간결하게 핵심 기능들이 잘 정리되어있습니다. ‘시작하기’와 ‘안내서’의 라우팅, 미들웨어, 오류 처리를 공부해보세요.
  • 생활코딩 Express.js 강의: 조금 오래되었지만 인기 있는 강의입니다.

3. (선택) npm, package.json, 모듈

이 내용은 Node.js를 더 알아보고 싶은 분들을 위한 내용입니다. 꼭 공부해야하는 내용은 아니지만, Node.js를 사용하면서 자주 접하게 될 내용이니 관심이 있다면 공부해보세요.

  • 모듈의 개념과 Node.js에서 모듈을 사용하는 방법을 알아봅니다.
  • npm CLI의 기본적인 명령어들을 실습해봅니다. (init, install, run, npx)
  • node_modules, package.json과 package-lock.json의 역할과 구조를 알아봅니다.
  • CommonJS와 ESModule의 차이를 알아봅니다.

더 공부해보면 좋을 개념(선택): MonoRepo, pnpm

참고할만한 자료들입니다.

프로젝트 실습 🎈

지난 주에 만들었던 웹 페이지에서 API 서버를 분리하여 데이터를 동적으로 전달하는 서버를 만들어봅니다.

  • ES6 import를 사용해보세요. package.json의 type을 module로 설정해야 합니다. (import express from 'express')
  • (선택) nodemon을 설치해 코드가 바뀌면 자동으로 서버가 재시작되도록 해보세요.
  • API 응답을 테스트해볼 때, Postman이나 Hoppscotch 같은 도구를 사용하는 걸 추천드립니다.
  • 아래와 같은 endpoint들을 구현해보세요.

GET /

HTML 파일을 수정 없이 그대로 반환합니다. (assets/week2.html)

POST /api/signup

사용자 정보(아이디, 비밀번호)를 받아서 JSON 파일에 작성합니다. 성공하면 201을 반환합니다.

Request Body 

{
  "username": "test",
  "password": "test",
  "email": "test@example.com"
}

POST /api/login

사용자 정보(아이디, 비밀번호)를 받아서 JSON 파일에 작성된 정보와 일치하는지 확인합니다. 일치한다면 200, 일치하지 않는다면 401을 반환합니다.

Request Body 

{
  "username": "test",
  "password": "test"
}

GET /api/users

JSON 파일에 저장된 사용자 정보를 읽어서 반환합니다. 비밀번호는 반환하지 않습니다.

Response Body 

[
  {
    "username": "test1",
    "email": "test1@example.com"
  },
  {
    "username": "test2",
    "email": "test2@example.com"
  },
  {
    "username": "test3",
    "email": "test3@example.com"
  }
]

GET /api/os

OS 정보를 반환합니다. (type, hostname, cpu_num, total_mem)

Response Body 

{
  "type": "Linux",
  "hostname": "DESKTOP-123456",
  "cpu_num": 8,
  "total_mem": "16384 MB"
}

Challenge! 🔥 (선택)
로그인 시 인증 정보를 쿠키로 발급해, 인증 정보가 유효할 때에만 /api/users와 /api/os를 사용할 수 있도록 해보세요.