Chrome 개발자 도구로 타입스크립트 애플리케이션 디버깅하기

이 튜토리얼에서는 계산기를 시뮬레이션하는 간단한 타입스크립트 애플리케이션을 디버깅하는 방법을 보여드리겠습니다. 두 숫자를 더해도 예상한 결과가 나오지 않는 오류를 파악하는 것이 목표입니다. 이 실습에서는 Chrome 개발자 도구를 사용하여 코드를 분석하고 오류를 빠르게 찾습니다. 이 가이드는 디버깅의 중요성과 디버깅에 도움이 될 수 있는 도구를 이해하는 데 도움이 될 것입니다.

주요 결과

• Chrome 개발자 도구를 사용하면 애플리케이션의 상태를 쉽게 분석할 수 있습니다.
• 타입스크립트에서 타입 검사를 사용하면 코드가 실행되기 전에 오류를 조기에 발견하는 데 도움이 됩니다.
• 오류를 방지하려면 타입의 의미와 올바른 값 처리가 중요합니다.

단계별 지침

먼저 Chrome 브라우저를 시작하고 계산기의 타입스크립트 구현이 있는 웹 애플리케이션을 로드합니다. 프로젝트가 이미 서버에서 실행 중이어야 Chrome에서 HTML 파일을 열 수 있습니다.

이제 프로젝트에서 TypeScript 파일과 JavaScript 파일(트랜스파일된 파일)을 모두 사용할 수 있는지 확인해야 합니다. TypeScript 파일에는 주석과 유형 정보가 포함되어 있지만 트랜스파일된 JavaScript 파일에는 이 정보가 포함되어 있지 않습니다.

페이지를 마우스 오른쪽 버튼으로 클릭하고 '탐색'을 선택하거나 F12를 눌러 Chrome 개발자 도구를 엽니다. "요소" 탭으로 이동하여 페이지의 HTML 코드를 확인하고 입력 필드와 버튼이 올바르게 설정되어 있는지 확인합니다.

계산기에는 숫자를 입력할 수 있는 두 개의 입력 필드와 덧셈을 트리거하는 버튼이 있습니다. 몇 가지 테스트 값을 입력하고 버튼을 클릭할 수 있습니다. 합계가 올바르게 계산되지 않고 예상한 4가 아닌 22가 나올 수 있습니다. 이 편차를 명확히 하려면 디버깅이 필요합니다.

이제 이벤트 리스너 함수를 클릭하여 코드에 중단점을 설정합니다. 이것은 추가를 담당하는 섹션에서 수행됩니다. 입력 필드에 값을 입력하고 버튼을 누르면 디버거로 들어가야 합니다.

디버거 보기에서 변수를 검사할 수 있습니다. 특히 입력 필드의 내부 텍스트와 값을 확인하여 어떤 값이 전달되고 있는지 확인하는 것이 중요합니다. 입력 필드의 값이 예상했던 숫자 유형이 아닌 문자열 유형임을 알 수 있습니다.

이러한 유형 충돌은 덧셈이 올바르게 작동하지 않음을 의미합니다. 숫자를 더하는 대신 숫자가 연결됩니다. 예를 들어 "1"과 "6"을 입력하면 원하는 결과가 아닌 "16"이 됩니다. 이러한 논리적 오류는 이해하기 쉽지만 식별하는 것이 중요합니다.

이제 오류를 수정해야 합니다. Visual Studio Code에서 TypeScript 파일로 돌아가서 값이 처리되는 방식을 변경합니다. 문자열이 아닌 숫자인지 확인하기 위해 n1.value + n2.value 대신 n1.valueAsNumber + n2.valueAsNumber를 사용해야 합니다.

변경한 후에는 파일을 저장하고 Chrome에서 페이지를 새로고침합니다. 그런 다음 입력 필드의 값을 추가하기 전에 다시 확인해야 합니다. 이번에는 두 숫자의 정확한 합이 표시됩니다.

모든 것이 올바르게 완료되었다면 이제 예를 들어 '2'와 '8' 값을 입력한 경우 버튼을 누르면 합계가 '10'으로 표시됩니다. 이제 오류를 성공적으로 수정하고 타입스크립트에서 유형성이 얼마나 중요한지 배웠습니다.

또한 변수의 유형을 명확하게 정의하여 타입스크립트의 이점을 활용할 수 있습니다. 이렇게 하면 런타임 오류가 발생할 가능성이 크게 줄어듭니다. 디버깅을 더 쉽게 하려면 항상 유형을 지정해야 합니다.

마지막으로 애플리케이션의 코드와 동작을 실시간으로 분석하는 데 있어 크롬 개발자 도구가 얼마나 중요한지 살펴보았습니다. 이러한 도구를 사용한 디버깅은 개발 프로세스를 개선하는 데 크게 기여할 수 있습니다.

요약

이 가이드에서는 간단한 타입스크립트 애플리케이션을 디버깅하는 방법을 배웠습니다. TypeScript의 유형을 고려하여 Chrome 개발자 도구를 사용하는 데 특별한 주의를 기울였습니다. 결국 오류를 조기에 발견하는 것이 얼마나 중요한지, TypeScript에서 유형 검사가 얼마나 중요한지 깨달으셨을 것입니다.