[데브코스 3주차] 백엔드 기초: REST API, Express

여는 글

🧑‍💻 프로그래머스 데브코스
K-Digital Training: 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 3기

기억에 남는 강의 내용과 추가로 찾아본 내용 위주로 작성했다. 다음 주부터는 추가·심화 학습 위주로 기록하려고 한다. 기록을 남기면서 복습하는 것도 좋은데, 의무감에 숙제를 하듯이 기록을 남기고 싶지는 않다. 내가 쓴 글이 정말로 도움이 되는 글이었으면 좋겠다.

본문에서 ‘💡’ 표시는 강의를 들으면서 떠오른 생각, 수강 후 추가·심화 학습 내용 등을 나타낸다.

백엔드 기초

• 백엔드 개발자는 API를 만든다.
  • 외부에서 데이터베이스에 직접적으로 접근하지 않게 한다.
  • 💡 운영체제의 역할: 사용자가 코어를 직접 제어하지 않고 안전하게 컴퓨터를 사용할 수 있게 한다.

어떤 API가 필요할까?

• 화면을 그려 보고, 여기에서 필요한 API 목록을 작성하는 과정이 기억에 남는다.

REST API

• 특징: HTTP 규약을 잘 따른다. → 효율 극대화
• URL
  • 웹 페이지의 위치
  • 서버에 데이터 연산 요청을 보내는 방법

URL 규칙

• 소문자만 사용한다.
• 언더바(_) 말고 하이픈(-)을 사용한다.
• 마지막 슬래시(/)를 포함하지 않는다.
• 행위(목적)를 담지 않는다. (✘ /add-products)
  • 행위는 메서드에! (✔ POST /products)
• 파일 확장자를 포함하지 않는다.
• 복수형을 사용한다.
  • 상품‘들’ 중 개별 데이터
    • 💡 디렉터리 구조: 상품 여러 가지를 담고 있는 /products 폴더
  • 전체 상품과 개별 상품 URL의 일관성

HTTP 메서드

• 생성(등록): POST
• 조회: GET
• 수정: PUT, PATCH
  • PUT: 덮어쓰기 (값이 있든 없든)
  • PATCH: 부분 수정 (바뀐 값만) — 생각보다 까다롭다.
• 삭제: DELETE
• HEAD, OPTIONS, CONNECT, TRACE

Node.js의 특징

• 싱글 스레드: 아래 코드를 실행하면 while에 갇혀서 1초가 지나도 'A'를 출력하지 않는다. ¹

  setTimeout(() => console.log('A'), 1000);
  while (true) { /* NO-OP */ }

• 이벤트 기반: 이벤트가 발생할 때, 미리 지정해 둔 작업(이벤트 리스너에 등록해 둔 콜백 함수)을 수행한다.
• 논블로킹 I/O: 일시적으로 멈추는 작업을 백그라운드에서 수행한 뒤, 콜백 함수를 호출한다. (setTimeout 실습 예제; 파일 읽기·쓰기, HTTP 요청 받기 등)

Express

기본 틀

const express = require('express');
const app = express();

app.listen(3000);

app.get('/p/a/t/h', function (req, res) {
  res.send('Hello, world!');
});

💡 실습을 통해 알게 된 점

• Path가 여러 규칙에 매칭되면 의도하지 않은 동작을 할 수 있다.

  // 예시: 아래 두 가지를 모두 작성하면 `/watch`가 어디에 걸릴지 알 수 없다.
  app.get('/:nickname', callback1)
  app.get('/watch', callback2)

• HTTP 요청 하나에는 응답을 딱 하나 보내야 한다.
  • 한 핸들러 안에서 (res.send()나 res.json() 등) 응답하는 메서드를 여러 번 호출하지 않도록 주의한다.
  • 한 핸들러 안에서 응답하는 메서드를 호출하지 않으면 클라이언트에서 응답을 못 받고 무한정 기다리므로 주의한다.
  • 핸들러 안에서 분기 처리를 했다면, 아래 두 가지를 확인한다.
    • 분기 안에서 이미 응답을 전송했는데 분기 밖에서도 응답을 전송하지는 않는가?
    • 분기 안에서도, 밖에서도 응답을 전송하지 않았는데 핸들러 함수가 끝나지는 않는가?

req.params

app.get('/products/:id', function (req, res) {
  res.json({
    num: parseInt(req.params.id),
  });
});

• Path에 :key를 넣으면, 콜백 함수에서 req.params.key로 :key 자리에 입력된 값을 조회할 수 있다.
• req.params 안에 들어오는 값은 문자열 타입이다.

req.query

• 요청 URL의 쿼리(?...)를 객체 형태로 읽을 수 있다.
• ?key1=value1&key2=value2 → { key1: 'value1', key2: 'value2' }

app.get('/watch', function (req, res) {
  const { v, t } = req.query;

  res.json({
    videoId: v,
    startAt: t,
  });
});

기타

💡 VS Code, JavaScript, 상수 재할당

강의 중 강사님이 상수에 값을 재할당하면 어떻게 되는지 보여주셨는데, 이때 VS Code 쪽에서는 아무런 안내도 표시하지 않아서 찾아보았다.

• JavaScript에서 const로 선언한 상수에 값을 덮어씌우려 할 때, VS Code에서 오류나 경고를 띄워 주지 않는다.
• VS Code에서 JavaScript 코드 내의 상수 재할당을 오류로 표시하고 싶다면 ESLint 플러그인을 사용해야 한다.²
• TypeScript에서는, 컴파일러가 이 검사를 강제하기 때문에³ 상수 재할당이 오류로 표시된다.