대학교 택시 동승자 매칭 서비스 CATXI

in CUK

기술 스택

React + vite + pnpm

pnpm is a fast, disk space-efficient package manager for JavaScript. pnpm은 빠르고 디스크 공간을 효율적으로 사용하는 JavaScript 패키지 매니저입니다.

Unlike npm or yarn, pnpm uses a content-addressable file system and hard links to avoid duplication, making installs significantly faster. npm이나 yarn과 달리, pnpm은 중복 설치를 피하기 위해 파일을 하드링크로 연결해 설치 속도와 저장 공간을 모두 절약합니다.

Vite is a modern front-end build tool that provides instant server start and fast HMR. Vite는 즉시 개발 서버 시작과 빠른 HMR(핫 모듈 교체)을 제공하는 최신 프론트엔드 빌드 도구입니다.

Built on top of native ES modules and using Rollup for production builds, Vite greatly speeds up both development and production performance. ES 모듈 기반이며 Rollup을 통해 배포용 번들을 만들기 때문에, 개발과 배포 모두 성능이 우수합니다.

React is a JavaScript library for building user interfaces, especially single-page applications (SPAs). React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 특히 SPA(Single Page Application)에 적합합니다.

It allows developers to build UI components declaratively, manage state efficiently, and create dynamic, responsive applications. 선언형 방식으로 UI를 구성하고, 상태 관리를 통해 동적이고 반응형인 앱을 쉽게 개발할 수 있습니다.

라이브러리

🔧 프로젝트 세팅 pnpm vite

🎨 스타일 tailwindcss @tailwindcss/vite

⚛️ React 관련 react react-router-dom

📡 API 통신 axios

📋 폼 react-hook-form @hookform/resolvers zod

📦 상태 관리 @tanstack/react-query @tanstack/react-query-devtools

👀 옵저버 react-intersection-observer

🧩 유틸 clsx

🖼️ SVG vite-plugin-svgr

📱 PWA vite-plugin-pwa

💬 WebSocket sockjs-client webstomp-client

📆 모바일 피커 react-mobile-picker-scroll