기술 선택의 이유

공통 개발 스택

Typescript

• 정적 타이핑을 명시를 통해 협업에 용이합니다.
• 또한 컴파일 시점에 Type에 대한 체크를 진행하여 런타임 이전의 논리적인 오류를 확인 할 수 있습니다.
• TypeScript에서 알려주는 여러가지 정보를 IDE와 연결하여 개발을 좀더 편리하게 진행 할 수 있습니다.

Docker

• 배포 환경과 개발 환경을 통합해 배포 단계에서의 변수 차단하고 싶었습니다.
• 클라이언트와 서버 이미지를 container registry에서 관리하여 언제든지 롤백할 수 있도록 구성하기 위해 Docker를 사용했습니다.

Nginx

• SSL/TLS 연결을 NGINX에게 위임해 서버의 부하를 줄이고자 했습니다. (SSL Termination)
• 정적파일 캐싱을 통해 프론트 서버의 부하를 줄이고자 했습니다.

Github Actions

• 배포 자동화를 통해 수동적으로 배포를 진행할 때의 생기는 실수들을 차단할 수 있고, 시간을 절약할 수 있습니다.
• 배포 자동화의 기록이 남아있어 새로운 멤버가 합류했을 때 생기는 비용을 줄일 수 있기 때문에 프로젝트의 미래를 생각했을 때 중요한 작업이라고 생각했습니다.
• 별도의 설정없이 바로 사용 가능합니다.
• github marketplace에서 활용할 수 있는 툴이 다수 존재하기 때문에 CI/CD가 더 수월할 것이라고 생각했습니다.

프론트엔드 개발 스택

React

• DOM 업데이트 관련 로직을 라이브러리에 위임하여, 서비스 로직 구현에 집중하고자 했습니다.
• 다른 라이브러리에 비하여 컴포넌트 단위로 개발하기 용이하고 이를 통해 코드의 재사용성을 높일 수 있습니다.

NextJS

• SSR와 CSR을 상황에 맞게 조합하여 효율적인 렌더링 성능을 만들어내고자 했습니다.
• 라우팅, 코드 스플리팅 등을 기본으로 제공하여 CRA에 비해 더 높은 개발 생산성을 보장합니다.

React

Query

• “커뮤니티” 서비스 특성 상 서버 상태의 실시간 반영 및 효율적 관리가 필요하다고 생각했습니다.
• 그 과정에서 필요한 부가적인 로직들을, 리액트 쿼리의 api와 인터페이스를 이용해 선언적으로 구현하고자 했습니다.

Emotion

• css-in-js 방식을 사용하면 JS 변수를 공유하여 동적인 스타일링에 용이합니다.
• Styled-components에 비하여 별다른 설정 없이도 SSR 환경에서 사용하기 용이합니다.

Mantine

• 기본적인 UI 로직이 구현되어 있어 UI 대신 핵심 로직 개발에 집중하고 생산성 높은 개발을 가능하게 했습니다.
• 다른 UI 라이브러리에 비해 트렌디한 디자인이 적용되어 있습니다.

Storybook

• 컴포넌트를 문서화함으로써 협업 시 소통 비용을 낮출 수 있을 것이라 생각했습니다.
• 공통 컴포넌트 생성 시, 코드 상의 수정 없이 변수에 대한 UI 테스트가 가능합니다.

백엔드 개발 스택