하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.
예전부터 계속 바보같은 실수를 저질러왔었는데 오늘에서야 그 원인을 정확하게 파악했다.
사실은 애초부터 잘 알고있었어야 하는 내용인데 그걸 ... 왜... 이제서야... 싶은 생각이 절로 들지만.
갸우뚱 하면서 컨트롤 할 수 없는 상황에 '운'을 맡기는 것 보다는 쪽팔리더라도(;;) 늦게나마 제대로 알고 가는것이 낫다고 생각한다. 그리고 잊지 않기 위해 TIL 한 켠에 자리를 내어 처참한 실수를 회개한다.
자바스크립트에서 false로 간주하는 것들
자바스크립트를 처음 만났을 때를 기억한다.
아직도 너무나 강렬한 스파이럴 매트릭스.
오죽하면 1기의 난의 짤까지 탄생시켰을까 ㅋㅋㅋㅋㅋㅋㅋㅋ.. 휴.
어쨌든, 그 당시에도 그렇고 지금도 잘 이해는 안가지만. 어쨌든 당황스러웠던 건 2 == '2'를 true로 인식하거나 0을 false로 간주하는 그런 것들.
그리고 오늘에서야 제대로. 정말 제대로 이해해버린 부분. 바로 자바스크립트에서 '빈 배열'([])이나 '빈 객체'({})는 false로 간주되지 않는다는 점이다. 마치 false일 것 같지만 실상은 true라는 점!
자바스크립트에서 false로 간주되는 것은 아래 6가지이다.
- null
- undefined
- 0
- 빈 문자열
- NAN
- false
아..... 바보같이 빈 배열은 당연히 false라고 생각했다.
이 문제가 어디서 터졌느냐. 바로 useEffect를 포함하는 page의 자식으로 포함된 component에서 문제가 발생했다.
리액트 특성 상 bottom-up으로 렌더링이 되기 때문에 가장 하단 컴포넌트라 렌더링 될 때 page 단에서 받아온 props가 없는 상태이면 당연히 에러가 발생한다.
그걸 막아주기 위해 마치 가드 클로즈처럼 now loading 문구를 삼항연산자로 주게 되는데...
이상하리만큼 이 가드 클로즈가 적용되지 않는 것이었다.
계속 console.log()로props를 찍어봐도 이유를 잘 모르겠고.
빈 배열이 떴을 땐 false로 인식해서 now loading을 띄워줘야 한다고 생각했는데 자꾸 빈 배열에서 요소를 찾아들어가려 하니 에러상황에서 벗어날 수가 없었다.
근데 가만히 생각해보면 이런 적이 한두 번이 아니었다.
과거에 레벨테스트를 할 때도 마찬가지였고.
그래서 나름 찾아낸(?) 방법은 page 단에서 무리할 만큼 props를 쪼개고 쪼개서 그걸 아래 컴포넌트에 내려주는 식으로 했는데 결코 정상적인 방법이 아니었다. 그럼에도 불구하고 되는 상태를 만들기 위해 선택한 방법.
너무 이상해서 옆에 있는 동료에게 물어보고 얘기를 하다가 확인하게 된 사실... 빈 배열, 빈 객체는 false가 아니다....?
what....?
아............
정말 '추측'이라는 것 때문에 제대로 원인을 파악하지 못하고 애먼 props만 오지게 쪼개고 있었으니.
결국 {topThreePlaces ? (컴포넌트) : (<p>now loading</p>)} 형태로 오류가 나던 것을 {topThreePlaces.length ? (컴포넌트) : (<p>now loading</p>)}으로 바꾸고 나서야 제대로 잡을 수 있었다.
엉뚱한 확신이 있으면 원인을 제대로 찾지 못하는 것 같다. 내가 알고 있는 것이 정확한지 아닌지 의심조차 할 수 없게 만드는 이 잘못된 확신.
이제 원인을 알았으니 비정상적인 방법으로 쪼개놓은 props에게 심심한 사과를 전하며 리팩터링을 해야할 것이다.
어휴... 화가난다 화가 나.
TOP 3 장소 불러오기
어제 TIL을 쓸 때만 해도 이걸 할 수 있으려나? 하며 반신반의 했던 기능. 바로 회원들의 평점을 기준으로 TOP3 장소를 불러오는 기능이다.
단순히 가져오는 것은 그리 어렵지 않다고 느꼈는데 막상 백엔드 로직을 구현하다보니 정-말 복잡시려워졌다.
솔직히 로직을 짜면서 '내가 지금 코테를 풀고있는건가?' 하는 생각마저 들었던 이 부분.
어쨌든 굉-장히 코드가 지저분하지만 로직을 만들어서 정보를 가져오는데 까지는 성공했다. 어제 집에 가기 전에 백엔드 로직만큼이라도 만들고 가고 싶었는데 목표는 성공. 위에서 한 삽질 때문에 프론트에 띄우는 것까지가 좀 고생이었고 그래도 결과물이 나와서 다행이라고 생각했다.
다만 이 부분을 어떻게든 완성시킨 뒤에 redis에 대해 공부하라는 아샬님의 가이드가 있었는데. 마음이 조급해서 과연 공부를 할 수 있을까!!! 라는 불안함이 있지만 얼른 나머지 기능들을 완성하고 redis로 좀 더 나은 방향으로 리팩터링 또는 새로운 기술을 접목시켜보고 싶다.
오늘은 왠지 모르게 약간 쳐지기도 했고 오전에 아이 어린이집에 다녀오면서 기운을 많이 뺀 부분도 있다.
지난 며칠 만큼 진도가 쭉- 빠지지 않아 조금 답답한 마음은 있지만 그래도 멈추지 않고 서드파티 로그인과 유튜브 영상 가져오는 기능은 이번주 안에 구현해보고 싶다.
가즈아!!!!!!!!!!!
