Carryduo - 기술 스택

🐭 이번 프로젝트 프론트 기술 스택은?

NextJS 사용이유

1. SSR
   SSR은 서버에서 View를 렌더링 하기 때문에 초기 로딩 속도가 굉장히 빠르고 SEO에 유리하다
2. Automatic Routing
   따로 React-router-dom을 설치해 라우팅을 하나하나 명시했지만 폴더와 파일 구조로만 라우팅이 가능해 훨씬 직관적이다
3. Link
   link 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에 사용자가 링크를 클릭하면 매우 빠르게 해당 페이지로 이동할 수 있다
4. 개인적인 이유
   데스크탑 앱처럼 구현하기 위해선 일단 새로고침을 했을 때 모든 페이지가 깜빡이는 모습을 보여주기 싫었다 SSR로 구현하면 그 모습 자체는 자연스럽게 해결이 가능했다 추가로 꼭 한번 프로젝트에 적용해 보고 싶었다

Typescript 사용이유

1. 정적 타입
   동적으로 사용하는 Javascript는 런타임에서 오류를 발견하지만 Typescript를 사용하면 코드 작성 단계에서 미리 오류를 확인할 수 있다
2. 자동 완성
   미리 타입을 지정해 서버에서 가져온 데이터를 보다 쉽게 이용할 수 있다 사실 자동 완성 하나만으로도 충분히 쓸 이유가 있다고 생각한다
3. 작은 프로젝트여도 무조건 쓴다
   계속해서 성장해 나가고 맨날 작은 프로젝트만 할 수는 없는 거니 더 나은 구조와 일관성있는 코드를 짜기 위해 연습하는 마음으로 사용하는게 좋다고 생각한다

Tailwind CSS 사용이유

1. 미리 지정된 클래스명
   display: flex; justify-content: center; align-items: center; 가 "flex jusity-center items-center"로 미리 지정된 클래스명이 있기 때문에 훨씬 작업 속도가 빠르다
2. 코드 가독성이 떨어진다?
   처음에는 그렇게 생각했다 끝도 없이 길어지는 클래스 명 때문에 헷갈린 적도 많았지만 시간이 지날수록 오히려 변수명 찾아가는게 더 오래 걸리지 않을까라고 생각이 들정도로 매우 익숙해졌고 반복적인 클래스 명이 있다면 따로 묶어서 보관도 가능하니 큰 단점이라고 생각 안 한다

React-Query 사용이유

1. 서버 데이터
   다른 라이브러리도 당연히 훌륭하지만 Redux, Recoil은 서버 쪽의 데이터들을 관리하기에는 적합하지 않다고 생각한다
2. 그만큼 클라이언트 데이터를 많이 이용하는가
   굳이 RTK를 설치해 까다로운 설정 과정을 거치면서까지 많은 클라이언트 데이터를 관리할 상황이 그리 나오지 않아 설정 없이 즉시 서버 데이터 사용이 가능한 React Query를 선택함
3. 간단한 사용법
   물론 깊게 들어가면 어떤 기술이든 어렵지만 useQuery, useMutation만 잘 사용해도 기본 CRUD는 문제없이 적은 코드로도 작업이 가능하다는 장점이 있고 useQuery에 Query key를 사용해 캐싱이 가능하다는 점, 같은 데이터에 대한 여러 번의 요청이 있을 시 중복을 제거하는 장점을 가지고 있다

프로젝트 깃허브