프로처럼 Javascript 코드 디버깅 하는 법

프로처럼 javascript 코드 디버깅 하는 법에 대해 알려드리겠습니다. 개발자라면 코드를 디버깅 하는 것은 꼭 연습해야 하는 기술 중 하나입니다. 구문 오류, 유형 불일치, 성능 문제 등 문제 상황이 발생했을 때 효율적으로 파악한 뒤 해결 방법을 찾는다면 코드 개발 품질과 실력이 올라갈 것입니다. 본 내용에서는 자바스크립트를 디버깅하기 위한 레벨 전략과 기술에 대해 정리해 보겠습니다.

공통적인 자바스크립트 오류

디버깅을 시작하기 전 일반적으로 발생하는 java script의 오류를 알아보겠습니다.

1. 구문 오류

구문 오류는 구조가 유효하지 않을 때에 발생하며 괄호가 누락되거나, 잘못 배치되는 등 괄호로 인해 발생하는 문제입니다.

let x = 10  

console.log(x;

// 세미콜론을 닫지 않은 경우

2. 참조 오류

정의되지 않은 변수 또는 함수에 엑세스하려 할 때 발생하게 됩니다.

console.log(y); 

//y라는 값이 없는데 호출한 경우

3. 유형 오류

호환되지 않는 방식으로 값을 호출할 때 오류가 발생합니다.

let num = 10;
num();  

// num이 함수가 아니기 때문에 잘못된 유형으로 호출된 경우

브라우저 개발자 사용하기

웹 사이트를 둘러볼 때 개발자 도구를 열어서 코드를 실시간 디버깅 할 수 있습니다. 우선 개발자 도구를 여는 방법을 알려드리겠습니다.

1. (chrome, edge, whale, firefox)같은 웹 브라우저를 열어줍니다.
2. 키보드에서 ‘f12’ 버튼이나 ‘ctrl + shift + i’, ‘cmd + option + i’를 눌러줍니다.
3. 개발자 도구 창이 우측에 열리면 콘솔(console) or 소스(source) 등 필요한 탭을 눌러 코드를 확인 및 수정해 봅니다.

보통 콘솔 탭에서는 오류, 경고, console.log() 출력 값을 확인할 수 있으며, 소스 탭에서는 자바 코드를 통해 디버깅 및 브레이크 포인트를 설정해 볼 수 있습니다.

브레이크 포인트를 통한 오류 발견

특정 줄에서 코드 실행하는 것을 일지정지 하여 현재의 변수나 프로그램 흐름 상태를 검사해 볼 수 있습니다.

• 개발자 도구에서 ‘소스’ 탭을 눌러준 뒤 디버그 하려는 자바 스크립트 파일을 찾습니다.
• 일시정지 하고 싶은 줄 번호를 클릭해 줍니다.
• 페이지를 다시 로드해 주거나 디버깅 기능을 트리거 해줍니다.
• 실행이 중지된 다음 변수 및 객체를 검사할 수 있습니다.

마스터 콘솔 로깅 사용

브레이크 포인트를 이용하는 것도 좋지만 간편하게 ‘console.log()’ 함수를 써서 코드의 동작을 확인해 볼 수 있습니다. 아래의 코드를 참고해 활용해 보시기 바랍니다.

let users = [{ name: "John", age: 30 }, { name: "Jane", age: 25 }];

console.table(users);

비동기 코드 디버깅 방법

API 호출이나 타이머 같은 비동기 작업을 처리할 때 어려움을 느낄 수 있습니다. ‘Async/Await’나 적절한 오류 처리 방식을 사용해 디버깅을 간소화 하시기 바랍니다. 개발자 도구에서 ‘네트워크’ 탭에서 api 요청 및 상태 코드 등을 검사할 수 있습니다.

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log("Fetched data:", data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}
fetchData();

Linters & Formatters 구현하기

linters는 ‘eslint’ 같은 코드가 실행되기 전 잠재적 문제를 감지해서 구문 오류 등을 방지해 주는 역할을 하며, 코드 일관성 및 가독성을 올려줘서 장기적으로 봤을 때 디버깅을 더 쉽게 할 수 있습니다.

‘eslint’를 설정할 때 3단계 코드[설치 > 구성 파일 생성 > 자바스크립트 파일에서 eslint 실행]로 진행하면 됩니다.

//1. eslint 설치

npm install eslint --save-dev


//2. 구성 파일 생성

npx eslint --init


//3. js 파일에서 eslint 실행

npx eslint yourfile.js

다른 브라우저에서 테스트

java script는 자신의 엔진 변형으로 인해 브라우저에서 다르게 작동될 수 있는데요. 호환성에 대한 문제일 수도 있어서 크롬, 엣지, 파이어폭스, 사파리, 웨일 등 다양한 브라우저에서 코드를 실행해 보시기 바랍니다.

외부 디버깅 도구 사용하기

개발자 도구 외에 외부의 도구를 통해서도 디버깅이나 오류 추적을 할 수 있습니다. 대표적인 3가지 도구를 소개하겠습니다.

1. visual studio code debugger : 코드 편집기 내에서 디버깅을 통합해 진행합니다.
2. sentry : 생산 환경에서 java script 오류를 모니터 하거나 로그할 수 있습니다.
3. postman : API 엔드 포인트 테스트나 디버깅을 할 수 있습니다.

리팩터 및 코드 최적화 진행

오류가 해결된 뒤 코드를 리팩터 해서 성능 및 유지 관리를 높여줍니다. 또한, 복잡한 기능을 단순하게 하고 중복성을 줄이면 이후의 버그에 대해서도 대비 할 수 있습니다.

문제 과정 문서화 및 공유

조직에서 일을 하는 경우라면 경험하게 된 오류나 문제에 대한 해결 방법을 문서화 시켜 팀원들에게 공유하는 것이 좋습니다. 서로 모든 문제에 대한 과정을 공유할 시 더 안전하고 효과적으로 협력할 수 있습니다.

총 정리

10가지의 javascript 코드 디버깅에 관련한 내용을 정리해 보았습니다. 위에서 설명한 도구들을 참고하여 일반적인 오류를 이해하고 디버깅 기술을 잘 활용해서 문제를 신속하게 진단하고 해결해 효과적인 개발 및 프로그램을 만들 수 있습니다. 또한, 디버깅을 적극적으로 사용하면 시간 절약뿐만 아니라 코드의 품질도 향상시켜 더 나은 사용자 경험을 만들어 낼 수 있습니다.

자바스크립트 코드 디버깅 FAQ