비동기? 동기? 이게 다 뭐야?

개발을 하다보면 비동기와 동기라는 용어를 자주 접하게 될것이다.

이 용어들은 데이터를 주고 받는 형식이다.

그럼 이제 이 용어들을 더욱 자세히 알아보자.

동기

웹페이지를 새로고침하면서 데이터를 불러오는 방식이다.

페이지를 바꾸면 페이지 자체가 로딩된다.

 

가장 대표적인 예시는 from 형식이다.

from 형식은 데이터 값을 입력받아 서버에 보내주는 역할을 한다.

데이터 값을 서버에 보내주게 되면 서버로부터 새로운 웹페이지를 받아서 화면에 보여주는 형식이다.

장점

1. 비동기보다 코드가 간단하다.
2. 요청과 응답이 순차적으로 진행된다 -> 코드의 간결성과 직관성을 유지가능하다.
3. 동기 통신은 요청을 보낸 후 응답을 받아야지만 다음 작업을 수행한다. 즉, 요청과 응답의 순서를 보장할 수 있다.
   예를 들어 A와 B라는 두 개의 요청을 보냈다면, 반드시 A의 응답이 먼저 도착한다
4. 동기 통신은 요청과 응답이 연결되어 있다 -> 에러 발생 시 에러에 대한 처리가 쉬울 수 있다.

단점

1. 전체 페이지를 다시 로딩하기 때문에 서버와의 통신량이 많아지고, 자원과 시간이 낭비될 수 있어, 웹페이지의 속도와 성능이 저하될 수 있다.
2. 따라서 화면이 깜빡거리거나 멈추는 현상이 발생할 수 있다 -> 사용자 경험이 떨어질 수 있다.
3. 요청과 응답이 동시에 일어나야 하기 때문에 요청을 보낸 후에는 다른 작업을 할수 없다.

비동기

페이지를 새로고침하든말든 데이터를 불러오는 방식이다.

가장 대표적인 예시는 블로그다.
블로그에서 댓글 작성시 전체 페이지가 리렌더링되는것이 아니라 댓글창만 리렌더링된다.
이것이 바로 비동기 통신이다.

장점

1. 웹페이지의 속도와 성능이 향상된다. -> 전체 페이지 리렌더링이 아닌 부분 리렌더링이기 때문이다.
2. 서버와의 통신량이 줄고, 자원과 시간을 절약 가능하다.
   -> 화면이 깜빡거리거나 멈추지않아 사용자 경험이 개선된다.
3. 요청과 응답이 동시에 일어나지않아도 되기 때문에 요청을 보낸후 다른 작업을 진행할 수 있다.

단점

1. 비동기 통신은 동기 통신보다 코드가 복잡하다.
2. 비동기 통신은 요청을 보낸 후 응답을 기다리지 않고 다음 작업을 수행할 수 있다 -> 응답의 순서를 보장할 수 없다.
3. 비동기 통신은 요청과 응답이 분리되어 있다. 그러므로 에러 발생시 어떤 요청에서 에러가 발생했는지 파악하는것이 어려울 수 있다.

웹 비동기 처리 기술 AJAX

AJAX란 JS를 사용하여 웹 서버와 비동기로 통신하는 방식이다.

AJAX를 사용하면 데이터를 json,HTML, xss 등 다양한 형식으로 데이터를 받을 수 있다.

 

위에서 비동기의 예를 들었던 댓글창을 구현하는 방법이 바로 AJAX다.

동작원리

1. 웹 브라우저에서 사용자 요청이 발생시 JS로 XMLHttpReruest 객체를 생성한다.
2. XMLHttpRequest 객체는 서버에  비동기적으로 요청을 보낸다.
3. 서버는 요청을 처리하고 응답을 XML이나 JSON 형식으로 보낸다.
4. XMLHttpRequest 객체는 응답을 받아서 JS로 처리한다.
5. JS로 처리된 결과를 웹 브라우저에 반영한다.

const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/data");
xhr.onload = () => {
  console.log(xhr.responseText);
};
xhr.send();

이처럼 AJAX는 웹 개발에서 많이 사용되는 비동기 기술이다.
AJAX를 이해하고 활용한다면 더 좋은 웹 애플리케이션을 만들 수 있다.

장점

1. 웹 페이지의 속도와 사용성을 향상시킬 수 있다.
2. 서버의 리소스를 효율적으로 활용할 수 있다.
3. 다양한 데이터 형식을 지원한다,

단점

1. 보안 문제가 있을 수 있다.
2. CORS 문제가 있을 수 있다.
3. 브라우저의 호환성 문제가 발생할 수 있다.

현대의 AJAX 사용방법

하지만 현대에 와서는 XMLHttpRequest 방식을 사용하지않는다.

현대에는 더욱 간단하고 짧은 방식이 출현하며 AJAX를 간편하게 사용이 가능해졌다.

1. fetch

브라우저에 기본으로 내장되어 있는 API이다

설치가 필요 없어 가장 대표적인 방식이다.

 

하지만 에러 자동처리가 안되고, JSON 변환을 직접해야하는 단점이 존재한다.

const res = await fetch("/api/data");
const data = await res.json();

2. axios

npm 설치가 필요한 외부 라이브러리이다.

설치가 필요하지만 코드가 더 짧고, JSON 변환이 자동으로 이루어진다. 에러 처리 또한 깔끔하다.

import axios from "axios";

const res = await axios.get("/api/data");
console.log(res.data);