4주란 시간동안 하나의 프로젝트에 헌신하면서 힘들지만 많이 성장한 느낌을 받은 프로젝트였다. 문서화 작업이나 깃 플로우 활용 등 지난 프로젝트에서의 다양한 경험 덕분에 이번 프로젝트는 개발에 좀더 집중 수 있었고, 타입 스크립트를 활용한 정적 타이핑 및 커스텀 훅을 통한 모듈화 등 프론트엔드 개발 경험의 폭을 넓힐 수 있었던 좋은 프로젝트였다.
🐦 모두의 이력서
모두의 이력서는 브라우저를 통해 누구나 손쉽고 빠르게 이력서를 작성 할 수 있는 서비스이다.
서비스 자체에서 양식을 제공해주고, 사용자는 그 폼을 알맞게 채워 넣기만하면 해당 내용을 바탕으로 깔끔한 PDF 이력서를 제공해준다. 이력서 작성은 비회원 또한 이용할 수 있으며 소셜 계정을 통해 가입을 한 유저는 여러개의 이력서를 관리할 수 있게끔 만들어졌다.
Stack chart ⚙️
프론트단은 리액트를 통한 뷰 개발 및 타입스크립트를 이용한 정적타이핑과 Redux와 Redux-saga 미들웨어를 이용한 상태관리를 진행했으며, 백단은 노드js Express프레임 워크를 이용해 서버 개발을 진행했고, 서비스 특성을 고려하여 MongoDB로 데이터베이스를 구축했다.
또한 배포 시 서비스의 Https 프로토콜 사용을 위해 클라이언트, 서버 둘다 도메인 발급 후 Route53을 통해 연결해준 후 SSl인증서를 발급받은 후 S3 정적 웹호스팅 및 EC2를 이용해서 배포를 진행했다.
Design pattern (Client)
이 부분은 프로젝트에서 프론트엔드 포지션을 맡은 만큼 아쉬움이 많았던 부분이다.
클라이언트 개발 시 presentational and container components(리액트 디자인 패턴) 패턴을 사용하여 개발했고, 컨테이너단이 여러 함수들과 상태관리 로직들로 번잡해질것을 고려하여 커스텀 훅을 활용하여 모듈화를 진행했는데, 지금 돌이켜 생각해보면 커스텀 훅이란 강력한 무기가 있는데 굳이 컨테이너와 컴포넌트로 나눌 필요가 있었나 싶다. 물론 협업 시 데이터 흐름 추적에 대한 장점은 존재하지만 결국 컨테이너 단에서 하위 요소들로 Prop를 내려주는 방식이기에 프로젝트의 Depth가 깊어질 수 록 이 작업들이 번거롭다고 느꼈다.
또한 프로젝트가 진행되면서 반복되는 요소들이 생겨나고 기존 컴포넌트의 일부 요소로 충분히 재활용할 수 있었던 부분이 종종 보였는데, 컴포넌트 자체의 재활용을 고려하지못한채 개발을 시작했던 탓에 불필요한 코드들이 많이 생겼었다. 이는 유명한 리액트 디자인 패턴인 아토믹 패턴을 도입 했다면 좀더 개선할 수 있었던 부분이었겠지만, 러닝커브와 필요성에 확신이 없었던 탓에 도입을 주저했었다. 이는 사이드 프로젝트에서 사용해보면서 공부해야겠다고 생각했다.
State management (Redux)
-개인 기술 발표때 사용했던 PPT 썸네일이다 💁🏻-
상태관리 (Redux)와 관련된 로직은 모두 커스텀 훅으로 모듈화 시켰다. 확실히 각 기능들을 훅으로 묶어서 커스텀 훅으로 관리하고 필요한 곳에서 가져다 쓰는 방식이 참 효율적으로 느껴졌다.
위처럼 각 기능의 하위 기능들로 구성된 함수들을 커스텀 훅으로 만들어주니 재활용성 과 가독성 모두 잡을 수 있었고, 굉장히 효율적이라 느꼈다.
또한 기존에는 Duck패턴을 통해서 하나의 파일안에 액션 생성 함수, 사가, 리듀서를 모두 모아놨었지만, 타입 스크립트를 사용했기 때문에 타입들을 모아둔 types파일을 따로 만들어줬어야했고, 추후 가독성을 위해 위처럼 (actions, reducers, types, sagas) 각 역활에 맞게끔 로직을 분리시켜줬다.
Retrospect 🤔
.jpg)
개발을 진행하면서도, 개발을 마쳤을때도 아쉬움을 느꼈기에 많은 것을 배울 수 있었던 프로젝트 였다는 생각이 든다. 이번 프로젝트에선 개선하진 못했지만 무엇을 개선해야할 지 확실히 알 수 있었던 프로젝트 였기 때문이다. 물론 처음부터 완벽했다면 좋았겠지만, 이번 프로젝트 처럼 실수를 몸소 느껴보고 이를통해 개선점을 찾아나가고 성장해나가는게 개발의 묘미가 아닐까 싶다😄
