[알고리즘 떠먹여 주는 남자 - 번외편] 백준 알고리즘 풀이용 로컬 테스트 환경 구축

안녕하세요!

 

알고리즘 문제 풀이를 하다가 문득 로컬 개발 환경에서 제가 사용하는 코드 디버깅 방법을 공유하면 좋겠다 싶어서 이렇게 포스트를 작성하게 되었습니다. 저같은 알린이들에게는 제출 전 테스트 + 코딩 용으로 꽤 유용한 방법이 되지 않을까 싶은데요.. 물론 가끔씩 로컬 환경에서는 예상되는 결과값이 출력되는데도 막상 제출하고 나면 틀렸다고 나오는 경우도 있습니다. 그건 논외로 제쳐두고 이번에는 제가 로컬 개발 환경을 어떻게 설정해 놓았는지 그 방법을 공유하려고 합니다.

 

참고로 저는 VSCode (Visual Studio Code) 를 메인 IDE 로 사용하고 있습니다. 그 외에 Sublime Text 도 사용하지만 주로 제가 공부 한 내용들을 작성하는 노트 용도나 간단한 코드 열람용으로 사용하고 있습니다. 그럼 일단 제 폴더 스트럭쳐는 어떤 식으로 되어있는지 공유하도록 하겠습니다.

 

스트럭쳐

저는 폴더 스트럭쳐를 이런 식으로 구성했습니다. 그리고 깃으로 제 코드를 관리하는데, 메인 카테고리 안에 문제별 폴더를 만들어서 그 안에 app.js, input.txt 파일들을 만듭니다.

폴더 스트럭쳐

 

로컬 테스트용과 제출용 코드 혼합 사용 방법

백준 온라인 저지에 제출할 때 입력값을 받는 방법이 두가지가 있는 걸로 알고 있는데요, 하나는 제가 사용하는 fs 모듈이고 다른 하나는 readline 입니다. 두 모듈 모두 native packages 이기 때문에 따로 npm (node package manager) 을 통해서 설치 하실 필요는 없습니다.

 

제출용과 로컬 테스트용 코드를 혼용하기 위해서는 이것만 해주면 됩니다.

const fs = require('fs');
const filePath = process.platform === 'linux' ? '/dev/stdin' : `${__dirname}/input.txt`;
let input = fs.readFileSync(filePath).toString().trim();

바로 두번째 라인의 filePath 변수인데요, process.platform 이 리눅스이면, /dev/stdin 을 쓰고, 그렇지 않으면 로컬 환경의 input.txt 파일을 불러오라는 뜻입니다. 저는 맥북으로 개발을 하기 때문에 linux 가 아닌거죠. 맥북도 linux 와 비슷한 걸로 알고 있었는데, 확실하지는 않으니 넘어가도록 하겠습니다. console.log(process.platform) 을 해보니 darwin 이라고 출력이 되네요.

 

무튼, 위의 코드를 사용하시면 로컬 환경에서 테스트 후 그대로 코드를 복사해서 제출하셔도 되는 부분입니다. 저걸 몰랐을 때는 일일이 바꿔주느라 귀찮았는데, 이제는 너무 편한 것 같아요~

 

디버깅

VSCode 에서 지원하는 디버깅 툴을 사용하면 매우 매우 편리합니다. 필요한 곳에 브레이크 포인트를 넣어주고 내 코드가 어떤 순서로 어떻게 실행 되는지 직접 눈으로 확인할 수 있죠. 또한 중요한 변수들이나 현재 알려진 변수를 통해 다른 코드를 직접 입력해 보는 것도 가능합니다 (물론 돌아가고 있는 코드에 결과가 직접 반영되는 것은 아닙니다).

위의 이미지를 보시면 제가 라인 11과 20에 빨간 점들을 찍어 놓았습니다. 이제 디버거가 실행이 되면 코드를 순차적으로 읽는데 저 라인들 차례가 되면 코드가 진행되지 않고 멈추게 됩니다.

 

디버거 설정

왼쪽 메뉴에서 실행 아이콘에 벌레가 한마리 붙어있는 것이 있습니다. 클릭하시면

이러한 화면을 보실 수 있습니다. 맨 첫번째 메뉴 Run and Debug 를 클릭 하시고 Node.js 를 선택해 주시면 됩니다.

 

디버거 실행

설정이 끝나면 다시 Run and Debug 를 클릭하시면 디버거가 실행됩니다.

라인 11에서 멈췄는데요, 왼쪽 variables 섹션을 보시면 firstDigit, secondDigit 등 변수명, 값들을 확인할 수 있습니다. 그 외에 만약 내가 추가적으로 확인하고 싶은 값들이 있다 하시면 아래 watch 섹션에서 추가하실 수 있습니다. 저는 cycle 변수를 추가해 놨네요.

 

여기 디버거 메뉴가 있는데요, 차례대로 무엇인지 알아보겠습니다.

(Continue): 코드를 다음 브레이크 포인트가 있는 곳까지 진행시킨다. 만약 없을 경우 끝까지 진행된다.

 

(Step Over): 다음에 실행할 문이 메서드 호출에 도달하면 메서드 전체를 실행하고 중지합니다.

 

(Step Into): 다음에 실행할 문이 메서드 호출에 도달하면 메서드 전체를 실행하지 말고 해당 메서드의 첫 번째 줄을 실행하고 중지합니다.

(Step Out): 수신자의 코드 실행을 끝내고 호출자에게 실행이 반환되면 중지합니다.

 

(Restart): 디버거 재시작

 

(Stop): 디버거 중지

 

 

다이어그램

Ref: https://i.stack.imgur.com/MYpOA.png

마지막으로 아래쪽 터미널 메뉴에서 DEBUG CONSOLE 을 선택하시고, 확인하고 싶은 코드를 입력하시면 결과값을 확인할 수 있습니다. 물론 디버그 콘솔은 디버거가 동작할 때에만 사용 가능합니다.

 

이번 포스트에서는 제가 백준 알고리즘을 풀 때 로컬 환경에서 어떻게 테스트 하는지에 대하여 작성해 보았습니다. 이런 설정 필요 없이 한방에 통과하시는 분들과 달리 저는 알린이이기 때문에 많은 연습이 필요합니다.. 이렇게 해도 가끔씩 틀리는 경우가 있어요 ㅠㅠ

 

디버거는 개발시에 매우 유용한 툴이니 VSCode IDE 를 사용하시는 분들이라면 설정 해 놓으시는 것이 좋을 듯 싶네요. 저도 이젠 더이상 PyCharm, IntelliJ 등을 사용하지 않기 때문에 다시 VSCode 에 익숙해 져야 할 것 같습니다.

 

그럼 이번 포스트는 여기서 마무리 짓도록 하겠습니다. 모두 모두 열공, 그리고 catch y'all soon~