WIL 9주차 (실전프로젝트 2주차)
📖 WIL 9주차
🌞 회고
지난 주 우린 nextjs를 포기하게 되었다 nextjs를 포기하는대신 타입스크립트를 사용하기로 하며 본격적인 개발에 나섰다. CRUD 를 타입스크립트를 적용하고 새롭게 만드는데 정말 매 순간 벽에 부딪혔다. 사용하지 않았더라면 금방 끝낼것이라고 예상했지만 생각보다 타입스크립트의 벽은 컸다. 처음엔 정말 이걸 도대체 왜들 쓰는걸까 단순히 장점만을 생각해서 이렇게 불편한 타입지정을 왜 하는걸까 ... 라는 생각이 많이 들었다. 여전히 타입을 지정하는 일은 모든게 어렵고 쉽지않다. 하지만 조금씩 배워가며 성장하는 것 같다. 항해에서 그동안 몇주간 배웠던 것 만으로 프로젝트를 한다면 성장의 기회가 되지 않을것 같았다. 6주라는 기간동안 반드시 하나라도 더 배우고 싶은 마음이다.
씨알유디가 초기 기획과 많이 달라져 API 부터 새롭게 제작했다. 추가된 기능은 단순한 투두리스트 에서 달력의 날짜를 선택하면 해당날짜에 카테고리와 투두리스트를 작성할수 있다. 백엔드에선 내가 어떤 데이터들이 필요한지 완벽하게 모르기 때문에 우린 계속 API를 같이 고쳐나가며 CRUD를 구현했다. 팀 프로젝트인게 정말 잘 느껴진 부분이고 소통이 잘되고 팀워크가 잘 맞았다고 생각한다. 그 결과 CRUD만 9개의 API가 완성되었다.
우리의 API https://www.notion.so/6297e0f46f71437ba8946c0954faee31?v=4b825d422bad4602b1268ee6c9c1433b
🌞 트러블 슈팅
🌧 TypeScript
일주일간 만들어 놨던 프로젝트들을 타입스크립트로 변경하니 당연스럽게도 모든 배열 객체 함수들이 빨간줄로 에러가 나타났다. 여전히 어렵지만 어느 위치에 어떤 타입을 지정해줘야 할지도 몰랐고 서버와의 통신도 맞춰봐야 했기 때문에 우선 any로 에러들을 막고 하나씩 수정해 나갔다. 각자 여기저기 인터페이스들을 적어놓다보니 코드가 지저분해졌고 우린 이 문제를 해결하기 위해 파일 하나에 인터페이스들을 몰아넣고 inport하여 꺼내쓰기로 하였다. 그 결과 코드도 깔끔해지고 다른 팀원이 제작해둔 인터페이스를 재활용 할수도 있어 작업속도가 빨라졌다.
🌧 .map is not a funcion
날 괴롭힌 타입 에러 **dateTodos.map is not a funcion **
dateTodos.map is not function 즉 dateTodos가 배열이 아니라는 에러이다. 이 에러는 예전에도 경험해 봤다. 리덕스에서 꺼내오는 배열데이터를 map함수를 사용할때 html을 최초로 불러올땐 아직 리덕스에서 데이터를 가져오는 리듀서를 실행하지 못한 상황이기 때문에 일어났고 이런 경우 데이터에 옵셔널체이닝을 사용하여 해결했었다. 이번에도 옵셔널체이닝을 사용했지만 에러는 여전했다.
문제는 이 에러가 최초 렌더링시 일어나는 것이 아니다. 최초 렌더링시엔 서버통신후 리덕스에 있는 스토어에서 데이터를 잘 가져오고 map함수가 잘 적용된다. 하지만 새로운 카테고리를 생성하면 이러한 타입에러가 발생한다. 근본적으로 이해가 되지 않았다. 난 아직 카테고리 생성시 서버와 통신만했지 리듀서로 스토어의 스테이트에 어떤 값도 저장해주지 않았다. 즉 최초 렌더링시 잘 받아오던 데이터를 변경해주지 않았고 서버와 통신만 했을 뿐인데 타입에러가 나온다.
난 마치 귀신이라도 씌인듯한 이 문제를 해결하기 위해 모든 곳에 console.log를 달았다. 그 결과 두개의 객체가 담겨있던 배열 data가 카테고리 생성으로 받은 객체데이터 하나로 바꿔치기 된다. 즉 배열이 객체가 되기 때문에 배열함수인 map이 타입에러가 나오는 것이다. 원인을 파악했지만 여전히 의문이 들었다. 난 아직 state 변경을 위한 카테고리생성 리듀서를 작성하지 않았었다.
그렇지만 원인을 알고 코드를 살펴보니 생각보다 쉽게 에러의 이유를 알수 있었다. 바로 최초 렌더링시 데이터를 저장해주는 Thunk의 액션 타입 이름과 카테고리 생성 Thunk의 액션 타입 이름이 동일했다. 저런 이유로 카테고리 생성시 받은 postCategory 리스폰 데이터가 getDateTodo의 리듀서의 액션으로 들어가 state가 변하는것이였다. 리덕스를 공부할때 액션의 타입을 배웠었다. 하지만 덕스구조와 Thunk로 넘어오며 그 과정이 간단해지고 액션타입을 신경쓰지 않았는데 액션 타입이 같을 때 이런 일이 일어날 수 있다는 것을 알게되었다. 간단해 보이는 에러지만 이 에러를 해결하기위해 꼬박 이틀이 걸렸다. 개발보다 에러를 만나면 그 에러를 해결하기 위해 생각보다 많은 시간이 소비됐다. 남은 주차엔 이런 에러 해결이 빨라 질 수 있도록 하는 것이 개인적인 목표가 되었다.
🌳 TypeScript ??
아직은 단점이 크게 느껴지는 타입스크립트의 장점과 단점을 포스팅했다.
https://velog.io/@leejpsd/TypeScript