[FE 45] _23.05.25 _ Day 32 ([HTTP/네트워크] 실습)

1. JSON 말고 XML도 있어요.

개발자들이 어떤 정보를 나타내기 위해 흔히 쓰는 데이터 포맷으로는 JSON 뿐만 아니라 XML(Extensible Markup Language)이라고 하는 데이터 포맷도 있습니다. XML을 한마디로 쉽게 이야기하자면, 태그를 사용해서 데이터를 나타내는 것입니다.

 

JSON Data

{ "name":"Michael Kim", "height":180, "weight":70, "hobbies":[ "Basketball", "Listening to music" ] }

 

XML Data

<?xml version="1.0" encoding="UTF-8" ?> <person> <name>Michael Kim</name> <height>180</height> <weight>70</weight> <hobbies> <value>Basketball</value> <value>Listening to music</value> </hobbies> </person>

 

JSON 과 XML 의 차이점

 

JSON과 XML은 모두 데이터를 저장하고 교환하기 위한 형식입니다. 그러나 JSON과 XML은 몇 가지 중요한 차이점이 있습니다.

1. 구문

: JSON은 JavaScript Object Notation의 약자로, JavaScript 객체와 유사한 구문을 가지고 있습니다. JSON은 중괄호({})와 대괄호([])를 사용하여 데이터를 그룹화하며, 속성-값 쌍으로 이루어진 형식을 사용합니다. XML은 eXtensible Markup Language의 약자로, 태그와 요소를 사용하여 데이터를 구조화합니다. XML은 각 요소를 태그로 둘러싸고, 계층적인 구조를 가지는 마크업 언어입니다.

2. 가독성

: JSON은 기계가 처리하기 쉽고 사람이 읽기 쉬운 형식입니다. 중괄호와 대괄호를 사용하여 데이터를 그룹화하고, 간결한 형식을 가지고 있어 가독성이 좋습니다. XML은 태그를 사용하고, 여는 태그와 닫는 태그를 명시해야 하기 때문에 비교적 가독성이 떨어질 수 있습니다.

3. 데이터 타입

: JSON은 문자열, 숫자, 불리언, 배열, 객체, null 등의 데이터 타입을 지원합니다. 각 속성은 값을 가질 수 있고, 이 값은 해당 데이터 타입에 맞게 정의됩니다. XML은 텍스트 데이터로 모든 것을 표현하며, 태그와 속성을 사용하여 데이터를 설명합니다.

4. 확장성

: XML은 태그를 사용하여 사용자 정의 데이터 타입을 만들 수 있습니다. 이는 XML이 다양한 도메인에 적용될 수 있는 범용적인 데이터 교환 형식으로 사용되는 이유 중 하나입니다. JSON은 확장성이 좀 더 제한적이지만, JavaScript의 객체와 유사한 구조를 가지고 있어 웹 기술과의 통합에 용이합니다.

5. 파싱과 처리

: JSON은 JavaScript에서 기본적으로 지원되는 형식이기 때문에 JavaScript 코드에서 직접 파싱하고 처리하기 용이합니다. XML은 별도의 파서가 필요하며, 파싱하는 데 추가 노력이 필요합니다.

어떤 형식을 선택해야 할지는 사용 사례와 요구 사항에 따라 다릅니다. JSON은 웹 기반 API와의 상호 작용에 적합하며, 가독성과 처리 속도 측면에서 이점이 있습니다. XML은 데이터의 구조와 메타데이터를 설명하는 데 유용하며, 다양한 도메인에서 확장성을 제공합니다.

---

비동기 실행과 Promise 객체

 

fetch 함수와 비동기 실행

 

fetch 함수는 JavaScript에서 네트워크 요청을 비동기적으로 수행하는 데 사용되는 함수입니다. 

비동기 실행은 프로그램이 한 작업을 실행하는 동안 다른 작업을 동시에 처리할 수 있는 프로그래밍 패턴입니다.

fetch 함수는 Promise를 반환합니다. 

Promise는 비동기 작업의 결과를 나타내는 객체로, 작업이 성공하거나 실패할 수 있습니다.

 fetch 함수는 네트워크 요청을 전송하고, 요청에 대한 응답을 Promise로 감싸서 반환합니다. 

이렇게 반환된 Promise는 응답을 받은 후 성공 또는 실패 여부에 따라 처리됩니다.

비동기 실행은 다음과 같은 이점을 제공합니다:

1. 블로킹 방지

: 비동기 실행을 사용하면 네트워크 요청이나 파일 로드와 같은 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있습니다. 이는 웹 애플리케이션에서 응답 대기 시간을 최소화하고, UI의 반응성을 향상시킬 수 있는 장점을 제공합니다.

2. 성능 개선

: 비동기 실행을 사용하면 여러 작업을 동시에 처리할 수 있으므로, 전체적인 실행 시간을 단축시킬 수 있습니다. 예를 들어, 여러 이미지를 병렬로 다운로드하는 경우, 비동기 실행을 사용하면 여러 요청을 동시에 처리하여 전체 다운로드 시간을 단축할 수 있습니다.

3. 사용자 경험 향상

: 비동기 실행을 통해 웹 애플리케이션은 작업을 백그라운드에서 처리하고 사용자에게 더 나은 경험을 제공할 수 있습니다. 예를 들어, 긴 작업이 필요한 경우에도 UI가 멈추지 않고 응답성을 유지할 수 있습니다.

비동기 실행은 JavaScript에서 다양한 방식으로 구현될 수 있으며, fetch 함수는 네트워크 요청을 비동기적으로 처리하기 위한 일반적인 방법 중 하나입니다.

---

fetch 함수 예제

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // 데이터 처리
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Error:', error);
  });

 

 

위의 코드에서는 fetch 함수를 사용하여 'https://api.example.com/data' URL에서 데이터를 가져옵니다.

fetch 함수는 Promise를 반환하므로, then 메서드를 사용하여 응답을 처리합니다.