12일차_Node·Express /POST 보내기/

초보자를 위한 Express POST 완전 안내서

1. POST란 무엇인가요?

웹 프로그램에서는 보통 다음과 같은 왕복이 일어납니다.

사용자 입력
   ↓
프론트엔드가 서버에 POST 요청
   ↓
서버가 req.body에서 데이터 확인
   ↓
서버가 처리 결과를 JSON으로 응답
   ↓
프론트엔드가 응답을 받아 화면에 표시

예를 들어 AI 채팅에서는 사용자가 작성한 질문을 서버로 보내야 합니다.

질문 작성 → POST 전송 → AI 서버 처리 → 답변 수신

회원가입, 로그인, 글쓰기, 주문, 댓글 작성, 파일 등록 등도 대체로 POST 또는 비슷한 쓰기용 HTTP 메서드를 사용합니다.

---

2. GET과 POST의 기본 차이

구분GETPOST

주요 목적	데이터 조회	데이터 제출·생성·처리 요청
데이터 위치	주로 URL 쿼리 문자열	주로 요청 body
주소창 실행	가능	일반적인 주소창 입력으로는 불가능
대표 사례	상품 목록, 검색, 게시글 조회	회원가입, 글쓰기, AI 질문
새로고침·공유	비교적 적합	같은 요청이 다시 실행될 수 있어 주의
긴 데이터 전송	부적합	비교적 적합

GET 요청의 예:

GET /api/products?category=book

POST 요청의 예:

POST /api/chat
Content-Type: application/json

{
  "message": "POST가 무엇인가요?"
}

중요한 점은 POST라고 해서 데이터가 자동으로 안전해지는 것은 아니라는 사실입니다. POST 데이터는 주소창에는 나타나지 않지만, 암호화하려면 반드시 HTTPS를 사용해야 합니다.

---

3. 실습 준비

이번 실습에서는 다음 프로그램 두 개를 실행합니다.

index.js  → 메시지를 받는 서버
send.js   → 메시지를 보내는 클라이언트

권장 폴더 구조:

08_node_express/
└─ 06_post/
   ├─ index.js
   ├─ send.js
   ├─ package.json
   └─ node_modules/

Node.js 버전 확인

터미널에서 다음 명령을 실행합니다.

node -v
npm -v

fetch()를 별도 패키지 없이 사용하려면 Node.js 18 이상이 편리합니다.

---

프로젝트 만들기

mkdir 08_node_express\06_post
cd 08_node_express\06_post
npm init -y
npm install express

각 명령의 의미:

• mkdir: 폴더 만들기
• cd: 해당 폴더로 이동하기
• npm init -y: Node.js 프로젝트 설정 파일 만들기
• npm install express: Express 설치하기

---

4. 서버 만들기: index.js

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

// JSON 형식으로 전송된 요청 본문을 자바스크립트 객체로 변환합니다.
app.use(express.json())

app.post('/api/chat', (req, res) => {
  const { message } = req.body

  console.log('받은 메시지:', message)

  res.json({
    ok: true,
    받은문장: message
  })
})

app.listen(3000, () => {
  console.log('서버 실행: http://localhost:3000')
})

한 줄씩 이해하기

Express 불러오기

const express = require('express')

설치한 Express 라이브러리를 현재 파일에서 사용할 수 있게 가져옵니다.

Express 앱 만들기

const app = express()

app은 서버를 설정하고 요청을 처리하는 중심 객체입니다.

JSON 해석 기능 켜기

app.use(express.json())

클라이언트가 보내는 JSON 문자열을 자바스크립트 객체로 변환합니다.

클라이언트가 다음 JSON을 보냈다고 가정해 보겠습니다.

{
  "message": "안녕하세요"
}

express.json()이 있으면 서버에서 다음과 같이 사용할 수 있습니다.

req.body.message

결과:

안녕하세요

express.json()이 없으면 req.body가 undefined가 되어 데이터를 읽지 못할 수 있습니다.

POST 요청 처리하기

