JavaScript (Ajax, JSON, JSON.parse(), Ajax 이용 데이터 임포트, url 인코딩 키 사용)

1. Ajax 

 - Asynchronus JavaScript And XML

 - 자바스크립트를 사용하여 브랑줘가 비동기 방식으로 데이터를 요청하고,

 - 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식

 - Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반을 동작

 - XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공

 

 - 1999년 마이크로소프트가 개발한 XMLHttpRequest는 그다지 큰 주목을 받지 못하다가

 - 2005년 구글이 발표한 구글 맵스를 통해 웹 애플리케이션 개발 프로그래밍 언어로서

 - 자바스크립트의 가능성을 확인하는 계기를 마련했다.

 

 - 이전의 웹페이지는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작

 - 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링

 

 - 전통적인 방식의 단점

 - 1) 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로 부터 

 - 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다.

 - 2) 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 한다. 이로 인해 화면 전환이 일어나면 화면이 순간적으로

 - 깜빡이는 현상이 발생한다.

 - 3) 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때 까지 다음 처리는 

 - 블로킹된다.

 

 - Ajax의 장점

 - 1) 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않는다.

 - 2) 변경할 필요가 없는 부분은 다시 렌더링하지 않는다. 따라서 화면이 순간적으로 깜빡이는 현상이 발생하지 않는다.

 - 3) 클라이언트와 서버와의 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 이후 블로킹이 발생 안한다.

 

 - Ajax의 단점

 - 1) 즐겨찾기나 검색엔진에 불리 

 - 2) 개발이 상대적으로 어려움

 

2. JSON

 - JSON : JavaScript Object Notation 

 - 클라이언트와 서버간의 HTTP 통신을 위한 텍스트 데이터 포맷

 - 자바스크립트에 종속되지 않은 언어 독립형 데이터 포맷으로, 대부분의 프로그래밍 언어에서 사용할 수 있음

 

 - JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트

 - JSON의 키는 반드시 큰 따옴표(작은 따옴표 사용 불가)로 묶여야 함

 - 값은 객체 리터널과 같은 표기법을 그대로 사용할 수 있으나 문자열은 큰 따옴표(작은 따옴표 사용 불가)로 묶여야 함

 

 - JSON.stringfy()

 - 객체를 JSON 포맷의 문자열로 변환

 - 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는 데 이를 직렬화 serializing 라고 함

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const obj = {
            name: "Lee",
            age: 20,
            alive : true,
            hobby: ['traveling', 'tennis']
        }
        console.log(typeof obj) // object

        // 객체를 JSON 포맷의 문자열로 변환
        const prettyJson = JSON.stringify(obj, null, 2);
        console.log(typeof prettyJson, prettyJson);

        // replacer : 함수. 값의 타입이 Number이면 필터링이 되어 반환되지 않는다.
        function filter(key, value) {
            // undefined : 반환되지 않음
            return typeof value === 'number' ? undefined : value;
        }
        const strFilterObject = JSON.stringify(obj, filter, 2);
        console.log(typeof strFilterObject, strFilterObject);

        // JSON.stringfy() 메서드는 객체뿐만 아니라 배열도 JSON 포맷의 문자열로 반환한다
        const todos = [
            { id : 1, content: 'HTML', completed: false},
            { id : 2, content: 'CSS', completed: true},
            { id : 3, content: 'JavaScript', completed: false}
        ];
        // 배열을 JSON 포맷의 문자열로 반환
        const jsonArray = JSON.stringify(todos, null, 2)
        console.log(typeof jsonArray, jsonArray)

    })
</script>

 

3. JSON.parse()

 - JSON 포맷의 문자열을 객체로 변환

 - 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이고, 이 문자열을 객체로 변환

 - JSON 포맷의 문자열을 객체화하는 것을 역직렬화 deserializing

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const obj = {
            name: "Lee",
            age: 20,
            alive: true,
            hobby: ['traveling', 'tennis']
        }

        // 객체를 JSON 포맷의 문자열로 변환
        console.log(typeof obj)

        const json = JSON.stringify(obj)
        console.log(typeof json, json) // string

        // JSON 포맷의 문자열을 객체로 변환
        const parsed = JSON.parse(json)
        console.log(typeof parsed, parsed) // object

        const todos = [
            { id : 1, content: 'HTML', completed: false},
            { id : 2, content: 'CSS', completed: true},
            { id : 3, content: 'JavaScript', completed: false}
        ];

        console.log(typeof todos)

        const jsonTodos = JSON.stringify(todos)
        console.log(typeof jsonTodoso, jsonTodos)

        const stringTodos = JSON.parse(jsonTodos)
        console.log(typeof stringTodos, stringTodos)
    })
