Dos and Don’ts

Dos Don’ts
MVP에 들어갈 스펙을 설정할 때 유저플로우를 따라 우선 순위를 설정하여 작성하세요.
마감 기한을 설정하는 것 또한 중요합니다.
MVP 구현 범위를 설정하고, 추가 기능은 명확하게 작성해두세요. 가늠하지 않습니다. 명세로 직접 확인합니다 “이렇게 저렇게 구현하면 되겠지?” 와 같은 생각은 금물입니다. 명세를 작성해보고, 명세가 쉽게 나오지 않는다면 구현 가능성을 재고해봅니다.
우리는 한 팀!
팀원들의 능력을 서로 배려하고 고려하여 개발환경 및 스코프를 설정해주세요.

1. MVP에 들어갈 스펙

팀 공통 Git, AWS CI/CD파이프라인 구축
FE React(Vite), axios, Tanstack Query, Typescript, RTK/zustand, Styled-components, react-hook-form, react-router-dom
BE Java17, Spring Boot, JWT, MariaDB, Swagger, OAuth2.0, Spring data JPA, Spring Security

FE기술 선정 이유

기술명 선정이유
Vite Vite는 React앱을 개발하기 위한 빌드도구로서, ES모듈을 통한 빠른 bundling, 빠른 HMR, Rollup을 통한 최적화된 프로덕션 빌드를 제공합니다.
옛 CRA는 deprecated되어 React공식에서도 추천하지 않는 방식이며, node_modules의 용량이 크고, Webpack을 사용하기에 bundling의 속도가 느린 단점이 있습니다.
axios API서버와 통신하기 위한 선택지로는 fetch와 axios가 있습니다.
JS 내장 Fetch보다 Axios를 사용한 이유는 다음과 같습니다.
1. 자동 JSON변환 : Axios는 요청/응답 데이터를 JSON으로 자동변환해줍니다.
2. interceptor : Axios Interceptor기능을 통해, 요청/응답의 공통처리가 가능합니다.
3. 간결한 에러처리 : Fetch의 오류는 네트워크 장애만 처리해주기에, 3xx, 4xx오류를 별도처리하는 코드작성이 필요합니다. 하지만 Axios는 2xx범위 외의 http상태코드를 오류로 인식하기 때문에, 오류처리를 간결하게 작성할 수 있습니다.
Tanstack Query Tanstack Query는 서버와의 비동기 데이터를 관리하기 위한 라이브러리입니다.
1. 자동캐싱 : 서버에게 전달받은 데이터를 캐싱처리하기 때문에, 일정시간 동안 캐싱된 데이터를 사용하거나, 새로운 비동기데이터를 받아올 때까지 사용자에게 이전 데이터를 보여줌으로 UX를 향상시킬 수 있습니다.
2. React Suspense와의 궁합 : Suspense는 하위 컴포넌트의 Promise를 Catch하여 LoadingFallbackUI를 보여줍니다. Suspense를 활성화하기 위해서는 Promise를 Throw해주어야 하는데, useSuspenseQuery는 이를 가능하게 합니다. 이로써, 선언형 코드작성이 가능합니다.
3. 낙관적 업데이트 : setQueryData함수를 통해 서버의 변경사항을 UI에 미리 반영함으로써, 서버에서 새로운 데이터를 받아올 때까지의 기다림을 개선할 수 있습니다.
Zustand Zustand는 클라이언트 상태관리를 위한 라이브러리로써, 아래와 같은 특징으로 선택하게 되었습니다.
1. 가벼운 사이즈 : zustand는 Redux, Recoil에 비해 가벼운 파일사이즈를 가지고 있습니다. 이는 프로덕션의 빌드 사이즈를 줄일 수 있는 요소가 됩니다.
2. npm trends : redux, recoil, zustand 등 다양한 라이브러리 중 zustand의 사용량이 가파르게 떠오르고 있고, 업데이트 주기 또한 1달내외입니다. 이처럼, 업데이트 주기, 트렌드는 라이브러리의 선택에 중요하게 작용합니다.
3. 간결한 코드 : Provider설정이 필요없으며, use문법으로 함수형 프로그래밍에서 익숙한 코드작성이 가능합니다. 다만, 비즈니스 로직과 같이 복잡한 코드작성에는 어려움이 있어 Redux와 같이 많은 로직을 담을 수는 없지만, Tanstack Query로 서버데이터를 분리하기에 가벼운 클라이언트 상태관리 라이브러리를 선택했습니다.
Styled-Components 컴포넌트를 스타일링하기 위한 라이브러리로, Styled-components를 선택한 이유는 다음과 같습니다.
1. props의 전달로 유동적인 CSS : styled는 CSS in JS형태로, props를 전달받아 분기적인 CSS처리가 가능합니다.
2. element속성 사용 : tailwind로 스타일된 컴포넌트를 작성한다면, onClick과 같은 element의 속성을 사용하기 위해, props를 계속해서 추가해야 하는 번거로움이 있습니다. styled는 element의 속성을 유지하면서도 컴포넌트 스타일 작성이 가능합니다.
3. S-DOT패턴 : Styled-Components를 도입하면서, S. 으로 표기하는 컴포넌트 방법이 개발의 생산성이 좋았기 때문입니다. 컴포넌트를 import하기 위해서는 컴포넌트의 이름을 기억하고 있어야 하는데, S 선언만 해준다면 . 으로 컴포넌트의 이름을 유추할 수 있었습니다. (S.div.Styled)
react-hook-form form의 validation을 편리하게 조작하기 위해 react-hook-form을 도입했습니다.
AWS(Amplify) API서버가 AWS의 EC2로 배포되기에, 프론트 서버 또한 AWS에서 배포하는 것이 자원관리의 Contact 포인트를 줄이고, 프로젝트 관리의 효율성을 높인다고 생각했습니다.
그렇기에 Vercel같이 다른 서비스 대신 AWS를 선택하였고, 인프라 관리 대신 개발에 집중할 수 있도록 간편한 서버 설정, CI/CD기능, 자동 스케일링 기능을 제공해주는 Amplify를 선택했습니다.
마크다운 편집기 react-mde : 경량 번들 사이즈, 이미지 업로드 지원, 3년 전 지원이 마지막
toast-ui/editor : 1MB가량의 번들사이즈, 이미지 업로드 지원, 1년 전 지원이 마지막

