백엔드/Node
회원 CRUD, splice()
wintertreey
2024. 8. 13. 12:54
넘길정보가 담긴 파일
import express from "express";
import path from "path";
import { fileURLToPath } from "url";
import cors from "cors";
const __filename = fileURLToPath(import.meta.url); //import.meta.url : 현재 파일의 경로
const __dirname = path.dirname(__filename);
const app = express();
app.use(cors()); // cors 미들웨어 등록
app.use(express.json()); //express.json 미들웨어. json 파싱용.
app.set("port", process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, 'public')));
let datas = [
{id:1, name:'손오공', position:'자바개발'},
{id:2, name:'저팔계', position:'웹퍼블리셔'}
]
let nextid= 3; //새로운 직원이 추가될때 id 증가용
app.get('/', (req, res) => {
res.send('부릉부릉 시동을 걸어봅니다~ /emp, /emp/1, /abc.html');
});
app.listen(app.get("port"), () => {
console.log(app.get("port"), "번 포트로 서버 서비스 시작중");
});
전체 틀
<body>
<div>
<h2>모든회원(GET)</h2>
<button id="get-emps">모든 회원읽기</button>
<ul id="emp-list"></ul>
</div>
<div>
<h2>회원 추가(POST)</h2>
<input type="text" id="new-emp-name" placeholder="이름입력"/>
<input type="text" id="new-emp-position" placeholder="업무입력"/>
<button id="add-emp">회원추가</button>
</div>
<div>
<h2>회원 수정(PUT)</h2>
<input type="number" id="update-emp-id" placeholder="아이디입력"/>
<input type="text" id="update-emp-name" placeholder="이름입력"/>
<input type="text" id="update-emp-position" placeholder="업무입력"/>
<button id="update-emp">회원수정</button>
</div>
<div>
<h2>회원 삭제(DELETE)</h2>
<input type="number" id="delete-emp-id" placeholder="id"/>
<button id="delete-emp">회원삭제</button>
</div>
버튼 동작 수행을 시행해보자.
GET요청 : 자료 전체 읽기
<script>
document.addEventListener('DOMContentLoaded', () => {
const empList = document.getElementById('emp-list'); //모든 회원 읽기 출력
const getEmpButton = document.getElementById('get-emps');
const addEmpButton = document.getElementById('add-emp');
const updateEmpButton = document.getElementById('update-emp');
const deleteEmpButton = document.getElementById('delete-emp');
//GET요청: 전체 직원 읽기
getEmpButton.addEventListener('click', () => {
fetch('/emp')
.then(response => response.json())
.then(data => {
empList.innerHTML = '';
data.forEach(emp => {
const li = document.createElement('li');
li.textContent = `${emp.id} : ${emp.name} - ${emp.position}`;
empList.appendChild(li);
});
})
.catch(err => console.log('err fetch: ', err));
});
//전체 자료 읽기
app.get('/emp', (req, res) => {
res.json(datas);
})
Post 요청 : 자료 추가
//POST요청: 새 직원 추가
addEmpButton.addEventListener("click", () => {
const name = document.getElementById("new-emp-name").value;
const position = document.getElementById("new-emp-position").value;
fetch("/emp", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name, position }),
})
.then((response) => response.json())
.then((emp) => {
const li = document.createElement("li");
li.textContent = `${emp.id} : ${emp.name} - ${emp.position}`;
empList.appendChild(li);
})
.catch((err) => console.log("err fetch: ", err));
});//자료추가
app.post('/emp', (req, res) => {
const newEmployee = {
id:nextid++,
name:req.body.name,
position:req.body.position
};
datas.push(newEmployee);
res.status(201).json(newEmployee);
})
자료1개읽기
//자료 1개 읽기
app.get('/emp/:id', (req, res) => {
const employee = datas.find(emp => emp.id === parseInt(req.params.id, 10));
if(!employee) return res.status(404).send('해당 자료는 존재하지 않습니다');
res.json(employee);
})
Put요청 : 자료 수정
//PUT 요청으로 직원 수정
updateEmpButton.addEventListener("click", () => {
const id = document.getElementById("update-emp-id").value;
const name = document.getElementById("update-emp-name").value;
const position = document.getElementById("update-emp-position").value;
fetch(`/emp/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name, position }),
})
.then(response => {
if(!response.ok){
throw new Error('수정 네트워크 오류');
}
return response.json();
})
.then((emp) => {
alert(`수정 성공: ${emp.name} - ${emp.position}`)
})
.catch((err) => console.log("err fetch: ", err));
});
// 자료 수정
app.put('/emp/:id', (req, res) => {
console.log(req.body);
const employee = datas.find(emp => emp.id === parseInt(req.params.id, 10));
if(!employee) return res.status(404).send('해당 자료는 존재하지 않습니다');
employee.name = req.body.name || employee.name; //새데이터있으면 그걸로 교체, 아니면 원래데이터로.
employee.position = req.body.position || employee.position;
res.json(employee);
})
Delete: 삭제
//DELETE 요청으로 직원 삭제
deleteEmpButton.addEventListener("click", () => {
const id = document.getElementById("delete-emp-id").value;
fetch(`/emp/${id}`, {
method: 'DELETE',
})
.then(response => {
if(!response.ok){
throw new Error('삭제 네트워크 오류');
}
return response.json();
})
.then(emp => {
alert(`삭제 성공: ${emp.name} - ${emp.position}`)
})
.catch(err => console.log("err fetch: ", err));
});
});
</script>// 자료 삭제
app.delete('/emp/:id', (req, res) => {
console.log(req.params.id);
const empIndex = datas.findIndex(emp => emp.id === parseInt(req.params.id, 10));
if(empIndex === -1) return res.status(404).send('해당 자료는 존재하지 않습니다');
const [delEmp] = datas.splice(empIndex, 1);
res.json(delEmp);
})
++ splice
https://www.freecodecamp.org/korean/news/javascript-splice-method/
자바스크립트에서 `.splice()` 배열 메서드 사용하기
자바스크립트의 splice() 메서드는 배열 객체에 사용할 수 있는 내장 메서드입니다. 이는 기존 요소를 삭제하거나 교체하여 배열의 내용을 변경하며, 제거된 요소가 담긴 별도의 배열을 새로 반환
www.freecodecamp.org