에러 처리와 예외 관리: 타입스크립트 접근법 🚀

안녕, 친구들! 오늘은 우리가 프로그래밍을 하면서 항상 마주치는 골치 아픈 녀석들, 바로 에러와 예외에 대해 얘기해볼 거야. 특히 타입스크립트에서 이 녀석들을 어떻게 다루는지 알아보자고! 🤓

우리가 코드를 짜다 보면 항상 뭔가 잘못될 수 있어. 그게 바로 에러와 예외야. 근데 이런 상황을 잘 관리하면? 우리 프로그램은 더 안정적이고 믿음직스러워질 거야. 마치 재능넷에서 다양한 재능을 안전하게 거래하는 것처럼 말이야!

🔍 잠깐! 알고 가자: 타입스크립트는 자바스크립트의 슈퍼셋이야. 즉, 자바스크립트의 모든 기능을 포함하면서 추가적인 기능을 제공한다는 거지. 그중에서도 타입 안정성이 가장 큰 특징이야. 이게 에러 처리에 어떤 영향을 미칠까? 함께 알아보자!

1. 타입스크립트에서의 에러란? 🤔

자, 먼저 에러가 뭔지부터 확실히 알고 가자. 에러는 우리 프로그램이 예상치 못한 상황에 빠졌을 때 발생해. 예를 들어, 없는 파일을 열려고 한다거나, 0으로 나누려고 할 때 말이야. 타입스크립트에서는 이런 에러를 크게 두 가지로 나눌 수 있어:

컴파일 타임 에러: 코드를 실행하기 전에 발견되는 에러야. 타입스크립트의 강력한 타입 체크 덕분에 많은 에러를 미리 잡을 수 있지.
런타임 에러: 프로그램이 실행 중일 때 발생하는 에러야. 이건 좀 더 까다로워서 특별한 관리가 필요해.

타입스크립트의 강점은 바로 컴파일 타임에 많은 에러를 잡아낼 수 있다는 거야. 마치 재능넷에서 거래 전에 미리 안전을 체크하는 것처럼 말이야! 😉

2. 타입스크립트의 에러 처리 방식 💪

타입스크립트에서 에러를 처리하는 방법은 크게 세 가지야. 하나씩 살펴보자!

2.1 try-catch 문 사용하기

가장 기본적인 방법이지만, 여전히 강력해. 코드를 try 블록 안에 넣고, 발생할 수 있는 에러를 catch 블록에서 잡는 거야.


try {
  // 에러가 발생할 수 있는 코드
  const result = someRiskyFunction();
  console.log(result);
} catch (error) {
  // 에러 처리
  console.error("오류 발생:", error.message);
}

이 방식의 장점은 런타임 에러를 우아하게 처리할 수 있다는 거야. 프로그램이 갑자기 멈추는 대신, 우리가 정의한 방식대로 에러를 처리할 수 있지.

2.2 타입 가드 사용하기

타입스크립트의 특별한 기능 중 하나인 타입 가드를 사용하면, 런타임에 타입을 체크하고 그에 따라 다르게 동작하도록 할 수 있어.


function processValue(value: string | number) {
  if (typeof value === "string") {
    // value는 여기서 string 타입으로 처리됨
    console.log(value.toUpperCase());
  } else {
    // value는 여기서 number 타입으로 처리됨
    console.log(value.toFixed(2));
  }
}

타입 가드를 사용하면 컴파일 타임에 많은 에러를 방지할 수 있어. 이건 마치 재능넷에서 서비스를 이용하기 전에 사용자의 자격을 확인하는 것과 비슷해!

2.3 사용자 정의 에러 만들기

때로는 우리만의 특별한 에러가 필요할 때가 있어. 타입스크립트에서는 Error 클래스를 상속받아 커스텀 에러를 만들 수 있지.


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

