IntelliJ IDEA에서 Node.js 디버깅하기 🛠️✨

IntelliJ IDEA 2024.03 (한글 환경 기준)

1. 왜 IntelliJ에서 Node.js를 디버깅할까? 🤔

IntelliJ IDEA는 강력한 디버깅 도구를 제공하며, Node.js 개발에서도 효율적으로 디버깅할 수 있다. IDE의 디버깅 기능을 활용하면 단순히 console.log를 사용하는 대신, 실시간 변수 확인, 중단점 설정, 호출 스택 추적 등 고급 디버깅 기능을 활용할 수 있다.

**제일 중요한 이유는 내가 IDEA를 사용한다**😀

2. 사전 준비: Node.js와 IntelliJ IDEA 설정

Node.js 플러그인 설치 확인

1. IntelliJ IDEA 상단 메뉴에서 **파일(File) → 설정(Preferences)**으로 이동.
2. 플러그인(Plugins) 메뉴를 클릭하고 Node.js 플러그인이 설치되어 있는지 확인.
   • 설치되지 않았다면 검색창에서 "Node.js"를 검색하여 설치 후 재시작.

Node.js 런타임 경로 확인

1. 상단 메뉴에서 **파일(File) → 설정(Preferences)**으로 이동.
2. 언어 및 프레임워크 → Node.js 및 NPM을 클릭.
3. Node.js 인터프리터 경로를 확인하거나, 설치된 Node.js 경로를 추가.
   • 예: /usr/local/bin/node (Mac/Linux) 또는 C:\Program Files\nodejs\node.exe (Windows).

3. Node.js 디버깅 환경 설정 🚀

1) 디버깅 구성 추가하기

1. 우측 상단 **실행/디버깅 설정 메뉴(드롭다운)**에서 구성 편집(Edit Configurations) 클릭.
2. + 버튼을 눌러 Node.js를 선택.
3. 다음과 같은 설정 입력:
   • 이름(Name): 프로젝트 이름.
   • Node 인터프리터(Node Interpreter): 설정된 Node.js 런타임 경로 선택.
   • 작업 디렉토리(Working Directory): 프로젝트의 루트 디렉토리 경로 지정.
   • 파일(File): 실행하려는 JavaScript 파일 선택.
4. nodemon 설정
   디버깅 환경이기 때문에 nodemon으로 설정해서 구동시키는게 훨씬 편하다
   • 파일(File): nodemon 경로 설정
     주로 node_modules\nodemon\bin\nodemon.js 경로에 있다.
   • 애플리케이션 매개변수: app.js 파일을 설정한다.
     (루트경로 기준 src/app.js)
5. 설정 저장 후, 디버깅 구성 목록에서 선택.

4. Node.js 디버깅 시작하기 🪲

1) 중단점 설정하기

1. 디버깅하고자 하는 파일을 열고, 코드 왼쪽 줄 번호 영역을 클릭하여 중단점을 추가.
   • 중단점은 실행 흐름을 멈추고 상태를 점검할 위치를 지정한다.
2. 중단점을 설정한 줄에 빨간 점이 표시되면 성공적으로 추가된 것이다.

2) 디버깅 실행

1. 디버깅이 시작되며, 프로그램 실행이 중단점에서 멈춘다.

우측 상단의 디버깅 버튼(벌레 아이콘) 클릭.

5. IDE 하단의 디버깅 창이 열리며 다음과 같은 정보를 제공:
- 변수(Variables): 현재 상태에서 사용 가능한 변수와 값 확인.
- 호출 스택(Call Stack): 함수 호출 흐름 추적.
- 중단점(Breakpoints): 현재 활성화된 중단점 목록.

3) 디버깅 제어하기

디버깅 창에서 제공하는 도구를 활용해 프로그램 흐름을 제어할 수 있다:

• 스탭 오버(Step Over): 현재 함수의 내부로 들어가지 않고 다음 줄로 이동.
• 스탭 인투(Step Into): 함수 내부로 들어가 상세 실행 흐름 확인.
• 스탭 아웃(Step Out): 현재 함수 실행을 종료하고 상위 함수로 복귀.
• 실행 재개(Resume Program): 프로그램을 다음 중단점까지 실행.

5. 고급 디버깅 기능 활용하기 🧩

1) 조건부 중단점 설정

특정 조건이 만족될 때만 중단점이 작동하도록 설정 가능.

1. 중단점을 마우스 오른쪽 클릭.
2. *조건 설정(Condition)**을 선택하고, 원하는 조건식 입력.
   • 예: user.id === 1.

2) console 없이 변수 상태 확인

• Variables 탭에서 현재 실행 상태의 변수 값 실시간 확인 가능.
• 값을 직접 변경하여 프로그램 흐름을 테스트할 수도 있다.

3) 로그 메시지 추가

중단점에서 프로그램을 멈추지 않고, 로그 메시지만 출력하도록 설정 가능.

1. 중단점을 마우스 오른쪽 클릭.
2. 로그 메시지 추가(Log Message) 선택.
3. 출력할 메시지 작성.

6. 예제: 간단한 Node.js 디버깅

코드 예제

// sample.js
const greet = (name) => {
    const message = `Hello, ${name}!`;
    console.log(message);
    return message;
};

const main = () => {
    const result = greet('Austin');
    console.log('Result:', result);
};

main();

디버깅 진행 과정

1. main() 함수와 greet() 함수의 첫 줄에 중단점을 설정.
2. 디버깅 실행.
3. greet() 함수로 진입하여 message 변수의 값을 확인.
4. 결과 값을 반환하고 main() 함수로 복귀.

7. 디버깅을 위한 팁 🎯

1. 중단점 관리: 디버깅 중 활성화/비활성화가 가능하니, 필요에 따라 유동적으로 사용.
2. 함수 호출 흐름 파악: 호출 스택(Call Stack)을 활용해 실행 순서를 이해하자.
3. 조건부 디버깅 활용: 조건부 중단점과 로그 메시지 기능을 활용해 효율적으로 문제를 추적.
4. 리소스 소비 문제 확인: 디버깅 시 메모리 사용량을 모니터링하여 성능 병목을 확인.

8. 결론: IntelliJ에서 Node.js 디버깅의 장점 🏁

IntelliJ IDEA의 디버깅 도구는 직관적인 인터페이스와 강력한 기능을 제공하며, Node.js 애플리케이션 개발에서 문제를 빠르게 식별하고 해결하는 데 큰 도움을 준다.