[React] 백앤드와 프론트앤드의 통신을 위해 알아야 할 것들...

OFFDUTYBYBLO·2020년 6월 20일

React

Session

목록 보기

5/5

API

백앤드와 통신하는 과정에서 너무 자주 나오는 개념이라 정리하고 넘어가려고한다.
Application Programming Interface,응용 프로그램 프로그래밍 인터페이스
응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.
아이폰의 홈버튼이 아이폰과 유저를 이어주는 매개체인 것처럼 API도 비슷한 개념이다.
UI가 사용자와 사용자가 다룰 대상을 연결한다면, API는 프로그램과 또 다른 프로그램을 연결해주는 일종의 다리라고 볼 수 있다.
쉽게 말해서 내가 만든 서비스가 개인 개발자,기업,기관이 제공하는 기능, 프로그램을 사용할 수 있게끔 도와주는 중간 매개체로 이해하면 된다.

Rest

Representational State Transfer의 약자
자원을 표현(이름)으로 구분하여 해당 자원의 정보를 주고 받는 모든 것을 의미한다.
자원은 해당 소프트웨어가 관리하는 모든 것(문서, 그림, 데이터, 해당 소프트 웨어 자체 등)
자원의 표현은 그 자원을 표현하기 위한 이름이다.
정보를 전달하는 것은 데이터가 요청되어지는 시점에서 자원의 상태(정보)를 전달한다.
즉 json혹은 xml를 통해 데이터를 주고 받는 것으로 생각하자

REST API

API는 데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 정보 교환이 가능하도록 하는 것
REST API는 REST를 기반으로 서비스 API를 구현한 것
사내 시스템들도 REST 기반으로 시스템을 분산해 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 할 수 있다.
REST는 HTTP 표준을 기반으로 구현하고, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있다.
즉, REST API를 제작하면 델파이 클라이언트 뿐 아니라, 자바, C# 웹 등을 이용해 클라이언트를 제작할 수 있다.

RESTful API

1) 정의

RESTful은 일반적으로 REST라는 아키텍처를 구현하는 웹 서비스를 나타내기 위해 사용되는 용어이다.
REST API를 제공하는 웹 서비스를 'RESTful'하다고 할 수 있다.
RESTful은 REST를 REST답게 쓰기 위한 방법으로, 누군가가 공식적으로 발표한 것이 아니다. 즉, REST원리를 따르는 시스템은 RESTful이란 용어로 지칭된다.

2) 목적

이해하기 쉽고 사용하기 쉬운 REST API를 만드는 것
RESTful한 API를 구현하는 근본적인 목적이 성능 향상에 있는 것이 아니라 일관적인 컨벤션을 통한 API의 이해도 및 호환성을 높이는 것이 주 동기이니, 성능이 중요한 상황에서는 굳이 RESTful한 API를 구현할 필요는 없다.

3) RESTful 하지 못한 경우

CRUD 기능을 모두 POST로만 처리하는 API
route에 resource, id 외의 정보가 들어가는 경우

비동기 처리

1) 비동기는 무슨 동기로 존재하는가?

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 내가 이해한 바로는 상당히 성격이 급한 녀석이다. 어떤 코드를 보고 컴퓨터에게 연산을 요청한 후 바로 다음 코드로 넘어가버리는 것이다. 로직의 실행이 끝날 때까지 기다려주지 않고 다음 코드를 먼저 실행하는 것이 비동기 처리이다.
자바스크립트는 브라우저 위에서 사용하는 언어이다. 자바스크립트는 기본적으로 통신이라는 개념을 가지고 있고 통신 중 어떤 함수가 일 처리가 길어지면, 웹 브라우저는 계속 멈춤 상태가 되고 기다려야 된다. 이 상황을 방지하기 위해 비동기 방식을 가지게 된다.

2) 그럼 어떤 사례가 있는가?

