백준 온라인저지 100% 활용하기 ( vscode에서 nodejs 디버깅 모드 사용)

취준생, 이직을 준비하는 신입 개발자라면 피할 수 없는 코테

오늘은 코딩테스트를 준비하는 분들이 대표적으로 사용하시는 사이트 중 한 곳은 백준의 온라인 저지를 좀 더 잘 활용할 수 있는 방법을 공유하고자 합니다.

 

이 방법을 찾게된 원인은.. 백준 nodejs 2562번 문제

https://www.acmicpc.net/problem/2562

2562번: 최댓값

바로 이 문제 때문이다.

 

브론즈 레벨의 문제로 난이도가 있는 문제는 아니지만, 

아무리 생각해도 답이 맞는 것 같은데 계속 틀렸다는 결과가 나와 도저히 이해가 되지 않아서 혼자 끙끙 앓았다.

다른 답안을 아무리 찾아봐도 내 답안이 왜 틀린 것인지 도무지 이해가 되질 않았다!!

 

브론즈 문제에도 허우적 허우적..

✅  백준 온라인 저지 활용방법

다른 분들은 백준 온라인 저지를 어떻게 활용해서 공부하시는지 궁금하네요. ( 혹시 괜찮으시면 댓글로 알려주세요. )

저 같은 경우에는 간편하게 js 코드를 실시간으로 실행시켜주는 RunJS 를 활용하는데요.

https://runjs.app/

RunJS - A playground for JavaScript and TypeScript

일단은 문제를 보고 RunJS 에서 코드를 짜고 제출을 해보고, 오답이라면 문제의 입력을 input 변수에 담아서 코드를 한줄 씩 실행시키면서 틀린 부분을 찾는 방법으로 문제를 해결하였습니다.

바로 이런식이죠.

마지막 줄 코드를 보면, 제가 이번에 vscode의 디버깅 모드를 찾게된 원인이 있습니다!!

arr 이라는 새로운 배열을 선언하고, 기존 input 배열을 sort 하여 할당한 다음, 원하는 값들을 찾고 다시 본래의 input 배열에서 input 값을 찾아야했는데, 

sort 함수를 사용하면 기존 original 배열에까지 영향이 간다는 사실을 모르고 있었던 것입니다.

 

어떤 부분이 문제인지 정확하게 파악하지 못해 입력을 받아오는 코드에서 문제가 있는건지, 아니면 로직에 문제있는 건지 제대로 파악이 되지 않았습니다. 

하지만 vscode의 디버깅 모드를 사용하면 백준 온라인 저지에 제시된 문제의 입력 값을 그대로 가져오기 때문에 차근차근 실행한다면 입력값을 받아오는 코드나 출력하는 코드 부분에 대한 의심을 하지않고 오로지 코드 자체에 집중해서 문제해결능력을 기를 수 있습니다. 

( 위에서 보시다시피 이전 방법을 사용하면 임의로 입력 값으로 input 배열을 만들어야 하는데, 이 부분 입력 값을 받아오는 부분의 코드를 잘못 짜게 되면 로직은 맞더라도 오답으로 처리될 수 있기 때문이다. )

 

다시 말해 vscode 디버깅 모드는 코드를 짜는데 불필요한 실수로 인한 시간낭비를 예방할 수 있습니다.

이런 식으로 입력 값을 그대로 가져와서 정확하게 값을 확인하면서 로직을 구현할 수 있기 때문이죠.

그럼 이제 vscode 디버깅 모드를 사용하기 위한 세팅들을 알아보겠습니다.

 

✅  vscode 디버깅 모드 환경 세팅

1. Node.js 설치하기

다운로드 : https://nodejs.org/ko/

Node.js

우선 nodejs 를 설치해야 합니다.

무조건 최신의 current 버전보다는 안정적인 LTS를 설치하는 것을 추천합니다.

2. vscode 설정

2-1.  입력 값을 받아올 example.txt 파일 생성

 먼저 입력 값들을 가져올 example.txt 파일을 생성한다.

 example.txt 파일은 입력값들을 넣어줄 파일이다. 

 각 문제를 풀대마다 예제 입력 부분의 복사버튼을 클릭한 뒤 example.txt 파일에 붙여넣기만 하면 끝!!

2-2. 답안을 작성할 index.js 파일을 생성

이 입력 값들을 받아와서 답안을 작성할 index.js 파일을 생성한다.

index.js === 제출, 즉 백준 온라인 저지에서 제출탭을 눌렀을 때와 동일하다고 생각하면 된다. 

따라서 index.js 파일은 생성만 해주고 나면 필요한 세팅은 끝!!

2-3 . 이제 vscode에서 디버깅 모드를 사용하여 공부 시작!!

이제 준비는 끝났고, 디버깅 모드를 사용만 하면 된다. example.txt 는 문제가 바뀔때마다 해당 문제의 입력을 복사 붙여넣기 하면 되고, index.js은 빈파일로 두고 백준에서 답안을 제출하는 것 처럼 데이터를 받아오는 코드부터 찬찬히 입력하면 된다. 

단, 이때 데이터를 받아오는 코드는 약간의 수정이 필요하다.

const input = require("fs").readFileSync("example.txt").toString().split("\n");

readFileSync의 값에는 데이터를 불러올 위치의 주소가 들어가야 하기 때문에 기존에 답안을 제출할 때 사용하던 코드와 달리, 로컬에서 입력 부분의 데이터들이 들어가 있는 example.txt 파일로 설정해줘야 한다.

답안 작성이 끝나면, 다시 아래와 같이 주소를 변경해주고 답안을 제출해야 한다. (반드시 기억!!, 이 부분이 틀리면 영원히 정답을 맞출 수 없다.)

백준에서 답안을 제출했는데, 결과가 런타임에러(ENOENT) 로 뜬다면 주소를 다시 한번 확인하세요!!

const input = require("fs").readFileSync("/dev/stdin").toString().split("\n");

디버깅 모드에서 답안 코드를 작성했다면 터미널에서 `node index.js` 코드를 입력하면 node 환경에서 index.js 파일이 실행되며 결과값을 확인할 수 있다. 

3.  Code Runner 설치 ( Opional)

코드 러너는 vscode 익스텐션 중 하나로, 필수 설치사항은 아니고 매번 터미널에 node index.js 코드를 입력하기 싫은 분들만 설치하면 된다.

코드 러너를 설치하고 나면 매번 터미널에 코드를 입력하지 않고, 간단한 단축키만으로 index.js 파일을 실행할 수 있다.

단축키

Window : Ctrl + Alt + N
MacOS : Control + option + N