웹 개발/프론트엔드 개발

JavaScript의 `try-catch` 구문

Blue_bull 2025. 3. 18. 12:31

JavaScript의 `try-catch` 구문: 흐름과 활용 방법

JavaScript에서 try-catch 구문은 오류(예외)가 발생할 가능성이 있는 코드를 실행하고, 오류가 발생하면 적절히 처리하기 위해 사용됩니다. 즉, 코드 실행 중 오류가 발생하면 흐름이 catch 블록으로 넘어가 오류를 처리하는 구조입니다.

📌 기본적인 `try-catch` 구문

try {
    // 실행할 코드
    // 오류가 발생하면 실행이 중단되고 catch 블록으로 이동함
} catch (error) {
    // try 블록에서 오류가 발생하면 실행됨
} finally {
    // 선택적으로 사용, 오류 발생 여부와 관계없이 항상 실행됨
}

📌 실행 흐름 설명 (예제 포함)

✅ 1. 정상 실행 시 (`try`만 실행됨)

try {
    console.log("1. 코드 실행 시작");
    console.log("2. 정상 실행 중...");
    console.log("3. 오류 없이 종료");
} catch (error) {
    console.log("오류 발생:", error.message);
}

🟢 실행 결과:

1. 코드 실행 시작
2. 정상 실행 중...
3. 오류 없이 종료

✅ 오류가 없으면 try 블록의 모든 코드가 정상적으로 실행되며 catch는 실행되지 않습니다.

✅ 2. 오류 발생 시 (`catch` 블록으로 이동)

try {
    console.log("1. 코드 실행 시작");
    throw new Error("문제 발생!"); // 강제로 오류 발생
    console.log("3. 이 코드는 실행되지 않음");
} catch (error) {
    console.log("오류 발생:", error.message);
}

🔴 실행 결과:

1. 코드 실행 시작
오류 발생: 문제 발생!

✅ throw new Error("문제 발생!")에서 오류가 발생하므로 try 블록이 즉시 중단되고 catch 블록이 실행됩니다.

✅ 3. `finally` 블록 사용 (`try`든 `catch`든 항상 실행됨)

try {
    console.log("1. 코드 실행 시작");
    throw new Error("문제 발생!"); // 오류 발생
} catch (error) {
    console.log("오류 발생:", error.message);
} finally {
    console.log("2. 항상 실행되는 코드 (리소스 정리)");
}

🔴 실행 결과:

1. 코드 실행 시작
오류 발생: 문제 발생!
2. 항상 실행되는 코드 (리소스 정리)

✅ finally 블록은 오류 발생 여부와 관계없이 항상 실행됩니다.
✅ 주로 파일 닫기, DB 연결 해제, 리소스 정리 같은 작업에 활용됩니다.

📌 `catch`에서 `error` 객체의 역할

catch(error)에서 error는 try 블록에서 발생한 예외 객체를 담습니다.

try {
    JSON.parse("{잘못된 JSON}"); // JSON 파싱 오류 발생
} catch (error) {
    console.log("오류 메시지:", error.message);
}

🔴 실행 결과:

오류 메시지: Unexpected token '잘' at position 1

✅ error.message 속성은 오류 메시지를 포함하고 있습니다.

📌 `catch(error)`에서 사용할 수 있는 속성들

속성	설명
`error.name`	오류 유형 (`Error`, `TypeError`, `SyntaxError` 등)
`error.message`	오류 메시지
`error.stack`	오류 발생 위치 및 호출 스택 정보

예제: 다양한 오류 유형

try {
    null.toUpperCase(); // TypeError 발생
} catch (error) {
    console.log("오류 유형:", error.name); // TypeError
    console.log("오류 메시지:", error.message);
}

✅ 다양한 내장 오류(ReferenceError, TypeError, SyntaxError)가 발생할 수 있으며, error.name 속성을 통해 오류의 유형을 알 수 있습니다.

📌 네트워크 요청에서 `try-catch` 사용 예제

try {
    const response = await axios.post(
        "http://localhost:9000/member/signup", {
            name, email, password, address
        }
    );

    if(response.status === 201) {
        alert('회원 가입 성공');
        navigate('/member/login'); // 로그인 페이지로 이동
    }
} catch(error) {
    if(error.response && error.response.data) {
        setErrors(error.response.data); // 서버에서 받은 오류 메시지 저장
    } else {
        setErrors({ general: '회원 가입 중 오류가 발생하였습니다.' }); // 기타 오류 메시지
    }
}

✅ 실행 흐름

