Investment Calculator 그럼 오류 메시지가 안뜨는 오류는 어케 하니

 

 

모든 오류가 오류 메시지를 제공하지는 않는다..

initial investment를 15,000나 다른 값으로 바꾸면 이 숫자들이 폭등하는 것을 볼 수 있다.

이 오류를 찾는 것은 콘솔에 오류 메시지가 없기 때문에 조금 더 어려울 수 있다.

 

 

논리적으로 생각하자

 

 

초기에 앱을 재시작하면, 모든 것이 정상적으로 작동한다.

이 말은 오류가 calculateInvestmentResults 함수에서 발생한 것은 아닌 것 같다.

 

그리고 results부분이나 테이블 자료를 만드는 부분에서 생기는 것도 아닌 것 같다..

 

값을 수정할 때만 오류가 생긴다.

그러므로, app 부분에서 일어나는 사용자 입력값을 가져오는 과정에서 연관이 있어 보인다.

 

이는 사용자 입력을 관리하는 부분을 사용자 입력 부분에서 앱 부분으로 이동했기 때문이다.

 

App.jsx

여기 handleChange에서 입력된 값을 마지막에 있는 객체에 저장한다.

여기 이 코드가 오류를 일으키는 원인인 것 같다..

 

실제로 실행과정에서 실행되는 시점을 살펴봐야 할 것이다.

 

 

리액트 프로젝트의 브라우저에서 그것을 할 수 있다..!

예를 들어 크롬 개발자 도구의 Sources 창으로 가서

localhost 안에 프로젝트 안에 있는 것과 유사한 구조의 폴더 구조를 찾을 수 있다

 

 

src 폴더에서는 프로젝트의 설정이 기본적으로 브라우저가 폴더 구조를 

브라우저 상에서 보여주기 위해 사용할 수 있는 코드를 생산하는 중이다.

 

이 코드로 들어가서 

예를 들어 App.jsx 파일로 들어가 본다.

 

여기에는 두 개가 있는데

 

프로젝트 내에서도 보이는 실제 코드를 포함하는 파일을 들어가면 된다.

이 파일의 장점은 여기서 작성한 것과 같은 코드만을 포함하는 것이 아니라는 점이다.

 

여기서는 줄 번호를 클릭하여 breack point (중지점)들을 추가할 수 있다.

그러한 중지점을 추가하면 코드실행은 이 행에 다다르면 멈추게 된다.

예를 들어 입력값을 수정하면 코드 실행이 멈추는 것을 확인할 수 있다.

페이지가 회색이 되고, 디버거에서 일시정지됨이란 알람을 받는다.

오른쪽 코드에서는, 이 행이 강조된다.

 

 

이 매개변수와 같은 코드의 특정 부분 위를 지나가면서

특정 실행에서 받은 실제 값을 볼 수 있다.

 

 

또한 이 경우 입력부분에 입력한 15,000이라는 새로 받은 값을 확인할 수도 있다. 

 

이제 여기 아래에 있는 버튼을 이용해 코드를 차근차근 훑을 수 있다.

 

그나저나 아까 여기서 확인할 수 있듯이 새로운 값이 문자열 type임을 확인할 수 있다.

바로 여기 문제가 있구나...!!!!!!!!

 

이 오류는 중지점을 제거하는 대신 

investment.js 파일의 13행의 앞 부분에 추가하면 더 잘 확인할 수 있다.

 

아까 이

버튼들을 사용해서

반복문을 보면 문제 17행에 있다는 것을 정확히 확인할 수 있다.

 

 

investmentValue는 초기에 15,000인데 이게 문자열..

 

그렇기 때문에 실제로 숫자를 보는 것이 아닌 길게 연속적인 문자열을 보이는 것이다.

 

 

 

이걸 고치기 위해선 입력값이, 여기 새로운 값이

 

 

저장되고 사용되기 전에 숫자로 변환되어야 한다.

이것은 여기에 더하기 기호를 하나 추가함으로서 간단히 해결 가능하다..

[inputIdentifier]: +newValue,