try {
  throw new CustomError("이런, 뭔가 잘못됐어!");
} catch (error) {
  if (error instanceof CustomError) {
    console.log("커스텀 에러 발생:", error.message);
  } else {
    console.log("알 수 없는 에러 발생");
  }
}

사용자 정의 에러를 사용하면 더 구체적이고 의미 있는 에러 처리가 가능해져. 이렇게 하면 문제가 발생했을 때 더 빠르고 정확하게 대응할 수 있지!

💡 Pro Tip: 에러 처리는 단순히 문제를 잡아내는 것뿐만 아니라, 그 문제를 어떻게 해결할지에 대한 전략이기도 해. 항상 "이 에러가 발생하면 어떻게 대응해야 할까?"를 고민해봐!

3. 타입스크립트의 고급 에러 처리 기법 🧠

자, 이제 좀 더 깊이 들어가볼까? 타입스크립트에서 사용할 수 있는 몇 가지 고급 에러 처리 기법을 알아보자!

3.1 Union Types를 활용한 에러 처리

타입스크립트의 Union Types를 사용하면 함수가 반환할 수 있는 여러 타입을 명시적으로 정의할 수 있어. 이를 통해 에러 상황을 타입 시스템 내에서 표현할 수 있지.


type Result<t> = { success: true; value: T } | { success: false; error: string };

function divide(a: number, b: number): Result<number> {
  if (b === 0) {
    return { success: false, error: "0으로 나눌 수 없어요!" };
  }
  return { success: true, value: a / b };
}

const result = divide(10, 2);
if (result.success) {
  console.log("결과:", result.value);
} else {
  console.error("에러:", result.error);
}
</number></t>

이 방식을 사용하면 컴파일러가 모든 가능한 결과를 처리했는지 확인할 수 있어. 마치 재능넷에서 모든 가능한 거래 결과를 미리 정의해두는 것과 비슷하지!

3.2 제네릭을 활용한 유연한 에러 처리

제네릭을 사용하면 다양한 타입에 대해 재사용 가능한 에러 처리 로직을 만들 수 있어.


class Result<t e> {
  private constructor(private value: T | null, private error: E | null) {}

  static ok<t>(value: T): Result<t never> {
    return new Result(value, null);
  }

  static err<e>(error: E): Result<never e> {
    return new Result(null, error);
  }

  unwrap(): T {
    if (this.error) {
      throw this.error;
    }
    return this.value as T;
  }
}

function safeOperation(): Result<number string> {
  // 실제 연산 수행
  if (Math.random() > 0.5) {
    return Result.ok(42);
  } else {
    return Result.err("연산 실패!");
  }
}

const result = safeOperation();
try {
  const value = result.unwrap();
  console.log("성공:", value);
} catch (error) {
  console.error("실패:", error);
}
</number></never></e></t></t></t>

이 패턴을 사용하면 에러 처리를 타입 안전하게 할 수 있어. 컴파일러가 우리가 모든 가능한 결과를 처리했는지 확인해주니까, 런타임 에러의 위험을 크게 줄일 수 있지!

3.3 데코레이터를 활용한 에러 로깅

타입스크립트의 실험적 기능인 데코레이터를 사용하면, 메서드에 자동으로 에러 처리 로직을 추가할 수 있어.


function logError(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    try {
      return originalMethod.apply(this, args);
    } catch (error) {
      console.error(`Error in ${propertyKey}:`, error);
      throw error;
    }
  };
  return descriptor;
}

class Calculator {
  @logError
  divide(a: number, b: number): number {
    if (b === 0) throw new Error("0으로 나눌 수 없어요!");
    return a / b;
  }
}

const calc = new Calculator();
try {
  calc.divide(10, 0);
} catch (error) {
  console.log("에러가 잘 처리되었습니다.");
}

데코레이터를 사용하면 반복적인 에러 처리 코드를 줄이고, 관심사를 분리할 수 있어. 이는 코드의 가독성과 유지보수성을 크게 향상시키지!

