클라이언트와 서버의 통신

1. 웹브라우저에서 서버에게 원하는 데이터를 요청한다.
2. 서버는 데이터베이스에서 요청받은 데이터를 찾는다.
3. 서버가 데이터베이스에서 찾은 데이터를 꺼내온다.
4. 꺼내온 데이터를 서버가 웹브라우저에게 전달한다.

클라이언트와 서버의 통신은 클라이언트가 서버에 데이터를 요청하면, 서버는 데이터베이스에서 요청받은 데이터를 찾아서 꺼내온 뒤 다시 클라이언트에게 전달하는 과정이라고 할 수 있다.

API란

API(Application Programming Interface)란, 컴퓨터나 컴퓨터 프로그램 사이의 연결을 말한다.

좀 더 풀어서 얘기하자면 웹브라우저와 같은 클라이언트와 서버 사이의 연결 즉, 서버에 원하는 데이터를 요청하고 전달받는 방법이라고 할 수 있다.

API 호출

JSON

JSON (JabaScript Object Notation)은 자바스크립트에서 객체 형태의 데이터를 가독성 있게 나타내기 위한 표기법이다.

JSON은 보통 웹 애플리케이션에서 데이터를 전송할 때 사용되며 key value쌍으로 이루어져 있다.

위에 보이는 이 데이터들은 https://jsonplaceholder.typicode.com/posts 라는 API의 호출 결과이다.

이렇게 API주소(api url)를 통해 호출 할 수 있고, 호출을 하면 서버는 위와같은 json데이터들을 전달해준다.

fetch

자바스크립트에서는 fetch라는 내장함수를 이용해 API를 호출할 수 있다.

const response = fetch('https://jsonplaceholder.typicode.com/posts');

console.log(response);

response라는 변수에 API 호출결과를 담아 출력해보면 Promise {<pending>}이 출력되는 것을 볼 수 있다.

프로미스 객체를 반환하는 함수는 비동기 처리를 하는 함수이다.
따라서, 아래와 같이 then메서드를 사용해 결과값을 출력할 수 있고 catch메서드를 이용해 에러 핸들링이 가능하다.

const response = fetch('https://jsonplaceholder.typicode.com/posts')
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

console.log(response);

이렇게 fetch를 통해 API를 호출하 Response라는 API 성공 객체 그 자체를 반환한다.

그 다음 우리가 원하는 데이터를 받기 위해 getData 함수를 생성하고 그 안에서 API를 호출한다.

const getData = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
}

getData();

이 때, 자바스크립트에서 json데이터를 사용하기 위해서는 아래와같이 json메서드를 사용해 문자열을 파싱하여 객체 형태로 변환해야 한다.

const getData = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await res.json();
  console.log(data);
}

getData();

에러처리

try catch로 에러처리를 하고, 이를 확인하기 위해 API주소를 임의로 변경해보면 다음과 같이 에러가 출력된다.

const getData = async () => {
  try{
    const res = await fetch('<https://jsonplaceholder.typicode.com/posts>');
    const data = await res.json();
    console.log(data);
  } catch(error) {
    console.log(error);
  }
  
}

getData();