이 글은 [모던 JavaScript 튜토리얼]을 공부하며 정리한 글입니다.
👉 기본 환경
- Language: JavaScript
- IDE: VS code
1. Chrome으로 디버깅하기
- 왼쪽
- 파일 탐색 영역
- 중앙
- 코드 에디터 영역: 소스 코드 보기 및 편집
- 오른쪽
- 디버깅 영역
* 중단점 설정
- Breakpoints를 활용해 중단점 위치로 이동, 비활성화, 삭제 등 가능
- + 버튼(또는 소스 코드 줄 번호에서 오른쪽 마우스 클릭 후, Add conditional breakpoint)을 통해 조건부 디버깅 가능
- 표현식이 참인 경우에만 실행 중지
cf. 소스 코드 줄 번호에서 오른쪽 마우스 클릭 후, Continue to here
- 중단점을 설정하기는 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때 사용
|
1
2
3
4
5
6
7
8
|
function hello(name) {
let phrase = `Hello, ${name}!`;
debugger; // <-- 여기서 실행이 멈춥니다.
say(phrase);
}
|
* debugger 작성을 통한, breakpoint 설정
* F5를 통해 중단점 실행
* watch: +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값 반환
* Call Stack: 실행 경로를 역순으로 표시
* Scope: 현재 정의된 모든 변수 출력
- Local: 지역 변수
- Global: 전역 변수
1. Resume: 스크립트 실행을 다시 시작 (F8)
2. Step over: 다음 명령어를 실행하되, 함수 안으로 들어가진 않음 (F10)
3. Step Into: 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기 (F11)
4. Step Out: 실행 중인 함수의 실행이 끝날 때 까지 실행을 계속 (Shift + F11)
- 내부 동작을 알고 싶지 않은 중첩 함수로 진입했거나 가능한 한 빨리 함수 실행을 끝내고 싶은 경우
5. 모든 중단점을 활성화/비활성화
5. 테스트 자동화와 Mocha
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Mocha CSS: mocha 결과 출력용 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- Mocha Code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
mocha.setup('bdd'); // 기본 셋업
</script>
<!-- Chai Code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// assert 전역 설정
let assert = chai.assert;
</script>
</head>
<body>
<script>
function pow(x, n) {
/* 코드를 여기에 작성합니다. */
if (n < 0) return NaN;
if (Math.round(n) != n) return NaN;
let result = 1;
for (let i = 0; i < n; i++) {
result *= x;
}
return result;
}
</script>
<!-- 테스트(describe, it...)가 있는 스크립트 삽입 -->
<script src="test.js"></script>
<!-- 테스트 결과를 id가 "mocha"인 요소에 출력-->
<div id="mocha"></div>
<!-- 테스트를 실행 -->
<script>
mocha.run();
</script>
</body>
</html>
|
Mocha를 활용한 Test 준비
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
describe("pow", function () {
describe("x를 세 번 곱합니다.", function () {
function makeTest(x) {
let expected = x * x * x;
it(`${x}을/를 세 번 곱하면 ${expected}입니다.`, function () {
assert.equal(pow(x, 3), expected);
});
}
for (let x = 1; x <= 5; x++) {
makeTest(x);
}
});
});
|
* 중첩 describe를 통한 테스트 그룹화
* describe("title", function() { ... })
- title: 구현하고자 하는 기능에 대한 설명
- function: title과 관련된 it 블럭 그룹화
* it("유스 케이스 설명", function() { ... })
- it의 첫 번째 인수: 특정 유스 케이스에 대한 설명
- it의 두 번째 인수: 유스 케이스 테스트 함수
* assert.equal(value1, value2)
- value1(테스트 함수 결과값)과 value2(기대값)가 동일한지 비교
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
describe("test", function() {
before(() => alert("테스트를 시작합니다 - 테스트가 시작되기 전"));
after(() => alert("테스트를 종료합니다 - 테스트가 종료된 후"));
beforeEach(() => alert("단일 테스트를 시작합니다 - 각 테스트 시작 전"));
afterEach(() => alert("단일 테스트를 종료합니다 - 각 테스트 종료 후"));
it('test 1', () => alert(1));
it('test 2', () => alert(2));
});
|
* 초기화 용도로 사용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
describe("pow", function() {
// ...
it("n이 음수일 때 결과는 NaN입니다.", function() {
assert.isNaN(pow(2, -1));
});
it("n이 정수가 아닐 때 결과는 NaN입니다.", function() {
assert.isNaN(pow(2, 1.5));
});
});
|
* 예외적 상황에 대한 test code 추가
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
describe("주어진 숫자의 n 제곱", function() {
it("5를 1 제곱하면 5", function() {
assert.equal(pow(5, 1), 5);
});
// Mocha는 only 블록만 실행
it.only("5를 2 제곱하면 25", function() {
assert.equal(pow(5, 2), 25);
});
it("5를 3 제곱하면 125", function() {
assert.equal(pow(5, 3), 125);
});
});
|
* test case는 it블럭으로 모두 구분하여 확인
* it.only
- 해당 it 블럭만 수행
'JavaScript > JavaScript' 카테고리의 다른 글
| [JAVASCRIPT.INFO] 자료구조와 자료형 (0) | 2023.10.23 |
|---|---|
| [JAVASCRIPT.INFO] 객체: 기본 (1) | 2023.10.20 |
| [JAVASCRIPT.INFO] 자바스크립트 기본 (1) | 2023.10.11 |
| [ReactJS_Complete] Useful JavaScript Function (0) | 2023.05.25 |
| [ReactJS_Complete] Destructuring (0) | 2023.05.24 |
