자바스크립트를 허용해주세요.
[ 자바스크립트 활성화 방법 ]
from Mohon Aktifkan Javascript!
 

[Express] 2장 - 라우팅 구현

728x90

✅ 1. app.get(path, callback)

express에서 app.get은 GET 요청 처리와 주로 서버에서 데이터를 조회할 때 사용합니다.

  • 특징
    • URL의 쿼리스트링(?key=value)이나 URL 파라미터(/:id)를 붙여서 요청
    • 요청 바디(body)는 거의 사용 🚫 
app.get("/users", (req, res) => {
  res.send("All User List");
});

app.get("/users/:id", (req, res) => {
  res.send(`특정 사용자 조회: ${req.params.id}`);
});
  • 사용 예: 게시판 목록 조회, 상품 검색, 특정 글 보기

✅ 2.app.post(path, callback)

express에서 app.post는 POST 요청 처리와 주로 데이터 생성시 사용합니다.

  • 특징
    • 요청 Body에 데이터를 담아 전송
    • HTML <form> 전송 , Ajax/Fetch POST 요청 등
const express = require("express");
const app = express();

app.post("/users", (req, res) => {
  const user = req.body;
  res.send(`새 사용자 생성: ${JSON.stringify(user)}`);
});
  • 사용 예: 회원가입, 새 글 작성, 상품 등록

✅ 3. app.put(path, callback)

express에서 app.put은 PUT 요청처리와 함께 기존 데이터를 전체 수정할 때 사용합니다.

  • 특징
    • 기존 데이터를 통째로 새로운 데이터로 덮어씀
    • REST API에서 주로 PUT /리소스/:id 형태로 사용
const express = require("express");
const app = express();

app.put("/user/:id", (req, res) => {
  res.send(`${req.params.id}번째 사용자 전체 정보 수정`);
});
  • 사용 예: 회원정보 전체 변경, 상품 정보 전체 수정

✅ 4.app.patch(path, callback)

express에서 app.patch는 PATCH 요청처리와 함께 기존 데이터의 일부만 수정할 때 사용합니다.

  • 특징 
    • 부분 수정이라 필요한 필드만 보냄
    • PUT과 다르게 전체 덮어쓰기가 아님
const express = require("express");
const app = express();

app.patch("/user/:id", (req, res) => {
  res.send(`${res.params.id}번 사용자 일부 정보 수정`);
});
  • 사용 예: 닉네임 변경 시, 프로필 사진 수정

✅ 5.app.delete(path, callback)

express에서 app.delete는 DELETE요청 처리와 함께 데이터를 삭제할 떄 사용합니다.

  • 특징
    • 삭제할 데이터 식별자(:id)를 URL에 포함
const express = require("express");
const app = express();

app.delete("/user/:id", (req, res) => {
  res.send(`${req.params.id}번 사용자 삭제`);
});
  • 사용 예: 회원 탈퇴, 게시글 삭제, 상품 삭제 등

✅ 6.app.all(path, callback)

express에서 app.all은 모든 HTTP 메서드(GET, POST, PUT, DELETE 등)에 대해 실행합니다.

  • 특징
    • 특정 경로에서 모든 요청을 처리하거나, 공통 로직을 실행할 때 사용
const express = require("express");
const app = express();

app.all("/test", (req, res) => {
  res.send(`모든 요청 처리: ${req.method}`);
});
  • 사용 예: 유지보수 페이지 띄우기, 공통 인증 처리

✅ 7.  URL 파라미터(req.params)와 쿼리(req.query) 비교

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

// URL 파라미터 예시: /123
app.get("/user/:id", (req, res) => {
  res.send(`ID: ${req.params.id}`);
});

// 쿼리스트링 예시: /search?keyword=node
app.get("search", (req, res) => {
  res.send(`Search: ${req.query.keyword}`);
});

✅ 8. 전체 코드 예제

// routing-server.js
const express = require("express");
const app = express();
const PORT = 3000;

// JSON 파싱 미들웨어
app.use(express.json());

// 메모리 저장
let users = [];

// 1. GET - 데이터 조회
app.get("/users", (req, res) => {
  res.send("GET 요청: 모든 사용자 조회");
});

// 2. GET(Parameter) - 단일 데이터 조회
app.get("/users/:id", (req, res) => {
  //   const { id } = req.params;
  //   res.send(`GET 요청: ${id}번 사용자 조회`);
  const id = parseInt(req.params.id);
  const user = users.find((u) => u.id === id);
  if (!user) {
    return res.status(404).json({ message: "사용자를 찾을 수 없습니다" });
  }
  res.json(user);
});

