1. 에러 처리가 필요한 이유 🤔

자바스크립트로 개발하다 보면 이런 경험 한 번쯤 해봤을 거야:

const data = JSON.parse(userInput);  // 🔴 만약 userInput이 유효한 JSON이 아니라면?
console.log(data.name);              // 🔴 data가 undefined라면?
      

위 코드는 언제든 폭탄이 될 수 있어! 사용자가 잘못된 입력을 넣으면 프로그램이 그대로 뻗어버릴 수 있지. 이런 상황을 방지하는 게 바로 에러 처리의 핵심이야. 🛡️

재능넷 같은 플랫폼을 개발할 때도 에러 처리는 필수야. 사용자가 재능을 등록하거나 결제할 때 발생할 수 있는 모든 예외 상황을 대비해야 안정적인 서비스를 제공할 수 있거든! 🚀

2. try-catch 구문 기초 🧰

자바스크립트에서 에러 처리의 기본은 try-catch 구문이야. 이 구문은 코드 실행 중 발생할 수 있는 에러를 잡아내고 대응할 수 있게 해줘.

기본 구조는 이렇게 생겼어:

try {
  // 에러가 발생할 수 있는 코드
  const result = riskyOperation();
  console.log('성공했어!', result);
} catch (error) {
  // 에러가 발생했을 때 실행되는 코드
  console.error('이런! 에러가 발생했어:', error.message);
}
      

try 블록에서는 에러가 발생할 가능성이 있는 코드를 실행해. 만약 에러가 발생하면, 자바스크립트 엔진은 즉시 try 블록의 실행을 중단하고 catch 블록으로 넘어가게 돼. 여기서 error 매개변수는 발생한 에러 객체를 담고 있어.

function getUserData(userId) {
  try {
    // 존재하지 않는 사용자 ID를 조회하는 상황을 가정
    if (userId <= 0) {
      throw new Error('유효하지 않은 사용자 ID입니다.');
    }
    
    // 데이터베이스 조회 시뮬레이션
    const user = findUserInDatabase(userId);
    
    if (!user) {
      throw new Error('사용자를 찾을 수 없습니다.');
    }
    
    return user;
  } catch (error) {
    console.error('사용자 데이터 조회 실패:', error.message);
    // 기본값 반환 또는 다른 처리
    return { name: '게스트', access: 'limited' };
  }
}

// 이 함수는 에러가 발생해도 앱이 중단되지 않고 기본값을 반환해
const user = getUserData(-5);  // 에러가 발생해도 게스트 정보 반환
console.log(user);  // { name: '게스트', access: 'limited' }
      

이렇게 try-catch를 사용하면 프로그램이 갑자기 중단되는 것을 방지하고, 사용자에게 더 나은 경험을 제공할 수 있어. 😊

3. Error 객체 이해하기 🔍

catch 블록에서 받는 error 매개변수는 Error 객체야. 이 객체는 에러에 대한 중요한 정보를 담고 있어서 디버깅에 큰 도움이 돼.

Error 객체를 직접 생성할 수도 있어:

// 기본 Error 객체 생성
const error = new Error('뭔가 잘못됐어!');

// 속성 확인
console.log(error.message);  // "뭔가 잘못됐어!"
console.log(error.name);     // "Error"
console.log(error.stack);    // 호출 스택 정보 (파일명, 라인 번호 등)
      

stack 속성은 특히 디버깅할 때 정말 유용해. 에러가 발생한 정확한 위치와 호출 경로를 알려주거든! 🕵️‍♂️

실제 에러 객체의 stack 속성은 이런 식으로 생겼어:

Error: 뭔가 잘못됐어!
    at functionName (/path/to/file.js:10:15)
    at anotherFunction (/path/to/file.js:5:10)
    at Object.<anonymous> (/path/to/file.js:3:1)
      

이 정보를 통해 에러가 어디서 시작됐고, 어떤 함수 호출을 거쳐 발생했는지 정확히 추적할 수 있어. 재능넷 같은 복잡한 웹 애플리케이션에서는 이런 스택 추적이 문제 해결에 큰 도움이 된다구! 🔧

4. 다양한 에러 타입 알아보기 📚

자바스크립트에는 여러 종류의 내장 에러 타입이 있어. 각 타입은 특정 종류의 문제를 나타내지. 이걸 알면 더 구체적인 에러 처리가 가능해져!

이러한 에러 타입을 구분해서 처리하면 더 세밀한 에러 처리가 가능해져. 예를 들어:

