javascript

[자바스크립트] 블로그 목록 데이터 불러오기(+삭제) (8)

fetch 로 데이터 요청과 응답 받기
mm
mmmmmm02
Sep 01, 2024
[자바스크립트] 블로그 목록 데이터 불러오기(+삭제) (8)
Contents
블로그 목록 데이터 불러오기
 

블로그 목록 데이터 불러오기

 
VS code 에서 자바스크립트로 블로그 화면에 출력 될 데이터를 불러오기 해보자.
notion image
 

fetch

fetch 는 JavaScript에서 URL에 HTTP 요청을 보내는 메서드이다.
fetch 메서드는 비동기적으로 서버와의 통신을 처리할 수 있게 해주며, URL을 인자로 받아 해당 URL에 HTTP 요청을 보낸다. fetch 는기본적으로 fetch 는 GET 요청을 보내지만, 옵션을 지정하면 POST, PUT, DELETE 등 다른 메서드로 요청을 보낼 수도 있다.
 
이것이 불러오기 전 list.html 코드 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Blog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="list.html">Metacoding</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="save-form.html">글쓰기</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container p-5">

        <div class="card mb-3">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="card-title mb-3">제목1</h4>
                        <span>내용1</span>
                    </div>
                    <button class="btn btn-outline-danger" onclick="del(1)">삭제</button>
                </div>
            </div>
        </div>

    </div>

    <footer class="bg-light p-5 text-center">
        <h4>Created by Metacoding</h4>
        <h5>☎ 010-2222-7777</h5>
        <button class="btn btn-outline-primary">고객센터</button>
        <button class="btn btn-outline-primary">오시는길</button>
    </footer>
</body>

</html>
notion image
 
빨간 박스가 아이템이다.
 
notion image
 
아래의 container 가 없으면, 실행 화면처럼 딱 붙어서 나온다.
notion image
notion image
 
컨테이너는 그대로 두고, 아이템 부분을 가져온 데이터로 바꿀거임.
이제 내가 실행한 서버의 메인 화면에 (데이터로 응답하여 데이터 그대로 출력 된) 아래의 String 녀석을 파싱 해보자.
notion image
notion image
 
자바스크립트에서 JSON 데이터를 받아서 자바스크립트 객체로 변환하고, 들어온 데이터를 console.log 로 확인한다. 
async function getBoards() { // 비동기식 
		let response = await fetch("http://localhost:8080"); // 동기식
		let data = await response.json(); // response 객체에 담긴 JSON 데이터를 JavaScript 객체로 파싱(변환)

		console.log(data); // data(자바스크립트 객체) 가 어떻게 들어오는지 콘솔에 찍어보기 
}
notion image
오브젝트가 다섯 개 있는 컬렉션이네.
이미 id: 5 4 3 2 1 순으로 들어와서 append 로 뿌리면 되겠군.
 
notion image
리턴 값으로 아이템 박스 전체를 넣는다.
notion image
 
