데이터를 요청하고 받아오는 과정에서 조건부 렌더링으로 미리 사용자에게 일부를 보여주고 벡엔드에서 데이터를 받아오면 표출할 수 있게 해주는 방법을 배웠다.
데이터를 주고 받으면서 코드에 잘 못된 부분이 생겼을 때 긴 코드를 다 읽어서 에러를 찾아내기엔 비효율적이다.
여기서 써주는 게 바로 TRY...CATCH... 문법이다.
try{
// 기존에 실행하려던 코드
const fruits = ["사과","바나나"]
return fruits
} catch(error){
// 코드에 문제가 생겼을 경우 실행될 코드
console.log(error.massege)
} finally{
//try, catch와 관계없이 실행될 코드
alert("오렌지를 먹은지 얼마나 오렌지")
}
try...
블록에서 코드를 실행하다가 예외를 만날 경우 실행을 멈추고catch...
블록으로 제어 흐름이 이동되고 변수(err)는 어떤 문제가 발생했는지에 대한 정보를 담을 수 있다.catch...
블록은 건너뛰고 진행된다.finally...
블록은 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