이전 글에서는 Nodejs를 사용하여 RESTful API 서버를 만드는 방법에 대해 알아보았다. 이번 글에서는 해당 API 서버와 통신하는 클라이언트 서버를 구축하는 방법을 살펴볼 것이다. 이 클라이언트는 웹 페이지를 통해 사용자에게 인터페이스를 제공하며, JavaScript를 통해 서버와 데이터를 주고받는다.
1. Nodejs로 RESTful API 서버와 클라이언트가 통신하는 구조
Nodejs로 RESTful API 서버와 클라이언트가 통신하는 구조는 위 그림과 같이 설정했다. 간단하게 웹서버가 웹페이지 돌리고, 자바스크립트로 통신하는 프로그램으로 만들 것이다. 클라이언트는 Express를 사용하여 간단한 웹 서버를 설정하고, EJS를 템플릿 엔진으로 사용할 것이다.
2. 클라이언트 서버 개발 환경 설정
- 필요한 패키지 설치:
Node.js 환경에서 프로젝트를 초기화하고, Express와 EJS를 설치한다.
npm init -y
npm install express ejs
3. Express를 활용한 웹 서버 설정
- 서버 구성:
Express로 웹 서버를 구성하고, EJS를 템플릿 엔진으로 사용한다.
index.js 파일 작성
const express = require("express");
const app = express();
const PORT = process.env.PORT || 3001;
// Set EJS as the view engine
app.set("view engine", "ejs");
// Serve static files from the "public" folder
app.use(express.static("public"));
app.get("/", (req, res) => {
res.render("index");
});
app.listen(PORT, () => {
console.log(`Server listening on port ${PORT}`);
});
4. 클라이언트 사이드 뷰 생성
- 웹 페이지 뷰:
"views" 폴더 내에 index.ejs 파일을 생성하여 웹 페이지의 구조와 스타일, 그리고 기능을 정의한다.
프로젝트의 루트 폴더에 views라는 폴더를 생성하고, 이 폴더 안에 index.ejs 파일을 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RESTful Client</title>
<style>
#userList li {
cursor: pointer;
}
</style>
</head>
<body>
<h1>RESTful Client</h1>
<!-- Add User Form -->
<form id="addUserForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Add User</button>
</form>
<!-- Get Users Button -->
<button id="getUsers">Get Users</button>
<!-- User List -->
<ul id="userList"></ul>
<!-- Update User Form -->
<form id="updateUserForm" style="display: none;">
<input type="hidden" id="updateUserId" name="id">
<label for="updateName">Name:</label>
<input type="text" id="updateName" name="name">
<label for="updateEmail">Email:</label>
<input type="email" id="updateEmail" name="email">
<button type="submit">Update User</button>
</form>
<!-- Delete User Button -->
<button id="deleteUser" style="display: none;">Delete User</button>
<script>
const API_URL = "http://localhost:3000/api/users";
async function createUser(name, email) {
const response = await fetch(API_URL, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ name, email })
});
return await response.json();
}
async function getUsers() {
const response = await fetch(API_URL);
return await response.json();
}
async function updateUser(id, name, email) {
const response = await fetch(`${API_URL}/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ name, email })
});
return await response.json();
}
async function deleteUser(id) {
await fetch(`${API_URL}/${id}`, {
method: "DELETE"
});
}
// Add event listeners to HTML elements
document.getElementById("addUserForm").addEventListener("submit", async (event) => {
event.preventDefault();
const name = event.target.name.value;
const email = event.target.email.value;
const newUser = await createUser(name, email);
console.log("Created user:", newUser);
event.target.reset();
});
document.getElementById("getUsers").addEventListener("click", async () => {
const users = await getUsers();
console.log("User list:", users);
const userList = document.getElementById("userList");
userList.innerHTML = "";
users.forEach((user) => {
const li = document.createElement("li");
li.textContent = `${user.name} (${user.email})`;
li.addEventListener("click", () => {
document.getElementById("updateUserForm").style.display = "block";
document.getElementById("deleteUser").style.display = "block";
document.getElementById("updateUserId").value = user.id;
document.getElementById("updateName").value = user.name;
document.getElementById("updateEmail").value = user.email;
});
userList.appendChild(li);
});
});
document.getElementById("updateUserForm").addEventListener("submit", async (event) => {
event.preventDefault();
const id = event.target.id.value;
const name = event.target.name.value;
const email = event.target.email.value;
const updatedUser = await updateUser(id, name, email);
console.log("Updated user:", updatedUser);
event.target.reset();
event.target.style.display = "none";
document.getElementById("deleteUser").style.display = "none";
});
document.getElementById("deleteUser").addEventListener("click", async () => {
const id = document.getElementById("updateUserId").value;
await deleteUser(id);
console.log("Deleted user:", id);
document.getElementById("updateUserForm").reset();
document.getElementById("updateUserForm").style.display = "none";
document.getElementById("deleteUser").style.display = "none";
});
</script>
</body>
</html>
5. API 서버 실행
node index.js
6. 클라이언트 서버 실행 및 확인
- 터미널에서 node index.js 명령어를 실행하여 클라이언트 서버를 시작한다.
- 웹 브라우저를 통해 localhost:3001 주소로 접속하여 웹 페이지가 제대로 작동하는지 확인한다.
이름과 이메일을 입력하고 사용자를 추가해서 리스트를 요청하고 선택한 사용자의 데이터를 수정하고 삭제를 진행한다.
결론
Nodejs와 Express, EJS를 활용하면 간단한 웹 클라이언트를 만들 수 있다. 특히 이 클라이언트는 RESTful API 서버와의 통신을 JavaScript를 통해 구현하므로, 서버와 데이터를 실시간으로 주고받는 동적인 웹 페이지를 만들 수 있다. 이를 통해 사용자는 웹 페이지에서 데이터의 생성, 조회, 수정, 삭제 등의 작업을 직관적으로 수행할 수 있다.
이전 글 보기: [프로그래밍/Server] - [Nodejs] RESTful API Server 만들기
[Nodejs] RESTful API Server 만들기
RESTful API는 웹 애플리케이션 개발의 핵심 요소 중 하나이다. 이전 글에서는 RESTful API의 개념에 대해 소개하였다. 이번 포스트에서는 Nodejs를 활용해 실제로 간단한 RESTful API 서버를 만드는 방법에
devit.koreacreatorfesta.com
'Language > Nodejs' 카테고리의 다른 글
| CORS는 왜 사이트를 만들 때 어렵게 만드는거야? (0) | 2023.04.18 |
|---|---|
| [Nodejs] RestAPI 서버를 만들었는데 TypeError: Failed to fetch 에러 (0) | 2023.04.18 |
| [Nodejs] RESTful API Server 만들기 (0) | 2023.04.14 |
| [Nodejs] RESTful API Server 란? (0) | 2023.04.14 |
| [Nodejs] CHATGPT API를 활용해서 웹 서비스에 적용하기 (1) | 2023.03.29 |