app.post('/api/chat', (req, res) => {

의미는 다음과 같습니다.

POST 방식으로 /api/chat 주소에 요청이 오면 이 함수를 실행한다.

같은 /api/chat이라도 요청 방식이 다르면 다른 요청입니다.

GET  /api/chat
POST /api/chat

현재 서버에는 POST 처리만 있으므로 브라우저 주소창에서 http://localhost:3000/api/chat을 열면 원하는 결과가 나오지 않습니다. 주소창은 기본적으로 GET 요청을 보내기 때문입니다.

구조 분해 할당으로 message 꺼내기

const { message } = req.body

다음 코드의 짧은 표현입니다.

const message = req.body.message

서버 터미널에 출력하기

console.log('받은 메시지:', message)

이 내용은 사용자의 브라우저가 아니라 node index.js를 실행한 서버 터미널에 표시됩니다.

JSON으로 답장하기

res.json({
  ok: true,
  받은문장: message
})

서버가 클라이언트에게 다음과 같은 응답을 보냅니다.

{
  "ok": true,
  "받은문장": "안녕하세요"
}

res.json()은 객체를 JSON 문자열로 변환하고 JSON 응답이라는 정보도 함께 설정합니다.

3000번 포트에서 기다리기

app.listen(3000, () => {
  console.log('서버 실행: http://localhost:3000')
})

서버가 3000번 포트를 사용해 요청을 기다립니다.

---

5. 입력받아 POST 보내기: send.js

const readline = require('readline')

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
})

rl.question('메시지: ', async (message) => {
  try {
    const response = await fetch('http://localhost:3000/api/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ message })
    })

    if (!response.ok) {
      throw new Error(`서버 오류: ${response.status}`)
    }

    const result = await response.json()
    console.log('서버 답장:', result)
  } catch (error) {
    console.error('요청 실패:', error.message)
    console.log('서버를 먼저 실행했는지 확인하세요.')
  } finally {
    rl.close()
  }
})

기존 .then() 방식도 올바르지만, 초보자가 실행 순서를 읽기 쉬운 async/await 형태로 작성한 예제입니다.

입력창 만들기

const readline = require('readline')

Node.js 터미널에서 사용자의 키보드 입력을 받기 위한 기본 모듈입니다.

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
})

• process.stdin: 키보드로 입력받기
• process.stdout: 터미널에 글자 출력하기

메시지 입력받기

