IT's 우

[JavaScript 카카오클라우드스쿨2기 3주차-1]데이터 표현 방법 Parsing, 프로젝트에서 모듈화, AJAX 실습, 웹 클라이언트에서 웹 서버에게 데이터를 전송하는 방법(GET, POST~), Promise, Fetch API 본문

카카오 클라우드 스쿨 2기/frontend

[JavaScript 카카오클라우드스쿨2기 3주차-1]데이터 표현 방법 Parsing, 프로젝트에서 모듈화, AJAX 실습, 웹 클라이언트에서 웹 서버에게 데이터를 전송하는 방법(GET, POST~), Promise, Fetch API

디우 2022. 11. 14. 19:21
728x90

데이터 표현 방법

  • 서로 다른 방식의 컴퓨터에서 데이터를 주고받으려면 표준적인 포맷이 있어야 한다.
  • Parsing: 가져온 데이터를 해석하는 과정
  • 서버 입장에서는 이 데이터 표현방식을 데이터를 만들어서 제공하는 것이 중요하고 클라이언트 입장에서는 이 데이터를 파싱 해서 출력하는 것이 중요하다.
  • DTD: HTML이나 XML은 브라우저가 해석하기도 하고 설정에 이용하는 경우에는 설정을 만든 곳에서 해석을 해야 하는데 이 해석하는 위치를 DTD라고 한다.

1) 텍스트

  • 일반 문자열
  • 구분 기호를 가지고 구분할 수 있도록 만든 포맷을 csv라고 한다.
  • 변하지 않는 데이터를 제공하고자 할 때 주로 이용
  • 용량이 작기 때문

2) XML

  • 태그 형식으로 데이터 표현
  • 해석을 개발자가 한다는 것이 HTML과 다른 점
  • 설정이나 데이터 전송에 이용(최근에는 사용 빈도수가 낮아지고 있는 추세)
  • 다른 방식보다 용량이 큼

3) JSON

  • 자바스크립트의 데이터 표현법을 이용하는 방식
  • XML보다 용량이 작기 때문에 데이터 전송에 많이 이용

4) YML(YAML- 야믈)

  • 이메일 데이터 표현 방식으로 가독성이 좋고 용량이 적기 때문에 최근에 설정이 많이 이용된다.
  • 구글에서 만든 제품이나 Spring에서는 YML을 설정에 이용하고 있습니다.
  • 아직 데이터 전송에는 사용 빈도수가 낮다

5) HTML

  • HTML은 데이터를 표현하는 것이 아니고 화면을 만드는 것
  • 화면에 보이기는 하지만 Open API를 제공하지 않는 경우에 HTML을 가져와서(Scraping) 임의로 해석해서 데이터처럼 사용하는 경우가 있음
  • HTML로 제공하는 경우는 Open API로 제공하는 것이 아니기 때문에 저작권을 반드시 확인하고 사용해야 한다.

프로젝트에서 모듈화

1) src: 컴파일되어야 하는 소스파일

2) resources: 컴파일할 필요가 없는 파일

 

 

ajax 실습

ajax(Asynchronous Javascript XML- eXtensible Markup Language)
비동기적으로 xml을 주고받기 위한 자바스크립트 기술.
최근에는 xml 뿐 만 아니라 json이나 csv(text)도 데이터 포맷으로 사용됩니다.
최근에는 자바스크립트를 이용해서 비동기적으로 데이터를 받아오는 것을 ajax라고 합니다.

XML(eXtensible Markup Language): HTML은 마크업 형태로 작성을 해서 해석을 브라우저가 합니다. HTML에서는 태그의 기능이 고정입니다.

 

1) json 파싱 

 

=> resources 디렉터리에 데이터로 사용할 data.json 파일을 생성 - 서버를 공부하면 직접 만들지 않습니다.

data.json

{
    "count":2,
    "documents":[
        {"name":"park", "age":23, "birthday":"09-13"},
        {"name":"kim", "age":32, "birthday":"08-18"}
    ]
}

 

=> 데이터를 읽어올 ajaxjson.html 파일을 생성

 

<!DOCTYPE html>
<html lang="ko">
<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>ajax - json parsing</title>
    <script>
        window.addEventListener("load", (e) => {
            //DOM 객체 찾아오기
            let btn = document.getElementById("btn");
            let display = document.getElementById("display");
            //버튼을 클릭했을 때
            btn.addEventListener("click", (e) => {
                //ajax 요청 객체 생성
                let request = new XMLHttpRequest();

                //요청 준비
                request.open('GET', "./resources/data.json");
                //요청 전송
                request.send('');

                //응답 받기
                //정상적으로 응답이 왔을 때
                request.addEventListener("load", ()=>{
                    //XML 이외의 데이터 읽기
                    //display.innerHTML = request.responseText;

                    //받아온 문자열 파싱
                    let result = JSON.parse(request.responseText);

                    display.innerHTML = "<p>데이터 개수:" + result.count + "</p>";
                    let ar = result.documents;
                    //배열을 순회
                    for(doc of ar){
                        
                    }
                    //배열을 순회하면서 { } 안의 내용을 수행
                    ar.forEach((doc) => {
                        display.innerHTML += "<h3>이름:" + 
                            doc.name + "</h3>";
                    })

                });
                //요청 도중 문제 발생
                request.addEventListener("error", (e)=>{
                    display.innerHTML = e.message;
                });
            })
        });
    </script>
