자바스크립트는 싱글 스레드로 동작하는 언어이지만, 비동기 처리를 통해 동시성을 지원합니다. 이는 여러 작업을 동시에 수행할 수 있도록 하며, UI 응답성을 향상시키고 네트워크 요청이나 파일 다운로드와 같은 작업을 효율적으로 처리할 수 있게 합니다.

비동기 처리

자바스크립트에서 동시성을 지원하기 위해 주로 비동기 처리 방식을 사용합니다. 이는 특정 작업을 다른 작업과 동시에 수행하는 방식을 의미합니다. 주로 사용되는 비동기 처리 방식에는 콜백 함수, 프로미스, async/await 등이 있습니다.

콜백 함수

콜백 함수는 다른 함수가 작업을 완료한 후에 호출되는 함수입니다. 예를 들어, setTimeout 함수를 사용하여 일정 시간이 지난 후에 콜백 함수를 실행할 수 있습니다.

setTimeout(() => {
  console.log("이 코드는 1초 후에 실행됩니다.");
}, 1000);

프로미스

프로미스는 비동기 작업의 상태를 나타내는 객체입니다. 이러한 상태는 대기(pending), 이행(fulfilled), 거부(rejected) 중 하나일 수 있습니다. 프로미스를 사용하면 콜백 함수 대신에 .then 및 .catch 메서드를 사용하여 작업이 완료되거나 실패했을 때 처리할 수 있습니다.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("프로미스가 이행되었습니다.");
  }, 1000);
});

promise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

async/await

async/await는 비동기 함수를 동기적으로 작성할 수 있게 해주는 문법입니다. async 키워드를 함수 선언문 앞에 붙이고, await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있습니다.

async function getData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

캐시 관리

캐시는 이전에 얻은 정보를 저장해 놓았다가 필요할 때 다시 사용하는 메모리 공간입니다. 자바스크립트에서는 캐시를 통해 웹 페이지의 성능을 향상시킬 수 있습니다. 대표적인 캐시 관리 기법으로는 브라우저 캐싱과 메모리 캐싱이 있습니다.

브라우저 캐싱

브라우저 캐싱은 이미지, 스타일시트, 스크립트 파일과 같은 웹 페이지 리소스를 클라이언트의 로컬 컴퓨터에 저장하는 것을 의미합니다. 이렇게 저장된 리소스는 이후에 웹 페이지를 다시 방문할 때 다운로드할 필요 없이 로컬에서 가져올 수 있기 때문에 웹 페이지의 로딩 속도가 향상됩니다.

메모리 캐싱

메모리 캐싱은 자바스크립트에서 데이터를 임시로 저장해 놓는 것을 의미합니다. 이렇게 저장된 데이터는 다음에 동일한 요청이 발생할 때 다시 계산하지 않고 사용할 수 있습니다. 자바스크립트의 객체나 변수를 활용하여 메모리 캐싱을 구현할 수 있습니다.

let cache = {};

function fetchData(url) {
  if (url in cache) {
    return cache[url];
  } else {
    const data = /* 비동기로 데이터를 가져오는 코드 */;
    cache[url] = data;
    return data;
  }
}

#자바스크립트 #동시성 #캐시