자바스크립트로 서버와 통신하는 방법(feat. JSON)

rlorxl·2022년 2월 11일

API json

Javascript

목록 보기

7/12

JSON이란??

.
.

알아보기에 앞서 서버와 통신에 관련된 몇가지 단어들을 훑어보자.

1.HTTP

html문서를 주고받는 프로토콜. ( HTTP통신 )

2.프로토콜

프로토콜(protocol)이란 일종의 통신규약이다.

'통신 프로토콜 또는 통신 규약은 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙의 체계이다. 통신 프로토콜은 신호 체계, 인증, 그리고 오류 감지 및 수정 기능을 포함할 수 있다.'-위키백과

3.Ajax

'Ajax는 AJAX는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다.'-나무위키

AJAX란 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 포괄적인 기술을 나타내는 용어이다. 페이지 전환이 일어나지 않고 데이터통신이 발생하여 사용자에게 좀 더 편리하게 정보를 제공할 수 있는 환경이 구축된다.(무한스크롤 같은) XHR, JQuery, Fetch 등의 선택지가 있고 보통 JSON이라는 포맷을 통해 데이터를 주고받는다.

4.API

Application Programming Interface (응용 프로그램 프로그래밍 인터페이스)
프로그래밍에서, 프로그램을 작성하기 위한 일련의 부(Sub) 프로그램, 프로토콜 등을 정의하여 상호 작용을 하기 위한 인터페이스 사양을 말한다.

웹 API
웹 API는 웹 애플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세를 일컫는다. 예를 들어 블로그 API를 이용하면 블로그에 접속하지 않고도 다른 방법으로 글을 올릴 수 있다. 그 외에 우체국의 우편번호 API, 구글과 네이버의 지도 API등 유용한 API들이 많으므로, 요즘은 홈페이지 구축이나 추가개편 시 따로 추가로 개발하지 않고 이런 오픈 API를 가져와 사용하는 추세다.

5.XMLHttpRequest

XHLHttpRequest(XHR)객체는 서버와 상호작용하기 위하여 사용한다. 전체 페이지의 새로고침없이도 URL로부터 데이터를 받아올 수 있다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트 할 수 있도록 해준다.

6.REST API

RESTful API(Representational State Transfer-ful API). 웹에서 데이터를 전송하기 위한 목적으로 사용된다.
API는 기본적으로 '프로그래밍 인터페이스'인 만큼, API를 사용하는 것은 주로 프로그램 내부 단에서 이루어진다. 하지만 보다 다양한 분야에 쓰일 수 있도록 '네트워크'와 '웹'에 맞춰진 API 통신 아키텍처가 등장했는데, 그것이 바로 REST다.

💡소스코드 단계에서 상호 작용하는 일반 API와 달리 RESTful API는 웹을 이용하므로 거의 대부분 웹 프로토콜을 통해 주고 받는다. 다시 말해, GET/POST 등의 형태로 필요한 인수를 전달받으면 거기에 맞는 결과값을 JSON이나 XML 형태로 전송해준다. 이를 그대로 봐도 되긴 하지만 비전문가가 보면 알 수 없는 텍스트들의 나열로 보이기 때문에 보기 이쁜 형태로 데이터를 적당히 편집하여 보기 좋은 형태로 만드는 것이 개발자의 역할이다. - 나무위키

..라고한다!!

요약하면 우리는 'HTTP(Hypertext Transfer Protocal)통신'을 활용하고, 거기서 'Ajax로 통신'을 하는데, 사용할 수 있는 'API'는 'XMLHttpRequest'나 'Fetch() API'를 사용할 수 있고, 거기서 주고받는 데이터의 포맷은 'JSON'포맷이다.

7.Fetch API

ajax를 구현하는 여러가지 기술중 비교적 최신 기술에 속한다. fetch API는 기존의 방식에 비해서 더 유연하다는 장점이 있다.

fetch api의 response는 실제 json 이 아니다.
따라서 fetch api에서는 추가 메서드를 호출해 응답 본문을 받을 필요가 있다. (.json())
axios는 이 과정을 자동으로 해주기 떄문에 바로 response를 받을 수 있다.
body 데이터 타입은 헤더의 content-type 헤더와 일치해야 한다.

Fetch 사용법

fetch('https://jsonplaceholder.typicode.com/posts/1') // URL fetch 요청
	.then((response) => response.json()) // Fetch 응답 객체를 받아옴
	.then((json) => console.log(json)); // 응답 객체가 JSON -> 순수 JS 객체로 변환

8.JSON (Javascript Object Notation)

JSON은 "속성(키)-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다.

데이터를 주고받을 때 쓰는 가장 간단한 파일포맷이다.

텍스트를 기반으로해서 가벼우며 key: value로 이루어져 있다.

데이터를 서버와 주고받을때 직렬화를 위해 쓴다.

프로그래밍 언어, 플랫폼에 상관없이 사용할 수 있다.

object를 파일에 저장할때도 활용할 수 있다.

JSON을 자바스크립트로 변환해서 자료를 다룰 수 있다.

JSON.stringify Object를 serialize(직렬화)하여 JSON으로 변환한다. (서버로 데이터를 보낼 때)
JSON.parse JSON을 JS객체로 변환한다. (서버에서 데이터를 가져올 때)

1. Object -> JSON

// boolean형태 가능
let json = JSON.stringify(true);

// 배열형태 가능 
json = JSON.stringify(['apple', 'banana']);

// object 형태
const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    // * 함수는 JSON에 저장이 제외된다. 
    jump: () => {
        console.log(`${name} can jump!`);
    },
};

//지정한 속성만 골라 변환에 포함.
json = JSON.stringify(rabbit, ['name', 'color']);

//callback함수로 제어하기.
json = JSON.stringify(rabbit, (key, value) => {
    // console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'ellie' : value;
});
console.log(json);

JSON으로 변환할 때 replacer를 함수로 전달할 경우(callback함수의 파라미터 같은것) key와 value를 받고 이것을 콘솔에 출력해보면 Object안의 모든 key, value가 출력된다. return뒤의 코드는 key의 값이 name이라면 value를 ellie로 출력하고 그렇지 않으면 원래 할당되어있는 값을 출력하라는 뜻이다.

2. JSON -> Object

let obj = JSON.parse(json);
console.log(obj);

// 정상 출력 -> 현재 날짜를 출력하는 메서드. 
console.log(rabbit.birthDate.getDate()); 

// error 
console.log(obj.birthDate.getDate()); 

// callback함수를 전달해서 세부적인 통제하기
obj = JSON.parse(json, (key,value) => {
    return key === 'birthDate' ? new Date(value) : value;
})
console.log(obj);
console.log(obj.birthDate.getDate()); // 정상적으로 날짜가 출력된다.