[React] debugging

디버깅 (debugging)이란?

디버깅(debugging)은 원하는 결과를 얻기 위해 컴퓨터 프로그램, 소프트웨어 혹은 시스템에서 버그(또는 오류)를 찾고 해결하는 과정 또는 활동이다. 버그는 잘못되거나 예기치 않는 결과를 초래하는 결함 또는 문제이다. (구글 참조)

리액트로 앱을 구축할 때 또는 개발자로 일을 하게 되면 오류를 마주하게 되는데 항상 벌어지는 일일 것입니다.

오류를 찾아서 수정하는 것은 개발자로서 할 수 있어야 하는 가장 중요한 일중의 하나입니다.
수많은 개발자들이 오류가 발생했을 때 단순히 오류가 발생했을 때 바로 도와줄 사람부터 찾는 것이 다반사입니다. 이것은 잘못된 접근 방식입니다. 스스로 오류를 찾아내고 해결할 수 있어야 합니다. 오류를 해결하는 것이 개발의 한 부분이기 때문입니다.

아래와 같은 오류 구문이 발생했다고 보겠습니다.

Adjacent는 나란한 JSX 요소를 의미하고 하나의 태그 안에서 감싸주어야 한다는 메세지입니다.
어느 라인에서 발생하는지도 알려줍니다.
Line 43:6: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did
you want a JSX fragment <>...</>? (43:6)
아래는 위에 오류메세지를 발생시키는 예시 코드입니다.

import React from 'react';

export default function MyComponent() {
  return (
    <div>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </div>
    <div>Another div</div>
  );
}

위에 코드는 아래 코드 처럼 수정이 되어야 합니다.

import React from 'react';

export default function MyComponent() {
  return (
    <div>
      <div>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
      </div>
      <div>Another div</div>
    </div>
  );
}

중단점 (breakpint) 작업

개발자 도구에서 Sources 탭을 보면 현재 웹페이지에서 사용 중인 소스 파일을 찾아볼 수 있습니다. 여기에는 자바스크립트 파일도 포함되어 있습니다.
좋은 점은 리액트 개발 과정에서 실행되는 npm start 스크립트는 브라우저에 코드를 보내서 실행될 수 있도록 하고 또한 브라우저에게 추가적인 정보를 제공해서 브라우저 개발자 도구가 포착해서 작성했던 원문 형태에서 코드를 디버그 할 수 있도록 해줍니다.

실제 Ide에 있는 코드들은 user 폴더 -> src 폴더에서 접근할 수 있습니다.

그다음 파일을 클릭해서 라인을 클릭하면(사진에서는 7번) 보는 것처럼 브레이크 포인트가 걸리게 되는데 이 상태에서 웹 페이지 버튼을 클릭하여 실행되게 한다면 실행되고 있는 코드는 중단점이 있는 줄에서 멈추게 됩니다.

아래에 사진처럼 파란색으로 표시가 되면서 우측에 현재 사용 가능한 변수들을 볼 수 있고 Call Stack도 확인할 수 있습니다.

그다음에 함수 호출(step into next function call)을 사용할 수 있는데 사용하면 props 개념으로 작동하게 되는 함수를 가리키는 파일에 라인으로 이동하게 됩니다. 실제 매개변수에 전달되는 goalId의 값을 확인할 수 있습니다. 그다음 버튼(Step over next function call)을 클릭하여 함수를 종료시킵니다.
(빨간 네모 안에 좌측부터 Step over next function call, Step into next function call)
이러한 방식으로 오류가 발생할 것 같은 지점에 중단점을 걸어서 함수 호출 버튼을 이용하여 내가 예상했던 데이터와 전달되는 데이터가 일치하는지 확인해 보면서 오류를 해결할 수 있습니다.