try {
  // 위험한 코드
  const data = JSON.parse(userInput);
  processData(data);
} catch (error) {
  if (error instanceof SyntaxError) {
    // JSON 파싱 에러 처리
    console.error('입력한 데이터 형식이 잘못되었습니다.');
    showUserFriendlyMessage('올바른 형식으로 다시 입력해주세요.');
  } else if (error instanceof TypeError) {
    // 타입 에러 처리
    console.error('데이터 처리 중 타입 오류가 발생했습니다.');
    logErrorToServer(error);
  } else {
    // 기타 에러 처리
    console.error('알 수 없는 오류가 발생했습니다:', error.message);
  }
}
      

이렇게 에러 타입별로 다른 처리를 해주면 사용자에게 더 정확한 피드백을 줄 수 있고, 개발자도 문제를 더 빨리 파악할 수 있어! 🚀

5. 커스텀 에러 만들기 🛠️

기본 에러 타입만으로는 부족할 때가 있어. 특히 비즈니스 로직에 특화된 에러가 필요할 때는 직접 에러 클래스를 만드는 게 좋아!

// 기본 Error 클래스를 상속받아 커스텀 에러 만들기
class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';  // 에러 이름 설정
    this.field = field;             // 추가 정보 저장
    this.date = new Date();         // 에러 발생 시간
  }
}

// 사용 예시
function validateUser(user) {
  if (!user.email) {
    throw new ValidationError('이메일은 필수 입력 항목입니다.', 'email');
  }
  
  if (user.age < 18) {
    throw new ValidationError('18세 이상만 가입 가능합니다.', 'age');
  }
}

// 에러 처리
try {
  validateUser({ name: '김코딩', age: 16 });
} catch (error) {
  if (error instanceof ValidationError) {
    console.error(`${error.field} 필드 검증 실패: ${error.message}`);
    // 특정 필드에 에러 메시지 표시 로직
    showFieldError(error.field, error.message);
  } else {
    console.error('알 수 없는 에러:', error);
  }
}
      

커스텀 에러를 사용하면 애플리케이션에 특화된 에러 처리가 가능해져. 재능넷 같은 서비스에서는 결제 오류, 권한 부족, 리소스 접근 제한 등 다양한 상황에 맞는 커스텀 에러를 만들어 사용할 수 있어! 💡

// 기본 앱 에러
class AppError extends Error {
  constructor(message) {
    super(message);
    this.name = 'AppError';
  }
}

// 인증 관련 에러
class AuthError extends AppError {
  constructor(message) {
    super(message);
    this.name = 'AuthError';
  }
}

// 권한 부족 에러
class PermissionError extends AuthError {
  constructor(resource, action) {
    super(`'${resource}'에 대한 '${action}' 권한이 없습니다.`);
    this.name = 'PermissionError';
    this.resource = resource;
    this.action = action;
  }
}

// API 관련 에러
class APIError extends AppError {
  constructor(message, statusCode) {
    super(message);
    this.name = 'APIError';
    this.statusCode = statusCode;
  }
}
      

이런 계층 구조로 에러를 설계하면 코드의 가독성과 유지보수성이 크게 향상돼. 각 에러 타입에 맞는 처리 로직을 쉽게 구현할 수 있거든! 👨‍💻

6. finally 블록 활용하기 🔄

try-catch 구문에는 finally라는 특별한 블록이 있어. 이 블록은 try나 catch 블록이 실행된 후에 항상 실행되는 코드를 담는 곳이야.

try {
  // 위험한 코드
  openFile();
  processFile();
} catch (error) {
  // 에러 처리
  console.error('파일 처리 중 오류 발생:', error.message);
} finally {
  // 에러 발생 여부와 관계없이 항상 실행
  closeFile();  // 리소스 정리
}
      

finally 블록은 리소스 정리에 특히 유용해. 파일, 네트워크 연결, 데이터베이스 연결 등을 사용한 후 정리하는 코드를 여기에 넣으면 에러가 발생하더라도 리소스가 제대로 정리되는 걸 보장할 수 있어.

let connection = null;

try {
  connection = openDatabaseConnection();
  
  // 데이터베이스 작업 수행
  const userData = connection.query('SELECT * FROM users WHERE id = ?', userId);
  processUserData(userData);
  
  return userData;  // 여기서 return해도 finally 블록은 실행됨!
} catch (error) {
  console.error('데이터베이스 작업 중 오류:', error.message);
  logErrorToMonitoringService(error);
  
  throw error;  // 에러를 다시 던져도 finally 블록은 실행됨!
} finally {
  // 연결 종료 - 성공하든 실패하든 항상 실행됨
  if (connection) {
    connection.close();
    console.log('데이터베이스 연결 종료');
  }
}
      

