| 개발 언어 |
TypeScript |
JS 대신 TS를 고르게 된 이유는 JS는 동적 타입 언어의 특성 상 변수의 타입이 고정되지 않아서 타입을 명시하지 않아도 연산하는 시점에 타입을 확인하고 암묵적으로 변환이 되어 의도치 않은 결과를 만들어 낼 수 있다. 하지만 개발하려는 서비스 특성 상 이미지 파일, 문자열, 숫자 등 다양한 값을 API로 주고 받고, 여러 연산이 들어갈 예정이다. TS를 통해 타입 명시와 타입 추론을 활용하여 실행 시 발생하는 오류들을 개발/빌드 단계에서 조기에 발견하고자 한다. 추가적으로 타입을 명시하게 되면 구조를 빠르게 이해할 수 있게 되어 문서와 같은 역할을 하기 때문에 전체 구현을 확인하지 않아도 코드를 빠르게 이해하고 수정할 수 있게 하기 위해 TS를 고르게 되었다. |
JavaScript |
| UI 기술 |
Next.js |
Next.js를 선택했다. 첫 번째로 React 기반의 프레임워크이기 때문에 React 기반 컴포넌트 구조를 유지하면서, 서버의 컴포넌트와 함께 사용이 가능하기 때문. 서비스 특성상 물품 카드나 거래 상태 칸 등 재사용해야 하는 UI가 많은 것은 공통 컴포넌트로 구성하고 초기 데이터 조회는 서버의 컴포넌트에서 할 수 있기 때문. 두 번째로, Next를 BFF로 사용 할 수 있기 때문이다. BFF는 프론트엔드에서 사용하기 편한 프론트엔드와 백엔드 사이의 중간 서버를 의미 하는데, 현재 서비스에서 통신을 해야 하는 서비스가 백엔드와 AI쪽이라 여러 서버에서 값을 가져와 데이터를 조합해야 하기 때문에 중간 계층이 필요하다. (채팅방에서 물건 정보와 AI쪽 추천 응답 표시) 세 번째로, Next를 통해 사용자별로 다른 초기 화면을 서버에서 한 번에 제공할 수 있다. 메인 화면이 그룹 가입 여부에 따라 구성이 달라지는데, 기존의 React였다면 먼저 빈 화면을 보여주거나 빈 뼈대를 보여준 다음, API응답이 오고 나서 화면을 만들고 재렌더링 해야 전체적인 화면을 볼 수 있었지만 SSR을 사용한다면 불필요한 깜빡임 없이 한 번에 완성된 화면을 보여줄 수 있어 사용자 경험에서 이점을 가져갈 수 있다. |
Next.js |
| 상태 관리 |
React 내장 기능 + Zustand |
상태관리로는 React 내장기능과 Zustand를 사용한다. useState와 useReducer를 사용해서 상태관리를 진행하고 useEffect는 API 또는, 웹소켓을 사용할 때, 그리고 useContext는 여러 컴포넌트가 공유해야 하는 데이터들을 context로 제공된 상태를 읽기 때문에 상태관리에서는 외부 라이브러리를 사용할 필요 없이 react에서 제공된 기능들을 사용할 생각이다. 같은 비교군으로 Zustand와 Redux Toolkit를 검토했다. 두 도구 모두 React 바깥에서 상태를 보관하고 필요한 부분을 구독할 수 있는 저장소 역할을 하지만 Redux는 상태 변경 흐름까지 저장한다는 차이가 있다. 두 도구다 전역 상태를 관리해서 여러 컴포넌트가 하나의 데이터를 공유하는 상황에서 이점이 있지만, 상태 변경 흐름까지는 필요하지 않아 Zustand를 선택하게 되었다. |
Zustand |
| 서버 상태 관리 |
Tanstack Query(React Query) |
서버 상태 관리로는 Tanstack Query를 사용할 예정이다. 서버/DB를 원본으로 하는 데이터를 많이 활용하는 서비스이고, 동일한 데이터를 여러 화면에서 조회하고 변경한다. React 내장기능인 useState와 useEffect를 사용해서 충분히 직접 구현으로 해결을 할 수는 있지만, 데이터 변경에 따라 동일한 코드를 중복해서 작성해야 한다는 문제가 있다. 하지만 Tanstack Query는 캐싱/재시도/중복 요청 방지/캐시 무효화 및 재조회 기능을 제공한다. 따라서 해당 라이브러리를 도입했을 때 코드의 가독성이나 중복되는 코드들을 줄이는 등, 코드 자체의 일관성과 유지보수성을 높일 수 있다. 따라서 라이브러리 학습과 도입하는 비용에 비해 이점이 더 크다고 생각되어 넣는 것이 좋다고 판단했다. |
React 내장 기능 |
| 라우팅 |
Next.js App Router |
라우팅은 Next에서 기본으로 제공하는 라우터를 선택했다. 기본으로 주어지는 기능이 기존에 선택한 Tanstack Router와 겹쳐서 추가하지 않고 기본으로 주어지는 기능을 사용하기로 했다. |
React- Router |
| 빌드 도구 |
Next.js |
Next.js 자체에서 React가 돌아갈 수 있는 환경을 제공해주기 때문에 별도의 빌드 도구가 필요 없다. |
|