REST와 라우팅 사용하기

박소정·2024년 8월 23일
REST라우팅백엔드
0
REST란?
실전
restFront.html
about.html
restFront.js
restServer.js
확인

Node.js

목록 보기
9/23
post-thumbnail

REST란?

  • REST(REpresentational State Transfer)

  • 서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법을 가리킵니다.

  • REST는 HTTP Method를 사용하여 자원에 대한 다양한 작업을 수행합니다.

  • HTTP Method

    • GET: 서버에서 자원을 조회합니다.

    • POST: 서버에 새로운 자원을 생성합니다.

    • PUT: 서버에 있는 자원을 업데이트합니다.

    • DELETE: 서버에서 자원을 삭제합니다.

    • PATCH: 자원의 일부를 업데이트합니다.

    • OPTIONS: 요청을 하기 전에 통신 옵션을 설명하기 위해 사용합니다.

실전

restFront.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>RESTful SERVER</title>
    </head>
    <body>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
        <div>
            <form id="form">
                <input type="text" id="username" />
                <button type="submit">등록</button>
            </form>
        </div>
        <div id="list"></div>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="./restFront.js"></script>
    </body>
</html>
cs

about.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>RESTful SERVER</title>
    </head>
    <body>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
        <div>
            <h2>소개 페이지입니다.</h2>
            <p>사용자 이름을 등록하세요!</p>
        </div>
    </body>
</html>
cs

restFront.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
async function getUser() {
    try {
        const res = await axios.get("/users"); // 서버에서 사용자 목록을 가져옵니다.
        const users = res.data; // 사용자 목록을 변수에 저장합니다.
        const list = document.getElementById("list"); // HTML에서 id가 "list"인 요소를 찾습니다.
        list.innerHTML = ""; // 기존의 목록을 비웁니다.
 
        // 사용자 목록을 순회하면서 HTML 요소를 생성합니다.
        Object.keys(users).map(function (key) {
            const userDiv = document.createElement("div"); // 사용자 정보를 담을 div를 만듭니다.
            const span = document.createElement("span"); // 사용자 이름을 담을 span을 만듭니다.
            span.textContent = users[key]; // 사용자 이름을 span에 넣습니다.
 
            // 수정 버튼을 만듭니다.
            const edit = document.createElement("button");
            edit.textContent = "수정";
            edit.addEventListener("click", async () => {
                const name = prompt("바꿀 이름을 입력하세요"); // 새 이름을 입력 받습니다.
                if (!name) {
                    return alert("이름을 반드시 입력하셔야 합니다"); // 이름이 없으면 경고합니다.
                }
                try {
                    await axios.put("/user/" + key, { name }); // 서버에 새 이름을 업데이트합니다.
                    getUser(); // 사용자 목록을 다시 불러옵니다.
                } catch (err) {
                    console.error(err); // 오류가 발생하면 콘솔에 출력합니다.
                }
            });
 
            // 삭제 버튼을 만듭니다.
            const remove = document.createElement("button");
            remove.textContent = "삭제";
            remove.addEventListener("click", async () => {
                try {
                    await axios.delete("/user/" + key); // 서버에서 사용자 삭제를 요청합니다.
                    getUser(); // 사용자 목록을 다시 불러옵니다.
                } catch (err) {
                    console.error(err); // 오류가 발생하면 콘솔에 출력합니다.
                }
            });
 
            // span, 수정 버튼, 삭제 버튼을 div에 추가하고, div를 list에 추가합니다.
            userDiv.appendChild(span);
            userDiv.appendChild(edit);
            userDiv.appendChild(remove);
            list.appendChild(userDiv);
 
            console.log(res.data); // 콘솔에 사용자 목록을 출력합니다.
        });
    } catch (err) {
        console.error(err); // 오류가 발생하면 콘솔에 출력합니다.
    }
}
 
window.onload = getUser;
document.getElementById("form").addEventListener("submit", async (e) => {
    e.preventDefault(); // 폼 제출 시 페이지가 새로고침되는 것을 방지합니다.
    const name = e.target.username.value; // 입력된 이름을 가져옵니다.
    if (!name) {
        return alert("이름을 입력하세요"); // 이름이 없으면 경고합니다.
    }
    try {
        await axios.post("/user", { name }); // 서버에 새 사용자 추가를 요청합니다.
        getUser(); // 사용자 목록을 다시 불러옵니다.
    } catch (err) {
        console.error(err); // 오류가 발생하면 콘솔에 출력합니다.
    }
    e.target.username.value = ""; // 입력 필드를 비웁니다.
});
cs

