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

백엔드에서 NestJS를 배우기 전 Express.js에 대해서 먼저 공부를 하는 이유는, NestJS는 Express를 기본으로 채택하고 그 위에 여러가지 기능을 미리 구현해놓은 프레임워크이기 때문입니다. Express.js에 대해서 먼저 배웠을 때, NestJS를 조금 더 쉽게 이해할 수 있을 것입니다.

Under the hood, Nest makes use of robust HTTP Server frameworks like Express (the default) and optionally can be configured to use Fastify as well! NestJS 공식문서

이번 주차에는 Express.js에 대해서 알아보며 간단한 웹서버를 만들어볼 예정입니다.

  • 인프라 스터디 2주차를 참고하여 작성되었습니다 (@dotoleeoak 감사합니다 🥺)

공부할 내용 📚

1. Express.js

Express.js는 Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크입니다. 기존 Node.js를 이용하여 웹서버를 만들었을 때에는 다양한 문제들이 존재했었습니다(Request Body 파싱, 중복된 에러 처리 코드, 복잡한 if 조건을 통한 라우팅 구성 등). 하지만 Express.js를 사용하면 이러한 문제들을 해결할 수 있음은 물론 더욱 간편하게 웹서버를 만들 수 있습니다.

Express.js의 다음 개념들에 대해 공부해봅시다.

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

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

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

2. npm, package.json, 모듈

이 부분은 Node.js를 사용할 때 자주 살펴보게 될 내용이니 너무 깊게는 아니더라도 조금씩은 공부해보시길 바랍니다.

  • 모듈의 개념과 Node.js에서 모듈을 사용하는 방법을 알아봅니다.
  • npm CLI의 기본적인 명령어들을 실습해봅니다. (init, install, run, npx)
  • node_modules, package.json과 package-lock.json의 역할과 구조를 알아봅니다.
    • package-lock.json 때문에 협업에서 자주 충돌하는데.. 이 파일이 뭘 의미하는 건지 한 번 알아보세요.
  • CommonJS와 ESModule의 차이를 알아봅니다.

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

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

프로젝트 실습 🎈

이번 주차에는 Express.js를 활용하여 율전 근처의 맛집들을 관리하는 간단한 웹서버를 만들어볼 것입니다. 이번에는 다양한 메서드를 사용하고 에러 처리도 할 수 있게끔 할 예정이에요.

유의사항

  • ES6 import를 사용해보세요. package.json의 type을 module로 설정해야 합니다. (import express from 'express')
  • (선택) nodemon을 설치해 코드가 바뀌면 자동으로 서버가 재시작되도록 해보세요.
  • (선택) npm, yarn, pnpm 등을 사용해보면서 package manager를 어떻게 사용하는지 알아보세요.
  • API 응답을 테스트해볼 때에는 앞 주차와 같이 Postman이나 다른 API 테스팅 툴으로 시험해보는 것을 권장합니다.
  • 폴더 구조는 마음대로 설정하셔도 괜찮습니다.
    • routes 폴더를 만들어서 라우팅 소스를 분리하시거나 services 폴더를 만들어 비즈니스 로직을 따로 빼주는 등 자유롭게 폴더를 설정하시면서 어떻게 해야지 조금 더 편리하게 개발할 수 있을지 생각해시면 좋을 것 같아요.
  • 아래와 같은 endpoint들을 구현해보세요.
    • 현재는 데이터베이스를 연결하지 않았으니 json 파일을 이용해서 과제를 진행해주세요! (/backend/data/restaurants.json)
    • Path, 에러 코드는 따로 적지 않았는데요, 1주차에 공부한 부분 + 각 endpoint의 설명을 생각하시면서 채워나가주세요!

GET ?

전체 맛집 목록을 반환합니다.

{
    "restaurants": [
        {
            "name": "봉수육",
            "address": "경기 수원시 장안구 율전로108번길 11 1층",
            "phone": "0507-1460-0903"
        },
        ...
    ]
}

GET ?

특정 맛집 정보를 이름(name)을 통해 접근할 수 있도록 합니다. Query, Parameter, Body 중 자유롭게 선택해 name을 전달해주세요.

만들어 보면서 Query, Parameter, Body를 각각 어떠한 Context에서 사용하면 좋을지 생각해보세요.

  • 성공시
{
    "name": "봉수육",
    "address": "경기 수원시 장안구 율전로108번길 11 1층",
    "phone": "0507-1460-0903"
}
  • 만약 해당 맛집 정보가 존재하지 않을시
{
    "error": "해당 맛집 정보가 존재하지 않습니다."
}

POST ?

특정 맛집 정보를 생성합니다.

Request Body 

{
    "name": "맛집이름",
    "address": "맛집주소",
    "phone": "전화번호"
}
  • 성공시 (생성한 맛집 정보를 반환합니다.)
{
    "name": "맛집이름",
    "address": "맛집주소",
    "phone": "전화번호"
}
  • 이미 해당 맛집 정보가 존재할시
{
    "error": "이미 해당 맛집 정보가 존재합니다."
}

DELETE ?

특정 name의 맛집 정보를 삭제합니다. Query, Parameter, Body 중 자유롭게 선택해 name을 전달해주세요.

  • 성공시 (삭제한 맛집 정보를 반환합니다.)
{
    "name": "봉수육",
    "address": "경기 수원시 장안구 율전로108번길 11 1층",
    "phone": "0507-1460-0903"
}
  • 만약 해당 맛집 정보가 존재하지 않을시
		{
    "error": "해당 맛집 정보가 존재하지 않습니다."
}

PATCH ?

특정 name의 맛집 정보를 수정합니다.

‘수정’과 관련된 동작에는 PUT, PATCH 두개를 많이 쓴답니다. 이 두 메서드 쓰임새의 차이에 대해서도 한 번 살펴보세요.

  • 성공시 (수정한 맛집 정보를 반환합니다.)
{
    "name": "봉수육",
    "address": "경기 수원시 장안구 율전로108번길 11 1층",
    "phone": "0507-1460-0903"
}
  • 만약 해당 맛집 정보가 존재하지 않을시
{
    "error": "해당 맛집 정보가 존재하지 않습니다."
}

Challenge! 🔥 (선택)
사실 이번과제는 쉽게 끝낼 수 있을 텐데요, 시간이 남는다면 아래와 같은 기능들을 직접 추가해보세요!

  • 미들웨어 추가 (request의 IP logging, 찾는 페이지가 없을시 404 에러 반환)
  • 새로운 api 추가 (로그인, 회원가입 등등)