자바스크립트에서 함수의 에러 핸들링(Error Handling) 방법은 무엇인가요?

자바스크립트 함수의 에러 핸들링 방법 FAQ

Q1: 자바스크립트에서 함수 실행 중 발생하는 에러를 어떻게 잡을 수 있나요?
A1: `try...catch` 구문을 사용합니다. `try` 블록 안에 실행할 코드를 작성하고, 에러가 발생하면 `catch` 블록에서 에러를 처리할 수 있습니다.

```javascript
function example() {
try {
// 에러가 발생할 가능성이 있는 코드
throw new Error("문제가 발생했습니다.");
} catch (error) {
console.error("에러를 잡았습니다:", error.message);
}
}
example();
```

---

Q2: `try...catch`를 사용하지 않아도 되는 경우가 있나요?
A2: 동기 코드에서는 중요하게 쓰이지만, 비동기 코드(Promise, async/await)에서는 별도의 에러 핸들링 방법이 필요합니다. 예를 들어, `Promise.catch()` 또는 `async/await` 내에서 `try...catch`를 사용해 처리합니다.

---

Q3: 비동기 함수 안에서 에러를 처리하려면 어떻게 하나요?
A3: `async` 함수 내부에서 `try...catch`를 사용하거나, Promise 반환 시 `.catch()`를 붙입니다.

```javascript
// async/await + try...catch
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
return data;
} catch (error) {
console.error("데이터를 가져오는데 실패했습니다:", error);
}
}

// Promise + catch
fetch('https://api.example.com/data')
.then(response => response.json())
.catch(error => console.error("에러 발생:", error));
```

---

Q4: 사용자 정의 에러를 만들 수 있나요?
A4: 네, `Error` 객체를 직접 생성하거나 커스텀 클래스 상속을 통해 만들 수 있습니다.

```javascript
class CustomError extends Error {
constructor(message) {
super(message);
this.name = "CustomError";
}
}

function test() {
throw new CustomError("이것은 커스텀 에러입니다.");
}

try {
test();
} catch (e) { console.error(e.name, e.message);
}
```

---

Q5: 여러 함수에서 공통으로 에러 처리하는 방법은?
A5: 함수 내부에서 에러를 던지고(catching하지 않고), 호출한 상위 레벨에서 `try...catch`로 통합 처리하거나, 에러 처리 전용 미들웨어/함수를 만들어 호출합니다.

```javascript
function riskyOperation() {
if (Math.random() > 0.5) throw new Error("랜덤 에러!");
}

function main() {
try {
riskyOperation();
console.log("정상 실행");
} catch (e) {
console.error("에러 처리:", e.message);
}
}
main();
```

---

Q6: 에러를 콘솔에 출력하지 않고 사용자에게 알리려면?
A6: 에러 메시지를 UI에 렌더링하거나 알림창(alert, modal 등)으로 띄울 수 있습니다. `catch`에서 DOM 조작 또는 UI 상태 관리를 통해 처리합니다.

```javascript
try {
throw new Error("문제가 생겼습니다.");
} catch (e) {
document.getElementById('errorBox').innerText = e.message;
}
```

---

Q7: `finally`는 언제 사용하나요?
A7: `try...catch` 뒤에 `finally` 블록을 붙여 에러 발생 여부와 상관없이 항상 실행할 코드(예: 리소스 해제)를 작성할 때 사용합니다.

```javascript
try {
// 작업 수행
} catch (e) {
// 에러 처리
} finally {
// 항상 실행되는 코드
console.log("작업 끝");
}
```

---

Q8: 에러 핸들링 시 주의할 점은 무엇인가요?
A8:
- 에러를 무조건 무시하지 말고 적절히 처리할 것
- 너무 광범위한 `catch`는 문제를 숨길 수 있으므로 필요한 곳에만 사용
- 사용자 정보 노출에 주의
- 비동기 에러는 반드시 처리하지 않으면 누락 가능성 있음

---

요약하면, 자바스크립트 함수에서 에러 핸들링은 동기에서는 `try...catch`, 비동기에서는 `async/await` + `try...catch` 혹은 `.catch()` 메서드를 활용하며, 사용자에게 적절히 알리는 UI 처리도 병행하는 것이 가장 좋은 방법입니다.

