JS 통신 관련

HTTP 통신

• HTML 문서를 주고 받을 때의 통신 프로토콜임(프로토콜은 일종의 통신 규약)
• 브라우저에 돌아가는 HTML 문서는 해당 URL을 접속하면 다양한 과정을 통해서 문서를 서버에서 줌
• 문서를 요청하면 그에 맞는 구글에서 서버에서 문서를 줌
• HTTP 통신으로 서버에 요청하고 처리를 해서 문서를 받아서 볼 수 있음
• 문서를 주고 받는 것이 HTTP 통신임(브라우저 랜더링 등)
  
  

• 참고자료

Ajax

• 비동기 JavaScript와 XML의 약자임, 요즘은 JSON 포맷을 주로 많이씀
• 구글에서 검색시 나오는 검색 데이터가 나옴, Ajax의 경우 문서를 주고 받는게 아닌 바로 원하는 값, 데이터를 받음(데이터 통신이 일어남)
• 페이지 전환이 아닌 직접 데이터를 받아서 처리한다는 것
• 이로 인해 많은 일이 일어남, 페이지네이션, 페이지 방식 처리도 됨
• 그리고 스크롤 방식으로 데이터를 차례로 한꺼번에 가져오지 않고 불러와서 무한 스크롤 방식으로 하는 방법도 할 수 있음
• 페이지 전환 없이 처리하는 것이 아주 가장 큰 메리트임
• 참고자료

XMLHttpRequest

• Ajax에서의 x XML을 의미함, 이에 대해서 XMLHttpRequest를 쓰는데 이는 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있는 것을 의미함
• 아래와 같이 사용할 수도 있음

const xhr = new XMLHttpRequest();

// xhr을 불러와서 상태를 통해서 처리함
xhr.onreadystatechange = function() {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.response)
    } else {
      console.error('error')
    }
  }
}

// 요청을 해서 요청 결과를 send를 통해 호출해 받아와서 처리할 수 있음
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.send();

• 위와 같이 Ajax를 통해서 서버 통신을 용이하게 할 수 있음
• 참고자료

Fetch

• 앞서 본 XMLHttpRequest는 예전에 주로 쓰고 요즘에는 Fetch를 많이씀
• XMLHttpRequest에서의 보완할 점을 보완하고 개선해서 나온 방식임
• 아래와 같이 직관적으로 가져가다 쓸 수 있음

// url을 넣고 then 체이닝을 통해서 결과 처리를 함 .json으로 json 객체로 변환하고 처리함
// 1. URL fetch 요청
// 2. Fetch 응답 객체를 받아옴
// 3. 응답 객체가 JSON => 순수 JS 객체로 변환(그래서 객체로써 활용하고 다루기 용이해짐)
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => console.log(json));

• fetch의 경우 아래와 같이 처리가 된다고 이해할 수 있음

fetch('URL', {
  method: 'POST',
  headers: [
    Cookie: '',
  },
  body: {
    name: '',
  }
});

fetch('URL')
  .then(async(response) => {
    const data = await response.json();
    // 결과 데이터 활용
  });

Response {
  status: 200,
  ok: true
}

• Method의 경우 대표적으로 GET, POST, PUT, DELETE가 있음, 각각 예시로 사이트 불러오기, 게시물 생성, 게시물 수정, 게시물 삭제 등의 기능으로 활용할 수 있음

• 여기서 추가로 CORS 정책도 알아야함 CORS 정책이란 다른 도메인의 사이트에 요청을 보낼 때, 미리 허용된 호스트가 아니라면 요청을 거부하는 정책임

• 그래서 허용된 호스트가 아니면 CORS Error가 나타나고, 맞다면 응답 헤더 Access-Control-Allow-Origin과 함께 정상 응답을 냄

• 참고자료

브라우저 기능(쿠키)

• 쿠키는 브라우저에 저장되는 작은 크기의 문자열임
  
  
• 쿠키를 세팅하고 이 쿠키에 쓰기, 접근, 삭제, 보내기 등을 해서 쿠키의 값이 저장이 됨
• 쿠키의 값이 그대로 네트워크에 들어가서 저장되어 확인할 수 있음

브라우저 기능(웹 스토리지)

• 브라우저에 저장되는 키-값 쌍
• 로컬 스토리지는 브라우저 종료시에도 유지되는 데이터임
• 세션 스토리지는 새로 고침시에도 유지되는 데이터임(같은 탭 내에서만)
• 쿠키와 다른점은 요청 헤더에 포함되지 않고, 클라이언트에서만 조정이 가능하며, 해당 URL에서만 접근이 가능함
• 개발자도구 > Application 탭 > Storage > Local Storage / Session Storage에서 확인 가능
  

JSON

• 일반적인 JS 객체와 유사하고 이를 읽고 이해하기 수월함
• JSON.stringify를 통해서 일반적인 JavaScript 객체를 JSON으로 변환할 수 있음(JSON 객체는 문자열로 type을 받아들임)
• JSON.parse를 통해서 JavaScript 객체로 바꿀 수 있음
• 그래서 JSON.parse는 서버에서 데이터를 가져올 때 많이 쓰고 JSON.stringify는 서버에 데이터를 보낼 때 많이 씀
• 결론적으로 서버와 JSON의 형태를 통해 소통한다고 볼 수 있음
• JS로 프론트엔드를 개발하는데, 서버의 경우 다른 언어를 쓰기 때문에 JSON을 매개로 서로 데이터 및 통신 & 처리하기 용이하게 만든다고 생각하면 좋음
• 요즘은 Fetch외에 axios 같은 라이브러리도 많이 사용함
• 예시

// json 타입 예시
{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

• 참고자료