rl.question('메시지: ', async (message) => {

터미널에 다음과 같이 표시됩니다.

메시지:

사용자가 문장을 작성하고 Enter를 누르면 그 내용이 message 변수에 저장됩니다.

fetch로 POST 요청 보내기

const response = await fetch('http://localhost:3000/api/chat', {

fetch()는 다른 서버 주소로 HTTP 요청을 보내는 함수입니다.

await는 서버 응답이 도착할 때까지 해당 함수 안에서 기다린다는 뜻입니다.

POST 방식 지정하기

method: 'POST'

이 요청이 데이터 제출을 위한 POST 요청이라고 지정합니다.

JSON이라는 사실 알리기

headers: {
  'Content-Type': 'application/json'
}

서버에게 다음과 같이 알려주는 꼬리표입니다.

요청 body에 JSON을 넣어서 보냅니다.

서버의 express.json()은 이 정보를 보고 JSON 본문을 해석합니다.

객체를 JSON 문자열로 바꾸기

body: JSON.stringify({ message })

{ message }는 다음의 축약 표현입니다.

{
  message: message
}

사용자가 반갑습니다라고 입력했다면:

{ message: '반갑습니다' }

JSON.stringify()를 거치면 전송할 수 있는 JSON 문자열이 됩니다.

{"message":"반갑습니다"}

서버 응답 확인하기

if (!response.ok) {
  throw new Error(`서버 오류: ${response.status}`)
}

서버가 400, 404, 500 같은 오류 상태를 돌려준 경우 오류로 처리합니다.

fetch()는 서버가 404나 500을 보내도 자동으로 catch로 넘어가지 않기 때문에 response.ok 확인이 중요합니다.

응답 JSON을 객체로 변환하기

const result = await response.json()

서버가 보낸 JSON 문자열을 자바스크립트 객체로 변환합니다.

console.log('서버 답장:', result)

예상 결과:

서버 답장: { ok: true, '받은문장': '안녕하세요' }

---

6. 실행 방법

터미널을 두 개 엽니다.

첫 번째 터미널: 서버 실행

node index.js

출력:

서버 실행: http://localhost:3000

이 터미널은 종료하지 말고 그대로 둡니다.

두 번째 터미널: 메시지 보내기

node send.js

입력:

메시지: POST 연습 중입니다

보내는 쪽 출력:

서버 답장: { ok: true, '받은문장': 'POST 연습 중입니다' }

서버 쪽 출력:

받은 메시지: POST 연습 중입니다

이로써 다음 왕복이 완료된 것입니다.

send.js
  └─ body로 메시지 전송
       ↓
index.js
  └─ req.body에서 메시지 확인
       ↓
index.js
  └─ res.json()으로 응답
       ↓
send.js
  └─ response.json()으로 응답 확인

---

7. 데이터가 실제로 어떻게 변하는지

사용자가 다음 문장을 입력했다고 가정해 보겠습니다.

오늘 날씨가 어때?

① 입력 직후

message === '오늘 날씨가 어때?'

② 자바스크립트 객체 만들기

{ message: '오늘 날씨가 어때?' }

③ JSON 문자열로 변환하기

JSON.stringify({ message })

결과:

{"message":"오늘 날씨가 어때?"}

④ 서버가 JSON 해석하기

app.use(express.json())

서버의 req.body:

{
  message: '오늘 날씨가 어때?'
}

⑤ 서버가 message 꺼내기

const { message } = req.body

⑥ 서버가 결과 보내기

res.json({
  ok: true,
  받은문장: message
})

⑦ 클라이언트가 응답 해석하기

const result = await response.json()

최종 객체:

{
  ok: true,
  받은문장: '오늘 날씨가 어때?'
}

---

8. 안전한 서버 코드로 개선하기

현재 코드에서는 body가 없거나 message가 잘못 들어오면 문제가 생길 수 있습니다. 실제 서버에 가깝게 검증 기능을 넣어보겠습니다.

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

app.use(express.json())

app.post('/api/chat', (req, res) => {
  const { message } = req.body

  if (typeof message !== 'string' || message.trim() === '') {
    return res.status(400).json({
      ok: false,
      error: 'message를 문자열로 입력해 주세요.'
    })
  }

  const cleanMessage = message.trim()

  console.log('받은 메시지:', cleanMessage)

  res.status(200).json({
    ok: true,
    받은문장: cleanMessage,
    글자수: cleanMessage.length
  })
})

app.listen(3000, '0.0.0.0', () => {
  console.log('서버 실행: http://localhost:3000')
})

검증한 내용:

• message가 실제 문자열인지 확인
• 빈 문장인지 확인
• 앞뒤 공백 제거
• 문제가 있으면 400 Bad Request 반환
• 성공하면 200 OK 반환

return이 중요한 이유:

return res.status(400).json(...)

오류 응답을 보낸 뒤 함수 실행까지 즉시 끝냅니다. return이 없으면 아래의 성공 응답도 보내려다가 “응답을 두 번 보냈다”는 오류가 발생할 수 있습니다.

---

9. HTML 페이지에서 POST 보내기

터미널 프로그램이 아니라 실제 웹페이지에서도 원리는 같습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>POST 채팅 연습</title>
</head>
<body>
  <h1>메시지 보내기</h1>

  <input id="message" placeholder="메시지를 입력하세요">
  <button id="sendButton">보내기</button>

  <pre id="result"></pre>

  <script>
    const messageInput = document.querySelector('#message')
    const sendButton = document.querySelector('#sendButton')
    const resultBox = document.querySelector('#result')

    sendButton.addEventListener('click', async () => {
      const message = messageInput.value

      try {
        const response = await fetch('/api/chat', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ message })
        })

        const result = await response.json()

        if (!response.ok) {
          throw new Error(result.error || '요청에 실패했습니다.')
        }

        resultBox.textContent = JSON.stringify(result, null, 2)
      } catch (error) {
        resultBox.textContent = error.message
      }
    })
  </script>
</body>
</html>

서버에서 HTML 파일을 제공하려면 public/index.html로 저장하고 다음 코드를 추가할 수 있습니다.

app.use(express.static('public'))

그다음 브라우저에서 아래 주소를 엽니다.

http://localhost:3000

이제 버튼을 누르면 웹페이지가 POST 요청을 보냅니다.

---

10. Claude·ChatGPT 같은 AI 서비스와의 관계

AI 채팅 서비스도 개념적으로 비슷한 흐름을 사용합니다.

사용자가 프롬프트 작성
→ 웹페이지가 서버에 요청
→ 서버가 AI 모델을 호출
→ 생성된 답변을 웹페이지에 응답
→ 웹페이지가 답변 표시

단순 예제와 실제 AI 서비스의 차이도 있습니다.

• 인증 정보가 추가될 수 있음
• 대화 기록이 함께 전송될 수 있음
• 응답이 한꺼번에 오지 않고 스트리밍될 수 있음
• 오류 처리와 사용량 제한이 있음
• 보안, 저장, 필터링 같은 서버 처리가 추가됨

따라서 전체 원리는 같지만, 실제 서비스가 반드시 단순 POST 한 번만 사용한다고 단정할 수는 없습니다. 스트리밍을 위해 SSE, WebSocket 또는 스트리밍 HTTP 응답을 사용할 수도 있습니다.

---

11. curl로 POST 요청 보내기

send.js 없이도 curl로 서버를 시험할 수 있습니다.

PowerShell에서는 따옴표 충돌을 줄이기 위해 다음 형태가 편리합니다.

curl.exe -X POST "http://localhost:3000/api/chat" `
  -H "Content-Type: application/json" `
  -d '{\"message\":\"curl에서 보낸 인사\"}'

한 줄 버전:

curl.exe -X POST "http://localhost:3000/api/chat" -H "Content-Type: application/json" -d '{\"message\":\"안녕하세요\"}'

환경에 따라 PowerShell의 따옴표 처리 방식이 다르게 느껴질 수 있습니다. 이때는 다음 명령도 사용할 수 있습니다.

$body = @{ message = "PowerShell에서 보낸 인사" } | ConvertTo-Json

Invoke-RestMethod `
  -Uri "http://localhost:3000/api/chat" `
  -Method Post `
  -ContentType "application/json" `
  -Body $body

---

 

 

---

 우리반 배치도 만들기 

* GET과 POST의 차이

• GET은 서버에서 데이터를 받아올 때 사용한다.
• POST는 서버에 데이터를 보내 새로운 데이터를 만들 때 사용한다.

예를 들면 다음과 같다.

• 학생 명단 조회: GET
• 회원가입: POST
• 글 작성: POST
• AI에게 질문 보내기: POST
• 새로운 학생 추가: POST

다만 “GET은 받기, POST는 보내기”라고만 외우면 부족하다. GET도 요청을 보내고 응답을 받으며, POST도 데이터를 보낸 뒤 서버의 응답을 받는다.

즉, 둘 다 요청과 응답의 왕복이다.

브라우저 → 서버에 요청
브라우저 ← 서버의 응답

---

2. fetch 요청을 구성하는 네 가지

오늘 사용한 fetch 코드는 다음과 같은 형태였다.

fetch('http://192.168.10.28:5000/hancom/이름/users', {
  method: 'POST',

  headers: {
    'Content-Type': 'application/json',
    Authorization: 'HANCOM'
  },

  body: JSON.stringify({
    name: '홍길동'
  })
})

fetch 요청은 크게 네 부분으로 생각하면 쉽다.

1. URL

요청을 받을 서버의 주소다.

'http://192.168.10.28:5000/hancom/이름/users'

주소는 다시 다음과 같이 나눌 수 있다.

http://192.168.10.28:5000  → 서버 주소와 포트
/hancom/이름/users       → API 경로

2. method

서버에 어떤 행동을 요청할지 정한다.

method: 'POST'

GET 요청은 기본값이므로 생략할 수 있지만, 초보 단계에서는 의도를 분명하게 표시해도 좋다.

3. headers

내가 어떤 요청을 보내는지 서버에 알려주는 정보다.

headers: {
  'Content-Type': 'application/json',
  Authorization: 'HANCOM'
}

Content-Type은 body에 JSON을 보낸다는 뜻이다.

Authorization은 서버가 요청을 허용할지 판단할 때 사용하는 인증 정보다.

오늘 나는 토큰을 주소창이나 HTML 화면에 입력해야 하는지 헷갈렸다. 하지만 토큰은 fetch의 headers 안에 넣는 것이었다.

4. body

서버에 전달할 실제 데이터다.

body: JSON.stringify({
  name: '홍길동'
})

JavaScript 객체는 그대로 전송하지 않고 JSON.stringify()를 사용해 JSON 문자열로 변환한다.

---

4. 서버에서는 데이터를 어떻게 받는가

Express 서버에서는 다음 코드가 중요하다.

app.use(express.json())

클라이언트가 보낸 JSON 문자열을 해석해서 req.body로 사용할 수 있게 해준다.

app.post('/api/chat', (req, res) => {
  const { message } = req.body

  console.log('받은 메시지:', message)

  res.json({
    ok: true,
    받은문장: message
  })
})

전체 왕복은 다음과 같다.

사용자가 문장을 입력
        ↓
fetch의 body로 전송
        ↓
Express가 express.json()으로 해석
        ↓
req.body에서 값 꺼내기
        ↓
서버가 res.json()으로 응답
        ↓
브라우저가 response.json()으로 받기
        ↓
화면에 결과 표시

여기서 한 쌍으로 기억할 것이 있다.

보내는 쪽: JSON.stringify()
받는 서버: express.json()

express.json()이 없으면 req.body가 undefined로 나올 수 있다.

---

5. 응답을 받는 과정

서버 응답도 JSON 문자열 상태로 도착하기 때문에 JavaScript 객체로 바꿔야 한다.

fetch(url, options)
  .then(response => response.json())
  .then(data => {
    console.log(data)
  })
  .catch(error => {
    console.error(error)
  })

각 단계의 의미는 다음과 같다.

.then(response => response.json())

서버의 JSON 응답을 JavaScript에서 사용할 수 있는 값으로 해석한다.

.then(data => {
  console.log(data)
})

해석된 데이터를 사용한다.

.catch(error => {
  console.error(error)
})

요청 과정에서 발생한 오류를 확인한다.

---

6. 오늘 수행한 CRUD 과제

오늘의 핵심 과제는 오염된 수강생 명단을 정상 명단으로 정리하고 HTML 배치도로 보여주는 것이었다.

CRUD는 다음 네 가지 작업을 의미한다.

작업HTTP 메서드의미

Create	POST	새로운 학생 추가
Read	GET	학생 명단 조회
Update	PUT	기존 학생 정보 수정
Delete	DELETE	학생 삭제

GET: 명단 조회

fetch(`${BASE_URL}/hancom/${CLASS_NAME}/users`, {
  headers: {
    Authorization: 'HANCOM'
  }
})
  .then(response => response.json())
  .then(students => {
    console.log(students)
  })

POST: 학생 추가

fetch(`${BASE_URL}/hancom/${CLASS_NAME}/users`, {
  method: 'POST',
  headers: {
    Authorization: 'HANCOM',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '추가할 이름'
  })
})