자바스크립트에서 함수의 에러 핸들링(Error Handling)은 프로그램의 안정성을 높이고, 예외 상황에 대한 적절한 대응을 가능하게 하는 중요한 기법입니다.

에러 핸들링을 통해 개발자는 예기치 않은 오류가 발생했을 때 프로그램이 중단되지 않도록 하고, 사용자에게 유용한 정보를 제공할 수 있습니다.

자바스크립트에서 에러 핸들링을 구현하는 주요 방법은 다음과 같습니다.

1. `try...catch` 문 가장 일반적인 에러 핸들링 방법은 `try...catch` 문을 사용하는 것입니다.

이 구조를 사용하면 코드 블록에서 발생할 수 있는 에러를 감지하고, 이를 처리할 수 있습니다.

```javascript function riskyFunction() { // 이 코드에서 에러가 발생할 수 있습니다.

throw new Error("Something went wrong!"); } try { riskyFunction(); } catch (error) { console.error("Error caught:", error.message); } ``` 위의 예제에서 `riskyFunction`이 에러를 발생시키면, `try` 블록에서 해당 에러가 발생하고, `catch` 블록에서 이를 처리합니다.

`error` 객체를 통해 에러의 세부 정보를 얻을 수 있습니다.



2. `finally` 블록 `try...catch` 문에서는 `finally` 블록을 추가하여, 에러 발생 여부와 관계없이 항상 실행되는 코드를 작성할 수 있습니다.

이는 리소스를 해제하거나, 로그를 남기는 등의 작업에 유용합니다.

```javascript try { riskyFunction(); } catch (error) { console.error("Error caught:", error.message); } finally { console.log("This will always run."); } ```

3. 사용자 정의 에러 자바스크립트에서는 기본 제공되는 `Error` 객체 외에도 사용자 정의 에러 클래스를 생성하여 더 구체적인 에러 처리를 할 수 있습니다.

이를 통해 에러의 종류를 명확하게 구분할 수 있습니다.

```javascript class CustomError extends Error { constructor(message) { super(message); this.name = "CustomError"; } } function anotherRiskyFunction() { throw new CustomError("This is a custom error!"); } try { anotherRiskyFunction(); } catch (error) { if (error instanceof CustomError) { console.error("Caught a custom error:", error.message); } else { console.error("Caught a different error:", error.message); } } ```

4. 비동기 함수에서의 에러 핸들링 비동기 함수(Async/Await)에서는 `try...catch` 문을 사용하여 에러를 처리할 수 있습니다.

비동기 함수 내에서 발생하는 에러를 쉽게 잡을 수 있습니다.

```javascript async function asyncFunction() { throw new Error("Async error!"); } async function main() { try { await asyncFunction(); } catch (error) { console.error("Caught an async error:", error.message); } } main(); ```

5. 전역 에러 핸들링 전역적으로 발생하는 에러를 처리하기 위해 `window.onerror` 또는 `process.on('uncaughtException')`를 사용할 수 있습니다.

이는 애플리케이션의 모든 에러를 포착하여 로깅하거나 사용자에게 알릴 수 있는 방법입니다.

```javascript window.onerror = function(message, source, lineno, colno, error) { console.error("Global error caught:", message); }; ```

6. Promise에서의 에러 핸들링 Promise를 사용할 때는 `.catch()` 메서드를 통해 에러를 처리할 수 있습니다.

이는 비동기 작업에서 발생하는 에러를 잡는 데 유용합니다.

```javascript function promiseFunction() { return new Promise((resolve, reject) => { reject(new Error("Promise error!")); }); } promiseFunction() .then(result => { console.log(result); }) .catch(error => { console.error("Caught a promise error:", error.message); }); ``` 결론 자바스크립트에서 에러 핸들링은 프로그램의 안정성과 사용자 경험을 향상시키는 데 필수적입니다.

`try...catch`, 사용자 정의 에러, 비동기 함수에서의 에러 처리, Promise의 `.catch()` 메서드 등 다양한 방법을 통해 에러를 효과적으로 관리할 수 있습니다.

이러한 기법들을 적절히 활용하여 견고한 애플리케이션을 개발하는 것이 중요합니다.