</script>

 

4. Ajax 이용 데이터 가져오기

<script>
    document.addEventListener('DOMContentLoaded',function () {
        // ajax를 이용해 데이터 가져오기
        // XMLHttpRequest 객체 생성
        const xhr =new XMLHttpRequest();

        // HTTP 요청 초기화
        xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1')
        console.log(xhr)

        // 이벤트 등록. XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때 마다 자동으로 호출
        xhr.onreadystatechange = () => {
            // readyState 프로퍼티의 값이 DONE : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
            if(xhr.readyState != XMLHttpRequest.DONE) return;

            if(xhr.status === 200) { // 서버(url)에 문서가 존재함
                console.log(JSON.parse(xhr.response))

                const obj = JSON.parse(xhr.response);
                console.log(obj.title)
            }else {
                console.error('Error', xhr.status, xhr.statusText)
            }
        }
        xhr.send(); // url에 요청을 보냄
    })
</script>

 

5. 인코딩 된 키 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // url 인코딩된 키 사용
            const serviceKey = '1wMGYoH1onj8LIYDjyTfyuVPZLQc6F31PLdZjBj6jxjEi5P5suF4F9tGV2d38RvWOUj0tpiv6/OmN0NsBd93gg==';

            // 위치 값
            // 대구광역시 중구 삼덕동 89 90
            const nx = 89
            const ny = 90

            // 현재 시간 구함
            const today = new Date();

            const baseDate = `${today.getFullYear()}${(`0` + (today.getMonth()+1)).slice(-2)}${(`0` + today.getDate()).slice(-2)}`;
            // 현재 분이 30분 이전이면 이전 시간(정시)을 설정
            let baseTime = today.getMinutes() <= 30 ? `${today.getHours() - 1}00` : `${today.getHours()}00`;
            baseTime = (baseTime.length === 3) ? `0${baseTime}` : baseTime; // 10시 전이면 0을 하나 붙임

            const parameter = `?serviceKey=${serviceKey}&base_date=${baseDate}&base_time=${baseTime}&nx=${nx}&ny=${ny}&dataType=JSON`
            const url = 'http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcst' + parameter;
            console.log(url)

            // ajax를 이용해 데이터 가져오기
            // XMLHttpRequest 객체 생성
            const xhr =new XMLHttpRequest();

            // HTTP 요청 초기화
            xhr.open('GET', url)
            console.log(xhr.response)
            // console.log(xhr)
            // const jsonData = JSON.parse(xhr.response)

            // 이벤트 등록. XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때 마다 자동으로 호출
            xhr.onreadystatechange = () => {
                // readyState 프로퍼티의 값이 DONE : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
                if(xhr.readyState != XMLHttpRequest.DONE) return;

                if(xhr.status === 200) { // 서버(url)에 문서가 존재함
                    console.log(xhr.response)
                    jsonData = JSON.parse(xhr.response)
                    console.log(jsonData)
                }else {
                    console.error('Error', xhr.status, xhr.statusText)
                }
            }
            xhr.send(); // url에 요청을 보냄

            // weatherItems = jsonData['response']['body']['items']['item']
            // console.log(weatherItems)

            // HTML에 JSON 데이터 출력
            const btn = document.querySelector(".on")

            btn.addEventListener('click', function() {
                // 문서 객체 생성
                const json = document.createElement('div');

                // 생성한 태그 조작하기
                json.innerHTML = `<p>[발표 날짜: ${weather_items[0]["baseDate"]}]</p>`

                document.body.appendChild(json)
            })
         });
    </script>
</head>
<body>
<button type="button" class="on">확인</button>
</body>
</html>

 

---

공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.

부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.

읽어주셔서 감사합니다 :)