🌟 Remember: 에러 처리는 단순히 프로그램의 충돌을 방지하는 것 이상의 의미가 있어. 잘 설계된 에러 처리 시스템은 프로그램의 안정성을 높이고, 디버깅을 쉽게 만들며, 사용자 경험을 개선해. 마치 재능넷이 안전하고 신뢰할 수 있는 거래 환경을 제공하는 것처럼 말이야!

4. 실전 예제: 타입스크립트로 안전한 API 호출 만들기 🌐

자, 이제 우리가 배운 내용을 실제로 적용해볼 차례야! API 호출은 많은 웹 애플리케이션에서 중요한 부분이지만, 동시에 많은 에러의 원인이 되기도 해. 타입스크립트를 사용해 어떻게 안전한 API 호출을 만들 수 있는지 살펴보자.

4.1 기본적인 API 호출 함수

먼저, fetch를 사용해 기본적인 API 호출 함수를 만들어볼게.


async function fetchData<t>(url: string): Promise<t> {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.json();
}
</t></t>

이 함수는 제네릭을 사용해 다양한 타입의 데이터를 처리할 수 있어. 하지만 아직 에러 처리가 충분하지 않아. 개선해볼까?

4.2 에러 타입 정의하기

API 호출 중 발생할 수 있는 다양한 에러 타입을 정의해보자.


type NetworkError = {
  type: 'NetworkError';
  message: string;
};

type ApiError = {
  type: 'ApiError';
  statusCode: number;
  message: string;
};

type ParseError = {
  type: 'ParseError';
  message: string;
};

type AppError = NetworkError | ApiError | ParseError;

이렇게 에러 타입을 명확히 정의하면, 각 에러 상황에 대해 더 구체적으로 대응할 수 있어.

4.3 Result 타입 사용하기

이제 앞서 배운 Result 타입을 활용해 API 호출 함수를 개선해보자.


type Result<t> = { ok: true; value: T } | { ok: false; error: AppError };

async function fetchData<t>(url: string): Promise<result>> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      return {
        ok: false,
        error: {
          type: 'ApiError',
          statusCode: response.status,
          message: `HTTP error! status: ${response.status}`
        }
      };
    }
    const data = await response.json();
    return { ok: true, value: data };
  } catch (error) {
    if (error instanceof TypeError) {
      return {
        ok: false,
        error: {
          type: 'NetworkError',
          message: 'Network error occurred'
        }
      };
    }
    return {
      ok: false,
      error: {
        type: 'ParseError',
        message: 'Failed to parse JSON'
      }
    };
  }
}
</result></t></t>

이제 이 함수는 성공과 실패의 경우를 명확히 구분하고, 각 에러 상황에 대해 구체적인 정보를 제공해. 이는 마치 재능넷에서 거래 과정의 각 단계마다 상세한 상태 정보를 제공하는 것과 비슷해!

4.4 API 호출 사용 예제

이제 우리가 만든 안전한 API 호출 함수를 사용해보자.


interface User {
  id: number;
  name: string;
  email: string;
}

async function getUser(id: number) {
  const result = await fetchData<user>(`https://api.example.com/users/${id}`);
  if (result.ok) {
    console.log('User:', result.value);
  } else {
    switch (result.error.type) {
      case 'NetworkError':
        console.error('네트워크 에러:', result.error.message);
        break;
      case 'ApiError':
        console.error(`API 에러 (${result.error.statusCode}):`, result.error.message);
        break;
      case 'ParseError':
        console.error('파싱 에러:', result.error.message);
        break;
    }
  }
}

getUser(1);
</user>

이 방식을 사용하면 모든 가능한 에러 상황을 빠짐없이 처리할 수 있어. 컴파일러가 우리가 모든 에러 타입을 처리했는지 확인해주니까, 예상치 못한 런타임 에러의 위험을 크게 줄일 수 있지!

