디버거 알아보기

오늘 배운 점

지금까지 나는 예상과 다르게 코드가 동작하거나 문제가 있을 때 열심히 콘솔 로그를 찍었다. 항상 어랏 왜 이게 안되지 하면서 말이다.

그러다 오늘 멘토링에서 디버깅에 대해 배웠고 지금까지 내가 문제 상황에서 시간을 많이 잡아 먹고 있던 이유를 알게 되었다. 기존의 나는 문제 상황에서 각 변수가 어떤 상태인지 알 방법이 없어서 하나하나 예상되는 변수만 콘솔을 찍어보다가 이 값은 멀쩡하네 다른 곳이 문제인가 하며 하나하나 로그를 늘려갔었다. 그러다보면 터미널에 찍히는 로그가 너무 많아져 이 로그가 어디서 나온건지 헷갈릴 때도 많았고 그러다보면 시간은 물 흐르듯 흘러갔다.

하지만 이제 디버거를 쓴다면 말이 다르다. 예상 문제 지점에 브레이크포인트를 찍어볼 수도 있고 그때 변수들의 값을 한눈에 파악할 수 있어 보다 효율적으로 문제 상황을 해결할 수 있게 되는 것이다.

알고리즘 문제같이 그 상황이 매우 간단할 때는 브레이크포인트 찍어보기도 하며 디버거를 종종 썼었는데 이렇게 서비스를 개발할 때는 디버거를 쓸 생각을 한번도 안했다. 괜히 복잡하고 어려워보여서였다. 하지만 오늘 멘토링을 하며 지금까지 내가 디버거를 피하며 했던 행동들이 더 복잡하고 비효율적인 것을 알았기 때문에 이번 기회에 디버거와 친해져보려고 한다.

찾아본 것

현재 나는 react native expo에서 bare workflow모드에서 서비스를 개발 중이다. react native에 디버거를 붙이는 방법에 대해 알아보기 전에 디버거란 무엇인가 간단히 알아보았다.

디버거 동작하는 방식

멘토님의 말씀을 바탕으로 인터넷을 찾아보다가 좋은 글을 발견했다.
https://hopeis.tistory.com/270
디버거가 어떻게 동작하는지 알게되었다. (시간이 난다면 내용도 정리해보기)

디버깅할 때 어떻게 접근법

그리고 디버그를 할 때 어떻게 생각을 하고 접근해야 하는지에 대한 글도 발견했다.
https://learn.microsoft.com/ko-kr/visualstudio/debugger/debugging-absolute-beginners?view=vs-2022&tabs=csharp
역시 대기업이다. 설명이 친절하다.

react native 디버거

react native에는 디버거를 어떻게 연결하는지 찾아보았다.
그중 react native에서 디버그하는 것에 대해 자세히 써놓은 글을 보았다.
8 Ways to Debug your React Native App with Expo — The Comprehensive Guide

위 글 중 인상 깊었던 것들을 적자면 아래와 같다.

1. expo development build 모드에서 cmd+m을 눌러 개발 메뉴에 들어가 Toggle Performance Monitor에 들어가면 램 사용량, 초당 프레임 등 앱의 성능을 볼 수 있다.

2. 똑같이 cmd+m을 눌러 개발 메뉴에서 Debug Remote JS에 들어가면 https://localhost:19000/debugger-ui/로 원격 디버거를 쓸 수 있다고 한다. 여기서 디버거는 Chrome Dev Tools이다.

3. 디버거 프로그램을 설치해서 사용할 수도 있다. 글에서는 react-native-debugger와 Flipper를 소개하고 있다.

   Hermes가 뭐지?
   중간에 Hermes를 Flipper에서 디버깅하기 라는 챕터가 있는데 Hermes가 무엇인지 궁금해서 찾아보니 V8과 같은 JS엔진이었다.

   대신 AOT(Ahead Of Time)으로 내가 이해한 바로는 소스 코드를 중간 언어로 전통적인 컴파일처럼 모두 변환해놓고 실기기에서 인터프리터 혹은 JIT 방식으로 중간언어를 기계어로 바꾸는 방식이라고 이해했다.
   관련해서 찾아보다가 좋은 글을 보았다.
   React Native) Hermes engine에 대한 고찰

   한가지 궁금한 점은 Hermes는 미리 중간언어로 컴파일 해놓는데 그 성능이 JSC보다 좋지 못하다는 거다.
   내가 이해한 바론 JSC는 소스코드에서부터 바로 JIT컴파일을 하는 대신 캐싱과 최적화를 하는 거고 Hermes 엔진은 중간언어로 모두 컴파일 해놓는 대신 중간언어에서 기계어로는 인터프리터를 쓴다고 이해했다.
   관련해서 더 찾아보아도 아직 이해가 안간다. 나중에 더 볼 것.
   레딧 / 레딧 답변에 있는 문서

4. VS Code React Native Tools extension

다시 디버거로 돌아와서 나는 결국 VS Code에서 코드를 작성하니 expo의 내장 디버거를 쓰거나 VS Code에서 익스텐션을 쓰는게 좋아보인다.

expo 내장 디버거

원격으로 Chrome Dev Tools를 통해 디버그하는 방법을 해보려한다.