Fetch 정리. 1

클라이언트 - 서버개념 이해하기

 

JSON(JavaScript Object Notation)  이란?

데이터를 효율적으로 저장하고 교환하기 위해 사용되는 경량의 데이터 형식입니다. JSON은 기계와 사람 모두가 이해하기 쉬운 텍스트 기반의 데이터 형식으로, 웹 어플리케이션에서 데이터를 전송하거나 저장하는 데 널리 사용된다.

 

주요 특징:

1. 텍스트 기반 형식: JSON은 사람이 읽을 수 있는 텍스트 기반의 데이터 형식입니다. 이는 JSON 데이터를 생성하고 해석하기 쉽게 만들어줍니다.
2. 기계와 사람이 모두 이해하기 쉬움: JSON 데이터는 객체와 배열을 포함하여 값들의 중첩 구조로 이루어집니다. 이러한 구조는 대부분의 프로그래밍 언어에서 직접 지원하며, 데이터를 쉽게 해석하고 사용할 수 있습니다.
3. 독립적: JSON은 프로그래밍 언어나 플랫폼에 독립적입니다. 이는 JSON 데이터를 생성한 시스템과 데이터를 사용하는 시스템 간의 상호 운용성을 보장합니다.
4. 간결성: JSON 형식은 데이터를 간결하게 표현할 수 있도록 설계되어 있습니다. 이는 데이터를 저장하고 전송하는 데 있어서 효율적이고 경제적입니다.

구조 예시

 

{
    "name": "John",
    "age": 30,
    "city": "New York",
    "isStudent": false,
    "courses": ["Math", "Science", "History"],
    "address": {
        "street": "123 Main St",
        "zipCode": "10001"
    }
}

 

• name", "age", "city", "isStudent" 등은 키(key)로, 각각의 값(value)은 문자열, 숫자, 불리언 값 등 다양한 데이터 유형을 가질 수 있습니다.
• "courses"는 배열로, 다수의 값을 포함할 수 있습니다.
• "address"는 중첩된 객체로, 객체 내부에 또 다른 키-값 쌍을 포함할 수 있습니다.

 

사용 예시:

JSON은 웹 프로그래밍에서 주로 사용됩니다. 예를 들어,

• 웹 서비스에서 클라이언트로 데이터를 전송할 때
• 클라이언트가 서버로부터 데이터를 요청하고 받을 때
• 데이터베이스와의 상호 작용에서 데이터를 효율적으로 전송하고 저장할 때

JSON은 간결하고 유연한 데이터 형식으로써 많은 응용 프로그램에서 사용된다.

 

클라이언트 ->서버 : GET 요청 이해하기

 

API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

 

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.

 

* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

 

* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원 가입, 회원 탈퇴, 비밀번호 수정

 

 

ex)

https://movie.daum.net/moviedb/main?movieId=68593

 

위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.

"?" 기준으로 앞 부분이 <서버 주소> 뒷 부분이 [영화 번호] 입니다.

 

* 서버 주소: https://movie.daum.net/moviedb/main?movieId=68593

* 영화 정보: movieId=68593

 

GET 방식으로 데이터를 전달하는 방법

 

? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.

 

& : 전달할 데이터가 더 있다는 뜻입니다.

 

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!

 

q=아이폰 (검색어)

sourceid=chrome (브라우저 정보)

ie=UTF-8 (인코딩 정보)

 

해당 코드는 백앤드 개발자가 정한다.

 

FETCH란?

 

최신 웹 표준인 JavaScript의 API로, 네트워크 리소스를 비동기적으로 가져오기 위해 사용됩니다. 주로 웹 애플리케이션에서 서버와 데이터를 주고받기 위해 많이 활용됩니다.

 

주요 특징과 사용법:

1. 비동기 네트워크 통신: fetch 함수는 비동기적으로 작동하며, 서버에서 데이터를 가져오거나 보낼 수 있습니다. 이를 통해 웹 페이지는 사용자가 다른 작업을 하면서도 서버와 통신할 수 있습니다.
2. Promise 기반: fetch 함수는 Promise를 반환합니다. 이는 데이터가 성공적으로 받아지면 resolve되고, 오류가 발생하면 reject됩니다. 이를 통해 데이터를 받아온 후 적절히 처리할 수 있습니다.
3. 간단하고 강력한 사용법: fetch는 간단하면서도 강력한 API를 제공합니다. URL과 옵션 객체를 인자로 받아 네트워크 요청을 시작하며, 다양한 옵션을 통해 요청을 커스터마이즈할 수 있습니다.

 

사용 예시

 

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // JSON 형식으로 응답 데이터 파싱
  })
  .then(data => {
    console.log(data); // 응답 데이터 처리
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

 

 

• fetch('https://api.example.com/data'): 주어진 URL로 GET 요청을 보냅니다.
• response.json(): HTTP 응답을 JSON으로 파싱하여 JavaScript 객체로 변환합니다.
• then()과 catch(): Promise 체인을 사용하여 성공적인 응답 처리와 오류 처리를 합니다.
• POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다. data: { param: 'value', param2: 'value2' },

 

옵션을 사용한 fetch 예시

 

fetch('https://api.example.com/postData', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'example', password: '1234' })
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

 

위 예시에서는 fetch 함수에 추가적인 옵션 객체를 전달하여 POST 요청을 보내는 예시입니다. method, headers, body 등의 옵션을 사용하여 요청을 설정할 수 있습니다.

 

주의사항:

• fetch 함수는 CORS(Cross-Origin Resource Sharing) 정책에 따라 동일 출처 정책(same-origin policy)을 따릅니다. 서로 다른 출처에서 데이터를 가져올 때 CORS 정책이 적용될 수 있습니다.
• fetch 함수는 IE(Internet Explorer)에서 지원되지 않는 경우가 있으므로, IE 호환성을 고려해야 합니다. 이 경우 fetch 폴리필(polyfill)을 사용하거나 다른 방법을 고려해야 할 수 있습니다.