리액트 개발 과정에서 결국 실행되는 npm start 스크립트는 브라우저에 코드를 보내서 실행될 수 있도록 하고, 부라우저에게 추가적인 정보를 제공해서 브라우저 개발자 도구가 포착하여 우리가 작성했던 코드를 디버그할 수 있도록 해준다. 심지어 그 코드가 브라우저에 제대로 작동하지 않더라도 말이다.
그렇기에 이런 리액트 개발 과정은 브라우저에서 실행되는 코드와 우리가 작성한 코드 사이에서 다리 역할을 한다.
오류 확인
삭제하고자 하는 목표를 클릭했을 때 원하는 것이 아닌 다른 것이 삭제되는 것을 확인했다.
중단점 사용하기
개발자 도구에서 js파일들을 살펴보고 추가하고 싶은 줄을 클릭하여 중단점을 추가할 수 있다.
이 경우에 deleteHandler는 목록 아이템을 클릭했을 때 작동된다.
중단점 추가
중단점을 추가하고 그 중단점이 위치한 코드 부분이 작동하도록 실행한다면 실행되고 있는 코드는 중단점이 있는 줄에서 멈추게 된다.
중단점 실행
코드는 디버거에서 일시 중지하고 그 줄은 파란색으로 표시된다. 아래쪽에는 정보가 들어있는 박스들이 있다. 예를 들어, 현재 사용가능한 변수들을 볼 수 있고 Call Stack(호출 스택)도 보인다.
코드 추적
해당 코드르 보면 props가 onDelete메소드를 호출하고 있다. 다음 함수 호출 버튼을 사용하여 추적할 수 있다.
버튼을 클릭하면 props개념으로 작동하게 되는 함수인 deleteHandler로 들어가게 된다.
여기서 호출된 setCourseGoals 함수를 보게되는데 변수 위에 마우스를 올리면 그 변수에 저장된 값을 볼 수 있다.
이후 다음 함수 호출 버튼를 한 번 더 클릭해서 setCourseGoals함수의 호출을 종료할 수 있다. 이로써 deleteHandler의 역할은 종료되고 우리가 삭제했던 목표의 goalId가 goal1이라는 것을 통해 잘못된 삭제 정보라는 것을 확인할 수 있었다.
오류 원인 찾기
goalId가 잘못된 것을 확인했다. 이후 우리가 실제로 아이디를 추가했던 addGoalHandler로 돌아가서 살펴보면 된다. 왜냐하면 id가 설정된 곳이 그 위치이기 때문이다. 해당 코드를 살펴봤을 때 id값을 goal1로 지정했기 때문에 모든 아이디값들이 동일하다는 것을 확인했다.
코드 수정
아이디값을 수정한 후 다시 실행했을 때 경고 메세지도 생성되지 않고 삭제하고자하는 것이 제대로 삭제되는 것을 확인했다.
