모던 자바스크립트 입문 - Chapter 11: 버그와 오류에 대처하는 방법 💻

자바스크립트 개발을 하다 보면 피할 수 없는 것이 바로 버그와 오류입니다.

완벽한 코드를 작성하는 것은 불가능에 가깝기 때문에, 버그를 효과적으로 찾아내고 오류를 적절히 처리하는 방법을 익히는 것이 중요합니다. 이번 포스트에서는 모던 자바스크립트에서 버그와 오류를 다루는 체계적인 방법들을 살펴보겠습니다.

 

📌 목차

• 버그에 대처하기
• 예외 처리

---

📝 버그에 대처하기

버그란 무엇인가?

버그(Bug)는 프로그램이 예상한 대로 동작하지 않는 현상을 말합니다. 버그는 크게 세 가지 유형으로 분류할 수 있습니다

• 구문 오류(Syntax Error): 문법적으로 잘못된 코드
• 런타임 오류(Runtime Error): 실행 중에 발생하는 오류
• 논리 오류(Logic Error): 문법적으로는 올바르지만 의도와 다르게 동작하는 코드

디버깅 도구 활용하기

1. console.log() 활용

가장 기본적이면서도 효과적인 디버깅 방법입니다

function calculateTotal(items) {
    console.log('함수 시작, items:', items); // 입력값 확인
    
    let total = 0;
    for (let i = 0; i < items.length; i++) {
        console.log(`처리 중인 아이템 ${i}:`, items[i]); // 반복 과정 확인
        total += items[i].price;
    }
    
    console.log('계산 완료, total:', total); // 최종 결과 확인
    return total;
}

2. 개발자 도구의 디버거 사용

브라우저의 개발자 도구를 활용한 디버깅

function processData(data) {
    debugger; // 이 지점에서 실행이 멈춤
    
    const result = data.map(item => {
        debugger; // 각 반복에서 실행 멈춤
        return item.value * 2;
    });
    
    return result;
}

3. console 객체의 다양한 메서드

// 일반 로그
console.log('일반 정보');

// 경고 메시지
console.warn('주의해야 할 사항');

// 에러 메시지
console.error('오류 발생!');

// 테이블 형태로 출력
const users = [
    { name: '김철수', age: 30 },
    { name: '이영희', age: 25 }
];
console.table(users);

// 실행 시간 측정
console.time('처리 시간');
// ... 시간을 측정할 코드
console.timeEnd('처리 시간');

// 조건부 로그
const shouldLog = true;
console.assert(shouldLog, '조건이 false일 때만 출력됨');

버그 방지를 위한 코딩 패턴

1. 엄격 모드(Strict Mode) 사용

'use strict';

function example() {
    // 엄격 모드에서는 선언되지 않은 변수 사용 시 오류 발생
    undeclaredVariable = 10; // ReferenceError 발생
}

2. 타입 체크

function addNumbers(a, b) {
    // 타입 검증
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw new Error('숫자만 입력 가능합니다.');
    }
    return a + b;
}

3. 방어적 프로그래밍

function getUserInfo(user) {
    // null/undefined 체크
    if (!user) {
        return null;
    }
    
    // 필수 프로퍼티 체크
    if (!user.name || !user.email) {
        throw new Error('필수 정보가 누락되었습니다.');
    }
    
    return {
        name: user.name.trim(),
        email: user.email.toLowerCase()
    };
}

---

📝 예외 처리

예외란?

예외(Exception)는 프로그램 실행 중에 발생하는 예상치 못한 상황으로, 적절히 처리하지 않으면 프로그램이 중단될 수 있습니다.

try-catch-finally 문

기본 구조

try {
    // 예외가 발생할 수 있는 코드
    const result = riskyOperation();
    console.log('성공:', result);
} catch (error) {
    // 예외 발생 시 실행되는 코드
    console.error('오류 발생:', error.message);
} finally {
    // 성공/실패 관계없이 항상 실행되는 코드
    console.log('정리 작업 완료');
}

에러 처리 패턴

에러 전파

function level1() {
    throw new Error('Level 1에서 오류 발생');
}

function level2() {
    try {
        level1();
    } catch (error) {
        // 에러에 컨텍스트 추가 후 재발생
        throw new Error(`Level 2에서 처리 중 오류: ${error.message}`);
    }
}

function level3() {
    try {
        level2();
    } catch (error) {
        console.error('최종 에러 처리:', error.message);
    }
}

---

📚 마무리 정리

오늘 배운 내용들을 정리하면:

버그와 오류 처리는 견고한 자바스크립트 애플리케이션을 만들기 위한 필수 요소입니다. 

 

버그 대처 전략

• 체계적인 디버깅 도구 활용
• 방어적 프로그래밍 패턴 적용

예외 처리 원칙

• try-catch-finally를 활용한 구조적 에러 처리
• 에러 처리 패턴

좋은 에러 처리는 사용자 경험을 크게 향상시키고, 개발자에게는 문제 해결의 실마리를 제공합니다. 

💡 오늘 새롭게 알게 된 것

•  

🤔 어려웠던 점

• 개발 중에 버그가 발생하는 것은 자연스러운 일이지만, 구문 오류·런타임 오류·논리 오류 중 어떤 유형인지 빠르게 구분하는 것이 아직 어렵습니다. 디버깅 실력을 더 키워야겠다는 생각이 듭니다.

---

🎯 다음 학습 계획

다음 포스팅에서는 정규 표현식에 대해 알아보겠습니다.