[Node.js] 05 - AJAX / JSON

정적 웹 사이트(Static sites)

- 브라우저가 지정된 URL에 HTTP "GET"요청을 보낼 때 서버에서 하드 코딩된 동일한 콘테츠를 반환한다.

---

동적 웹 사이트(Dynamic sites)

- 필요할 때에 동적으로 응답 콘텐츠를 생성

- HTML 템플릿에 있는 자리 표시자에 데이터베이스에서 가져온 데이터를 넣어 생성

 

---

JSON ( JavaScripts Object Notation )

✅ 서버와 클라이언트가 데이터를 주고받을 때 일반적으로 사용하는 형식

✅ Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자열 형태의 포맷

- Parsing: 문자열 형태(JSON) ➡ 객체(JavaScript)로 변환

- Stringification(문자열화): 객체(JavaScript) ➡ 문자열 형태(JSON)로 변환

- JSON은 JavaScript의 문자열, 숫자, 배열, 불리언, 다른 객체를 포함할 수 있음

{
    "class": "Node.js",
    "professor": "Park",
    "numStudents": 3,
    "Students": [
        {"name": "좌**", "id": 1},
        {"name": "김**", "id": 2},
        {"name": "이**", "id": 3},
    ]
}

---

AJAX ( Asynchronous JavaScript And Xml)

✅ AJAX는 브라우저가 지원하는 XMLHttpRequest 객체를 사용해 구현하는 비동기 통신 방법이다.

✅ 웹 어플리케이션에서 전체 페이지 이동 없이 서버에 데이터를 요청하고 데이터를 받아서 사용자에게 보여주는 방식이다.

- 사용자 인터페이스를 빠르고 점진적으로 업데이트 가능

- 데이터 전송 형식을 XML 대신 JSON을 더 많이 사용

✅ Axios

- 브라우저가 지원하는 XMLHttpRequest 객체는 사용하기 불편하여 개발자가 사용하기 편하도록 만들어준 Promise 기반의 라이브러리

- HTML에 아래 스크립트를 추가하면 사용할 수 있다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    // 생략
</script>

 

✅ POST, GET, PUT, DELETE

실습 부분은 점차 추가해가겠다.