[FESSPORT] - 페스티벌 컨텐츠 제공 서비스 Typescript, Redux-saga 4주 프로젝트 돌아보기.
Intro.
이글은 코드스테이츠의 모든 Sprint 와 Assessment, 2주간의 First Project 이후, 4주간의 Final Project의 회고글입니다.
First때와 마찬가지로 팀원으로서 프로젝트를 진행하였고, 파이널 프로젝트에선 Front-End 를 맡아 작업했습니다.
Fessport
Main
What's Fessport?
-
서비스 이름은 Festival + Passport 의 합성어인 "FESSPORT" 입니다.
-
Fessport는 전 세계 각국 Festival, Artist 의 정보를 유저에게 제공하고 페스티벌의 티켓 중고거래와 동행모집, 후기를 공유할수있는 게시판을 통해 페스티벌을 한층 더 깊이있게 즐길 수 있는 서비스입니다.
자세한 서비스를 보고싶다면!
Team Costival
FRONT-END: 👨💻박정환, 👨💻이종혁
BACK-END: 👨💻이재원, 👨💻강희석
팀원으로 맡은 소임은...
- Fessport CI
- Deployment: HTTPS 환경 배포 (AWS S3 & Route53 & Cloudfront)
- Nav bar
- 모달창을 통한 로그인, 회원가입
- 커뮤니티 페이지 (동행, 사고팔기, 리뷰 페이지)
- 포스팅 페이지
Tech Stack
프로젝트 선정
페스티벌을 좋아하는 팀원분의 강력한 의지로 Fessport 란 서비스를 기획하게 되었는데, 기획을 일주일정도 잡은것같다. 생각보다 스케일이 커져버린것같은데... 기획 단계 부터 부담이 엄청컸다.
그도 그럴것이 2주 프로젝트에선 백엔드를 맡았었고, 리액트의 기본만 알고있던터라 프론트엔드를 맡는다는게 어떤 의미인지 알고있었기 때문이다. 거기다 처음 사용해보는 Typescript 와 Redux, Redux-saga(Typesafe-action) 를 통한 상태관리와 API 요청 작업까지 모든게 너무 생소했고.. 러닝커브가 너무나 컸다.... 이런 저런 걱정이 많았는데 퍼포먼스가 조금 부족하지만... 완성 결과물은 나름 나쁘지 않다고 생각한다...!
Typescript
개발에 착수하기 전, 약 일주일간 새로운 기술 스택에 익숙해지는 시간을 가졌다. 물론 일주일이라는 짧은 시간내에 모든걸 마스터하기엔 턱없이 부족했지만, Typescript 를 쓰면서 "아, 이래서 타입스크립트가 유용하게 쓰이는구나..!" 라는 생각이 많이 들었다. 간단하게 풀어보자면, Javascript를 사용할땐 오류가 일어난 지점을 찾기 힘들었는데, 타입스크립트를 쓰면서 애초에 오타나 에러가 일어날 부분을 정확하게 찝어주니까 트러블이 일어날 부분을 인지시켜주었다. 자동완성 기능 짱짱...!!
타입스크립트를 공부하면서 인상깊었던 부분.
"연구진은 실험군으로 설정한 자바스크립트 코드의 버그 중 약 15% 정도는 정적 타입 시스템이 있었다면 커밋조차 되기 전에 잡혔을 것이라 결론짓는다. 실사용자가 맞닥뜨리는 버그 중 15%를 사전에 예방할 수 있다는 인상적인 결과에 Microsoft의 한 엔지니어링 매니저는 다음과 같이 반응했다 한다."
Reference: “To Type or Not to Type: Quantifying Detectable Bugs in JavaScript”
지금은.. 취업이 급하니까... 나중에 시간을 내서 읽어 볼 것이다.
시간이 나시면 읽어보시라...!
Redux-saga (typesafe-action)
Redux-saga 또한 배우는데 너무 너무 힘들었다... 애초에 Redux 또한 몰랐으니 이걸 왜 배워야하는지 몰랐던것이 이해하는데 크게 어려움을 주었던것같다. 배우고 난 뒤엔, 전에 React만 사용했을때, props 를 passing 해주는데 타고 타고 또 타고 했던 기억이 나는데, Redux를 사용하면서 "아... 상태관리에 힘을 크게 들이지 않아도 Store 에 저장이 되니까 쉽게 Props를 넘겨주는구나..!" 깨달음을 얻었다. 물론 그 외의 장점도 많긴하지만 내가 크게 느낀것은 패싱을 안해줘도 된다는것이였다. 만약, Typescript와 React만 썼었더라면.... ㅗㅜㅑ... 너무 끔찍하다. props 를 넘겨줄때마다 interface를 매번 써줘야한다니... 끔찍하다....
그런데, 단순 타입스크립트와 리덕스사가 "만" 쓴다면 코드의 길이와 복잡도가.... 엄청 길고 클것이다. 그래서 찾아본 결과, Typesafe-action 이라는 좋은 미들웨어가 있었다.
근데 그게 무엇...?!
According to "Typesafe-action", "Typesafe utilities designed to reduce types verbosity and complexity in Redux Architecture."
"리덕스의 긴 코드와 복잡함을 줄여주는데 초점을 맞춘 리덕스 아키텍쳐"
기존의 typescript 와 리덕스 사가를 사용할때 코드를 엄청~~~ 나게 길게 써야한다는 단점이 있었다. 이러한 불편한 부분을 획기적으로 줄여주고 복잡함을 줄여줌으로서 코드 가독성을 좋게 만들어준다.
typesafe-action 을 쓰면서 단순 redux-saga를 쓸때와 쓰지 않았을때의 코드 길이의 차이는... 너무나도 컸다. 처음 써보시는분들은, 러닝커브가 있으니 신중하게 코드를 보는게 중요한 것 같습니다.
아쉬웠던점,
기획에 들어가면서, 프론트엔드를 경험해보지 않았음 에서 오는 무지함 덕분에 기획을 어떠한 부분이 걸림돌이 되는지 알수없었다. 덕분에 프로젝트를 진행하면서 만들어놓은 Redux-saga business logic 을 다 사용할수가 없었고 기획한 의도 에 맞게 되는것이 없었다. 그리하여 퍼포먼스 부분에서 많은 아쉬움을 남긴 프로젝트였다. 뭐... 프로젝트를 진행함에 있어, 느낀것도 많고 보완해야할 부분을 찾았으니 앞으로 더 나아질수있을것이라고 믿는다.
Conclusion
4주간의 긴 여정이 끝나고, 프로젝트 이전과 이후의 난, 조금 더 성장한 느낌이 들었다. 인간적으로 또 개발자로서. 코드스테이츠를 시작할때까지만 해도 코드한번 못써본 사람이였는데, 어찌저지 여기까지 왔으니.. 코딩에 대한 지식과 동기부여가 되는 사람들과 꾸준히 연락하는것만으로도 큰 성과를 이뤄냈다고 생각한다.
여튼, 파이널 프로젝트 덕분에 커뮤니케이션, 겸손함, 다양한 의견에 대한 존중의 중요함을 다시 한번 느꼈다. 프로그래밍에 대한 지식이 상대적으로 짧은데도 불구하고, 믿고 진행해주신 희석님과 재원님의 무한한 겸손함과 존중에 대해 감사함을 느낀다. 더욱 더 발전하는 모습으로 보답 드리겠습니다.