PUT: 이름 수정

fetch(`${BASE_URL}/hancom/${CLASS_NAME}/users/${id}`, {
  method: 'PUT',
  headers: {
    Authorization: 'HANCOM',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '새로운 이름'
  })
})

DELETE: 학생 삭제

fetch(`${BASE_URL}/hancom/${CLASS_NAME}/users/${id}`, {
  method: 'DELETE',
  headers: {
    Authorization: 'HANCOM'
  }
})

모든 요청에는 다음 인증 헤더가 필요했다.

Authorization: 'HANCOM'

---

7. 이름과 ID는 다르다

오늘 발생한 문제 중 하나는 학생 이름을 수정했더니 다른 자리가 바뀌거나 중복이 생기는 현상이었다.

여기서 중요한 사실은 다음과 같다.

이름 = 변경할 수 있는 정보
ID = 한 사람을 정확하게 찾는 고유 주소

예를 들어 다음 두 데이터가 있으면 문제가 된다.

{ id: 1, name: '박진' }
{ id: 1, name: '양하은' }

ID가 같기 때문에 서버는 어떤 학생을 수정해야 하는지 정확히 구분하기 어렵다.

정상적인 데이터는 다음과 같아야 한다.

{ id: 1, name: '박진' }
{ id: 2, name: '양하은' }