axios.post()를 통해 서버에 회원가입 요청을 보냄.
정상 응답 (201 Created) → "회원 가입 성공" 알림 후 로그인 페이지로 이동.
오류 발생 (예: 서버 응답 오류, 네트워크 문제 등) → catch(error) 블록 실행.
- error.response.data가 있으면 서버에서 받은 오류 메시지를 저장.
- 서버 응답이 없거나 예측할 수 없는 오류면 기본 오류 메시지 출력.

📌 정리

✔ try 블록: 오류가 발생할 가능성이 있는 코드 실행
✔ catch(error): 오류가 발생하면 실행되며, error 객체에 오류 정보 저장
✔ finally: 오류 발생 여부와 관계없이 항상 실행됨 (선택적)

`try-catch`는 오류 처리를 위한 강력한 도구이며, 네트워크 요청, 파일 처리, JSON 파싱 등 다양한 상황에서 사용됩니다. 🚀

JavaScript의 `try-catch` 구문: 흐름과 활용 방법

📌 기본적인 `try-catch` 구문

try {
    // 실행할 코드
    // 오류가 발생하면 실행이 중단되고 catch 블록으로 이동함
} catch (error) {
    // try 블록에서 오류가 발생하면 실행됨
} finally {
    // 선택적으로 사용, 오류 발생 여부와 관계없이 항상 실행됨
}

📌 실행 흐름 설명 (예제 포함)

✅ 1. 정상 실행 시 (`try`만 실행됨)

try {
    console.log("1. 코드 실행 시작");
    console.log("2. 정상 실행 중...");
    console.log("3. 오류 없이 종료");
} catch (error) {
    console.log("오류 발생:", error.message);
}

✅ 2. 오류 발생 시 (`catch` 블록으로 이동)

try {
    console.log("1. 코드 실행 시작");
    throw new Error("문제 발생!"); // 강제로 오류 발생
    console.log("3. 이 코드는 실행되지 않음");
} catch (error) {
    console.log("오류 발생:", error.message);
}

✅ 3. `finally` 블록 사용 (`try`든 `catch`든 항상 실행됨)

try {
    console.log("1. 코드 실행 시작");
    throw new Error("문제 발생!"); // 오류 발생
} catch (error) {
    console.log("오류 발생:", error.message);
} finally {
    console.log("2. 항상 실행되는 코드 (리소스 정리)");
}

📌 `catch(error)`에서 사용 가능한 속성들

📌 `Error` 객체의 기본 속성들

속성	설명
`name`	오류 유형 (`Error`, `TypeError`, `SyntaxError` 등)
`message`	오류 메시지
`stack`	오류 발생 위치 및 호출 스택 정보

📌 예제 코드: `catch(error)`에서 속성 사용하기

try {
    throw new Error("이건 오류 메시지야!");
} catch (error) {
    console.log("오류 발생!");
    console.log("name:", error.name);
    console.log("message:", error.message);
    console.log("stack:", error.stack);
}

📌 다양한 내장 오류 유형

1️⃣ ReferenceError (참조 오류)

try {
    console.log(undeclaredVariable);
} catch (error) {
    console.log(error.name);
    console.log(error.message);
}

2️⃣ TypeError (잘못된 타입 사용)

try {
    null.toUpperCase();
} catch (error) {
    console.log(error.name);
    console.log(error.message);
}

3️⃣ SyntaxError (문법 오류)

try {
    eval("var a = ");
} catch (error) {
    console.log(error.name);
    console.log(error.message);
}

📌 커스텀 오류 속성 추가하기

try {
    throw {
        name: "CustomError",
        message: "이건 커스텀 오류야!",
        statusCode: 400,
        timestamp: new Date()
    };
} catch (error) {
    console.log(error.name);
    console.log(error.message);
    console.log(error.statusCode);
    console.log(error.timestamp);
}

📌 `catch(error)`에서 사용할 수 있는 속성 정리

속성	설명
`error.name`	오류의 유형 (`Error`, `TypeError`, `SyntaxError` 등)
`error.message`	오류 메시지
`error.stack`	오류 발생 위치 및 호출 스택 정보
`error.code`	일부 API 또는 DB 관련 오류에서 제공하는 오류 코드
`error.statusCode`	커스텀 오류에서 상태 코드 추가 가능
`error.timestamp`	오류 발생 시간 추가 가능

📌 정리

