프론트엔드 개발인력 모두 익숙한 툴인 React를 선택하였습니다. ErrorBoundary를 적용하여 사용자 경험 개선을 위해 노력했습니다.

커뮤니티는 접근성이 좋아야 한다고 생각했고 기술 블로그와 같은 역할을 하기 때문에 SEO 최적화가 반드시 필요하다고 판단하여 React기반의 SEO를 최적화 할 수 있는 Next를 선택했습니다.

이전까지 JavaScript만으로 개발했지만 트렌드의 변환에 맞춰 TypeScript를 배우면서 적용하고자 도입하였습니다. 코드 작성시 타입을 명시함으로써 실수가 줄어들고 협업과정에서 코드를 확인하기 편하다는 것을 깨닫게 됐습니다.

초기 디자이너가 없이 프로젝트를 시작했기 때문에 간편하게 스타일링 할 수 있는 TailwindCSS를 선택했습니다. 현재는 디자이너가 추가되어 TailwindCSS 설정 및 확장으로 변경하여 스타일을 적용 중 입니다.

UI 컴포넌트들을 테스팅하고 협업하여 만들어진 컴포넌트를 관리하고 알아보기 편하게 하기 위해 사용했습니다.

Light House를 통해 웹 사이트의 성능을 측정하고 더 나은 사용자 경험을 만들어 갔습니다.

에디터 기능을 개발하던 중 이미지 리사이즈가 필요했지만 적합한 라이브러리를 찾지 못해 Tiptap 확장을 직접 구현했습니다. 재사용성을 고려해 npm에 오픈소스로 공개했고, 현재 누적 다운로드 100,000회를 넘어서며 다른 개발자들에게도 활용되고 있습니다.

커뮤니티 특성상 SEO와 빠른 초기 렌더링이 중요했기에 SSR을 도입했고, 서버 사이드에서 사용자 토큰을 유지하며 인증 상태를 처리하도록 구현했습니다.

멘토링 시스템에 필요한 실시간 소통을 위해 SockJS와 STOMP를 활용해 웹 채팅을 구현했습니다.