프론트 기술 스펙 선택 이유

React

• React는 컴포넌트 기반으로 설계되어 UI를 보다 효율적으로 관리할 수 있습니다. 특히, 상태(state) 기반 렌더링을 통해 실시간 데이터 업데이트를 직관적이고 간단하게 처리할 수 있습니다. 웹소켓이나 SSE(Server-Sent Events) 같은 실시간 통신 기술과 결합하면, 상태 관리 기능을 활용해 메시지 수신을 즉각적으로 UI에 반영할 수 있다는 장점이 있습니다.
• SEO 측면에서 Next.js도 고려했으나, Next.js의 SSR(서버사이드 렌더링)은 실시간 채팅처럼 클라이언트 중심의 상호작용이 많은 프로젝트에는 적합하지 않다고 판단했습니다. React의 CSR(클라이언트 사이드 렌더링)을 통해 서버 자원 부담을 줄이고, 실시간 채팅과 같은 기능을 최적화할 수 있다는 점에서 더 적합하다고 결론 내렸습니다.

TypeScript

• 정적 언어인 TypeScript를 사용하여 컴파일 시 잠재적 오류를 사전에 파악하고 수정할 수 있습니다. 이를 통해 런타임 오류를 방지하고, 코드의 안정성을 높이며, 협업 시 코드의 가독성과 유지 보수성을 높일 수 있습니다.

React-Query & Axios (서버 상태관리)

• React-Query는 서버 상태를 효율적으로 관리할 수 있는 라이브러리로, 데이터 패칭 시 자동 리페치, 캐싱, 오류 처리 등을 제공하여 서버 요청을 최적화 할 수 있습니다. Axios는 HTTP 요청을 관리하는 라이브러리로, React-Query와 함께 사용하여 서버와 원활하게 데이터를 주고받을 수 있도록 돕습니다. 가령, 모임 게시판에서 게시글 목록과 상세 정보를 가져오거나, 신청/취소 등의 요청을 처리할 때 서버 데이터를 효율적으로 관리할 수 있습니다.

Recoil(컴포넌트 상태관리)

• Redux에 비해 코드가 간결하며, zustand보다 복잡한 상태 관리에 용이하다고 생각하였습니다. 가령, 사용자 정보와 채팅, 모임 게시글, 참가 신청 등 다양한 상태들은 서로 의존성을 가질 수 있으며, Recoil은 이러한 상태 간 의존성을 관리를 통해 복잡한 상태들을 관리할 수 있습니다.

TailwindCSS

• 유틸리티-first CSS 프레임워크로, 직관적인 클래스 사용을 통해 빠른 개발 속도를 보장합니다. 이를 통해 효율적인 협업 환경을 만들어, 팀원들간 일관된 스타일을 유지하면서도 빠르게 기능을 구현할 수 있습니다. 또, 유틸리티 클래스를 사용한 스타일링은 코드의 재사용성을 높이고, 코드의 가독성을 향상시킬 수 있습니다. 더불어 스타일 충돌을 방지하며, 복잡한 CSS 작성 없이 필요한 스타일을 즉시 적용할 수 있어 개발의 효율성을 극대화할 수 있습니다.

Vite

• Webpack은 생태계가 넓고 여전히 강력한 도구이지만, 구현 기간이 짧은 우리 프로젝트에서는 개발 속도와 간편한 설정이 중요한 고려 사항이었습니다. Vite는 초기 서버 실행 속도가 매우 빠르며, 변경된 파일만 즉시 갱신하는 효율적인 HMR을 제공하여 개발 생산성을 극대화할 수 있습니다. 또한, 설정이 간단하고 직관적이어서 프로젝트 초기 셋업 시간을 줄이고, 주요 개발 작업에 집중할 수 있습니다. 이와 같은 이유로, 짧은 시간 내에 높은 생산성을 요구하는 이번 프로젝트에서 Vite가 가장 적합한 도구라고 판단했습니다.

백엔드 기술 스펙 선택 이유

• Spring Boot: 다양한 라이브러리 제공 및 자동 설정을 통해 신속한 RESTful API를 개발하는 데 용이합니다.
• Spring Security(JWT): 안전한 인증 및 인가 기능을 제공하며, JWT를 사용하여 인증 구현이 용이합니다.
• JPA/Hibernate: 객체 관계 매핑으로 개발의 생상성 향상과 복잡한 쿼리를 효율적으로 처리하여 데이터베이스와의 상호작용을 최적화합니다.