TypeScript에서 이벤트 타입을 안전하게 바꾸는 법

이벤트 타입을 수정하는 작업은 생각보다 까다롭다. 이벤트 핸들러가 여러 곳에 흩어져 있을 수 있고, 타입 정의와 실제 사용처가 일치하지 않을 수도 있기 때문이다.

내가 배운 방법은 리팩터링을 작은 단위로 나눠서 진행하는 것이다. 한 번에 하나씩 확인하면서 진행하면, 문제가 생겼을 때 원인을 빨리 찾을 수 있다.

문제 상황 파악하기

이벤트 타입 리팩터링을 시작하기 전에, 현재 상태를 정리해보자:

• 타입 정의가 뭐가 문제인가?
• 어디서 사용되고 있는가?
• optional과 null 처리는 어떻게 되어 있는가?

이 정보들이 명확해야 안전하게 진행할 수 있다.

확인 범위 정하기

한 번에 모든 파일을 수정하지 말자. 대신 영향 범위를 명확히 하고, 작은 부분부터 수정해보자:

• optional/null 처리
• 타입 정의
• 사용 지점

작은 변경부터 시작하기

빌드 에러 메시지를 먼저 확인하자:

npm run build
npx tsc --noEmit

여기서 나오는 에러가 수정 방향을 알려준다. 그 에러부터 하나씩 해결하자.

로그에서 볼 부분

타입 에러 메시지는 대부분 명확하다. 에러 메시지가 정확히 뭘 말하는지 읽으면, 수정 방향이 보인다.

타입 가드 확인

이벤트 타입에 타입 가드가 필요하면, 이를 명확히 정의해야 한다. 나중에 실패했을 때 대안이 뭔지 미리 정해두면 좋다.

다음에 남길 기록

수정을 마친 후에는 뭐를 했는지 명확하게 남겨두자. 같은 문제가 다시 나올 때 훨씬 빨리 처리할 수 있다.

1. 재현 조건을 명확히 한다.
2. 같은 조건에서 다시 나는지 확인한다.
3. 해결 방법과 이유를 정리한다.

이벤트 타입 리팩터링은 차근차근 진행하면 충분히 안전하게 할 수 있다.