스터디를 모집하는 과정에서 모집 후 카카오톡으로 이동하는등 불필요한 이동이 많고 스터디를 진행할 위치를 찾는 과정이 조율이 잘 되지않는 점을 착안해 서비스를 기획하게 되었습니다.
| 사용 기술 | 기술을 도입한 이유 |
|---|---|
| BACK-END | |
| jenkins | 프론트와 연결중에 배포과정이 너무 길어져 CI/CD파이프라인을 구성해야겠다고 생각하였고 github action과 jenkins 사이에서 고민을 하였다. 속도는 github action이 jenkins free tier보다 빠르고 구현도 쉽다고 되어 있었지만 github action은 실무에서 사용하는 곳이 거의 없다 라고 하여 jenkins를 선택하게 되었다. |
| amazon RDS - | |
| [MySql] | Rdbms를 사용하기로 결정하였고, 주어진 자본과 시간이 별로 없으므로 최대한 적은 금액의 시스템을 찾으려 했다. 그중에서 자동으로 설정을 해주고 가장 익숙한 Amzon RDS를 선택하였다. |
| redis | JWT토큰을 사용하는 도중 redis가 자동으로 토큰을 만료시킬 수 있다는 장점에 사용을 하였고, socket 통신을 사용하는중 message broker역할 또한 같이 할 수 있기에 선택하였다. |
| Oauth 2.0 | 로그인을 하는 과정에서 서비스 자체에서 회원가입을 따로 받는다면 개인정보보호법에 의하여 동의를 받는 과정이 필요하다. 이러한 추가적인 과정을 줄일 수 있음과 동시에 따로 client의 정보를 자체 서비스의 DB에 저장한다면 단점이 없고 장점만 있어 선택하게 되었다. |
| docker | 배포를 하는 과정에서 다른 사람의 EC2를 이용하거나, 새로 EC2를 생성하는 과정에 있어 서비스에 맞는 설정을 해주는 것이 docker를 사용하면 편리하다고 판단되어 선택하였다. |
| cloud front | 이미지가 데이터가 크기 때문에 받아오는 시간이 오래걸린다고 생각하였고, 그에 대해 알아보던 중 cloud front라는 서비스가 있고 이것이 content를 빠르게 전송할 수 있다고 하여 도입하게 되었다 또한 S3중간의 gateway 역할을 하여 보안성을 올려줄 수 있다고 한다. |
| nginx | Https를 구축하던 도중 추후에 load valencing을 할 가능성이 있어 web server인 nginx를 도입하게 되었다. |
| FRONT-END | |
| TypeScript | TypeScript를 채택한 이유는, 코드 작정 단계에서 사전에 타입을 체크해서 오류를 확인할 수 있기때문에, 실행속도가 매우 빠르기 때문입니다. 사전에 타입을 결정해야 하기때문에 번거롭고 코드량이 증가하지만, 버그 제거에 높은 효율을 보이기 때문에 채택하였습니다. |
| React | JavaScript 라이브러리로, 컴포넌트 기반의 단위로 화면을 관리할 수 있으며, 효율적으로 화면을 구성할 수 있기 때문에, 리액트를 선택했습니다. 우리가 정한 서비스는 빈번한 데이터 통신이 일어나고, 변경되는 데이터를 화면에 반영해야 합니다. 따라서 새롭게 갱신되는 부분만 렌더링 되어 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 가지는 SPA 로 개발하는것이 필수적이라 판단하였습니다. |
| Redux Toolkit | 개발 생산성을 높이기 위해서, 전역적으로 상태를 관리하는 저장소인 Redux를 사용하였습니다. 그러나 보일러플레이트와 추가로 설치해야할 라이브러리가 많습니다. Redux Toolkit 은 Redux에서 만든 공식적인 라이브러리로, 전역상태관리를 효율적으로 관리하기 위한 모든 것을 지원하는 대신, Redux의 단점을 보완하였기에 채택하였습니다. |
| RTK Query | RTK Query 는 Redux Toolkit 패키지에 선택적으로 포함되어 있습니다. 이미 Redux Toolkit을 사용하고 있기때문에 채택하였습니다. RTK Query는 데이터 Fetching 과 Caching 로직을 단순화 하였기 때문에, 훨씬 적은 양의 코드로 처리하여 상태관리를 할 수 있습니다. 또한 Redux DevTools을 이용하여 상태의 히스토리변화를 볼 수 있기때문에 채택하였습니다. |
| PWA | 우리가 제공하는 웹서비스를 모바일에서도 가능하게 하기 위해서 채택하였습니다. 특히, 사용자가 별도의 다운로드와 설치과정 없이 URL 접속 후, 필요하다면 바탕화면에 앱 아이콘을 추가할수도 있고, 언제든지 빠르게 접속 가능하기 때문입니다. |
| Styled-Components | 컴포넌트에 직접 스타일을 선언할 수 있는 CSS-in-JS 라이브러리로, 파일의 복잡성을 줄이고, 유동적으로 props를 지정하여 컴포넌트에 사용 가능하기때문에 채택하였습니다. |