예외 처리 : try... catch... finally

데이터를 요청하고 받아오는 과정에서 조건부 렌더링으로 미리 사용자에게 일부를 보여주고 벡엔드에서 데이터를 받아오면 표출할 수 있게 해주는 방법을 배웠다.

💡 에러 발생 !

데이터를 주고 받으면서 코드에 잘 못된 부분이 생겼을 때 긴 코드를 다 읽어서 에러를 찾아내기엔 비효율적이다.

여기서 써주는 게 바로 TRY...CATCH... 문법이다.

try{
  // 기존에 실행하려던 코드
  const fruits = ["사과","바나나"]
  	return fruits 
  
} catch(error){
  // 코드에 문제가 생겼을 경우 실행될 코드
  console.log(error.massege)
  
} finally{
  //try, catch와 관계없이 실행될 코드
  alert("오렌지를 먹은지 얼마나 오렌지")
}

🛠 에러 처리 과정

1. try... 블록에서 코드를 실행하다가 예외를 만날 경우 실행을 멈추고
2. catch... 블록으로 제어 흐름이 이동되고 변수(err)는 어떤 문제가 발생했는지에 대한 정보를 담을 수 있다.
3. 예외를 만나지 않았을 경우 catch... 블록은 건너뛰고 진행된다.
4. finally... 블록은 try...와 catch... 블록과 상관없이(어떤 블록이 실행되어도) 코드가 진행된다.

이렇게 기존 코드에 try... catch 문을 적용하면 특히 벡엔드와 데이터를 다뤄야할 때 훨씬 코드를 안정적으로 작성하고 고칠 수 있다.

⚠️ TRY...CATCH 사용 전 주의 사항

• try...catch 문은 런타임에만 작동한다.
  : 실행 가능한 코드에서만 작동. 코드 내에 문법적으로 문제가 있을 경우 작동하지 않는다.
• try...catch 문은 동기적으로 진행된다.

try { 
  setTimeout(function() {
    noSuchVariable; 
  }, 1000);
} catch (e) {
  alert( "작동 멈춤" );
}

setTimeout과 같은 예약된 코드 내에서는 에러를 잡을 수 없다.
코드 내에서 에러를 확인할 경우, 아래 코드와 같이 setTimeout 내에서 try...catch문을 써줘야한다.

setTimeout(function() {
  try {
    noSuchVariable;
  } catch {
    alert( "에러를 잡았습니다!" );
  }
}, 1000);

이 문법은 특히 벡엔드와의 데이터 처리 과정에서의 오류를 핸들링할 수 있다는 점에서 효율적으로 사용될 수 있을 것으로 보인다.
코드 연습할 때 자주 사용해보고 익숙해지도록 연습해두자.

🖥 TRY... CATCH 참고 링크

MDN 링크 👉🏻 MDN JAVASCRIPT
JAVASCIPRT INFO 링크 👉🏻 JAVASCRIPT INFO