restServer.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
const http = require("http");
const fs = require("fs").promises;
const path = require("path");
 
const users = {};
 
http.createServer(async (req, res) => {
    try {
        //get
        if (req.method === "GET") {
            if (req.url === "/") {
                const data = await fs.readFile(path.join(__dirname, "restFront.html"));
                res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
                return res.end(data);
            } else if (req.url === "/about") {
                const data = await fs.readFile(path.join(__dirname, "about.html"));
                res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
                return res.end(data);
            } else if (req.url === "/users") {
                res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
                return res.end(JSON.stringify(users));
            }
            try {
                const data = await fs.readFile(path.join(__dirname, req.url));
                return res.end(data);
            } catch (err) {}
 
            //post
        } else if (req.method === "POST") {
            if (req.url === "/user") {
                let body = "";
                req.on("data", (data) => {
                    body += data;
                });
                return req.on("end", () => {
                    console.log("POST 본문(Body):", body);
                    const { name } = JSON.parse(body);
                    const id = Date.now();
                    users[id] = name;
                    res.writeHead(201, { "Content-Type": "text/plain; charset=utf-8" });
                    res.end("등록 성공");
                });
            }
 
            //put
        } else if (req.method === "PUT") {
            if (req.url.startsWith("/user/")) {
                const key = req.url.split("/")[2];
                let body = "";
                req.on("data", (data) => {
                    body += data;
                });
                return req.on("end", () => {
                    console.log("PUT 본문(Body):", body);
                    users[key] = JSON.parse(body).name;
                    res.writeHead(200, { "Content-Type": "text/plain; charset=utf-8" });
                    return res.end(JSON.stringify(users));
                });
            }
 
            //delete
        } else if (req.method === "DELETE") {
            if (req.url.startsWith("/user/")) {
                const key = req.url.split("/")[2];
                delete users[key];
                res.writeHead(200, { "Content-Type": "text/plain; charset=utf-8" });
                return res.end(JSON.stringify(users));
            }
        }
        res.writeHead(404);
        return res.end("NOT FOUND");
    } catch (err) {
        console.error(err);
        res.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
        res.end(err.message);
    }
}).listen(8082, () => {
    console.log("8082번 포트에서 서버 대기 중입니다");
});
 
cs

  • 서버 설정

    1
    2
    3
    const http = require("http");
    const fs = require("fs").promises;
    const path = require("path");
    		cs
    • http: Node.js의 HTTP 모듈을 사용하여 서버를 만듭니다.
    • fs: 파일 시스템 모듈을 사용하여 파일을 읽고 씁니다.
    • path: 파일 경로를 다루는 유틸리티 모듈입니다.

  • 사용자 데이터 저장소

    1
    const users = {};
    		cs
    • 빈 객체 users를 만들어 사용자의 정보를 저장할 공간을 마련합니다.
    • 이 객체는 사용자 ID를 키로, 사용자 이름을 값으로 갖습니다.

  • HTTP 서버 생성

    1
    2
    3
    4
    5
    6
    7
    8
    9
    http.createServer(async (req, res) => {
        try {
            // 요청을 처리하는 코드
        } catch (err) {
            // 오류를 처리하는 코드
        }
    }).listen(8082, () => {
        console.log("8082번 포트에서 서버 대기 중입니다");
    });
    		cs

확인

개발 도구의 network에서 확인할 수 있습니다.

profile
박소정
이전 포스트

요청과 응답 이해하기

다음 포스트

쿠키와 세션 이해하기

0개의 댓글

관련 채용 정보

글로벌 플랫폼 서비스 Android 개발자
글로벌 1위 육아 서비스 쑥쑥찰칵에서 Android 개발자로 성장할 기회를 잡아보세요. Kotlin을 활용해 새로운 기능을 개발하며, 전 세계 가족의 기억을 만드는 여정에 함께하세요.
iOS 앱 개발
스왈라비는 비대면 건강관리 플랫폼 ‘워크온’을 운영하며, 사용자 친화적인 헬스케어 솔루션을 제공합니다. iOS 개발자로서 HealthKit 활용 경험과 다양한 기능 구현에 참여하여, 급성장하는 헬스케어 산업에서 함께 성장할 기회를 잡아보세요!
안드로이드 개발 (3년 이상)
마카롱팩토리에서 차량관리 앱 '마이클'의 안드로이드 개발자를 찾습니다. Kotlin, Compose 등 최신 기술을 활용해 혁신적인 자동차 관리 생태계 구축에 기여하며, 자율적인 근무 문화 속에서 성장할 기회를 제공합니다.
Powered by GraphCDN, the GraphQL CDN