[JavaScript] try - catch 사용한 미니 프로젝트 클론

1. try-catch
2. 클론코딩

1. try-catch

자바스크립트에서는 try-catch구문을 사용해서 예외 처리를 할 수 있다.

try {
  // 예외가 발생할 수 있는 코드 블록
} catch (error) {
  // 예외가 발생했을 때 처리할 코드
}

^ 위 코드가 기본 형태인데 try 블록에서는 예외가 발생할 수 있는 코드를 작성하고, catch 블록에는 예외가 발생했을 때 처리할 코드를 작성한다.

try {
  // 예외가 발생할 수 있는 코드
  let result = x / y;
  console.log(result);
} catch (error) {
  // 예외가 발생했을 때 처리할 코드
  console.log("An error occurred: " + error.message);
}

^ 이 코드 에서는 try 내부에서 x를 y로 나누는 연산을 진행하는데 y가 0일 때에는 예외가 발생하기 때문에 catch 블록에 작성된 에러 메세지 코드가 실행된다.

---

try-catch 구문은 외부 리소스에 대한 요청이나, 파일 I/O 작업과 같이 예외가 발생할 수 있는 로직에서 사용된다.

2. 클론코딩

사실 잘 모르겠어서 재밌어 보이는 미니 프로젝트로 냅다 클론코딩을 해봤다.
우선 HTML코드를 보면

<div class="container">
  	<div class="eyes-wrapper">
      <div class="eye">
        <div class="eyeball"></div>
      </div>
      <div class="eye">
        <div class="eyeball"></div>
      </div>
	</div>
</div>

두 눈알을 만들어준다.. 그리고 css는 생략

let eye_ref = document.querySelectorAll(".eye");

let events = ["mousemove", "touchmove"];

function isTouchDevice(){
    try {
        document.createEvent("TouchEvent");
        return true;
    }
    catch (e) {
        return false;
    }
}

events.forEach((eventType) => {
    document.body.addEventListener(eventType, event => {
        eye_ref.forEach((eye) => {
            let eyeX = eye.getBoundingClientRect().left + eye.clientWidth / 2;
            let eyeY = eye.getBoundingClientRect().top + eye.clientHeight / 2;
            //console.log(eyeX, eyeY)

            let x = !isTouchDevice() ? event.clientX : event.touches[0].clientX;
            let y = !isTouchDevice() ? event.clientY : event.touches[0].clientY;

            let radian = Math.atan2(x - eyeX, y - eyeY);
            let rotationDegrees = radian * (180 / Math.PI) * -1 + 180;
            //console.log(rotationDegrees)
            eye.style.transform = "rotate(" + rotationDegrees + "deg)";
        });
    });
});

1. try-catch 구문 순서
-> isTouchDevice() 함수내에서 try-catch 구문 사용
-> document.createEvent(TouchEvent)를 시도하여 이벤트 생성 가능 여부 확인
-> 터치 이벤트 생성이 가능한 경우 'true'반환, 불가능한 경우 'false'반환

여기서 이벤트 처리 자체는 try-catch구문이 필요없지 않나..? 라는 생각이 들어서 찾아보았는데.

터치 이벤트가 지원되지 않는 환경에서 createEvent(TouchEvent)메소드를 사용하는 경우에는 예외가 발생할 수 있기 때문에 try-catch 구문으로 프로그램의 안정성을 높일 수 있다.

라는 답을 확인할 수 있었다! 그리고 이벤트에 적용된 순서도 알아보자.

2. 이벤트 처리
-> events 배열에서 forEach로 이벤트를 모두 적용
-> 각각의 요소에 대한 터치 이벤트 처리
-> addEventListener로 이벤트 감지, 콜백함수 등록
-> 콜백함수 내부에서는 모든 .eye요소의 위치 업데이트

이외에도 try-catch 구문을 활용한 예시코드가 있다면 추가로 공부해봐야겠다!
끝!

coding artist - 참고 유튜브 링크