[자바스크립트 14일 완전정복] 13일차 - 테스트와 디버깅

 

자바스크립트를 사용하다 보면 버그(Bug)를 찾고 수정하는 과정(디버깅)이 꼭 필요해요.
또한, 테스트(Test)를 통해 코드의 정확성을 검증하면 유지보수가 훨씬 쉬워집니다.
오늘은 브라우저 개발자 도구 활용법, console.log()와 debugger, 그리고 Jest와 같은 테스팅 도구를 소개하겠습니다.

 

---

 

1. 브라우저 개발자 도구(DevTools) 활용

웹 개발자에게 브라우저의 개발자 도구(DevTools)는 필수적인 도구예요.
✔ F12 또는 Ctrl + Shift + I (Cmd + Opt + I on Mac)로 실행 가능

 

1.1 콘솔(Console) 패널 활용

콘솔 패널은 자바스크립트 오류 확인 및 디버깅에 유용해요.

 

(1) console.log()로 값 출력

let name = "이예나";
console.log("이름:", name);

✔ console.log()를 사용하면 변수를 쉽게 확인할 수 있음

 

(2) console.table()로 배열/객체 출력

let users = [
  { name: "이예나", age: 28 },
  { name: "김철수", age: 30 }
];

console.table(users);

✔ 배열과 객체 데이터를 테이블 형식으로 깔끔하게 출력 가능

 

(3) console.warn(), console.error() 활용

console.warn("경고 메시지");
console.error("오류 발생!");

✔ 경고 메시지는 노란색, 오류 메시지는 빨간색으로 표시됨

 

1.2 네트워크(Network) 패널 활용

Network 패널을 사용하면 API 요청 및 응답을 확인할 수 있어요.
1️⃣ 개발자 도구 열기 (F12 또는 Ctrl + Shift + I)
2️⃣ Network 탭 클릭
3️⃣ API 요청이 어떻게 이루어지는지 확인 가능

 

(1) Fetch API 요청을 확인하는 방법

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("에러:", error));

✔ 네트워크 패널에서 요청 상태, 응답 데이터, 실행 속도 등을 확인할 수 있음

 

1.3 디버거(Debugger) 활용

(1) debugger 키워드 사용

코드 실행을 중단하고 개발자 도구에서 변수를 확인할 수 있어요.

let number = 10;
debugger; // 여기서 코드 실행이 멈춤
number += 5;
console.log(number);

✔ 개발자 도구에서 변수 상태를 하나씩 추적 가능

 

(2) 개발자 도구에서 브레이크포인트 설정

1️⃣ 개발자 도구(F12) → Sources 탭 클릭
2️⃣ 코드를 실행할 파일을 선택
3️⃣ 실행을 멈추고 싶은 줄에 브레이크포인트(파란 점) 추가
4️⃣ 코드를 실행하면 해당 부분에서 멈춰 변수 값 확인 가능

 

---

 

2. console.log() vs. debugger

방법 사용 목적 특징

console.log()	값 확인	빠르게 출력하지만 직접 코드 변경 필요
debugger	코드 실행 중지 및 변수 확인	개발자 도구에서 상세한 정보 제공

✔ 빠르게 값을 확인하려면 console.log()
✔ 코드 실행 흐름을 추적하려면 debugger

 

---

 

3. Jest를 활용한 자동화 테스트

3.1 테스트(Test)의 필요성

✔ 코드가 올바르게 동작하는지 자동으로 검증 가능
✔ 버그를 방지하고 코드의 안정성을 높일 수 있음
✔ 리팩토링(코드 수정) 후에도 정상 동작 여부를 쉽게 확인 가능

 

3.2 Jest 설치 및 설정

Jest는 자바스크립트 테스트 프레임워크로 가장 많이 사용돼요.

 

(1) Jest 설치

npm install --save-dev jest

✔ Jest를 개발 의존성(devDependencies)으로 설치

 

(2) package.json에 테스트 스크립트 추가

"scripts": {
  "test": "jest"
}

✔ npm test 명령어로 Jest 실행 가능

 

3.3 Jest 기본 사용법

(1) 함수 테스트 파일 생성

// math.js (테스트할 함수)
function add(a, b) {
  return a + b;
}

module.exports = add;

 

(2) Jest 테스트 코드 작성

// math.test.js
const add = require("./math");

test("2 + 3은 5가 되어야 한다", () => {
  expect(add(2, 3)).toBe(5);
});

✔ test() 함수 안에서 expect().toBe()를 사용해 기대하는 값을 확인

 

3.4 테스트 실행

npm test

✔ PASS 메시지가 나오면 테스트 성공

 

3.5 여러 가지 Jest 매칭 함수

매칭 함수 설명

toBe(value)	값이 정확히 같은지 확인
toEqual(value)	객체나 배열이 같은 구조인지 확인
toContain(item)	배열이나 문자열에 특정 값이 포함되어 있는지 확인
toThrow()	함수가 예외를 발생시키는지 확인

 

 

 

---

 

 

 

오늘은 테스트와 디버깅을 효과적으로 수행하는 방법을 배웠어요.
✅ 브라우저 개발자 도구를 활용해 오류를 확인하고 네트워크 요청을 추적할 수 있음
✅ console.log()와 debugger를 활용하여 변수 값을 확인하고 디버깅 가능
✅ Jest를 사용하면 자동화 테스트를 통해 코드의 안정성을 높일 수 있음

 

다음 강좌에서는 프로젝트 실습 (미니 프로젝트)을 함께 해보도록 할게요! 🚀