들어가며

부스트캠프에서 학습 스프린트가 끝나고 그룹 프로젝트를 진행하며 BooQuiz 프로젝트를 진행하며 기술 스택들을 선택하고 있습니다. 웹풀스택 과정이기에 모든 부분을 함께 진행하겠지만, 선호하는 분야를 기준으로 백엔드 4명과 프론트엔드 1명으로 이뤄져 있기 때문에 어떤 기술 스택을 써야 될 지에 대해서 이해도를 올리기 위해 문서를 작성하려 합니다.

다양한 기술 스택을 선택해야 되지만 가장 중요한 건 어떤 도구로 프론트엔드를 만들 것인가에 대한 부분이라고 생각합니다. react, vue, next.js 등 다양한 선택지가 있고 그에 따른 장단점이 있다고 생각합니다. 웹개발이라는 영역이 결국 모든 분야에 대해 어느 정도의 이해도를 가지고 있어야 된다고 생각하기 때문에 문서 만으로도 팀원분들이 “이걸 이래서 선택했구나”를 이해했으면 합니다. 그리고 동시에 그 이해를 바탕으로 팀원분들이 개발을 하실 떄 기반이 될 수 있다면 더 좋을 것 같습니다.

프론트엔드 기술 선택의 맥락

현재 프론트엔드 개발 생태계는 급격한 변화를 겪고 있습니다. 특히 React를 기반으로 한 Next.js의 성장세는 주목할 만한 현상입니다. Next.js는 SSR(Server-Side Rendering) 지원, 파일 시스템 기반 라우팅, 이미지 최적화 등 현대 웹 개발에 필요한 다양한 기능을 제공하며, 많은 기업과 개발자들이 채택하고 있습니다.

BooQuiz 프로젝트의 특성

BooQuiz는 실시간 대규모 퀴즈 플랫폼으로, 다음과 같은 특징을 가지고 있습니다:

• 동시에 300명 이상의 사용자가 참여하는 실시간 상호작용
• 퀴즈 진행 상황에 따른 즉각적인 UI 업데이트
• WebSocket을 통한 실시간 데이터 통신
• 사용자 경험을 최우선으로 하는 반응형 인터페이스

기술 선택의 고민

Next.js가 제공하는 장점들에도 불구하고, 본 프로젝트에서 React를 선택한 이유는 다음과 같습니다:

1. 프로젝트 요구사항 분석
   • 현재 단계에서 SSR의 필요성이 크지 않음
   • CSR만으로도 충분한 사용자 경험 제공 가능
   • WebSocket 기반 실시간 통신이 주요 기능
2. 학습 및 개발 목표
   • React의 핵심 개념과 내부 동작 방식에 대한 깊이 있는 이해
   • Custom Hook, Context API 등 React의 기본기 강화
   • 상태 관리와 성능 최적화에 대한 실질적 경험 획득
3. 팀의 현재 상황

• 부스트캠프 교육 과정의 특성을 고려
• 기본기를 탄탄히 하는 것이 장기적으로 더 유익하다는 팀의 공감대
• 저를 제외한 나머지 팀원분들의 리액트 경험 부재를 고려하여, 모두가 리액트로 개발을 하는 경험을 할 수 있도록 하자는 목표

React가 뭔데?