Json, Ajax 예제 공부

Sep 02, 2024

Contents


<!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 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>

파싱 전


<!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");            
        }

         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>


<!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();                        
        }

        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>

이 후 for문 돌리면서 makeBox하면 됨

콘솔에서 보기


<!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);
        }
        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>

결과

콘솔에 뜸

이 response는 어디에 있는거지?

어팬드로 뿌리면 된다

자바 스크립트 for each 문


 for(board of boardList){
                
            }

끝 이게 클라이언트 사이드 렌더링

mustache, jsp 사용할 필요 없다

빈 div만 받고


<!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) {
                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>

결과

코트 설명

async 함수:

async 키워드는 함수가 비동기적으로 동작함을 명시합니다. 이 키워드가 붙은 함수는 항상 Promise 객체를 반환하며, await 키워드를 사용할 수 있습니다.

await:

await 키워드는 Promise 객체가 해결될 때까지 기다립니다. await는 async 함수 내에서만 사용할 수 있으며, 비동기 작업의 결과를 동기적으로 기다릴 수 있게 해줍니다.

fetch:

fetch 함수는 네트워크 요청을 보내는 함수입니다. 이 함수는 URL을 인자로 받아 해당 URL에 대한 HTTP 요청을 보내고, Promise 객체를 반환합니다. 이 Promise는 HTTP 응답을 나타냅니다.

여기서는 "http://localhost:8080"으로 요청을 보내고 있습니다. 이는 로컬 서버에서 제공하는 데이터에 접근하려는 것입니다.

response.json():

fetch 요청의 응답은 Response 객체로 반환됩니다. 이 Response 객체는 다양한 메서드를 제공하며, json() 메서드는 응답의 본문을 JSON 형식으로 파싱합니다.

response.json()도 Promise를 반환하므로, await를 사용하여 JSON 데이터가 준비될 때까지 기다립니다.

console.log(data):

data 변수에는 JSON으로 파싱된 응답 데이터가 저장됩니다. 이 데이터를 콘솔에 출력하여 결과를 확인합니다.

데이터 주고받는 과정

서버 요청:

fetch("http://localhost:8080") 호출을 통해 http://localhost:8080 주소로 HTTP GET 요청을 보냅니다. 이 주소는 서버의 API 엔드포인트입니다. 요청을 통해 서버에 저장된 데이터를 가져오려고 하는 것입니다.

서버 응답:

서버는 요청을 처리하고, JSON 형식으로 데이터를 응답으로 반환합니다. 이 응답은 HTTP 응답으로서 클라이언트로 전달됩니다.

응답 처리:

클라이언트는 응답을 response 객체로 받아 response.json() 메서드를 사용하여 JSON 형식으로 파싱합니다. 이렇게 파싱된 데이터는 JavaScript 객체로 변환됩니다.

데이터 사용:

파싱된 JSON 데이터는 data 변수에 저장되며, 이를 콘솔에 출력하거나, 필요한 다른 작업을 수행할 수 있습니다.

📓

이거 봐

삭제

여기 뭐가 안 걸려 있다

즉 id가 없다!

del(${board.id})">삭제</button> 이거는 통신으로 삭제하려고

이렇게 걸어주면 된다


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>`;
        }


<!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) {
                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("hettp://localhost:8080.board/" + boardId); 이거는 get요청이라 못함


function del(boardId) {
            fetch("http://localhost:8080/board/" + boardId, {
                method: "delete"
            });
        }

응답 받아야 해서 await 걸어야 함

let data = await response.json();

console.log(data);


<!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 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();
            //console.log(data);
            let boardList = data.body;

            for (board of boardList) {
                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>

정리 해야 할 것

put(수정), post get patch(한 건만 수정해줘) body를 사용한다

get delete메서드는 body 사용 못함

RFC7231 보기

A라는 대학에서 자기 끼리 8비트 통신한다(바이트 통신)

공학관 같은 곳으로 데이터 전송하고 싶다면 요구하고 싶어 (도서관 문 닫으라고)

전달하려고 하는게 바이트가 크단 말이야 그래서 1을 보낸다

모르기 때문에 서로 약속을 한다 → 문서 표를 작성한다

약속이 프로토콜 http는 프로토콜이 모인 것

다른 대학도 네트워크를 사용하고 있었을 건데 대학 서로 다르다

만약 A 대학 B 대학 같이 하려면 협의 해야 한다

서로 동등한 관계 에서 어떻게 할 지 협의함

2개의 대학 프로토콜은 그리 안 클껀데

여러개가 합쳐지면 엄청 커진다

엄청 큰게 http가 된 것이다

성장 할 때 마다 RFC문서가 나온다

만약 새로운 곳에서 들어가고 싶으면 이 때는 프로토콜이 아닌 인터페이스 개념이 된다

왜냐 프로토콜이 너무 커져버려서 서로간의 협의가 안된다!

페이로드 → 바디 데이터

put get 쓰면 {”title”:”머시기”, “content”:”머시기”}

DTO 앞에 ? 하면 json형태로 날라간다

ApiUtil 클래스 리턴 받는데 RestController은 응답하는 데이터 그대로 응답함(Object로 응답하면)

만약 클래스 오브잭트면 json으로 파싱해준다

제네릭의 타입은 new할 때 결정난다

new ResponseEntity<>(new ApiUtil<>(404, “자원을 찾을 수 없어요”), HttpStatus.NOT_FOUND);

앞에는 body데이터 넣고 뒤에

responseEntity로 넣어줘야 한다!

쓰기

json형태로 title, content보내주면 된다

콘솔에서

let user ={id:1, username:”ssar”} 넣었어

아직 Object다

이거를 json으로 바꿀 수 있다

let body = JSON.stringify(user);

이러면 body는 스트링이다

스트링으로 바꿔서 줘야 한다!


<!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">

    <!-- 요청을 하면 localhost:8080/board/save POST로 요청됨
    title=사용자입력값&content=사용자값 -->
    <div class="card">
        <div class="card-header"><b>글쓰기 화면입니다</b></div>
        <div class="card-body">
            <form action="">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter title" id="title">
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="5" id="content"></textarea>
                </div>
                <button class="btn btn-primary form-control">글쓰기완료</button>
            </form>
        </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>

id로 바꿈 왜? form으로 할거면 하면 되지만

json은 지원 안해줘서

button은 form테그 안에 있다

acion하면 무조건 새로고침된다!!

type을 바꿔야 한다

지금 action에 아무것도 안 넣어뒀으니까

action 발동하면 안되니까 타입을 넣어야 한다!

text()

값만 들고 오는게 아니고

테그까지 들고 오고 싶으면 html()

val()

바닐라 js의

innertext, innerhtml과 같다

중요

content type mime 타입(확장자 대신 key값을 넣어줘야한다)

통신의

바디 데이터가 뭔지 알려줘야함!! 내가 들고가는 데이터의 레이블링을 적어줘야 한다!

브라우저도 데이터 알려주니까 파싱 해준다


@RequestMapping(value = "/hello", method = RequestMethod.GET, produces = "text/plain")
public String hello(){
    return "<h1>hello</h1>";
}

해석하는 이유는 브라우저가 response Header에 contenttype text/html이라고 알려줌

만약 contenttype 변경하고 싶으면

requestMapping써야함

produces에서 text/plain

이러면 해석 안됨

브라우저에 평문이라고 알려 줬으니까

반드시 body데이터가 뭔지 type를 알려주고 줘야한다!!

사람이면 알지만 브라우저는 사람이 아니기에 시키는 대로 한다!

fetch API 옵션 키값

정리하기!

문서를 한번 보고 정리해야 한다

다시 시작

만약 json안 보낼 거면

body: “title=제목1&content=내용1”,

mime타입 클릭해서 Media type들어가면

application/json

application/x-www-form-

보낼 데이터 타입을 fetch를 요청하려면 mme타입을 어떻게 적어야 해?

headers:{ContentType}

@ModelAttribute 생략 가능하다

fetch 배웠으면 공식 사이트 가서


<!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">

        <!-- 요청을 하면 localhost:8080/board/save POST로 요청됨
    title=사용자입력값&content=사용자값 -->
        <div class="card">
            <div class="card-header"><b>글쓰기 화면입니다</b></div>
            <div class="card-body">
                <form action="">
                    <div class="mb-3">
                        <input type="text" class="form-control" placeholder="Enter title" id="title">
                    </div>
                    <div class="mb-3">
                        <textarea class="form-control" rows="5" id="content"></textarea>
                    </div>
                    <button onclick="btnSave()" type="button" class="btn btn-primary form-control">글쓰기완료</button>
                </form>
            </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>
    <script>
        async function btnSave() {
            //1. dom에서 값 가져오기 requestDTO 아니면 board
            let board = {
                title: $("#title").val(),
                content: $("#content").val()
            };

            //2. json으로 변경
            let reqBody = JSON.stringify(board);

            //3. fetch로 post요청하기
            let response = await fetch("http://localhost:8080/board", {
                method: "post",
                body: reqBody,
                headers: {
                    'Content-Type': 'application/json; charset=utf-8',
                }
            });
            let respBody = await response.json();
            console.log("respBody", respBody);

            //4. 응답 요청하기
            location.href = "list.html";
        }
    </script>
</body>

</html>

공부하는 방법

mime type공홈 들어가서

아니면

gpt한테 mime 타입이 뭐야 물어보면

정리하자!!

See more posts

Json, Ajax 예제 공부

코트 설명

데이터 주고받는 과정

삭제

쓰기

중요

다시 시작

공부하는 방법

More articles

VsCode 단축키

Js 마스터 해보자

Html 기초 + 페이지 만들기

Id와 dataset차이