JS 실행 및 디버깅 실습의 내용을 담았다. JS로 알고리즘을 작성하고 파일 실행까지 해보고, 디버깅까지 해보겠다.
알고리즘도 풀었는데 유출 금지로 올리지 못한다.
우선 사항
먼저 로컬에 개발환경 세팅 및 실행까지 해보자.
1. VSC, node.js 설치
나는 VSC로 개발할 거고, 개발 경험이 있었기 때문에 VSC는 설치 돼 있다.
그리고 npm을 자주 이용했기 때문에 선행으로 설치해야하는 node도 깔려져 있어 나는 생략하겠다.
나는 LTS 버전을 깔아서 v20.11.0으로 아주 잘 깔려져 있다. node 버전을 보려면 이 사이트에 가서 버전을 확인해 업데이트 하거나 설치하면 된다!
2. 파일 실행하기
되게 간단하다. VSC에서 '실행 및 디버그'라는 메뉴를 찾아 간다. 아래 아이콘을 찾아 누르거나 CTRL(CMD) + Shift + D를 누르면 된다.
그러면 '실행 및 디버그' 버튼이 있는 화면이 뜰 거다. 거기서 누르고 node.js로 실행 시키면 다음과 같이 실행이 돼서 디버그 콘솔에 결과값이 나올 것이다.
미리 작성한 알고리즘 JS 파일을 실행시키면 아래와 같이 나온다.
여기에 console.log의 결과값이 디버그 콘솔에 나오는 걸 확인할 수 있다.
또한 변수, 호출 스택 등의 함수 상태도 확인할 수 있다.
왼쪽 Section에는 사용된 변수, 호출 스택 등이 나온다. 나중에 중단점이나 디버깅할 때 유용하게 쓰인다.
중단점은 아래 후술할테니 잘 기억해두길 바란다.
디버거 실습: Visual Studio Code에서 디버거 사용 방법
실행 후 디버거를 사용하는 방법을 실습할 것이다. 나도 잘 안쓰던 기능인데 이참에 뿌리를 뽑아버려야겠다.
배울 것은 아래와 같다.
- 중단점
- 스텝-오버 (F10)
- 스텝-인 (F11)
- 스텝-아웃 (Shift+F11)
보통 실행 후 결과값만 나오기 때문에 작성한 함수의 진행 상황이나 그 구조를 제대로 이해 못할 때가 있다. 그럴 때 디버거를 이용해 함수가 어떻게 진행하는지, 각 단계에서 변수들이 어떤 값을 가지는지 등을 확인할 수 있다. 디버거를 사용하면 코드의 흐름을 가시적으로 따라갈 수 있어 문제를 더 쉽게 발견하고 수정할 수 있다.
코드의 흐름을 명확히 이해해보자.
LeetCode 문제 중 배열을 입력하고, 그 배열의 마지막 요소를 결과값으로 산출하는 last 메소드를 만드는 알고리즘 문제가 있다.(조건 : 배열 수정 X, 배열의 요소가 없을 시 -1)
Array.prototype.last = function () {
if (this.length === 0) {
return -1;
} else {
return this[this.length - 1];
}
};
// 테스트 예제 1
console.log([null, {}, 3].last()); // Expected output: 3
console.log(['2', [], null].last()); // Expected output: null
// 테스트 예제 2
console.log([].last()); // Expected output: -1물론 코드가 간단해서 그냥 봐도 판단이 잘 되지만 코드가 더 길어지면 디버거를 실행해야한다.
1. 중단점 : Break Point
중단점(Break Point)은 코드 실행을 특정 지점에서 멈추는 지점을 설정하는 것이다.
중단점을 설정하면 코드 실행이 해당 지점에서 멈추고, 현재 상태를 확인할 수 있게 된다.
VSC에서는 코드 줄 왼쪽을 클릭하면 중단점을 설정할 수 있다.
동그라미 친 부분에 중단점을 설정 할 수 있다. if (this.length === 0) { 코드에 설정 후 실행하면 아래와 같은 화면이 나온다.
console.log의 last() 메소드가 실행되고, 그 변수를 받았다. 그 변수를 이제 조건문으로 판단하려는 찰나 중단점이 있어서! 중단하게 됐다. 중단한 곳을 노란색 화살표로 표시하고 있는 모습이다.
중단점에 도달하면 코드 실행이 멈추고, 현재 상태를 확인할 수 있는 여러 가지 정보들이 표시된다.
오른쪽을 보면 last()가 실행된 [null, {}, 3] 배열이 보인다. 메소드라 this로 받는 모습이다. 이렇게 멈출 수 있는게 중단점이다.
2. 스텝-오버 (F10)
스텝-오버(Step Over)는 현재 줄의 코드를 실행하고 다음 줄로 이동하는 디버깅 명령이다.
if (this.length === 0) { 에 중단한 시점부터 시작하겠다.
명령어 실행 방법은 디버거 패널에서 스텝-오버 버튼을 클릭하거나, F10 키를 누른다.
누르고 나서 보면 [null, {}, 3] 배열의 길이가 3이니 if에서 걸러지지 않고 다음 return 문의 length로 넘어간 모습이다. 한 번 더 누르면 length의 과정이 끝나고 return이 실행되도록 진행된다.
주의🚨 : 중단됐던 함수 코드 아래에 함수 호출이 있는 경우, 해당 함수 안으로 들어가는 것이 아니라 과정을 건너뛰고 그 결과값만 처음 함수의 다음 코드로 넘어간다.
즉, 깔끔하게 관찰하고 싶은 함수만 볼 수 있다는 것!
3. 스텝-인 (F11)
스텝-인(Step Into)은 현재 줄에 함수 호출이 있을 경우, 함수 내부로 들어가서 디버깅을 계속하는 명령이다.
아까 스텝-오버에서 써놨 듯이 스텝오버는 다른 함수의 호출을 무시하고, 그 결과값만 다음 코드로 넘긴다. 하지만 스텝-인은 다르게 내가 따로 정의한 함수도 요목조목 따져 들어간다.
배열 길이를 log 찍는 함수인 lengthlog를 따로 선언해 관찰해보자.
스텝-오버 실행
아래 GIF를 봐보자.
보면은 따로 선언한 lengthlog 함수가 호출 됐음에도 lengthlog 함수를 거치지 않고 last 메소드 안에서의 과정을 계속 연달아 하고 있다.
이제 스텝-인 명령을 실행해보자.
스텝-인 실행
관찰하면 따로 선언한 lengthlog 함수가 호출 됐고, lengthlog 함수를 거쳐서 과정(노란줄)이 last 메소드에 있다가 lengthlog 함수에 갔다가 왔다갔다 한다.
즉, 스텝-인 명령은 '사용자 정의 함수도 같이 과정을 관찰해달라'라는 디버깅 명령이다.
🚨알아둬야 할 것은 스텝인 명령은 length 같은 내장 함수나 외부 라이브러리의 함수 내부로 들어가진 않는다.🚨
4. 스텝-아웃 (Shift+F11)
스텝-아웃(Step Out)은 현재 함수 내부에서 나와 호출한 지점으로 돌아가는 명령이다.
스텝-아웃은 간단하다. 스텝-인 명령으로 인해 호출된 함수 내부로 이동했던 디버깅 단계를 호출 지점으로 나오게 하는 명령어이다. 탐색기의 '위로 가기' 기능이랑 비슷하다.
실습 화면
스텝아웃 명령을 이해했다면 이 것도 이해 갈 것이다.
결론
이렇게 VSC로 코드를 실행하고, 디버깅해보는 시간을 가졌다. 솔직히 맨날 귀찮아서 VSC로 안하고 입력값, 결과값 자동으로 산출해주는 구름이나 LeetCode, 백준으로 했었다. 그런데 VSC가 읽기에 익숙하기도 하고, 자유도가 높아서 생각보다 괜찮았고, 디버깅도 자유롭게 할 수 있어서 더 고레벨로 가려면 VSC를 써야겠다 생각했다.
디버거를 활용해 코드의 흐름을 시각적으로 따라갈 수 있었고, 각 단계에서 변수들이 어떤 값을 가지는지 확인할 수 있었다. 이번 실습을 통해 어렴풋이 알던 VSC 디버깅 기술을 확실히 익힐 수 있었다.
정리
- 개발 환경 세팅: VSC와 Node.js를 설치하고, 필요한 환경을 구성했다.
- 파일 실행: VSC에서 '실행 및 디버그' 메뉴를 통해 JS 파일을 실행하고, 디버그 콘솔에서 결과값을 확인했다.
- 디버깅 실습:
- 중단점: 코드의 특정 지점에서 실행을 멈추고 현재 상태를 확인할 수 있었다.
- 스텝-오버 (F10): 현재 줄의 코드를 실행하고 다음 줄로 이동하며 함수 내부로 들어가지 않았다.
- 스텝-인 (F11): 현재 줄에 함수 호출이 있을 경우, 함수 내부로 들어가서 디버깅을 계속했다.
- 스텝-아웃 (Shift+F11): 현재 함수 내부에서 나와 호출한 지점으로 돌아갔다.
