JavaScript에서 fallback 패턴은 일반적으로 어떤 작업이 실패하거나 특정 기능이 지원되지 않을 경우, 다른 방법을 제공하여 프로그램이 정상적으로 동작하도록 만드는 방식을 의미합니다. 이를 통해 코드가 예외를 처리하거나 대체 경로로 진행될 수 있게 합니다.
fallback 패턴은 다음과 같은 상황에서 유용하게 사용됩니다:
- 브라우저 호환성: 최신 브라우저에서만 지원하는 기능이 있을 때, 오래된 브라우저에서는 이를 대체할 수 있는 방식으로 코드를 처리하는 경우.
- API 호출 실패: 외부 API를 호출했을 때 실패할 경우, 로컬 데이터를 사용하거나 기본값을 제공하는 방식.
- 옵션이 없는 경우 기본값 제공: 사용자가 특정 값을 제공하지 않았을 때 기본값을 제공하는 경우.
1. 기본값 제공 (Fallback to Default Value)
기본값을 제공하는 패턴은 자주 사용됩니다. 예를 들어, 함수에 인자가 전달되지 않았을 때 기본값을 설정하는 방식입니다.
예시
function greet(name = "Guest") {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("Alice"); // Hello, Alice!- 위 코드에서 name 파라미터가 전달되지 않으면, "Guest"라는 기본값이 사용됩니다.
2. 조건문을 통한 Fallback 처리
어떤 작업이 실패할 때 대체 작업을 수행하는 패턴입니다. 예를 들어, 특정 기능이 브라우저에서 지원되지 않을 경우, 대체할 기능을 제공하는 방식입니다.
예시
if ('localStorage' in window) {
// localStorage를 지원하는 경우
localStorage.setItem('user', 'John Doe');
} else {
// localStorage를 지원하지 않는 경우
console.log("localStorage is not supported, using cookies as fallback.");
document.cookie = "user=John Doe; path=/";
}- 이 예시에서는 localStorage가 브라우저에서 지원되지 않으면, 쿠키를 사용하여 데이터를 저장합니다.
3. try-catch 구문을 통한 Fallback 처리
API 호출이나 외부 리소스 접근 시 실패할 수 있는 부분에서 try-catch 구문을 사용하여 예외를 처리하고, 실패 시 대체 방법을 제공하는 패턴입니다.
예시
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error("API call failed. Using local data instead.");
const localData = { name: "Fallback Name", age: 30 };
console.log(localData);
}- API 호출이 실패할 경우, catch 블록에서 로컬 데이터를 사용하여 대체합니다.
4. Optional Chaining과 Nullish Coalescing을 통한 Fallback
JavaScript의 최신 문법인 optional chaining (?.)과 nullish coalescing (??) 연산자를 사용하여, 객체나 배열의 값이 null 또는 undefined일 때 fallback 값을 제공할 수 있습니다.
예시
const user = {
name: "Alice",
address: {
city: "Wonderland",
},
};
// Optional chaining과 nullish coalescing을 사용하여 fallback 처리
const city = user.address?.city ?? "Unknown City";
console.log(city); // Wonderland
const country = user.address?.country ?? "Unknown Country";
console.log(country); // Unknown Country- user.address?.city는 address가 null이나 undefined일 경우, undefined를 반환하고, 그 후 ?? 연산자를 통해 fallback 값 "Unknown City"가 사용됩니다.
5. 대체 함수 사용 (Fallback to Alternative Function)
어떤 함수나 메서드가 실패했을 경우, 다른 대체 함수를 호출하여 처리하는 방법입니다. 예를 들어, 데이터베이스 접근 실패 시 로컬 캐시에서 데이터를 가져오는 방식입니다.
예시
function fetchDataFromAPI() {
return fetch('https://api.example.com/data').then(response => response.json());
}
function fetchDataFromCache() {
return { id: 1, name: 'Fallback Data' };
}
function getData() {
return fetchDataFromAPI()
.catch((error) => {
console.error('API call failed, falling back to cache.');
return fetchDataFromCache();
});
}
getData().then(data => console.log(data));- fetchDataFromAPI() 호출이 실패하면, fetchDataFromCache()가 호출되어 대체 데이터를 제공합니다.
결론
JavaScript에서 fallback 패턴은 여러 상황에서 실패를 처리하고 대체 경로를 제공하는 중요한 기법입니다. 이는 코드의 안정성을 높이고, 다양한 환경에서도 코드가 예기치 않게 동작하지 않도록 보장해줍니다. 올바르게 사용하면 브라우저 호환성 문제나 외부 API 호출 실패 등 다양한 예외 상황을 처리할 수 있습니다.
'개발라이프 > 자바스크립트' 카테고리의 다른 글
| JavaScript Math.ceil() 함수 사용법과 예시 (0) | 2025.07.03 |
|---|---|
| dayjs에서 .tz()와 dayjs.tz()의 차이, 쉽게 이해해보기 (1) | 2025.05.27 |
| TypeScript 전역 설치 vs 로컬 설치 – 무엇을 선택해야 할까? (0) | 2025.04.02 |
| Node.js에서 ?? (null 병합 연산자) 완전 정리 (0) | 2025.04.01 |
| Node.js에서 KST(Korea Standard Time)로 날짜 출력하기 (0) | 2025.03.18 |