// 3. POST - 데이터 생성
app.post("/users", (req, res) => {
  //   const newUser = req.body;
  //   res.send(`POST 요청 새 사용자를 생성합니다 -> ${JSON.stringify(newUser)}`);
  const newUser = {
    id: users.length + 1,
    name: req.body.name,
    email: req.body.email,
  };
  users.push(newUser);
  res.status(201).json(newUser);
});

// 4. PUT - 전체 데이터 수정
app.put("/users/:id", (req, res) => {
  //   const { id } = req.params;
  //   const updatedUser = req.body;
  //   res.send(
  //     `PUT 요청: ${id}번 사용자 전체 수정 -> ${JSON.stringify(updatedUser)}`
  //   );
  const id = parseInt(req.params.id);
  const index = users.findIndex((u) => u.id === id);
  if (index === 1)
    return res.status.send(404).json({ message: "사용자를 찾을 수 없습니다 " });

  users[index] = { id, ...req.body };
  res.json(users[index]);
});

// 5. PATCH - 일부 데이터 수정
app.patch("/users/:id", (req, res) => {
  //   const { id } = req.params;
  //   const partialUpdate = req.body;
  //   res.send(
  //     `PATCH 요청: ${id}번 사용자 일부 수정 -> ${JSON.stringify(partialUpdate)}`
  //   );
  const id = parseInt(req.params.id);
  const user = users.find((u) => u.id === id);
  if (!user)
    return res.status.send(404).json({ message: "사용자를 찾을 수 없습니다" });
});

// 6. DELETE - 데이터 삭제
app.delete("/users/:id", (req, res) => {
  //   const { id } = req.params;
  //   res.send(`DELETE 요청: ${id}번 사용자 삭제`);
  const id = parseInt(req.params.id);
  users = users.filter((u) => u.id !== id);
  res.json({ message: "삭제 완료" });
});

// 7. ALL - 모든 메서드 처리
app.all("/test", (req, res) => {
  res.send(`ALL 요청: ${res.method} 메서드 처리`);
});

// 서버 실행
app.listen(PORT, () => {
  console.log(`🚀 Server is Running: http://localhost:${PORT} `);
});

 

다음 명령어로 서버를 실행합니다. 

node routing-server.js
🚀 Server is Running: http://localhost:3000

 ✅ 9. POSTMAN 테스트

Postman를 통해 API 테스트를 해보겠습니다. 아래 사이트에 가서 Postman 회원가입을 완료후 대쉬보드 링크창에서 테스트 해봅니다.

  • GET 전체 조회
    • Method: GET 
    • URL: http:/localhost :3000/users
    • Body: 없음
    • 결과: "GET 요청: 모든 사용자 조회"
  • GET 단일 조회
    • Method: GET
    • URL: http:/localhost:3000/users/1
    • Body: 없음
    • 결과: "GET 요청: 1번 사용자 조회"
  • POST 생성 
    • Method: POST
    • URL: http://localhost:3000/users
    • Headers: Content-Type: application/json
    • Body(raw / JSON: { "name": "Alice", "email": "alice@example.com" }
    • 결과: POST 요청 새 사용자를 생성합니다 -> { "name": "Alice", "email": "alice@example.com"} 
  • PUT 전체 수정
    • Method: PUT
    • URL: http://localhost:3000/users/1
    • Headers: Content-Type: application/json
    • Body (raw / JSON : { "name": "Alice Update", "email" : "alice@new.com"}
  • PATCH 일부 수정
    • Method: PATCH
    • URL: http://localhost:3000/users/1
    • Headers: Content-Type: application/json
    • Body (raw / JSON : {"email": "patch@example.com"}
  • DELETE 삭제
    • Method: DELETE 
    • URL: http://localhost:3000/users/1
    • Body: 없음
  • ALL 메서드
    • Method: 아무거나 (ex. OPTIONS)
    • URL: http://localhost:3000/test

 

GitHub - Koras02/express-bloging: https://thinky.tistory.com/category/Back-End/Express

https://thinky.tistory.com/category/Back-End/Express - Koras02/express-bloging

github.com

 

728x90
LIST

'Back-End > Express' 카테고리의 다른 글

[Express] 6장 라우터 분리  (0) 2025.09.06
[Express] 5장 에러 처리  (1) 2025.08.22
[Express] 4장 정적 파일 제공  (4) 2025.08.16
[Express] 3장 - 미들웨어 적용  (1) 2025.08.13
[Express] 1장 Express란 무엇인가  (3) 2025.08.10