{"id":4469,"date":"2026-02-18T11:44:46","date_gmt":"2026-02-18T02:44:46","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=4469"},"modified":"2026-02-23T10:20:49","modified_gmt":"2026-02-23T01:20:49","slug":"vitereact-example7","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/02\/18\/vitereact-example7\/","title":{"rendered":"[Vite+React]GET,POST,PATCH,PUT(MacOS)"},"content":{"rendered":"\n

ReactExample7<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 Express\uc11c\ubc84\uc5d0\uc11c GET,POST,PATCH,PUT\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.
Below is an explanation of GET, POST, PATCH, and PUT on the Express server.<\/p>\n\n\n\n

\uba54\uc11c\ub4dc\/Method<\/td>\uc6a9\ub3c4\/Use<\/td>\ud2b9\uc9d5\/Characteristic<\/td><\/tr>
GET<\/td>\uc870\ud68c\/Check<\/td>\ub9ac\uc18c\uc2a4 \uac00\uc838\uc624\uae30
\uc8fc\uc18c\ucc3d\uc5d0 \ub370\uc774\ud130\ub97c \ubcf4\ub0c4
– \/users\/1?name=kim<\/td><\/tr>
POST<\/td>\uc0dd\uc131\/Creation<\/td>\uc0c8 \ub9ac\uc18c\uc2a4 \ucd94\uac00
\ub370\uc774\ud130\ub97c \ubc14\ub514\uc5d0 \uc228\uaca8\uc11c \ubcf4\ub0c4
– { “name”: “John”, “age”: 30 }<\/td><\/tr>
PATCH<\/td>\ubd80\ubd84\uc218\uc815\/Partial modification<\/td>\uc77c\ubd80 \uc18d\uc131\ub9cc \ubcc0\uacbd
\ub370\uc774\ud130\ub97c \ubc14\ub514\uc5d0 \uc228\uaca8\uc11c \ubcf4\ub0c4<\/td><\/tr>
PUT<\/td>\uc804\uccb4\uc218\uc815\/Edit all<\/td>\uae30\uc874 \ub9ac\uc18c\uc2a4\ub97c \uc0c8 \ub370\uc774\ud130\ub85c \uc644\uc804\ud788 \uad50\uccb4
\ub370\uc774\ud130\ub97c \ubc14\ub514\uc5d0 \uc228\uaca8\uc11c \ubcf4\ub0c4<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\ud83d\udc49\ud83c\udffb\uc608\ub97c \ub4e4\uc5b4, PATCH<\/code> \uc694\uccad\uc5d0\uc11c\ub294 { \"nickname\": \"johnny\" }<\/code> \uac19\uc740 \uc77c\ubd80 \ud544\ub4dc\ub9cc \ubcf4\ub0b4\ub3c4 \ub418\uc9c0\ub9cc, PUT<\/code> \uc694\uccad\uc5d0\uc11c\ub294 \ud574\ub2f9 \uc720\uc800\uc758 \uc804\uccb4 \ub370\uc774\ud130\ub97c { \"name\": \"V\", \"age\": 30, \"nickname\": \"johnny\" }<\/code>\ucc98\ub7fc \ubaa8\ub450 \ubcf4\ub0b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \/ Create project<\/p>\n\n\n\n

\u2714\ufe0f Express Sever<\/p>\n\n\n\n

% cd Example7\/server\/\n% npm init -y\n$ npm install express<\/code><\/pre>\n\n\n\n
\u2714\ufe0f React <\/p>\n\n\n\n
% npm create vite@latest client --template react-ts<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffbNodejs Express Server<\/p>\n\n\n\n
\u2714\ufe0f Sever.js<\/p>\n\n\n\n
const express = require(\"express\");\nconst app = express();\nconst PORT = 3000;\n\napp.use(express.json());\n\n\/\/ \uac00\uc0c1\uc758 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \/ Virtual Database\nlet users = [{ id: \"1\", name: \"V\", age: 20, nickname: \"Cyberpunk2077\" }];\n\n\/\/ GET: \ud2b9\uc815 \uc720\uc800 \uc870\ud68c \/ Specific user inquiry\napp.get(\"\/users\/:id\", (req, res) => {\n  const user = users.find((u) => u.id === req.params.id);\n  user\n    ? res.json(user)\n    : res.status(404).json({ message: \"\uc720\uc800 \uc5c6\uc74c\/No user\" });\n});\n\n\/\/ POST: \uc0c8\ub85c\uc6b4 \uc720\uc800 \uc0dd\uc131 \/ Create new user\napp.post(\"\/users\", (req, res) => {\n  const newUser = { id: String(users.length + 1), ...req.body };\n  users.push(newUser);\n  res.status(201).json(newUser);\n});\n\n\/\/ PATCH: \ub370\uc774\ud130\uc758 '\uc77c\ubd80'\ub9cc \uc218\uc815 (\uae30\uc874 \ub370\uc774\ud130 \uc720\uc9c0)\n\/\/ Modify only 'part' of the data (keep existing data)\napp.patch(\"\/users\/:id\", (req, res) => {\n  const index = users.findIndex((u) => u.id === req.params.id);\n  if (index !== -1) {\n    \/\/ \uae30\uc874 \uac12 + \ubc14\ub010 \uac12 \ud569\uce58\uae30 \/ Merge existing value + changed value\n    users[index] = { ...users[index], ...req.body };\n    res.json(users[index]);\n  } else {\n    res.status(404).json({ message: \"\uc720\uc800 \uc5c6\uc74c\/No user\" });\n  }\n});\n\n\/\/ PUT: \ub370\uc774\ud130 '\uc804\uccb4'\ub97c \uad50\uccb4 (\ubcf4\ub0b4\uc9c0 \uc54a\uc740 \ud544\ub4dc\ub294 \uc0ac\ub77c\uc9d0)\n\/\/ Replace 'all' data (unsent fields disappear)\napp.put(\"\/users\/:id\", (req, res) => {\n  const index = users.findIndex((u) => u.id === req.params.id);\n  if (index !== -1) {\n    \/\/ \uae30\uc874 \ub0b4\uc6a9 \ubb34\uc2dc\ud558\uace0 \ub36e\uc5b4\uc4f0\uae30 \/ Ignore existing content and overwrite\n    users[index] = { id: req.params.id, ...req.body };\n    res.json(users[index]);\n  } else {\n    res.status(404).json({ message: \"\uc720\uc800 \uc5c6\uc74c\/No user\" });\n  }\n});\n\n\/\/ DELETE: \ub370\uc774\ud130 \uc0ad\uc81c \/ data deletion\napp.delete(\"\/users\/:id\", (req, res) => {\n  users = users.filter((u) => u.id !== req.params.id);\n  res.json({ message: `User ${req.params.id} \uc0ad\uc81c \uc644\ub8cc \/ Deletion complete` });\n});\n\napp.listen(PORT, () => console.log(`Server: http:\/\/localhost:${PORT}`));\n<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffbReact Code<\/p>\n\n\n\n
\u2714\ufe0f \ub514\ub809\ud1a0\ub9ac\uc774\ub3d9 \/ move directory<\/p>\n\n\n\n
% cd Example7\/client\/src<\/code><\/pre>\n\n\n\n
\u2714\ufe0f vite.config.ts<\/p>\n\n\n\n
import { defineConfig } from \"vite\";\nimport react from \"@vitejs\/plugin-react\";\n\n\/\/ https:\/\/vite.dev\/config\/\nexport default defineConfig({\n  plugins: [react()],\n  server: {\n    proxy: {\n      \/\/ '\/users'\ub85c \uc2dc\uc791\ud558\ub294 \uc694\uccad\uc744 \ubc31\uc5d4\ub4dc \uc11c\ubc84\ub85c \ubcf4\ub0c5\ub2c8\ub2e4.\n      \/\/ Send requests starting with '\/users' to the backend server.\n      \"\/users\": {\n        target: \"http:\/\/localhost:3000\",\n        changeOrigin: true,\n      },\n    },\n  },\n});<\/code><\/pre>\n\n\n\n
\u2714\ufe0fApp.tsx<\/p>\n\n\n\n
import React, { useState } from \"react\";\n\nfunction UserComponent() {\n  const [userId, setUserId] = useState(\"1\"); \/\/ \uae30\ubcf8\uac12 1\ubc88 \uc720\uc800 \/ Default user number 1\n  const [userData, setUserData] = useState(null);\n  const [log, setLog] = useState(\"\");\n\n  const updateUI = async (res) => {\n    const data = await res.json();\n    setUserData(res.ok ? data : null);\n    setLog(JSON.stringify(data, null, 2));\n  };\n\n  const getUser = () => fetch(`\/users\/${userId}`).then(updateUI);\n\n  const createUser = () =>\n    fetch(\"\/users\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\/json\" },\n      body: JSON.stringify({\n        name: \"NewUser\",\n        age: 30,\n        nickname: \"SilverHand\",\n      }),\n    }).then(updateUI);\n\n  const patchUser = () =>\n    fetch(`\/users\/${userId}`, {\n      method: \"PATCH\",\n      headers: { \"Content-Type\": \"application\/json\" },\n      \/\/ \ub2c9\ub124\uc784\ub9cc \ubcc0\uacbd \uc2dc\ub3c4 \/ Try changing only your nickname\n      body: JSON.stringify({ nickname: \"Johnny\" }),\n    }).then(updateUI);\n\n  const putUser = () =>\n    fetch(`\/users\/${userId}`, {\n      method: \"PUT\",\n      headers: { \"Content-Type\": \"application\/json\" },\n      \/\/ \uc804\uccb4 \uad50\uccb4 (nickname \ub204\ub77d \uc2dc \uc0ac\ub77c\uc9d0 \ud655\uc778\uc6a9)\n      \/\/ Replace all (to check if nickname disappears when missing)\n      body: JSON.stringify({ name: \"John\", age: 25 }),\n    }).then(updateUI);\n\n  const deleteUser = () =>\n    fetch(`\/users\/${userId}`, { method: \"DELETE\" }).then(async (res) => {\n      const data = await res.json();\n      setUserData(null);\n      setLog(data.message);\n    });\n\n  return (\n    <div style={{ padding: \"20px\", fontFamily: \"sans-serif\" }}>\n      <h1>HTTP Methods Playground<\/h1>\n      <input\n        value={userId}\n        onChange={(e) => setUserId(e.target.value)}\n        placeholder=\"User ID\"\n      \/>\n\n      <div style={{ margin: \"10px 0\", display: \"flex\", gap: \"10px\" }}>\n        <button onClick={getUser} style={{ background: \"#e1e1e1\" }}>\n          GET (\uc870\ud68c\/Search)\n        <\/button>\n        <button onClick={createUser} style={{ background: \"#d1ffd1\" }}>\n          POST (\uc0dd\uc131\/Creation)\n        <\/button>\n        <button onClick={patchUser} style={{ background: \"#fff4d1\" }}>\n          PATCH (\uc77c\ubd80\uc218\uc815\/Partial modification)\n        <\/button>\n        <button onClick={putUser} style={{ background: \"#ffd1d1\" }}>\n          PUT (\uc804\uccb4\uad50\uccb4\/Complete replacement)\n        <\/button>\n        <button onClick={deleteUser} style={{ background: \"#eee\" }}>\n          DELETE (\uc0ad\uc81c\/Deletion)\n        <\/button>\n      <\/div>\n\n      <div\n        style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: \"20px\" }}\n      >\n        <section>\n          <h3>\ud604\uc7ac \ub370\uc774\ud130 \uc0c1\uc138 \/ State <\/h3>\n          {userData ? (\n            <div style={{ border: \"1px solid blue\", padding: \"10px\" }}>\n              <p>ID: {userData.id}<\/p>\n              <p>\uc774\ub984\/Name: {userData.name || \"\uc5c6\uc74c\/none\"}<\/p>\n              <p>\ub098\uc774\/Age: {userData.age || \"\uc5c6\uc74c\/none\"}<\/p>\n              <p>\ub2c9\ub124\uc784\/NickName: {userData.nickname || \"\uc5c6\uc74c\/none\"}<\/p>\n            <\/div>\n          ) : (\n            <p>\uc870\ud68c\ub41c \ub370\uc774\ud130\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.\/No data was retrieved.<\/p>\n          )}\n        <\/section>\n        <section>\n          <h3>\uc11c\ubc84 \uc6d0\ubcf8 \uc751\ub2f5 \/ Server Response(Raw JSON) <\/h3>\n          <pre style={{ background: \"#f4f4f4\", padding: \"10px\" }}>{log}<\/pre>\n        <\/section>\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default UserComponent;\n\n<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
ReactExample7 \ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 Express\uc11c\ubc84\uc5d0\uc11c GET,POST,PATCH,PUT\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.Below is an explanation of GET, POST, PATCH, and PUT on the Express server. \uba54\uc11c\ub4dc\/Method \uc6a9\ub3c4\/Use \ud2b9\uc9d5\/Characteristic GET \uc870\ud68c\/Check \ub9ac\uc18c\uc2a4 \uac00\uc838\uc624\uae30\uc8fc\uc18c\ucc3d\uc5d0 \ub370\uc774\ud130\ub97c \ubcf4\ub0c4– \/users\/1?name=kim POST \uc0dd\uc131\/Creation \uc0c8 \ub9ac\uc18c\uc2a4 \ucd94\uac00\ub370\uc774\ud130\ub97c \ubc14\ub514\uc5d0 \uc228\uaca8\uc11c \ubcf4\ub0c4– { “name”: “John”, “age”: 30 } PATCH \ubd80\ubd84\uc218\uc815\/Partial modification \uc77c\ubd80 \uc18d\uc131\ub9cc \ubcc0\uacbd\ub370\uc774\ud130\ub97c \ubc14\ub514\uc5d0 \uc228\uaca8\uc11c \ubcf4\ub0c4 PUT \uc804\uccb4\uc218\uc815\/Edit […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1,7],"tags":[],"class_list":["post-4469","post","type-post","status-publish","format-standard","hentry","category-react","category-uncategorized","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=4469"}],"version-history":[{"count":35,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4469\/revisions"}],"predecessor-version":[{"id":4714,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4469\/revisions\/4714"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=4469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=4469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=4469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}