디버깅

댓글, 대댓글의 구현을 완료 하고 자잘한 것들을 보기 좋게 fix한 뒤

이력서 지원을 위해 ppt를 만들기 전에 대충 한 번 확인해보는데

 

잘 되던 페이지네이션이 동작하지 않는 것이었다.

 

분명 전에는 잘 동작했었는데..

 

뭐가 문제인가 하니 api로 받아오던 lastPage에 대한 정보가 12로

1~10페이지까지는 잘 동작하는데

>이 버튼을 눌러 다음 11~20 페이지를 출력하려고 하면

lastPage에 대한 정보가 0으로 바뀌는 것이었다.

 

무엇이 문제인지도 모르겠고

내가 짠 코드지만 주석이 없어서 이해하기도 어려웠다 ㅠㅠ.

 

힘들여 문제일것 같은 부분을 함축하고,

계속 console.log로 확인하다가

예전에 스쳐봤던 디버깅(?) 영상이 생각났다.

https://www.youtube.com/watch?v=IwC-BVM2_YQ&t=443s 

https://www.youtube.com/watch?v=C4poqiG8ulM 

이 두 영상이었는데

처음 봤을 당시에는 뭔진 모르겠지만 '있다는 걸 알기 위해' 봤다면

이번에는 직접 사용해보려고 영상을 봤다.

 

불행히 아직 숙련되지 않았는지 유의미하게 사용하진 못했다.

(긍정적인 부분은 이전에는 무슨 말을 하는 건지 이해를 못했었는데 지금은 조금씩은 알아듣는 게 있다는 걸 느낀 것이다.)

 

여튼 도저히 해당 영상의 가르침으로도 방법을 못 찾겠어서

하나씩 콘솔로그로 찍어보다가

 

지금도 어떻게 발견하게 된 건지 이해는 못하겠지만 alert을 이용해 기존의 파라미터가 1~10까지는 ''(공백?)을 전달했다면 >이걸 눌러 11~20을 출력할 때는 'undefined'를 보내는 것을 발견했다.

 

원인은

emit으로 부모함수를 호출 할 때

    emit('parentchangePage', parseInt(endPage.value), props.keyword);

이렇게 keyword를 보내야 하는데

    emit('parentchangePage', parseInt(endPage.value));

이렇게 키워드 없이 보내서 그런 현상이 일어났던 것이다.

 

그리고 생각해보니 최초의 페이지네이션이 잘 동작했던 때는 '키워드 검색'을 생각하지 않고 만들었었을 때여서 잘 동작했던 거였구나 라는 생각을 하게 됐다.

 

사실 오늘 씻으면서 생각한 게 있는데

학원 다닐 때 현직개발자 분께서 오셔서 멘토링(?)을 한 적이 있었는데

자기들은 만들기 전에 변수명이라든지 모든 것을 문서로 다 만들고, 그 문서에 맞춰 개발을 한다는 이야기를 들었었다.

그때는 지금보다도 못 하던 시절이라 그들이 무슨 말을 하는지도 이해하지 못하던 시절이었는데

씻으면서, '미리 설계도를 구상해두고, 그에 따라 만든다면 api를 한 번 만들 때 제대로 만들 수 있어서 쓸데없이 api를 계속 만들 필요가 없겠구나'라는 것을 '생각'으로만 했었는데

(예를 들어 나는 '조회기능' api를 만들고, 이후에 검색기능의 필요성을 깨달아 추가하는 바람에 '검색된 키워드에 따른 조회 기능'을 가진 api로 다시 변경해야 했었다.)

 

오늘 실제로 뻘짓을 하며 필요성을 또한번 절실히 느꼈다..