finally 블록의 중요한 특징은 return이나 throw 문장이 있어도 실행된다는 거야. 즉, try 블록에서 return을 해도, catch 블록에서 다시 에러를 던져도 finally 블록은 반드시 실행돼. 이건 리소스 누수를 방지하는 데 아주 중요한 특성이지! 🛡️

7. 비동기 코드에서의 에러 처리 ⏱️

자바스크립트에서 비동기 코드의 에러 처리는 조금 다르게 접근해야 해. 특히 Promise와 async/await를 사용할 때는 에러 처리 방식이 달라지지.

// Promise의 에러 처리는 .catch()를 사용해
fetchUserData(userId)
  .then(data => {
    console.log('사용자 데이터:', data);
    return processData(data);
  })
  .then(result => {
    console.log('처리 결과:', result);
  })
  .catch(error => {
    // 어느 Promise에서든 발생한 에러를 여기서 처리
    console.error('에러 발생:', error.message);
  })
  .finally(() => {
    // 성공하든 실패하든 항상 실행
    hideLoadingSpinner();
  });
      

Promise 체인에서 .catch()는 체인의 어느 부분에서 발생한 에러든 잡아낼 수 있어. 이건 try-catch의 비동기 버전이라고 생각하면 돼!

async function getUserDetails(userId) {
  try {
    // await를 사용한 비동기 코드도 try-catch로 감싸면 돼
    const userData = await fetchUserData(userId);
    const userPosts = await fetchUserPosts(userId);
    
    return {
      user: userData,
      posts: userPosts
    };
  } catch (error) {
    // fetchUserData나 fetchUserPosts에서 발생한 에러를 모두 여기서 처리
    console.error('사용자 정보 조회 실패:', error.message);
    
    // 기본값 반환 또는 에러 다시 던지기
    return { user: null, posts: [] };
  } finally {
    // 항상 실행되는 코드
    updateLastAccessTime(userId);
  }
}
      

async/await를 사용하면 비동기 코드도 동기 코드처럼 try-catch로 에러를 처리할 수 있어. 이게 async/await의 큰 장점 중 하나지! 코드가 더 읽기 쉬워지고 에러 처리 로직도 더 명확해져. 🧩

async function loadUserDashboard(userId) {
  try {
    // 여러 비동기 작업 병렬 처리
    const [userData, userStats, userPreferences] = await Promise.all([
      fetchUserData(userId),
      fetchUserStats(userId),
      fetchUserPreferences(userId)
    ]);
    
    return createDashboard(userData, userStats, userPreferences);
  } catch (error) {
    // 개별 에러 처리
    if (error.name === 'AuthError') {
      redirectToLogin();
    } else if (error.name === 'NetworkError') {
      showOfflineMessage();
    } else {
      // 기타 에러
      showErrorMessage('대시보드를 불러오는 중 오류가 발생했습니다.');
      logErrorToAnalytics(error);
    }
  }
}
      

재능넷 같은 복잡한 웹 애플리케이션에서는 이런 비동기 에러 처리가 정말 중요해. 사용자가 재능을 검색하거나 결제할 때 네트워크 오류나 서버 오류가 발생해도 우아하게 처리할 수 있어야 좋은 사용자 경험을 제공할 수 있거든! 🌟

8. 실전 에러 처리 패턴과 팁 💎

이제 실제 프로젝트에서 활용할 수 있는 에러 처리 패턴과 팁을 알아볼게!

async function getUserProfile(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    
    if (!response.ok) {
      // HTTP 에러 상태 코드에 따라 다른 에러 던지기
      if (response.status === 404) {
        throw new NotFoundError(`사용자 ID ${userId}를 찾을 수 없습니다.`);
      } else if (response.status === 403) {
        throw new PermissionError('이 사용자 정보에 접근할 권한이 없습니다.');
      } else {
        throw new APIError(`API 요청 실패: ${response.statusText}`, response.status);
      }
    }
    
    return await response.json();
  } catch (error) {
    // 네트워크 에러 래핑
    if (error.name === 'TypeError' && error.message.includes('fetch')) {
      throw new NetworkError('네트워크 연결을 확인해주세요.');
    }
    
    // 이미 처리된 에러는 그대로 전달
    throw error;
  }
}
      

