출처 : https://velog.io/@pipy201/Intellij-IDEA-Ultimate-Webstorm-Next.js-Debug

필요성

Next.js SSR + CSR 을 이유로 랜더링이 서버와 클라이언트 각각 이루어 진다. 개발 시 라인 마다, 변수 마다 console을 출력하며 개발이 가능 하지만, 큰 돈 주고 Intellij Ultimate를 구매 한 만큼 잘 사용 해 보자.
intellij 의 Run/Debug Configuration 설정으로 server side, clint side 모두 intellij debug console 에서 line break를 찍어보자.
아니 근데, 어디까지 영어로 쓰고 어디 까지 한글로 포스팅 해야 하나 모르겠다

프로젝트 구성

테스트 프로젝트 생성

기존 프로젝트에도 적용 가능.

npx create-next-app@latest --ts

Run/Debug Configuration 설정 추가

npm으로 실행 하는 것이 아닌 intellij에서 직접 실행 한다.

next dev 설정 추가. SSR debug

node interpreter 프로젝트의 사용하는 node 인터프리터는 기본 설정을 사용하고. Javascript file을 nextjs의 실행 파일을 직접 지정 해 준다.

browser debug 설정 추가. CSR debug

URL 에는 nextjs 페이지로 접속하는 url로 설정 한다.

Debug

nextjs, borwser debug mode 를 각각 실행 시킨 후,
브라우저로 해당 페이지를 접속 하면 통합된 디버그 모드를 사용 할 수 있다.

next.js debug mode 실행

browser debug mode 실행

debug console 확인

서버에서 실행 하는 getServerSideProps 함수의 디버그 콘솔을 사용 할 수 있다

그 다음 브라우저에서 실행하는 useEffect 함수의 디버그 콘솔을 사용 할 수 있다.

브라우저에서도 해당 라인에서 멈춰 있다.

마무리

node.js는 프로젝트는 구성/설정이 절반이다... next.js는 별다른 설정 없이 typescript를 지원 하면서 프로젝트 구성이 편해졌지만, SSR, CSR 모두 신경 써야 한다. 이때, IDE를 잘 이용 할 수 있다면 작업 시간을 단축 시킬 수 있다.
물론 돈 쓴만큼 편해진다!

누가 VScode 소리를 내었는가?

:wq

[Javascript] 웹스톰, 인텔리제이 자바스크립트 디버깅 Intellij IDEA Ultimate, Webstorm Next.js Debug (nextjs, react)