결론 : toast-ui/editor, 국내 라이브러리이기에, 한글로 잘 설명이 되어 있고, 지속적인 관리, API/Example이 잘되어 있음 |

BE기술 선정 이유

기술명 선정이유
JWT 세션과 JWT 중에 보안 방법으로 JWT를 선정한 이유는 Stateless 상태에 대한 장점 때문입니다. 대량의 트래픽이 발생하더라도 수월한 대처를 할 수 있고 OAuth를 사용한 소셜 로그인을 지원하기 때문에 JWT를 선택하였습니다.
MariaDB MariaDB는 MySQL과 호환되는 오픈 소스 관계형 데이터베이스 관리 시스템으로, 높은 성능과 안정성을 제공하기 때문에 선택하였습니다.
Swagger Swagger는 RESTful API를 설계, 빌드, 문서화 및 테스트할 수 있게 해주는 도구로, API 명세서를 자동으로 생성해주기 때문에 프론트와의 협업 시, 휴먼 에러 발생을 줄여줍니다.
OAuth2.0 OAuth 2.0은 사용자가 자신의 자격 증명을 공유하지 않고도 제3자 어플리케이션을 통해 사용자 데이터를 안전하게 접근할 수 있도록 허용해줍니다. 민감한 정보를 직접 노출하지 않으면서 서비스 통합이 가능해지기 때문에 선택하였습니다.
Spring Data JPA Spring Data JPA는 JPA를 기반으로 추상화하여 만든 하이버네이트를 다룰 수 있게 해주기에 사용하였습니다.
Spring Security Spring Security는 기본 인증, OAuth, JWT 구현을 지원해주어 로그인을 구현하는데 있어 복잡한 보안 로직을 구현하지 않고도 안전한 어플리케이션을 만들 수 있게 도와주어 선택하였습니다.

2. MVP 목표

팀 공통 로그인, 회원가입, 게시글, 댓글
FE 인증화면분기처리, 커뮤니티 UI구현, 챌린지 UI구현
BE 게시판 CRUD, 댓글 CRUD, 좋아요 기능, S3 이미지 업로드 기능구현, SNS기능구현

3. 대시보드 작성