// React 컴포넌트 예시
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 로깅
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI 렌더링
      return <ErrorFallback error={this.state.error} />;
    }

    return this.props.children;
  }
}

// 사용 예시
<ErrorBoundary>
  <UserProfile userId={userId} />
</ErrorBoundary>
      

async function fetchWithRetry(url, options = {}, maxRetries = 3, delay = 1000) {
  let lastError;
  
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url, options);
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      return await response.json();
    } catch (error) {
      console.warn(`시도 ${attempt}/${maxRetries} 실패:`, error.message);
      lastError = error;
      
      // 마지막 시도가 아니면 대기 후 재시도
      if (attempt < maxRetries) {
        // 지수 백오프: 재시도마다 대기 시간 증가
        const waitTime = delay * Math.pow(2, attempt - 1);
        await new Promise(resolve => setTimeout(resolve, waitTime));
      }
    }
  }
  
  // 모든 재시도 실패 시
  throw new Error(`${maxRetries}번 시도 후 실패: ${lastError.message}`);
}

// 사용 예시
try {
  const data = await fetchWithRetry('/api/data', {}, 3, 500);
  processData(data);
} catch (error) {
  showErrorMessage('데이터를 불러올 수 없습니다. 나중에 다시 시도해주세요.');
}
      

// 브라우저에서의 전역 에러 처리
window.addEventListener('error', (event) => {
  console.error('전역 에러 발생:', event.error);
  logErrorToAnalyticsService(event.error);
  showUserFriendlyMessage();
  
  // 기본 에러 처리 방지 (선택적)
  event.preventDefault();
});

// Promise 에러 처리
window.addEventListener('unhandledrejection', (event) => {
  console.error('처리되지 않은 Promise 에러:', event.reason);
  logErrorToAnalyticsService(event.reason);
  
  // 기본 에러 처리 방지 (선택적)
  event.preventDefault();
});

// Node.js에서의 전역 에러 처리
process.on('uncaughtException', (error) => {
  console.error('처리되지 않은 예외:', error);
  logErrorToMonitoringService(error);
  
  // 애플리케이션 정상 종료 (선택적)
  process.exit(1);
});
      

실전 팁: 에러 메시지는 개발자에게는 상세하게, 사용자에게는 친절하고 이해하기 쉽게 제공하는 것이 좋아. 또한, 중요한 에러는 서버에 로깅해서 나중에 분석할 수 있도록 하는 것도 잊지 마! 🔍

9. 에러 로깅과 디버깅 전략 🔍

에러를 효과적으로 처리하려면 로깅과 디버깅 전략도 중요해. 특히 프로덕션 환경에서는 사용자가 경험한 에러를 추적하고 분석할 수 있어야 해!

재능넷 같은 서비스에서는 에러 모니터링 시스템을 구축하는 것이 중요해. 사용자가 경험하는 에러를 실시간으로 모니터링하고, 패턴을 분석해서 우선순위를 정하고 해결할 수 있어야 해. 이런 시스템을 통해 사용자가 불편을 겪기 전에 문제를 발견하고 해결할 수 있어! 🚀

이런 도구들을 활용하면 에러 발견부터 해결까지의 시간을 크게 단축할 수 있어. 특히 프로덕션 환경에서 발생하는 에러는 재현하기 어려운 경우가 많은데, 이런 도구들이 큰 도움이 되지! 👨‍🔧

10. 정리 및 마무리 🎯

지금까지 자바스크립트의 에러 처리에 대해 꽤 깊이 알아봤어! 이제 에러가 더 이상 두렵지 않을 거야. 😎

에러 처리는 방어적 프로그래밍의 핵심이야. 예상치 못한 상황에 대비하고, 사용자에게 더 나은 경험을 제공하기 위해 꼭 필요한 기술이지. 특히 재능넷처럼 다양한 사용자와 상호작용하는 플랫폼에서는 더욱 중요해!

에러 처리는 처음에는 귀찮게 느껴질 수 있지만, 장기적으로 보면 개발 시간을 단축하고 사용자 만족도를 높이는 투자야. 코드를 작성할 때 항상 "이 부분에서 무엇이 잘못될 수 있을까?"라고 자문하는 습관을 들이면 좋을 거야! 🧠

이제 자바스크립트 에러와 마주쳐도 당황하지 않고 현명하게 대처할 수 있을 거야. 버그 사냥을 즐기고, 더 탄탄한 코드를 작성하는 개발자가 되길 바랄게! 👨‍💻✨