[Wiki Page] typescript에서 만난 오류 디버깅

이 오류는 id 값을 잘못 설정하면서 시작되었다. 맨 처음에 id값이 있어야 하는데 그렇다면 현재 시간으로 설정해야지 하는 안일한 마음이었다. id에 요구되는건 중복이 되지 않는 거였는데 그러면서 동시에 리스트가 시간순으로 정렬되어야 하니 두 가지 기능을 하나로 개발해보겠다는 생각이었다.

 

처음에 id값을 자바스크립트 내장 함수인 newData로 받았다. 이렇게 받은 id값의 타입을 number로 설정하고 이 값으로 주소에 넣어서 라우터 값을 설정했다. 여기에서 주소로 보내면서는 문제가 생기지 않았다. 근데 이제 다시 이 값을 가져올 때 어느새 타입이 string으로 변해 있었다.

 

이걸 찾기 위해 왜 자꾸 오류가 나는지 엄청나게 헤맸다. 내가 안바꿨는데 왜 자꾸 타입이 일치하지 않는다는 거지? 나는 분명 사용하는 모든 부분에 number로 설정했는데..? 하고 엉뚱한 코드들만 고쳤다 되돌리기를 반복했다.

 

그 뒤 아예 string으로 바꿔서 설정하니 이번에는 시간을 비교해 정렬하는 코드에서 문제가 생겼다. 일단 타입 에러가 나길래 아 이걸 숫자로 바꿔서 사용해야 하나? 하는 생각을 했다. 그렇게 하니 컴파일은 문제가 없었지만 정렬에서 문제가 생겨버렸다. 단순 숫자 비교로는 날짜를 비교할 수 없으니까 0시부터 24시까지로 정렬을 해버린 것이다.

 

그래서 비교하는 함수를 손보기도 하고 다시 타입을 변경해보기도 하고 이런저런 시도를 하다가 깨달았다. 이건 이렇게 설정하면 안되는구나! 애초에 하나의 변수에 두 가지 역할을 부여하면 안되는 거였다. 어떻게 동작한다 해도 나중에 기능을 조금 바꾸거나 확장하려면 다 뜯어고쳐야 한다는 것을 깨달았다. 게다가 물론 혼자 작업한 거지만 이 코드를 어떻게 쉽게 파악할 수 있겠나 하는 생각이 들었다.

 

결국 정렬에 필요한 시간과 게시글을 구분하는 id를 분리하기로 했다. 일단 시간은 원래 받던대로 받았다. 사실 newDate하면 단순 숫자만 나오지 않는데 숫자만 받으려고 다른 이것저것 추가한 코드들을 제거했다. 그리고 데이터 테이블에 시간값을 타임스탬프로 넣었다. 이렇게 하면 간단하게 비교해 정렬이 가능해진다.

 

이제 id를 다른 값으로 받아야 하는데 어떻게 해야할지 고민이 되었다. 내 프로젝트는 규모가 작고 시간을 사용하는것은 정렬에 문제가 생기니 결국 랜덤으로 값을 받아야 하는데 그냥 숫자로 구분하면 몇개의 숫자로 이뤄진 걸 받아야 하지? 그리고 그렇게 하면 중복 처리는 어떻게 하지? 지금 생각하니 어떻게 잘 하면 구현해볼 수 있을것도 같은데 그때는 머리가 안돌아갔다. 분명 나랑 똑같은 고민을 한 사람들이 있을텐데 한번 찾아보자! 했더니 라이브러리들이 몇가지 있었다. 그 중에 프로젝트 규모와 중복최소화를 가지고 고민하다가 Nanoid라는 라이브러리를 사용하게 되었다.

https://www.npmjs.com/package/nanoid

nanoid