Nullish Coalescing을 사용하여 자바스크립트에서의 캐싱 처리하기
캐싱은 웹 개발에서 성능을 향상시키고 데이터 요청을 줄이는 데 중요한 요소입니다. 자바스크립트에서는 Nullish Coalescing 연산자를 사용하여 캐싱 처리를 간편하게 할 수 있습니다.
Nullish Coalescing 연산자는 ??
로 표시되며, 왼쪽 피연산자가 null
또는 undefined
인 경우에만 오른쪽 피연산자를 반환합니다. 이를 이용하여 캐시를 확인하고 데이터를 가져오는 부분을 간단하게 처리할 수 있습니다.
const cache = {
data: null
};
function getData() {
// 캐시된 데이터가 있는 경우, 캐시를 반환
if (cache.data ?? false) {
return cache.data;
}
// 캐시된 데이터가 없는 경우, 데이터를 가져와서 캐싱
const newData = fetch("https://example.com/api/data");
cache.data = newData;
return newData;
}
위의 예제에서는 cache
라는 객체를 생성하고, getData
함수에서 캐시된 데이터를 확인하고 캐싱되지 않은 경우 데이터를 가져와서 캐시에 저장합니다. ??
연산자를 사용하여 cache.data
가 null
또는 undefined
인 경우에만 newData
를 반환하도록 처리하였습니다.
이렇게 구현하면 매번 데이터를 요청할 때마다 API 호출을 하지 않고, 캐시된 데이터를 사용하여 성능을 향상시킬 수 있습니다.