</head>
<body>
    <button id="btn">json 데이터 가져오기</button>
    <div id="display"></div>
</body>
</html>

 

 

1) XML 파싱 

=> resources 디렉터리에 data.xml 파일을 생성

<?xml version="1.0" encoding="utf-8"?>
<Root>
 <Person>
    <name>카리나</name>
    <company>SM</company>
 </Person>
 <Person>
    <name>민지</name>
    <company>HIVE</company>
 </Person>
</Root>

 

=> 데이터를 읽어올 ajaxxml.html 파일을 생성

 

<!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>ajax-xml</title>
    <script>
        window.addEventListener("load", (e) => {
            let btn = document.getElementById("btn");
            let display = document.getElementById("display");
            btn.addEventListener("click", (e) => {
                let request = new XMLHttpRequest();
                request.open('GET', './resources/data.xml');
                request.send('');
                request.addEventListener("load", ()=>{
                    //읽어온 데이터 중 name 태그 내용만 추출
                    let xmldata = request.responseXML;
                    //태그의 배열
                    let names = xmldata.getElementsByTagName("name");
                    //순회하면서 태그 안의 내용을 추출
                    for(let i=0; i<names.length; i++){
                        var name = names[i].childNodes[0].nodeValue;
                        display.innerHTML += "<p>이름:"
                                + name + "</p>";
                    }
                });
            })
        })
    </script>
</head>
<body>
    <button id="btn">xml 데이터 가져오기</button>
    <div id="display"></div>
</body>
</html>

웹 클라이언트에서 웹 서버에게 데이터를 전송하는 방법

 

1) URL에 포함시키는 방법- 가장 최근에 등장한 방식으로 데이터가 1개일 때 주로 이용

=> Bloter.net이나 Tistory의 상세 보기가 대표적
https://www.bloter.net/newsView/blt202211140003
https://www.bloter.net/newsView/blt202211110022

 

2) 요청 방식에 따른 데이터 전달

 

=> GET: 데이터를 요청할 때 사용하는 방식으로 URL 뒤에 ?를 추가하고  이름=값의 형태로 데이터를 전송, 데이터 부분을 parameter라고 하기도 하고 query string이라고 하기도 합니다.

- history에 남기 때문에 보안성이 떨어집니다.

- 데이터 길이에 제한이 있습니다.

- 캐싱이 가능해서 재전송 가능

- 조회는 GET을 사용하고 삭제에는 DELETE를 사용

 

=> POST: 삽입, 갱신을 할 때 사용하는 방식으로 HTTP Body에 데이터를 넣어서 전송하는 방식

- 데이터가 body에 포함되어 있기 때문에 보안성 우수

- 데이터 길이에 제한도 없음

- 캐싱이 안되기 때문에 자동 재전송 기능이 없음

- 최근에는 데이터를 삽입할 때만 사용하고 갱신할 때는 PUT, PATCH 같은 방식을 이용하는 것 권장

 

3) 헤더 설정을 이용해서 데이터를 전달

=> 주로 인증 정보를 전송할 때 많이 사용

다른 방식을 이용한 AJAX

1) Promise를 이용하는 방식

=> 콜백을 이용하는 방법보다 가독성이 좋다, 일반적으로 콜백 안에서 콜백을 호출하는 경우에 Promise를 사용하는 것이 좋다. 

2022.11.14 - [카카오 클라우드 스쿨 2기/frontend] - [JavaScript] Promise

 

[JavaScript] Promise

개념 JavaScript는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기

kjk04021.tistory.com

 

2) Fetch API

=> 서버의 데이터를 가져오는 로직을 단순화한 ajax보다 새로운 API, 기본적으로 Promise를 리턴하기 때문에 별도의 콜백을 만들지 않아도 됩니다.

 

=> 단순한 GET 요청 

<!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>단순한 Fetch</title>
    <script>
        /*
        let request = new XMLHttpRequest();
        request.open("GET", "./resources/data.json");
        request.send('');
        request.addEventListener("load", () => {
            let result = JSON.parse(request.responseText);
            alert(result.count);
        });
        request.addEventListener("error", (e) => {
            alert(e.message);
        });
        */

        fetch('./resources/data.json')
        .then((response) => response.json())
        .then((data) => alert(data.count))
        .catch((e) => alert(e.message));
    </script>
</head>
<body>
    
</body>
</html>

=> 요청과 응답 등의 요소를 jacascript에서 접근하고 조작할 수 있는 인터페이스를 제공하는 API fetch()라는 전역 함수를 이용해서 네트워크의 리소스를 비동기적으로 가져올 수 있음.

=> XMLHttpRequest 대신 사용

=> fetch(요청 URL, 옵션)의 형태로 작성하는데 결과는 Promise 객체로 리턴되기 때문에 then과 catch를 이용해서 처리

 

 

 

728x90
반응형

'카카오 클라우드 스쿨 2기 > frontend' 카테고리의 다른 글

[javascript] 깊은 복사, 얕은 복사  (0) 2022.12.08
[react] props, state, ref  (0) 2022.12.06
[HTML5, 3주차-2] 브라우저에 데이터 저장, Web Worker  (0) 2022.11.15
[HTML5, 3주차-2] Geo Location, 카카오맵 API, File API  (0) 2022.11.15
[JavaScript, 카카오클라우드스쿨2기 3주차-1] Promise  (0) 2022.11.14
'카카오 클라우드 스쿨 2기/frontend' Related Articles more