![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3b1d6bbf-e6b7-43fb-9dc0-03bca022f3ef/Untitled.png)
기술 선택의 이유
공통 개발 스택
![Typescript_logo_2020.svg.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b323dc62-768e-4482-957a-1ed39e814b01/Typescript_logo_2020.svg.png)
Typescript
- 정적 타이핑을 명시를 통해 협업에 용이합니다.
- 또한 컴파일 시점에 Type에 대한 체크를 진행하여 런타임 이전의 논리적인 오류를 확인 할 수 있습니다.
- TypeScript에서 알려주는 여러가지 정보를 IDE와 연결하여 개발을 좀더 편리하게 진행 할 수 있습니다.
![https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566913282/noticon/xyzfawahazvkwiyje7it.png](https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566913282/noticon/xyzfawahazvkwiyje7it.png)
Docker
- 배포 환경과 개발 환경을 통합해 배포 단계에서의 변수 차단하고 싶었습니다.
- 클라이언트와 서버 이미지를 container registry에서 관리하여 언제든지 롤백할 수 있도록 구성하기 위해 Docker를 사용했습니다.
![Typescript_logo_2020.svg.png](https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566798146/noticon/lku5cppzh8r7awwsmmko.png)
Nginx
- SSL/TLS 연결을 NGINX에게 위임해 서버의 부하를 줄이고자 했습니다. (SSL Termination)
- 정적파일 캐싱을 통해 프론트 서버의 부하를 줄이고자 했습니다.
![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7a325e83-cd83-432a-9f32-2a3b308bcfc0/Untitled.png)
Github Actions
- 배포 자동화를 통해 수동적으로 배포를 진행할 때의 생기는 실수들을 차단할 수 있고, 시간을 절약할 수 있습니다.
- 배포 자동화의 기록이 남아있어 새로운 멤버가 합류했을 때 생기는 비용을 줄일 수 있기 때문에 프로젝트의 미래를 생각했을 때 중요한 작업이라고 생각했습니다.
- 별도의 설정없이 바로 사용 가능합니다.
- github marketplace에서 활용할 수 있는 툴이 다수 존재하기 때문에 CI/CD가 더 수월할 것이라고 생각했습니다.
프론트엔드 개발 스택
![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2e0c67d9-0a91-47d8-ab0a-cfe6d2609063/Untitled.png)
React
- DOM 업데이트 관련 로직을 라이브러리에 위임하여, 서비스 로직 구현에 집중하고자 했습니다.
- 다른 라이브러리에 비하여 컴포넌트 단위로 개발하기 용이하고 이를 통해 코드의 재사용성을 높일 수 있습니다.
![fvty9lnsbjol5lq9u3by.svg](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d750cfb7-b00a-4a9e-af68-3f4ef872a66d/fvty9lnsbjol5lq9u3by.svg)
NextJS
- SSR와 CSR을 상황에 맞게 조합하여 효율적인 렌더링 성능을 만들어내고자 했습니다.
- 라우팅, 코드 스플리팅 등을 기본으로 제공하여 CRA에 비해 더 높은 개발 생산성을 보장합니다.
![emotion.png](https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1631622784/noticon/zwush4y3u0mgamlck9bq.png)
React
Query
- “커뮤니티” 서비스 특성 상 서버 상태의 실시간 반영 및 효율적 관리가 필요하다고 생각했습니다.
- 그 과정에서 필요한 부가적인 로직들을, 리액트 쿼리의 api와 인터페이스를 이용해 선언적으로 구현하고자 했습니다.
![emotion.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/57bb785c-6fcf-462a-b564-074452cb364d/emotion.png)
Emotion
css-in-js
방식을 사용하면 JS 변수를 공유하여 동적인 스타일링에 용이합니다.
Styled-components
에 비하여 별다른 설정 없이도 SSR 환경에서 사용하기 용이합니다.
![mantine-logo.svg](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/75447bc6-3790-4e57-a496-a4eeb476d4fc/mantine-logo.svg)
Mantine
- 기본적인 UI 로직이 구현되어 있어 UI 대신 핵심 로직 개발에 집중하고 생산성 높은 개발을 가능하게 했습니다.
- 다른 UI 라이브러리에 비해 트렌디한 디자인이 적용되어 있습니다.
![emotion.png](https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566952480/noticon/fyec5eye4l6hyxlpfxze.png)
Storybook
- 컴포넌트를 문서화함으로써 협업 시 소통 비용을 낮출 수 있을 것이라 생각했습니다.
- 공통 컴포넌트 생성 시, 코드 상의 수정 없이 변수에 대한 UI 테스트가 가능합니다.
백엔드 개발 스택