프로젝트 소개

🎃 프로젝트 명 : citycat , 시티캣 (오늘, 연애 관련 타로점을 볼수있는 플랫폼)
⭐️ 프로젝트 홈페이지 : http://citycattarot.ga/
🍉 github: https://github.com/expectta/cityCatTarot
🛠 프로제트 기간 : 4주/2인

타로캣?

타로캣은 웹 브라우저에서 "오늘의 타로점", "연애 타로점"을 볼 수 있다. 총 섹션별 22가지의 타로 카드가 존재하고 "시티캣"이라는 점쟁이 즉 타로점을 고양이가 봐 주는 관점에서 대화형식으로 점 보는것이 진행된다.
유저는 회원가입 없이 타로 점을 볼 수 있고, 회원가입 후 로그인을 한다면 내가 오늘 본 타로카드를 보관함에 저장 할 수있는 기능이 있다.

프로젝트간 힘들었던 점은?

시티캣 이라는 "봇"을 상대로 채팅 창 구현함에 있어 어떻게 구현할까에 대한부분에 생각을 많이 했던것 같다. 채팅창을 사용만 해봤지 실제로 만들려고하니 금방 떠오르지 않았다. 배열을 사용해서 채팅화면을 구성해야 하는데 "봇"과 유저의 채팅창은 좌/우로 구분이 되고 프로필 사진은 대화 할때 첫번째 대화글에만 나오고 대화가 종료될 시점에 항상 현재 시간을 붙여야 했다. 이 부분은 크게 어렵지 않았지만 "봇"이 대화를 할때는 각 대화글에 대한 딜레이가 필요했고 항상 마지막 글을 확인 할 수 있도록 스크롤 핸들링까지 했어야 했다.
대화글에 대한 딜레이는 컴포넌트 생성시 딜레이를 걸었고 스크롤 이벤트는 항상 밑줄에 이동 할 수 있도록 react-scroll-to-bottom 라이브러리를 사용했다.
채팅 기능을 완료하고 테스트를 했을때 간혹 스크롤 이벤트가 제대로 동작되지 않는 부분을 확인했다.
차후 개선 해야 될 부분으로 아직 어떻게 처리를 해 줘야할지 감이 잡히지 않는다.. 어떻게 하지..

협업간에 문제점

서버측과 항상 문제될 것은 API에 대한 문제가 가장 큰것같다.
CORS error 라 던지 클라이언트 요청에대한 서버 응답에 error 가 발생한다 던지 했을때 항상 내 코드가 문제가 있는지부터 확인하는게 이제는 습관이 된것 같다. 이전 프로젝트를 진행하면서 내 코드를 제대로 확인하지 않고 서버측 인원에게 문제삼았던 부분에서의 발전이다.
하지만 내 오타로 인해 API 통신이 불가했던 부분에 대해서 또 다시 서버인원에 확인 요청을 했었다.
반성해야 겠다 확실하지 않으면 아예 말을 꺼내면 안될부분이다.

프로젝트를 하면서 문제점

프로젝트 진행간에 항상 느끼지만 과거 프로젝트를 하면서 조금 더 보완 할수있는 부분에대해서 신경을 쓰면서 하자고 생각했지만 쉽사리 버릇이 고쳐 지지 않는것 같다.
예를 들어 코드를 깔끔하게 작성한다던지 주석을 꼼꼼히 작성 한다던지..
그래서 프로젝트를 끝내고 코드정리를 하는 모습이나 부족한 부분을 더 공부하고있다.
이번 프로젝트에서도 typescript를 사용했는데 쓸데없이 any를 남발하고 코드 중복이 발생 했던 부분이 typescript를 제대로 사용하고 있지 못한다 라는 느낌을 바았다.(공부해야지..!)
프로젝트 끝내기에만 신경 쓸게 아니고 천천히 집중해서 공부를 하는 습관이 필요하다.

프로젝트 이후

typescript를 사용하면서 any를 남발했던 부분을 다시 리펙토링 해서 any type을 없애고 더 명확한 data type을 작성했다. react 상태관리에 있어서 redux를 쓰지 않았기 때문에 interface의 중복이 계속 발생하고 있었던 부분을 export 함으로써 코드의 중복을 제거할 수 있었던 것을 처음 알게되었다.(꼼꼼히 공부 했더라면 알았을 부분을..)
프로젝트 규모가 작았기 때문에 redux를 사용하지 않았지만 나중에는 꼭 필요 한 부분이라 생각이 되서 공부를 더 해봐야겠다.