동기(Synchronous) vs 비동기(Asynchronous)

WOODIE·2025년 2월 19일

#Record

목록 보기

19/24

동기 vs 비동기 대체 무엇

동기 : 순차적 처리

일의 순서가 중요할 경우, 동기 처리!

데이터를 받아온 후에, 해당 내용을 브라우저에 띄우는 경우 => 데이터 받아오는 과정이 먼저!

단점 : 응답을 기다리는 동안 대기해야 한다.

비동기 : 동시다발적 처리

요청과 응답이 비순차적

일의 순서가 중요하지 않은 경우, 효율적인 처리

📌 for 반복문의 경우, 기본적으로 동기적으로 동작한다!

📌 fetch( ) 처리의 경우

  useEffect(() => {
    console.log("시작");

    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((json) => {
        setPost(json);
        console.log("데이터 가져오기 완료");
      });

    console.log("끝");
  }, []);

'시작' 이 출력됨 -> fetch 함수 실행 -> 끝!

fetch 함수는 외부에서 데이터를 가져오는 함수이기 때문에, 반드시 비동기적으로 동작할 수 밖에 없다. 따라서 then, await 등의 처리를 해주지 않는다면 무조건 '끝' 이 먼저 출력되게 된다. 따라서 비동기 처리는 주로 네트워크 요청, 데이터베이스 조회, 타이머 함수 등에 사용된다.

📌 데이터를 변환하는 이유?

서버의 응답(Response) 가 '원시 데이터' 상태로 전달되기 때문

.then() 메서드
: fetch() 가 반환한 Promise 객체를 처리하는 메서드
fetch함수는 비동기로 실행되기 때문에, 데이터를 받을 때까지 기다리지 않고 코드가 계속 실행되어 버린다. .then() 은 fetch요청이 완료된 후에 실행되게 해준다.

(response) => response.json()
: fetch함수의 응답인 객체를 받아서 JSON 데이터로 변환하는 과정으로, js 가 읽을 수 있도록 처리해주는 것이다. fetch() 는 서버에서 반환된 Response 객체를 다양한 형식으로 변환할 수 있다. JSON 뿐 아니라

TEXT -> 응답을 문자열로 변환
Blob -> 응답을 이미지, 동영상 같은 바이너리 데이터로 변환
ArrayBuffer -> 파일 데이터 같은 저수준 바이너리 변환
FormData -> HTML 폼 데이터와 같은 multipart/form-data 형식으로 변환

등 원하는 형식으로 변환해 가져올 수 있으며, 결과값이 또 Promise 객체이므로 한번 더 .then() 을 사용해 변환해줘야 한다.

🔗 다양한 형식의 데이터 변환 방식

JSON 데이터

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json()) // JSON → 객체 변환
  .then((data) => console.log(data.title)); // 'sunt aut facere repellat...'

객체 형태로 들어오기 때문에, console.log(data.title) 처럼 필요한 요소를 뽑아 쓸 수 있다.

텍스트 데이터

fetch("https://example.com/some-text-file.txt")
  .then((response) => response.text()) // 텍스트로 변환
  .then((data) => console.log(data));

텍스트 형태라, 바로 console.log(data) 로 반환

이미지 데이터

fetch("https://example.com/image.jpg")
  .then((response) => response.blob()) // 이미지 데이터 변환
  .then((blob) => {
    const imgUrl = URL.createObjectURL(blob); // Blob → 브라우저 URL 변환
    document.getElementById("myImage").src = imgUrl;
  });

이미지는 바이너리 형태로 제공되므로, const imgUrl = URL.createObjectURL(blob); 이 과정을 거쳐 브라우저 URL로 반환해주어야 한다.

파일 데이터

fetch("https://example.com/sample.mp3")
  .then((response) => response.arrayBuffer()) // 바이너리 변환
  .then((buffer) => console.log(buffer.byteLength)); // 파일 크기 출력