on
멈춰야 비로서 보이는 것들 (no console.log 1달째)
front 개발자가 console.log를 쓰지 않고 개발한다?
앞으로 React 개발자들은 console.log를 찍지 마세요
하루 아침에 갑자기 이런 지시 사항이 내려왔다.
부트캠프를 다닐 때부터 나의 단짝 console.log를 사용하지 말라니..
앞으로 어떻게 개발하지?
Debug 메뉴를 사용해보자
지금 다니고 있는 회사는 Web Storm이라는 IDE를 사용한다.
그리고 Web Storm에서 Debug 메뉴를 이용해서 요새는 작업을 하고 있다.
Debug 모드일 때 소스코드에 break point를 걸어두면 소스코드가 실행되면서 해당 지점에 도착하면 실행이 멈추게 된다.
그리고 그 지점 부터 코드를 한줄씩 실행하면서 볼 수가 있다.
vscode도 가능하다.
https://demun.github.io/vscode-tutorial/debug/
Debug 메뉴로 개발을 할 때 장점
모든 값을 다 볼 수 있다.
현재 내가 보고있는 컴포넌트에서 다루는 왠만한 모든 값들을 한 번에 볼 수가 있다.
props, state, 함수, 지역변수 값 등을 console.log로 일일이 찍지 않아도 다 보여준다.
그래서 종합적으로 어떤 값이 어떻게 변하는지 알아보기가 수월하다.
멈춰야 비로서 보이는 것들..
조건문과 반복문이 복잡하게 얽혀 있는 스파게티 코드의 경우 무작정 코드를 분석하기 보다
디버깅으로 몇번 코드를 돌려보면 코드의 이해가 조금 더 쉽게 되는 것 같다.
브레이크 포인트 부터 한줄 한줄 실행하다 보면 엄청나게 긴 코드도 대략적인 감을 잡기가 좋았던 것 같다.
특히 react 클래스형으로 주로 작성된 우리 회사 코드는 지금 완전 스퐈게티인데..
디버깅으로 손쉽게 오류를 잡아 본 경험이 있다.
그리고 개인적으로 typescript를 안쓰는 코드라면 type 에러를 잡기에도 좋다.
Debug 메뉴로 개발을 할 때 단점
불편하다.
매번 브레이크 포인트에 걸어서 끊임 없이 실행버튼을 눌러줘야 한다.
거기에 10번 반복하는 반복문이라도 걸리면 하염없이 클릭을 해줘야 한다.
먼가 편하게 디버깅 하는 방법이 있을것 같은데..
한 번 지나가면..
내가 못찾은 건지 몰라도 다시 뒤로 돌아가서 보는 방법이 없는 것 같다 ㅠ
그럼 다시 새로고침해서 실행 버튼을 다시 무한 클릭해줘야 한다..
회사 덕분에 그래도 디버그 메뉴를 사용하면서 개발하는 경험을 쌓게 되어서 긍정적으로 생각하고 있다.