PUT과 DELETE는 이름이 아니라 ID를 기준으로 대상을 찾는다.

PUT /users/14
DELETE /users/14

따라서 이름 중복뿐 아니라 ID 중복도 반드시 확인해야 한다.

---

8. 서버 데이터와 좌석 데이터를 섞으면서 생긴 문제

과제를 진행하면서 자리 이동, 빈자리, 자리 없는 사람, 자동 정리 등의 기능을 추가했다.

아이디어 자체는 좋았지만, 서버 명단과 브라우저 좌석 정보가 동시에 학생 상태를 관리하면서 충돌이 생겼다.

예를 들어 다음처럼 두 곳에서 정보를 관리할 수 있다.

강사 서버: 14번 ID 학생은 양하은
브라우저 좌석 정보: 14번 좌석은 박진

이렇게 데이터의 주인이 두 곳이 되면 다음 문제가 생길 수 있다.

• 이름을 수정했는데 빈자리로 이동함
• 한 사람이 두 자리에 나타남
• 화면과 서버의 명단 수가 다름
• 삭제 버튼을 두 번 눌러야 반영됨
• 누락 인원 수와 화면 명단 수가 다름

이 문제를 줄이려면 서버를 명단의 기준으로 삼는 것이 좋다.

서버 데이터 변경
      ↓