🚀 Pro Tip: 실제 프로젝트에서는 이런 에러 처리 로직을 재사용 가능한 유틸리티 함수나 클래스로 만들어 사용하면 좋아. 이렇게 하면 애플리케이션 전체에서 일관된 방식으로 에러를 처리할 수 있고, 코드 중복도 줄일 수 있지!

5. 타입스크립트 에러 처리의 모범 사례 🏆

자, 이제 우리가 배운 내용을 바탕으로 타입스크립트에서 에러를 처리할 때 따르면 좋을 몇 가지 모범 사례를 정리해볼게.

5.1 명시적인 에러 타입 사용하기

가능한 한 `any` 타입 대신 구체적인 에러 타입을 사용해. 이렇게 하면 컴파일러가 더 많은 도움을 줄 수 있어.


// 좋지 않은 예
function riskyOperation(): any {
  // ...
}

// 좋은 예
type OperationError = {
  code: number;
  message: string;
};

function riskyOperation(): string | OperationError {
  // ...
}

명시적인 에러 타입을 사용하면 코드의 가독성이 높아지고, 에러 처리가 더 안전해져. 마치 재능넷에서 각 거래 상태를 명확히 정의하는 것과 같아!

5.2 비동기 코드에서의 에러 처리

Promise를 사용할 때는 항상 catch를 사용해 에러를 처리해. async/await를 사용할 때는 try-catch 블록을 활용하자.


// Promise 사용 시
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));

// async/await 사용 시
async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

비동기 코드에서의 에러 처리는 특히 중요해. 놓치기 쉽지만, 제대로 처리하지 않으면 프로그램 전체가 멈출 수 있으니까!

5.3 에러 객체 확장하기

기본 Error 객체를 확장해 더 많은 정보를 포함하는 커스텀 에러를 만들어 사용해.


class DatabaseError extends Error {
  constructor(
    message: string,
    public readonly code: number,
    public readonly query: string
  ) {
    super(message);
    this.name = 'DatabaseError';
  }
}

try {
  throw new DatabaseError('쿼리 실행 실패', 500, 'SELECT * FROM users');
} catch (error) {
  if (error instanceof DatabaseError) {
    console.error(`DB 에러 (${error.code}): ${error.message}`);
    console.error('실행된 쿼리:', error.query);
  }
}

커스텀 에러 객체를 사용하면 에러와 관련된 더 많은 컨텍스트 정보를 제공할 수 있어. 이는 디버깅과 로깅에 매우 유용하지!

5.4 타입 가드 활용하기

여러 타입의 에러를 처리할 때는 타입 가드를 사용해 각 에러 타입에 맞는 처리를 할 수 있어.


type NetworkError = { kind: 'NetworkError', message: string };
type ValidationError = { kind: 'ValidationError', errors: string[] };

type AppError = NetworkError | ValidationError;

function handleError(error: AppError) {
  if (error.kind === 'NetworkError') {
    console.error('네트워크 에러:', error.message);
  } else {
    console.error('유효성 검사 에러:', error.errors.join(', '));
  }
}

타입 가드를 사용하면 컴파일러가 각 분기에서의 정확한 타입을 알 수 있어, 타입 안전성이 높아져. 이는 마치 재능넷에서 각 사용자의 역할에 따라 다른 기능을 제공하는 것과 비슷해!

5.5 에러 처리를 위한 유틸리티 함수 만들기

자주 사용되는 에러 처리 패턴은 유틸리티 함수로 만들어 재사용하자.


function tryCatch<t>(fn: () => T, errorHandler: (error: unknown) => void): T | undefined {
  try {
    return fn();
  } catch (error) {
    errorHandler(error);
    return undefined;
  }
}

const result = tryCatch(
  () => JSON.parse('{"name": "John"}'),
  (error) => console.error('JSON 파싱 에러:', error)
);

console.log(result); // { name: 'John' } 또는 undefined
</t>

