Server
νμ΅ ν€μλ
Express μ΄μ©ν κ°λ¨ν Server ꡬμΆ
Fetch API
Axios
Express μ΄μ©ν κ°λ¨ν Server ꡬμΆ
νμν ν¨ν€μ§ μ€μΉ
cors
express
nodemon
uuid
npm init -y
npm i express nodemon uuid
Server ꡬλ λ°©λ²
ν΄λΉ λ°©μμ μμ μ¬νμ λ°μν΄μ£Όμ§ μμ, server off νκ³ μ¬κ΅¬λ
node server.js // ππ» ꡬλν νμΌ
nodemonμ server.jsμ μμ μ¬νμ κ°μ§ν΄μ λ°λ‘ λ°μν΄μ£ΌκΈ° λλ¬Έμ μ¬μ©
npx nodemon server.js
π APIλ₯Ό μ¬μ©νκΈ° μν΄μ μμμΌ νλ κ°λ
μΉλΈλΌμ°μ μ μλ²μ ν΅μ νκΈ°μν΄μ HTTP νλ‘ν μ½μ μ¬μ©
HTTP Protocol : TCP/IP κΈ°λ°μΌλ‘ ν΄λΌμ΄μΈνΈμ μλ² μ¬μ΄μ μ΄λ£¨μ΄μ§λ μμ²/μλ΅ νλ‘ν μ½
TCP/IP κΈ°λ°μΌλ‘ ν΄λΌμ΄μΈνΈμ μλ² μ¬μ΄μ μ΄λ£¨μ΄μ§λ μμ²/μλ΅ νλ‘ν μ½
HTTP : TCP/IP
QUIC : UDP κΈ°λ°μΌλ‘ λΉ λ₯Έ μ μ‘ μλλ₯Ό κ°μ§λ νλ‘ν μ½
HTTP Method : GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD, TRACE
GET : λ°μ΄ν°λ₯Ό μμ²νκΈ° μν΄ μ¬μ©λλ λ©μλ β 보μμ μ½ν¨
POST : λ°μ΄ν°λ₯Ό μμ±νκΈ° μν΄ μ¬μ©λλ λ©μλ β 보μμ μμ μ± λμ
PUT : λ°μ΄ν°λ₯Ό μ λ°μ΄νΈνκΈ° μν΄ μ¬μ©λλ λ©μλ β λ°μ΄ν°λ₯Ό
μ 체μ μΌλ‘
μ λ°μ΄νΈPATCH : λ°μ΄ν°λ₯Ό μ λ°μ΄νΈνκΈ° μν΄ μ¬μ©λλ λ©μλ β λ°μ΄ν°λ₯Ό
μΌλΆλΆλ§
μ λ°μ΄νΈDELETE : λ°μ΄ν°λ₯Ό μμ νκΈ° μν΄ μ¬μ©λλ λ©μλ
Http/Https : Https(보μ μΈμ¦μκ° μΆκ°λ νλ‘ν μ½) β μΈνλΌ μμ
π€ RESTful, REST νΈμΆνλ€λΌλ μλ―Έλ? HTTP Methodλ₯Ό κ·μΉμ λ§λ API μ€κ³ μ λ΅
π©π»βπ» TodoListμ API μμ±
GET : Todos μ‘°ν
let todos = [];
app.get('/todos', (req, res) => {
res.status(200).json(todos);
});
POST : Todo μμ±
const bodyParser = require('body-parser');
const { v4: uuidv4 } = require('uuid');
app.post('/todos', (req, res) => {
const { task } = req.body;
const newTodo = {
id: uuidv4(),
task,
completed: false,
};
res.status(200).json(newTodo);
});
PATCH : Todo Completed Update
app.patch('/todos/:id', (req, res) => {
const { id } = req.params;
const findTodo = todos.find((todo) => todo.id === id);
if (!findTodo) {
res.status(400).send('Not found Todo');
}
todos = todos.map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
);
res.status(200).send(findTodo);
});
PUT : Todo Task Update
app.put('/todos/:id', (req, res) => {
const { id } = req.params;
const { task } = req.body;
const findTodo = todos.find((todo) => todo.id === id);
if (!findTodo) {
res.status(400).send('Not found Todo');
}
todos = todos.map((todo) => (todo.id === id ? { ...todo, task } : todo));
res.status(200).send(todos.find((todo) => todo.id === id));
});
DELETE : ν μΌ μμ
app.delete('/todos/:id', (req, res) => {
const { id } = req.params;
const findTodo = todos.find((todo) => todo.id === id);
if (!findTodo) {
res.status(400).send('Not found Todo');
}
todos = todos.filter((todo) => todo.id !== id);
res.status(200).send('Todo Delete Success');
});
Fetch API
CORS
ν΄κ²°νλ 주체λ Backend (κ·Όλ³Έ)
π¨ Access to fetch at 'http://localhost:4000/todos' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
νμ΅μ λͺ©μ μμΌλ‘, Express λ―Έλ€μ¨μ΄λ‘ ν΄κ²°
npm i cors
// server.js
const cors = require('cors');
app.use(cors());
GET
κΈ°λ³Έ μ¬μ©λ²
const fetchDate = () => {
fetch('http://localhost:4000/todos') // ππ» Promise λ°ν
.then((res) => res.json())
.then((data) => console.log(data))
.catch((e) => console.log(e));
};
async/await κ³Ό ν¨κ» μ¬μ©νλ λ°©λ²
const fetchDateAsync = async () => {
try {
const response = await fetch('http://localhost:4000/todos');
const data = await response.json();
console.log(data);
} catch (e) {
console.log(e);
}
};
const fetchDateAsync = async () => {
try {
const data = await (await fetch('http://localhost:4000/todos')).json();
console.log(data);
} catch (e) {
console.log(e);
}
};
POST
const fetchAdd = async () => {
await fetch('http://localhost:4000/todos', {
method: 'POST', // ππ» νμ λλ¬Έμλ‘
headers: {
'Content-Type': 'application/json', // ππ» κΌ Dataμ νμ
μ λͺ
μν΄μ£Όμ΄μΌ νλ€.
},
body: JSON.stringify({ text: 'Learn React' }),
});
};
PATCH
const fetchToggle = async () => {
await fetch(`http://localhost:4000/todos/${id}`, {
method: 'PATCH',
});
};
DELETE
const fetchDelete = async () => {
await fetch(`http://localhost:4000/todos/${id}`, {
method: 'DELETE',
});
};
Axios
μ€μΉ
npm i axios
π§ λ©΄μ μ§λ¬Έ : λλ€ http 리νμ€νΈλ₯Ό λ§λλ건 λμΌνλ€. fetch API λ΄μ₯ ν¨μμ΄κ³ , axiosλ λΌμ΄λΈλ¬λ¦¬μ΄κΈ° λλ¬Έμ fetch API λ³΄λ€ λ λμ λ²μλ₯Ό μ»€λ² ν μ μλ€. (μ¬μ©μ μμ΄ νΈμμ±μ μ 곡νλ μ₯μ μ΄ μλ€.)
GET
const axiosDate = () => {
axios
.get('http://localhost:4000/todos')
.then((res) => {
console.log(res);
console.log(res.data);
})
.catch((e) => console.log(e));
};
const axiosDateAsync = async () => {
try {
const response = await axios.get('http://localhost:4000/todos');
console.log(response.data);
} catch (e) {
console.log(e);
}
};
POST
const axiosPost = async () => {
try {
await axios.post('http://localhost:4000/todos', {
text: 'Learn React Axios',
});
} catch (e) {
console.log(e);
}
};
Patch
const axiosPatch = async () => {
try {
await axios.patch(`http://localhost:4000/todos/${id}`);
} catch (e) {
console.log(e);
}
};
Delete
const axiosDelete = async () => {
try {
await axios.delete(`http://localhost:4000/todos/${id}`);
} catch (e) {
console.log(e);
}
};
Last updated