TIL#32

JSON에 대하여.

JSON(JavaScript Object Notation)은 데이터 교환을 위한 경량의 데이터 형식입니다. 원래 자바스크립트에서 객체를 표현하기 위해 개발되었지만, 지금은 다양한 프로그래밍 언어에서 사용되고 있습니다. JSON은 사람과 기계 모두가 쉽게 이해하고 처리할 수 있도록 텍스트 형태로 구성되어 있습니다.
JSON 데이터는 key-value 쌍으로 이루어진 객체와 배열의 조합으로 구성됩니다. 키는 문자열로, 값은 문자열, 숫자, 불리언, 배열, 객체, 또는 null로 표현될 수 있습니다. 이러한 구조는 데이터를 구조화하고 전달하기에 매우 유용하며, 웹 애플리케이션과 서버 간에 데이터를 교환하는 데 널리 사용됩니다.

JSON과 XML 차이는?

JSON과 XML은 모두 데이터 교환을 위한 형식이지만 몇 가지 차이점이 있습니다.

• JSON:
  • 자바스크립트에서 파생되었지만 지금은 다양한 언어에서 사용됩니다.
  • 더 간결하고 읽기 쉽습니다.
  • 데이터 크기가 작고, 파싱이 빠릅니다.
  • 주로 프로그래밍 언어와 함께 사용하기 위해 개발되었습니다.
  • 데이터를 배열과 객체의 형태로 표현합니다.
• XML:
  • 독립형 마크업 언어로, HTML과 비슷한 구조를 가지고 있습니다.
  • 구조가 복잡하고 읽기 어려울 수 있습니다.
  • 데이터 크기가 상대적으로 크고, 파싱이 느릴 수 있습니다.
  • 주로 문서 기반 데이터를 저장하고 전송하기 위해 사용됩니다.
  • 데이터를 태그로 감싸는 형태로 표현합니다.

비동기 통신이란?

• 비동기 통신은 한 시스템에서 다른 시스템으로 데이터를 전송하거나 작업을 수행할 때, 요청과 응답이 동시에 이루어지지 않는 방식을 말합니다. 즉, 요청한 후에 바로 결과를 기다리지 않고, 중간에 다른 작업을 처리하다가 응답이 준비되면 이를 처리하는 방식입니다.
  예를 들어, 웹 애플리케이션에서 서버로 데이터를 요청할 때 비동기 방식을 사용하면 페이지 전체가 새로고침되지 않고 필요한 데이터만 서버로부터 받아와서 화면에 동적으로 표시할 수 있습니다. 사용자는 다른 작업을 할 수 있으며, 필요한 데이터가 준비되면 그에 맞게 반응하게 됩니다.

비동기 통신은 웹 애플리케이션에서 주로 사용되지만, 네트워크 통신이나 다른 시스템 간 데이터 교환에서도 유용하게 사용됩니다.

AJAX 에 대하여 설명하시오.

Ajax(Asynchronous JavaScript and XML)는 비동기 통신을 활용하여 웹 애플리케이션에서 데이터를 서버와 교환하기 위한 기술적 접근 방식입니다. Ajax는 웹 페이지 전체를 새로고침하지 않고도 필요한 데이터를 동적으로 불러와 화면에 업데이트할 수 있도록 해줍니다.
기존의 전통적인 웹 애플리케이션은 사용자가 요청하면 서버로부터 전체 페이지를 받아와야 했습니다. 하지만 Ajax를 사용하면 페이지의 일부분만 갱신할 수 있으므로 사용자 경험을 향상시킬 수 있습니다.

Ajax는 이름에 'XML'이 포함되어 있지만, 현재는 XML보다 JSON이 더 일반적으로 사용되는 데이터 형식입니다. Ajax는 다음과 같은 기술들을 활용하여 동작합니다:

XMLHttpRequest 객체를 사용하여 서버와 비동기적으로 데이터를 교환합니다.
JavaScript를 사용하여 데이터를 처리하고 화면을 업데이트합니다.
CSS를 이용하여 화면의 스타일을 변경하거나 애니메이션을 추가합니다.
Ajax는 웹 애플리케이션의 성능과 사용자 경험을 향상시키는데 큰 도움을 주는 기술입니다.

아래의 주소로 ajax 통신하여, 동적으로 table을 생성하시오.

http://sample.bmaster.kro.kr/contacts?pageno=3&pagesize=10

<script>
      $(document).ready(function () {
        $.ajax({
          type: "GET",
          url: "http://sample.bmaster.kro.kr/contacts?pageno=3&pagesize=10",
          success: function (result) {
            console.log(result);

            $("#list-table").append(
              $("<tr></tr>")
                .append($(`<td></td>`).text("번호"))
                .append($("<td></td>").text("이름"))
                .append($("<td></td>").text("전화번호"))
                .append($("<td></td>").text("주소"))
                .append($("<td></td>").text("사진"))
                .append($("<td></td>").text("삭제"))
            );

            $(result.contacts).each(function (i, data) {
              $("#list-table").append(
                $("<tr></tr>")
                  .append($("<td></td>").text(data.no))
                  .append($("<td></td>").text(data.name))
                  .append($("<td></td>").text(data.tel))
                  .append($("<td></td>").text(data.address))
                  .append(
                    $("<td></td>").append(
                      $("<img></img>").attr("src", data.photo)
                    )
                  )
                  .append(
                    $("<td></td>").append(
                      $("<input></input>")
                        .attr("id", data.no)
                        .attr("type", "button")
                        .attr("class", "del-button")
                        .attr("value", "삭제")
                    )
                  )
              );
            });
          },
          error: function (error) {
            console.log(error);
          },
        });
      });

      $(document).on("click", ".del-button", function () {
        console.log(this);
        $(this).parent().parent().remove();
      });
</script>