GET으로 최신 명단 다시 조회
      ↓
받은 데이터로 화면 전체를 다시 그림

화면에서 값을 억지로 예상해서 바꾸는 것보다 서버의 최신 데이터를 다시 받아오는 방식이 안전하다.

---

9. AI 질문 기능도 같은 POST 구조였다

Groq를 사용한 AI 질문 기능도 기본 구조는 같았다.

브라우저 입력
     ↓
내 Express 서버에 POST
     ↓
Express 서버가 Groq API에 요청
     ↓
Groq의 답변
     ↓
Express 서버가 브라우저에 응답
     ↓
화면에 AI 답변 표시

클라이언트가 Groq API에 직접 요청하지 않고 내 서버를 거치는 중요한 이유는 API 키를 보호하기 위해서다.

client/index.html
    ↓ 질문만 전송
server/index.js
    ↓ .env의 API 키 사용
Groq API

API 키는 클라이언트 HTML에 넣으면 안 된다. 브라우저에서 누구나 확인할 수 있기 때문이다.

---

10. 서버가 켜진 것처럼 보였지만 실제로 종료된 경우

터미널에 다음과 같이 출력되었다.

http://localhost:3000
PS C:\프로젝트\server>

주소가 출력됐기 때문에 서버가 실행됐다고 생각하기 쉽다.

하지만 PowerShell 입력 프롬프트가 바로 돌아왔다면 Node 프로세스가 종료됐을 가능성이 있다.

정상적으로 서버가 계속 실행 중이라면 일반적으로 해당 터미널은 서버 프로세스가 차지하고 있어야 한다.

오늘은 이미 3000번 포트를 다른 프로그램이 사용하고 있어 충돌이 생겼고, 서버와 클라이언트를 3001번 포트로 맞췄다.

app.listen(3001)

fetch('http://localhost:3001/api/chat')

여기서 배운 중요한 기준은 다음과 같다.

서버가 듣는 포트 = 클라이언트가 요청하는 포트

둘 중 하나만 바꾸면 연결되지 않는다.

---

12. 오류 메시지를 해석하는 방법

앞으로는 화면이 작동하지 않는다고 무작정 코드를 여러 군데 고치지 말아야겠다.

401 Unauthorized

인증 정보가 없거나 잘못된 경우다.

확인할 부분:

headers: {
  Authorization: 'HANCOM'
}

주소창으로 API에 직접 접속하면 Authorization 헤더를 넣을 수 없기 때문에 401이 나올 수 있다.

req.body가 undefined

서버에서 다음 코드가 있는지 확인한다.

app.use(express.json())

클라이언트도 다음 두 설정을 확인한다.

headers: {
  'Content-Type': 'application/json'
}

body: JSON.stringify(data)

서버 안 켜짐 또는 fetch failed

다음 순서로 확인한다.

1. 서버 터미널이 계속 실행 중인가?
2. 서버 주소가 맞는가?
3. 포트가 같은가?
4. 서버 라우트가 맞는가?
5. 브라우저 Console에 실제 오류가 무엇인가?
6. 서버 터미널에는 어떤 오류가 있는가?

이름 수정 후 중복이나 빈자리 발생

다음 항목을 확인한다.

1. ID가 중복됐는가?
2. PUT URL에 올바른 ID를 넣었는가?
3. 서버 데이터와 별도의 좌석 데이터가 충돌하는가?
4. 수정 후 GET으로 최신 데이터를 다시 받았는가?