박스를 append 로 넣을 때에는 부모 박스가 필요하니,
컨테이너 안에 <div id="board-box"></div> 먼저 만들어주고, $(”#board-box”).append(dom); 넣기
notion image
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Blog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="list.html">Metacoding</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="save-form.html">글쓰기</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container p-5">

        <div id="board-box"></div>


    </div>

    <footer class="bg-light p-5 text-center">
        <h4>Created by Metacoding</h4>
        <h5>☎ 010-2222-7777</h5>
        <button class="btn btn-outline-primary">고객센터</button>
        <button class="btn btn-outline-primary">오시는길</button>
    </footer>

    <script>

        async function getBoards() {
            let response = await fetch("http://localhost:8080");
            let data = await response.json();

            // console.log(data);
            let boardList = data.body;

            for (board of boardList) { // 이것이 자바스크립트의 for each 문임 
                let dom = makeBox(board);
                $("#board-box").append(dom);
            }
        }

        getBoards();

        function makeBox(board) { // 자바스크립트는 타입안적어도됨
            return `<div class="card mb-3">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="card-title mb-3">${board.title}</h4>
                        <span>${board.content}</span>
                    </div>
                    <button class="btn btn-outline-danger" onclick="del(${board.id})">삭제</button>
                </div>
            </div>
        </div>`;
        }
    </script>
</body>

</html>
 
이제 list.html 에서 실행하면 서버에서 보낸 데이터가 아래와 같이 이쁘게 나온다.^^ (삭제 기능 넣기 전)
notion image
 

삭제 기능

 
삭제를 하려면 <div class=”card mb-3”> 에 id 가 붙어야 한다.
notion image
DOM 전체를 감싸고있는 친구의 id 가 꼭 필요하다. 지금 이대로는 삭제를 할 수가 없음.
id=”엔티티명-${ }”> 꼭 넣어주기
notion image
notion image
 
서버에 삭제 요청 연결 URL 확인한다.
notion image
notion image
 
function del(boardId) 함수는 서버에 있는 특정 리소스를 삭제 요청하면서 동시에 서버로부터 삭제 결과나 상태를 받아온다.
받은 결과 데이터를 response.json(); 으로 자바스크립트로 변환하고,
remove(); 기능으로 DOM 삭제하기
notion image
notion image
 
전체 코드 완성 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Blog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="list.html">Metacoding</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="save-form.html">글쓰기</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container p-5">

        <div id="board-box"></div>


    </div>

    <footer class="bg-light p-5 text-center">
        <h4>Created by Metacoding</h4>
        <h5>☎ 010-2222-7777</h5>
        <button class="btn btn-outline-primary">고객센터</button>
        <button class="btn btn-outline-primary">오시는길</button>
    </footer>

    <script>

        // function del(boardId) { // location reload = 새로고침 하면 삭제된다. 
        //     fetch(`http://localhost:8080/board/` + boardId, {
        //         method: "delete"
        //     });
        // }

        async function del(boardId) {
            
            let response = await fetch("http://localhost:8080/board/" + boardId, {
                method: "delete"
            });
            let data = await response.json();
            console.log(data);

            $(`#board-${boardId}`).remove();
        }

        async function getBoards() {
            let response = await fetch("http://localhost:8080");
            let data = await response.json(); // JSON 응답 데이터를 자바스크립트 객체로 변환 시켜줌  

            console.log(data);
            let boardList = data.body; // 자바스크립트 객체에 . 으로 해당 데이터 접근 가능 

            for (board of boardList) { // 이것이 자바스크립트의 for each 문임 
                let dom = makeBox(board);
                $("#board-box").append(dom);
            }
        }

        getBoards();

        function makeBox(board) { // 자바스크립트는 타입안적어도됨
            return `<div class="card mb-3" id="board-${board.id}">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="card-title mb-3">${board.title}</h4>
                        <span>${board.content}</span>
                    </div>
                    <button class="btn btn-outline-danger" onclick="del(${board.id})">삭제</button>
                </div>
            </div>
        </div>`;
        }

    </script>
</body>

</html>
 
 

fetch 사용 참고 링크

 
Fetch API 사용하기 - Web API | MDN
Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다.
Fetch API 사용하기 - Web API | MDN
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
Fetch API 사용하기 - Web API | MDN
notion image
notion image
Share article

More articles

See more posts

HTTP/1.1 프로토콜

September 1, 2024
HTTP/1.1 프로토콜

[자바스크립트] 블로그 글쓰기 (9)

September 1, 2024
[자바스크립트] 블로그 글쓰기 (9)

[자바스크립트] fetch (7)

August 31, 2024
[자바스크립트] fetch (7)

[자바스크립트] 반복문으로 리스트 만들기 (6)

August 31, 2024
[자바스크립트] 반복문으로 리스트 만들기 (6)

eunmouse

RSS·Powered by Inblog