이 오류 메시지를 해결할 수 있었다는 것은
좋은 일입니다만
앞서 언급했듯이
모든 오류가 오류 메시지를 제공하지는 않습니다
가끔 여러분이 작성한 코드에 논리적인 오류가 있을 수도 있습니다
예를 들어, 이전에 첨부한
이 프로젝트에는
initial investment를 15,000나
다른 값으로 바꾸면 이 숫자들이 폭등하는 것을 볼 수 있습니다
여기엔 어떤 오류가 틀림없이 있어 보입니다
이 오류를 찾는 것은
콘솔에 오류 메시지가 없기 때문에 조금 더 어려울 수 있습니다
그렇다면 이런 오류는 어떻게 해결할 수 있을까요?
이런 오류들을 다룰 때는
첫 번째로, 항상 논리적으로 생각하려고 해야 합니다
여러분의 코드 중 어떤 부분이 이 오류를 발생시킨 것 같습니까?
여기 이 오류에서 초기에
앱을 재시작하면, 모든 것이 정상적으로 작동한다는 것을 확인해둘 필요가 있습니다
그러므로 오류가
이 calculateInvestmentResults 함수에서 발생한 것은 아닌 것 같습니다
여기의 코드는 정상적으로 작동하는 것 같습니다
그렇지 않았더라면
여기서 초기에 올바른 출력값을 얻지 못했을 것이기 때문입니다
또한 오류가
results 부분이나
테이블 자료를 만드는 부분에서 생기는 것은 아닌 것 같습니다
왜냐하면, 초기에는 모든 것이 정상적으로 작동하기 때문입니다
값을 수정할 때만 오류가 생깁니다
그러므로, 기술적으로는 app 부분에서 일어나는
사용자 입력값을 가져오는 과정과
연관이 있어 보입니다
이는 사용자 입력을 관리하는 부분을
사용자 입력 부분에서 앱 부분으로 이동했기 때문입니다
여기 handleChange에서, 입력된 값을
마지막에 있는 객체에 저장합니다
여기 이 코드가
오류를 일으키는 원인인 것 같습니다
그러므로, 실제로
실행 과정에서 사용되는 값들을
사용해 실행되는 시점을
살펴봐야 할 것입니다
그리고 우리는 그것을 이 리액트 프로젝트의 브라우저에서 할 수 있습니다
예를 들어 크롬 개발자 도구의
Sources 창으로 가서 말입니다
물론 다른 브라우저들도 이런 탭을 가지고 있습니다
거기서 여러분은 localhost 안에
우리 프로젝트 안에 있는 것과 유사한 구조의
폴더 구조를 찾을 수 있을 것입니다
가장 중요하게도, 그곳에는 src 폴더가 있을 것입니다
여기서는 이 프로젝트의 설정이
기본적으로 브라우저가 여러분의 폴더 구조를
브라우저 상에서 보여주기 위해 사용할 수 있는 코드를 생산하는 중입니다
여러분은 이제 이 코드로 들어가서
예를 들어 여러분의 app.jsx 파일로 들어가 볼 수 있습니다
여기에는 두 개가 있습니다
우리가 관심 있는 것은
프로젝트 내에서도 보이는 실제 코드를 포함하는 여기 이 파일입니다
이 파일의 장점은
여기서 작성한 것과 같은 코드만을
포함하는 것이 아니라는 것입니다
같은 코드 만을 포함한다면, 그것만으로는 그다지 유용하지 않을 것입니다
여기에서도 코드를 볼 수 있기 때문입니다
하지만 여기에서는 줄 번호를 클릭하여
break point (중지점)들을 추가할 수 있습니다
그러한 중지점을 추가하면
코드 실행은 이 행에 다다르면
멈출 것입니다
예를 들어 이 입력값을 수정하면
코드 실행이 멈추는 것을 확인할 수 있습니다
페이지가 회색이 되고, 디버거에서 일시정지됨이란
알림을 받습니다
그리고 여기 오른쪽에서, 이 행이 강조됩니다
이제 이 매개변수와 같은 코드의 특정 부분 위를 지나가면서
이번 특정 실행에서 받은 실제 값을
볼 수 있습니다
또한 이 경우
입력 부분에 입력한 15,000이라는
새로 받은 값을 확인할 수도 있습니다
이제 여기 아래에 있는 버튼을 이용해
코드를 차근차근 훑을 수 있습니다
여기서 정의한 함수를 실행하려고 할 때
이 버튼으로 실행되려고 하는 함수로
이동할 수 있습니다
이 버튼을 사용하면 이 함수를 벗어날 수 있고
이 버튼을 사용하면, 간단히 다음 문장으로 건너뛸 수 있습니다
이것은 코드를 차근차근 둘러볼 수 있게 해줍니다
코드들이 어떻게 실행되고 있는지
어떻게 작동하는 중인지
어떤 값들로 실행되고 있는지 확인할 수 있습니다
이 경우에, 새로 고침을 해서
여기서 벗어나서 다시 일시 정지하게 되면
예를 들어 여기 있는 것들을
통해 새로운 값이 문자열 type임을 확인할 수 있습니다
그리고 수학적인 계산을 하는 과정에서
문자열 값을 사용하는 것이
그것이 문제가 됩니다
그리고 자바스크립트에서 문자열와 숫자를
수학적 계산에서 혼용할 경우
오류가 발생할 수 있습니다
여기서 코드 실행을 계속하면, 여기서 볼 수 있듯이
모든 것이 어지럽혀져 있습니다
이 오류는
이 중지점을 제거하는 대신
investment.js 파일의
13 행의 앞 부분에 추가하면 더 잘 확인할 수 있습니다
이것을 수정하면
코드 실행이 여기에서 멈추고
이제는
initialInvestment가 문자열이라는 것을 볼 수 있습니다
이 코드를 지나갈 때
그리고 예를 들어 이 버튼을 사용해 반복문 안을 볼 때
문제가 분명히 17 행에 있다는 것을 볼 수 있습니다
investmentValue는 초기에 15,000이고
다음에 interentEarnedInYear과 annualInvestment
두 개의 수를 더할 것입니다
이 두 수를 문자열에 더한 것입니다
이것은 문자열이고
interestEarned는 아니라는 것을 알 수 있습니다
그 이유는 여기 interest에는 따옴표가 없기 때문입니다
하지만 investmentValue에는 따옴표가 있습니다
그렇기 때문에 실제로 숫자를 보는 것이 아닌
길게 연속적인 문자열을 보이는 것입니다
그러므로 이를 고치기 위해선
입력 값이, 여기 새로운 값이
저장되고 사용되기 전에 숫자로 변환되어야 합니다
이것은 여기에 더하기 기호 하나를 추가함으로서 간단히 얻을 수 있습니다
그것이 이상한 출력 값이 보이는 이유에
대한 긴 형태의 설명과
그것을 해결하는 방법이었습니다
이 변화를 적용하면
저장하고 새로고침했을 때
입력 값들을 바꿔도
문제가 없다는 것을 볼 수 있습니다