[TIL] Day 64 최종프로젝트 기술 스택 선정

2024.01.04 목

 

 

 

 

Service Architecture

프레임워크 : Next.js 14ver

React vs Next.js

Next.js를 채택한 이유

- SEO를 위한 SSR을 가능하게 함

 

Next.js 없이 SSR을 구현할 수 없을까?

React에서도 SSR페이지를 만들 수 있긴 하다. react-helmet등의 라이브러리로 SEO에 대응할 수 있다.
하지만 이미 진행된 React 프로젝트에서 갑자기 프레임워크를 도입하는 것이 리팩토링 등 꽤 비용이 드는 작업이기 때문에 다른 방법을 사용하는 편이다.

만약 프로젝트 시작 전 프레임워크를 도입할지 고민을 하고있다거나, 시간적 여유가 있다면 SSR을 처리하는 부분에 있어서는 바로 Next를 선택하는 것이 더 좋아 보인다.

Page vs App Router
Page Router를 채택한 이유

마이그레이션이 힘들기 때문에(에러가 많음) 다수의 회사에서 여전히 Page Router를 많이 쓰고 있다.

그리고 Page Router에 대한 문서및 정보가 App Router보다 많은 편이다. 그리고 안정성에 있어서도 App Router는 아직 불안정한 실험적인 기능들이 있다.

뭐든지 장단점이 있어보인다. 정답은 없다. App Router만의 장점이 존재하고 무엇보다 Next에서 내놓은 신기술이라는 것이다. 시간이 지나면 이제 App Router의 시대가 올 것이고, 이미 스타트업은 14버전의 App Router를 사용하고 있다.

지금 시기가 굉장히 애매한 과도기라고 생각한다. 그렇기 때문에 두가지의 방법을 모두 알고 있으면 큰 도움이 될 것이다.

이미 저번 프로젝트 때 App Router를 경험했기 때문에 이번에는 Page Router를 써보려고 한다.
            

언어 : Typescript

Javascript vs Typescript
Typescript 채택한 이유
- 자바스크립트를 쓸 때 생기는 버그 방지
- 코드의 안정성
- 배포 전, 런타임에서 에러를 잡기 위해서
- 휴먼에러 방지(타입지정시, 데이터 입력시 타입자동완성됨)
            

CSS : Tailwind CSS

Tailwind CSS vs emotion(=styled components) vs module CSS vs style jsx
Tailwind CSS 채택한 이유
- 유지보수가 용이함
- 빠른 스타일링
- 추가적인 파일이나 코드 작성 없이 구현 가능
- 코드와 함께 스타일 추측 가능
            

Database : 협의중

Supabase vs Firebase
SQL vs NoSQL
- 용량 / 일부러 적은 용량으로 시도하고 큰 용량 통신을 트러블 슈팅하며 공부
- 구조 / SQL vs NoSQL
- 속도 / supabase 빠름 3~4배
       

     
ClientSide 전역상태관리 : Recoil , React query(Tanstack-query5)

Recoil vs RTK & React query
Recoil 채택한 이유
- useState와 사용하는 방법이 매우 유사하여 러닝커브가 거의 없다
- 직관적이다
- 코드 양이 줄어든다

redux : 생성 > 리듀서 생성 > 액션 설정 > 디스패치(액션) 호출
recoil : 생성 > 호출
            
React query(Tanstack-query5) 채택한 이유
- 서버와의 통신 시 상태관리의 편의성

- isLoading, isError가 내장되어 있어 미들웨어와 인터셉터가 구현을 할 필요 없다
- 캐시 활용하여 효율적인 데이터 관리

 

통신 : Axios

Fetch vs Axios
Axios 채택한 이유
- fetch는 네트워크 오류만 잡는데 axios는 네트워크 이외의 오류도 잡아냄
- JSON형식으로 변환하는 과정으 빠지면서 코드양이 줄여짐

 

 

인증/인가 : Next vs Supabase vs Firebase Auth

(협의중)

 

 

배포 : Vercel

- Next.js와의 호환성에서 강점

        

   
기타 (추후 결정)

ESLint
- 자동완성, 코드 스타일 검사, 프로그래밍 오류 찾기 도구로 휴먼에러 방지할 수 있음
TDD : Jest
디바운싱 : Lodash
검색 : Full text search, supacase? next? search API