기본 속성
- name: 오류 유형 (Error, TypeError, SyntaxError 등)
- message: 오류 메시지
- stack: 오류가 발생한 위치를 포함한 호출 스택 정보
내장 오류 유형
- ReferenceError: 존재하지 않는 변수를 참조할 때 발생
- TypeError: 데이터 타입이 잘못되었을 때 발생
- SyntaxError: 코드 문법이 잘못되었을 때 발생
커스텀 오류 속성 추가 가능
- statusCode, timestamp 같은 속성을 추가하여 오류 정보를 더 자세히 제공 가능

`try-catch`는 오류 처리를 위한 강력한 도구이며, 네트워크 요청, 파일 처리, JSON 파싱 등 다양한 상황에서 사용됩니다. 🚀

JavaScript의 `try-catch` 구문과 `Error` 객체

JavaScript에서는 try-catch 구문을 통해 오류를 처리할 수 있으며, Error 객체를 활용하면 오류를 생성하고 다룰 수 있습니다. 이를 통해 프로그램의 안정성을 높이고 예외적인 상황을 효과적으로 처리할 수 있습니다.

📌 `Error`와 `error`의 차이

구분	설명
`Error`	JavaScript의 내장된 생성자 함수로, 새로운 오류 객체를 만들 때 사용 (`new Error("메시지")`)
`error`	`catch(error)`에서 오류 정보를 담고 있는 매개변수(변수명)

📌 예제 코드로 이해하기

try {
    throw new Error("이건 오류 메시지야!"); // `Error` 객체 생성 후 던짐
} catch (error) { // `error`는 catch 블록의 매개변수
    console.log(error.name);    // "Error"
    console.log(error.message); // "이건 오류 메시지야!"
}

✅ Error는 내장된 오류 객체의 생성자 함수
✅ error는 catch에서 전달받는 오류 객체를 담는 변수

📌 `Error` 객체의 역할

1️⃣ `Error` 객체 직접 생성하기

const myError = new Error("커스텀 오류 발생!");
console.log(myError.name);    // "Error"
console.log(myError.message); // "커스텀 오류 발생!"
console.log(myError.stack);   // 오류 발생 위치 정보

✅ new Error("메시지")를 사용하면 커스텀 오류 객체를 생성할 수 있습니다.

2️⃣ `throw new Error()`를 사용하여 오류 발생

try {
    throw new Error("강제로 발생한 오류!");
} catch (error) {
    console.log(error.message); // "강제로 발생한 오류!"
}

✅ throw new Error("메시지")를 사용하면 오류를 강제로 발생시킬 수 있습니다.

📌 `Error` 객체의 확장 (커스텀 오류 타입 만들기)

기본 Error 객체를 확장하여 커스텀 오류 객체를 만들 수도 있습니다.

class CustomError extends Error {
    constructor(message, statusCode) {
        super(message); // 부모 클래스 Error의 생성자 호출
        this.name = "CustomError"; // 오류 유형 지정
        this.statusCode = statusCode; // 추가 속성
    }
}

try {
    throw new CustomError("사용자 정의 오류 발생!", 400);
} catch (error) {
    console.log(error.name);       // "CustomError"
    console.log(error.message);    // "사용자 정의 오류 발생!"
    console.log(error.statusCode); // 400
}

✅ Error를 확장하면 커스텀 오류 타입을 만들고 추가 속성을 가질 수 있습니다.

📌 정리

✔ Error는 JavaScript에서 제공하는 내장 객체로, 오류 객체를 생성하는 생성자 함수입니다.
✔ error는 catch(error)에서 오류 정보를 담고 있는 변수입니다.
✔ new Error("메시지")를 사용하면 커스텀 오류 객체를 만들 수 있습니다.
✔ throw new Error("메시지")를 사용하면 오류를 강제로 발생시킬 수 있습니다.
✔ Error 객체를 확장하면 커스텀 오류를 만들고 추가 정보를 가질 수 있습니다.

`try-catch`와 `Error` 객체를 적절히 활용하면 예외를 효과적으로 관리할 수 있습니다!

'웹 개발 > 프론트엔드 개발' 카테고리의 다른 글

React Hook 정리 (0)	2025.04.10
반환값이 JSX인 모든 경우의 수 정리 (0)	2025.02.12
250212 복습4 (0)	2025.02.12
250212 복습2 (0)	2025.02.12
객체와 컴포넌트의 차이 (0)	2025.02.12

현재글JavaScript의 `try-catch` 구문

Bluebull웹개발

javascript, Post, props, React, axios, useState, 메서드, springboot, 객체, 자바기초, 상속, Get, 웹개발, 객체지향, Java, useEffect, 자바문법, state, 자바, JSON,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31