ajax
비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax이다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax 통신을 뺴놓을 수가 없다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문이다.
setTimeOut()
Web API의 한 종류, 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행한다.
위 코드를 차례대로 해석하면 'Hello'를 출력하고 3초 있다가 'Bye'를 출력하고 'Hello Again'을 출력한대야하는데 실체로는 'Bye'가 가장 늦게 출력된다.

콜백 함수

1) 기본 정의

콜백함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말한다.
보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출한다.

2) 콜백 함수를 사용하는 이유!!!!!!!!

웹사이트의 동작에 해당하는 코드일 경우 로직이 복잡해서 처리속도가 늦어지게 된다면 실행이 지연되고 웹사이트가 로직이 해결되기 전까지 모든 동작을 멈춰버린다.
반면 콜백 함수를 사용하면 필요한 연산이 완료될 때 까지 뒤에 있는 가벼운 로직들을 처리할 수 있다. 즉 정말로 필요할 때만 함수를 호출해서 효율이 좋고 웹사이트에서도 여러 가지 동작을 동시에 할 수 있다.

3) 마지막으로 다시 정리

콜백 함수의 동작 방식은 식당 자리 예약에 비유할 수 있다. 항상 줄이 긴 맛집에 가기 위해 똑똑한 우리는 문명의 발전을 사용하여 미리 주문을 하는 기막힌 방법을 찾아낸다. 미리 시켜두고 사무실에서 뒹굴다가, 책보다가, 일하다가, 눕다가, 일어났다가, 커피마시다가 시간되면 가면된다.

비동기 처리와 콜백 함수!

그렇다면!! 비동기 처리와 콜백 함수는 궁합이 아주 좋은 친구이다. 비동기 처리 방식에 어울리는 로직을 사용할 때 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작일 실행시킬 수 있다.

그러나 비동기 호출 후 처리할 함수가 많다면, 하나하나 콜백으로 넘겨주어야 하는 불편함이 있다. 코드의 가독성도 떨어진다. 또한 비동기 함수들끼리는 절대 서로 기다려주지 않는다. 비동기 함수들끼리 나온 데이터로 처리할 일이 있으면, 엄청 복잡해진다.

그래서 등장한 Promise, 그 전에 fetch

fetch API

알고보니 fetch는 ajax의 방식 중 최신 방식이다.
비동기 방식 Ajax는 서버와 자유롭게 통신을 할 수 있고, 페이지 전체를 리렌더링 없이 작동이 가능하게 만드는 방식
fetch API는 promise 방식의 기반이다.

그래서 Promise는

1) 정의
프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.

2) 왜 쓰는가?
promise는 주로 서버사이드에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 web application을 구현할 때 서버 사이드에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다.

API가 실행되면 서버에다가 '데이터 내놔' 라고 요청을 보낸다. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스이다.
ajax 통신 API를 이용하여 지정된 url에서 1번 상품 데이터를 받아오는 코드이다. 비동기 처리를 위해 프로미스 대신에 콜백 함수 사용

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

위 코드에 프로미스를 적용하면 아래와 같은 코드가 나온다.

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

콜백 함수로 처리하던 구조에서 new Promise(),resolve(),then()와 같은 프로미스 API를 사용한 구조로 바뀌었다.

3) Promise의 3가지 상태(states)

promise를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태이다. 여기서 말하는 상태란 프로미스의 처리 과정을 의미한다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfiled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending

new Promise(); 메서드를 호출하면 Pending 상태가 된다.
new Promise(); 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve,reject이다.

Fulfiled

콜백 함수의 인자 resolove를 아래와 같이 실행하면 Fulfilled 상태가 된다.

new Promise(function(resolve, reject) {
  resolve();
});

그리고 fulfiled상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

그리고 이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

프로미스의 이행 상태를 좀 다르게 표현해보면 '완료'라는 뜻이다.

Rejected

new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다. reject를 아래와 같이 호출하면 Rejected 상태가 된다.

new Promise(function(resolve, reject) {
  reject();
});

그리고, 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});