Unexpected 'debugger' statement

원하는 로직이 실행이 되지않아 debugger로 확인을 해보려고 했는데 컴포넌트 안에서 debugger을 넣었더니 

 

[eslint] src/components/detailPage/StoreDetail.jsx

Line 23:3:

Unexpected 'debugger' statement

 

eslint에러가 났다..

 

찾아보니 해당 에러는 일반적으로 디버깅을 위해 사용되는 debugger문이 디버깅 환경이 아닌 상황에서 발생하는것을 의미한다고 한다.

 

eslint의 디버거 사용금지 규칙은 코드에서 디버거 문을 사용하지 못하도록 한건데 이는 프로덕션 환경에서 실수로 디버깅 코드를 남기지 않도록 하는데 유용할 수 있지만 빠르게 디버깅해야 할 때는 번거로울 수 있다. 

 

이걸 해결할 수 있는 방법은 코드에 // eslint-disable-next-line no-debugger 주석을 사용하여 해당 라인에서만 no-debugger규칙을 비활성화 하는방법이 있다. 또는 프로젝트 수준에서 no-debugger를 추가하여 규칙을 비활성화할 수도 있다. 

// eslint-disable-next-line no-debugger
debugger;

 

처음에 해당 에러를 접했을때는 당황했지만 이유를 알고나니 코드에 콘솔을 남기고 배포하는것보다 debugger를 남기고 배포하는게 더 치명적이겠구나 당연히 할 수 있는 실수일것 같다는 생각이 들어 우리 프로젝트에서는 no-debugger 규칙을 비활성화 하진 않고 사용할때마다 주석을 추가해서 사용했다가 다시 지우는걸로 선택하고 사용했다.