한달동안 진행했던 코드스테이츠 메인 프로젝트가 드디어 끝났다!!
우리 팀은 프론트엔드 4명, 백엔드 3명으로 총 7명의 팀원으로 구성되었으며, 테크 장비 리뷰 사이트를 프로젝트로 진행하게 되었다.
나는 해당 프로젝트에서 회원가입, 리뷰 작성, 제품 추가 모달 페이지를 담당하게 되었다.
내가 사용한 기술
- Typescript
- zustand
- Toast-UI-Editor
- Tailwind CSS
이번 프로젝트에서 전체적으로 처음 사용하는 기술 스텍들이 많아서 빠르게 공부하고, 작업을 들어가야 했다. 그때문에 초반부터 걱정이 많았는데 혼자 공부 하는 것이 아니라 팀원들과 다 같이 하는 거였고, 서로 모르는 부분에 대해 물어볼 수 있어서 생각만큼 진행하는데 있어 어렵진 않았던 것 같다.
개발을 시작한 후, Javascript에선 볼 수 없던 수 많은 타입 오류들을 만났다. Zustand를 사용해야 할 땐 생각보다 쉽지 않음에 눈물을 삼켰으며, Tailwind CSS는 손에 익지 않아 css에 생각보다 많은 시간을 투자해야 했다.
그래서 결론은??
나는 힘들었던 만큼 뿌듯했다고 말할 것 같다.
Typescript의 타입 에러의 경우, 만나는 에러가 어느정도 정해져 있었다. '~형식에 ~속성이 없습니다', '개체가 ~인 것 같습니다', '~인수는 ~형식의 매개 변수에 할당될 수 없습니다', '~형식에 ~속성이 없습니다' 등등... 처음 만났을 때야 당황스럽지 하나하나 해결하고, 또 만나고를 반복하다 보니 해결방법의 데이터가 점차 쌓이고 후에는 좀 더 빠르게 문제를 파악하고, 해결할 수 있게 되었다.
Zustand의 경우, 확실히 쉽다는 말이 맞다. 구글에 검색을 해 보면 보통 쉬운 예제 (카운트 +1 올리고, 초기화 하는)만 나오는데 나의 경우엔 대분류-소분류 셀렉터와 리뷰를 작성할 때의 수 많은 상태들을 관리해야 했기 때문에 처음엔 '응응, 카운트+1-1 초기화는 이해됐어! 그래서... 어떻게 하라고?' 이 상태였다. 구글링을 통해 다른 예제를 보고 깨달음을 얻었고, 실제로 적용해보니 잘 작동하게 되었다. 그리고? 그게 끝이었다. 아니 어떻게 이렇게 쉬울 수가 있지? 뭐 잘못 쓰고 있는 거 아냐? 하는 생각이 들정도로!
Toast-UI-Editor의 경우 프리 프로젝트에서 버전 에러로 사용하지 못했기 때문에 이번 프로젝트에선 꼭 사용해 보고 싶었고, 리뷰 작성할 때 위지윅과 마크다운을 모두 지원하는 에디터가 필요했기 때문에 사용하게 되었다. 기본적으로 에디터를 설정할 때 필요한 플러그인은 import로 적용할 수 있었기 때문에 어렵지 않았다. 문제는 이미지 업로드 기능을 사용했을 때 이미지가 base64 로 삽입된다는 것이었다. 때문에 이미지 업로드를 누르면 실행되는 addImageBlobHook 함수를 수정하여 서버에 요청을 보내 이미지 uuid를 받아와 img 태그로 삽입되게 하는 작업이 필요했다. 처음 구현해보느라 시간도 많이 걸리고, 여러 문제가 많았지만 막상 다 구현해 놓고보니 다음 번에 다시 구현한다면 좀 더 깔끔하게 잘 구현할 수 있을 것 같다는 생각이 든다!
프로젝트에서 잘했던 점/ 좋았던 점?
팀원들이 모두 본인이 맡은 것보다 더 열심히 해 주셔서 탈없이 무사히 프로젝트를 끝낼 수 있었던 것 같다.
프리 프로젝트에선 사용하지 못했던 Toast-UI-Editor를 혼자 맡아서 끝까지 구현해낸 내 자신이 대견하다. url 주소를 틀려서 api 요청이 잘 안 된다거나, 리뷰 작성 post 요청을 보낼 때 썸네일을 어떻게 처리할 것인가 등 여러 문제가 있었지만 결론적으로 이리저리 부딪히면서도 기간안에 해냈다는 점을 칭찬하고 싶다.
그리고 프로젝트를 진행하면서 가장 좋았던 점은 백엔드 팀원분들과의 소통하는 법을 배울 수 있었다는 점이었다. 프론트분들과의 소통은 어렵지 않았는데 백엔드의 작업 방식이 어떤지 모르니까 아무래도 소통에 있어 잘못 알아 듣는 게 있었기 때문에 백엔드 공부의 필요성을 느꼈다. (끝이 없는 공부 ㅠㅠ)
프로젝트를 진행하면서 힘들었던 점?
프리 때부터 서버와 api 통신하는 방법이 어려웠던 것 같다. form 데이터 형식인지, json 형식인지, 헤더에 뭘 넣어서 보내줘야 하는 지, 가져온 데이터를 어떻게 사용할 것인지 등등 때에 따라 다른 방법을 사용해야 했기 때문에 어려움을 느꼈다. 그래도 프로젝트를 진행하면서 제품 이미지 추가, 제품 목록, 썸네일 이미지 추가, 토스트 에디터 이미지, 제품 추가 post, 게시글 등록 post api 등 다양한 api 통신을 하면서 익숙해질 수 있었다.
Tailwind CSS에 익숙하지 않아 css 코드를 작성하는데 시간이 평소보다 소요되었다. 테일윈드는 뭔가 좋은 거 같으면서도, 불편한데? 이게 익숙하지 않아서인가...? 하는 애매한 감상을 남겼고, tailwind CSS를 다른 사람들은 어떻게 사용하고 있나 검색해 보다가 tailwind styled components 가 있다는 것을 알게 되었다! 인라인 스타일 때문에 코드가 가로로 길어져서 보기 불편함이 있었기 때문에 다음 프로젝트 때 사용해 보고 싶다. (참고)
그림 그리면서 손목이 안 좋아진 적은 있었는데 하루종일 코드 치다가 손목이 안 좋아진 적은 이번이 처음이었다. 늦게 자고 일찍 일어나는 생활패턴에 몸이 견디지 못하고, 날씨도 추워져서 면역력도 떨어지고... 아침에 일어나서 회의 진행하고, 병원 다녀오고, 작업하고... 대부분의 일정이 이런 패턴이었다. 다시 한 번 운동 중요성과 규칙적인 생활 패턴이 얼마나 중요한지 알게 되었다. 프로젝트도 끝났으니 다시 운동도 시작하고, 비타민도 잘 챙겨 먹어야 할 것 같다. (일찍 자고!)
프리 프로젝트가 어? 하는 사이에 끝나서 메인 프로젝트는 정말 걱정이 많았는데, 아쉬움은 남지만 다행히 만족할만한 프로젝트를 뽑아낸 것 같아서 다행이다.
i7 팀원들 모두 고생 많으셨습니다! :)
