| [FE] |
TypeScript |
javascript를 기반으로 React를 사용하였지만, 팀원과의 협의 끝에 typescript를 도입하자 결정하였고, 프로젝트 중간에 migration을 완료하였습니다. |
| 프로젝트 기간 중 타입스크립트를 공부해야하는 리스크가 있지만, 협업에 있어서 코드의 목적을 명시하고 사전에 오류를 방지할 수 있다는 점에서 굉장히 이점이 있을 거라고 생각하였습니다. |
|
|
| [FE] |
tailwind CSS |
무난하게 styled-components를 사용할까 했지만, 요즘 뜨고 있는 tailwind CSS에 눈을 돌리게 되었습니다. 테일윈드 또한 약간의 러닝커브가 있지만, 익숙해지면 어떤 방식보다 편하게 코드를 작성하게 될 수 있을거라 생각하였고, 어떤식으로 생산적인 클래스를 생성할지, 클래스명을 지을지 고민하는 시간도 줄거라 생각해서 도입하게 되었습니다. |
| [FE] |
Redux |
상태 관리는 Redux 를 사용하였습니다. 요즘 뜨고 있는 zustand , Recoil , React-query 등을 공부해서 진행을 할까 했지만, 아직까지는 다양한 패턴에 대한 예시가 부족하다고 생각이 들었습니다. 공식문서에서도 권장하는 Redux-toolkit 을 사용하여, 과도한 코드량을 줄였습니다. |
| [FE] |
PWA |
초기 기획 자체를 모바일 친화적으로 잡았고, PWA 를 이용하여 사용자들에게 더욱 친숙한 경험을 주기위해 도입하게 되었습니다. |
| [BE] |
Redis |
로그인 프로세스에서 JWT 토큰 인증시 토큰의 유효기간을 지속적으로 확인해야하는데 Redis에서 유효기간을 알아서 체크하고 만료시켜주는 기능이 있어서 도입하였습니다. |
| [BE] |
Nginx |
서버로 HTTP 통신 요청이 될 경우 HTTPS 주소로 Redirect 해주는 방식으로 HTTPS 통신으로 한정하기 위해 도입하였으며, 차후 서비스의 Scale out을 진행할 시 로드밸런서 역할 수행이 가능합니다. |
| 공통 |
github actions |
서로 다른 포지션의 팀원들과 즉각적인 소통을 위해 배포 자동화를 구현하였습니다. |
| [FE] 프론트에서는 AWS S3, Route53, CloudFront를 활용하여 배포하였습니다. |
|
|
| [BE] S3, CodeDeploy 사용하였습니다. |
|
|
.png)
.png)
_%EC%98%A4%ED%9B%84_1_44_51.png)