이런 유틸리티 함수를 사용하면 코드 중복을 줄이고, 일관된 방식으로 에러를 처리할 수 있어. 이는 코드의 가독성과 유지보수성을 크게 향상시키지!

💡 Key Takeaway: 타입스크립트에서의 효과적인 에러 처리는 단순히 try-catch 문을 사용하는 것 이상이야. 타입 시스템을 활용해 컴파일 타임에 많은 에러를 방지하고, 런타임에는 구체적이고 타입 안전한 방식으로 에러를 처리하는 것이 중요해. 이렇게 하면 더 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있어!

6. 실전 프로젝트: 타입스크립트로 안전한 TODO 앱 만들기 📝

자, 이제 우리가 배운 모든 것을 종합해서 실제 프로젝트에 적용해볼 시간이야! 간단한 TODO 앱을 만들면서 타입스크립트의 에러 처리 기능을 최대한 활용해보자.

6.1 프로젝트 설정

먼저 프로젝트를 설정해볼게. 터미널 에서 다음 명령어를 실행해 프로젝트를 설정해보자.


mkdir ts-todo-app
cd ts-todo-app
npm init -y
npm install typescript @types/node --save-dev
npx tsc --init

이제 기본적인 프로젝트 구조가 만들어졌어. 다음으로 `src` 폴더를 만들고 그 안에 `index.ts` 파일을 생성해줘.

6.2 TODO 타입 정의하기

우리의 TODO 앱에서 사용할 기본 타입들을 정의해보자.


// src/types.ts

export interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

export type TodoError = 
  | { kind: 'NotFound'; id: number }
  | { kind: 'ValidationError'; message: string }
  | { kind: 'NetworkError'; message: string };

export type Result<t> = 
  | { ok: true; value: T }
  | { ok: false; error: TodoError };
</t>

이렇게 타입을 명확히 정의하면 앱 전체에서 일관된 데이터 구조를 사용할 수 있어. 마치 재능넷에서 모든 거래 정보의 구조를 명확히 정의하는 것과 같지!

6.3 TODO 서비스 구현하기

이제 TODO를 관리하는 서비스를 구현해보자. 실제 데이터베이스 대신 메모리에 데이터를 저장할 거야.


// src/todoService.ts

import { Todo, Result, TodoError } from './types';

class TodoService {
  private todos: Todo[] = [];

  create(title: string): Result<todo> {
    if (!title.trim()) {
      return { 
        ok: false, 
        error: { kind: 'ValidationError', message: 'Title cannot be empty' } 
      };
    }

    const newTodo: Todo = {
      id: Date.now(),
      title: title.trim(),
      completed: false
    };

    this.todos.push(newTodo);
    return { ok: true, value: newTodo };
  }

  getAll(): Result<todo> {
    return { ok: true, value: this.todos };
  }

  getById(id: number): Result<todo> {
    const todo = this.todos.find(t => t.id === id);
    if (!todo) {
      return { ok: false, error: { kind: 'NotFound', id } };
    }
    return { ok: true, value: todo };
  }

  update(id: number, updates: Partial<omit>>): Result<todo> {
    const todoResult = this.getById(id);
    if (!todoResult.ok) return todoResult;

    const updatedTodo = { ...todoResult.value, ...updates };
    this.todos = this.todos.map(t => t.id === id ? updatedTodo : t);
    return { ok: true, value: updatedTodo };
  }

  delete(id: number): Result<void> {
    const initialLength = this.todos.length;
    this.todos = this.todos.filter(t => t.id !== id);
    
    if (this.todos.length === initialLength) {
      return { ok: false, error: { kind: 'NotFound', id } };
    }
    
    return { ok: true, value: undefined };
  }
}

export const todoService = new TodoService();
</void></todo></omit></todo></todo></todo>

이 서비스는 Result 타입을 사용해 모든 작업의 성공과 실패를 명확히 표현하고 있어. 이렇게 하면 에러 처리가 훨씬 더 쉬워지지!