자바스크립트 4강. fetch 함수

<!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>Document</title>
    <style>
        /* css는 언더바 표기법 */
        .border_box {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>자바스크립트 공부하기 - 4단계</h1>
    <hr />
    <div id="box1" class="border_box">
        <p>첫번째글</p>
    </div>
    <br />
    <div id="box2" class="border_box">
        <p>첫번째글</p>
    </div>
</body>
</html>

DOM을 제어하여

박스 안에 데이터를 추가해보자.

내가 찾은 타겟 뒤에 값을 넣을 건데

글자(p태그)를 찾는 게 아닌 박스를 찾아줘야 한다.

부모에게 자식을 추가해주는 것이다.

이때 중요한 것은 데이터를 추가해주는 게 아닌

dom을 추가해줘야 한다.

<body>
    <h1>자바스크립트 공부하기 - 4단계</h1>
    <hr />
    <div id="box1" class="border_box">
        <p>첫번째글</p>
    </div>
    <button id="btn1">첫번째박스 값 채우기</button>
    <br /><br />
    <div id="box2" class="border_box">
        <p>첫번째글</p>
    </div>

    <script>
        // let list = ["두번째글", "세번째글", "네번째글"];
        let data = "두번째글";

        let btn1Dom = document.querySelector("#btn1");
        btn1Dom.addEventListener("click", ()=>{
            let box1Dom = document.querySelector("#box1");
            let p1Dom = document.createElement("p"); // p태그 생성
            // console.log(p1Dom);
            p1Dom.innerHTML = data;
            box1Dom.appendChild(p1Dom);
        });
    </script>
</body>

통신으로 데이터를 받아서 그림을 그려줄 수 있다.

두 번째 박스 값 채우기 버튼을 클릭하면

list 데이터가 그려질 수 있게 만들어보자.

<body>
    <h1>자바스크립트 공부하기 - 4단계</h1>
    <hr />
    <div id="box1" class="border_box">
        <p>첫번째글</p>
    </div>
    <button id="btn1">첫번째박스 값 채우기</button>
    <br /><br />

    <div id="box2" class="border_box">
        <p>첫번째글</p>
    </div>
    <button id="btn2">두번째박스 값 채우기</button>
    <br /><br />

    <script>
        let list = ["두번째글", "세번째글", "네번째글"];
        let data = "두번째글";

        let btn1Dom = document.querySelector("#btn1");
        btn1Dom.addEventListener("click", ()=>{
            let box1Dom = document.querySelector("#box1");
            let p1Dom = document.createElement("p"); // p태그 생성
            // console.log(p1Dom);
            p1Dom.innerHTML = data;
            box1Dom.appendChild(p1Dom);
        });

        let btn2Dom = document.querySelector("#btn2");
        btn2Dom.addEventListener("click", () => {
            let box2Dom = document.querySelector("#box2");

            // for of가 자바의 for each
            for(let i of list) { // let i의 타입은 String
                let pDom = document.createElement("p");
                pDom.innerHTML = i;
                box2Dom.appendChild(pDom);
            }
        })

        // 두번째박스 값채우기 버튼 클릭하면 btn2Dom 찾아서 for문 돌려서 채우기
    </script>
</body>

자바스크립트로 html에 그림 그리는 방법이다!!

이렇게 사용하면 내가 원하는 부분만 리로드 된다.

AJAX!!

조금 복잡한 과정을 라이브러리를 통해 간단하게 만들 수 있다.

스프링이 주는 데이터를 뿌려보자.

자바스크립트와 통신할 때는 html 파일을 리턴해주면 안 되기 때문에

@RestController로 만들어준다.

@RestController면 Data를 리턴한다.

데이터를 리턴하기 때문에 View Resolver가 작동하지 않고

MessageConverter가 작동한다.

@RestController
public class NumberController {
    // 스프링 데이터 리턴 전략 : json 미쳤다!

    @GetMapping("/number")
    public List<Integer> number() {
        List<Integer> list = Arrays.asList(1, 2, 3, 4);
        return list;
    }
}

메세지 컨버터는 모든 데이터를 JSON으로 변환하여 응답해준다.

왜 디폴트가 제이슨일까?

지금 통신의 표준이 제이슨이기 때문!

그리고 자바스크립트에서 데이터를 요청해보자.

<body>
    <h1>통신으로 데이터 가져와서 그림 그리기</h1>
    <hr />
    <!-- 데이터 뿌릴 곳 -->
    <div id="number-box" class="box">

    </div>

    <button id="download">다운로드</button>

    <script>
        let downDom = document.querySelector("#download");
        downDom.addEventListener("click", () => {
            fetch("http://localhost:8080/number"); // 다운로드 함수
        })
    </script>
</body>

자바스크립트에서 서버에 데이터 요청이 금지되어있다.

CORS 정책에 대해선 나중에 자세히 알아보자.

금지된 요청은 서버 쪽에서 풀어줄 수 있다.

@CrossOrigin 어노테이션을 붙여준다.

하지만 fetch 함수로 받아온 데이터는 변수에 저장할 수 없다.

<script>
    let downDom = document.querySelector("#download");
    downDom.addEventListener("click", () => {
        let response = fetch("http://localhost:8080/number"); // 다운로드 함수
        console.log(response);
    })
</script>

콘솔에 찍힌 로그를 확인해보자.