Today I Learned (TIL)

필수 설치 항목들 정리

1. Vite

설명: Vite는 프론트엔드 개발을 위한 빠르고 현대적인 빌드 도구입니다. 빠른 개발 서버와 효율적인 HMR(Hot Module Replacement)을 제공하여 개발 속도를 크게 향상시킵니다.

설치 방법:

yarn create vite
cd my-project
yarn
yarn dev

2. Yarn

설명: Yarn은 빠르고 안전하며 안정적인 패키지 매니저입니다. npm보다 개선된 속도와 캐싱 기능을 제공하여 더 효율적인 패키지 관리를 가능하게 합니다.

설치 방법:

npm install --global yarn

3. Prettier

설명: Prettier는 코드 포매터로, 일관된 코드 스타일을 유지하고 코드 가독성을 향상시키는 데 도움을 줍니다. 다양한 코드 에디터와 통합 가능합니다.

설치 방법:

yarn add --dev prettier

4. Supabase

설명: Supabase는 오픈 소스 Firebase 대체재로, 실시간 데이터베이스와 인증 서비스를 제공합니다. PostgreSQL을 기반으로 하며, 자동으로 RESTful API를 생성합니다.

설치 방법:

yarn add @supabase/supabase-js

5. Tanstack Query (React Query)

설명: React Query는 서버 상태 관리 라이브러리로, 데이터 페칭, 캐싱, 동기화 및 백그라운드 업데이트를 효율적으로 처리할 수 있게 합니다.

설치 방법:

yarn add @tanstack/react-query

6. Zustand

설명: Zustand는 경량의 상태 관리 라이브러리로, 간단하고 직관적인 API를 제공하여 React 애플리케이션의 상태 관리를 돕습니다.

설치 방법:

yarn add zustand

7. Vercel

설명: Vercel은 프론트엔드 개발자들을 위한 배포 플랫폼으로, Next.js와 같은 현대적인 프레임워크와 통합하여 쉽게 애플리케이션을 배포할 수 있습니다.

설치 방법: Vercel CLI 설치

yarn global add vercel
vercel login

8. Glitch

설명: Glitch는 간편한 웹 애플리케이션 개발 및 배포 플랫폼입니다. 빠르게 프로토타입을 만들고 공유할 수 있습니다.

설치 방법: 별도의 설치는 필요 없으며, Glitch 웹사이트에서 직접 사용 가능.

9. Styled Components

설명: Styled Components는 CSS-in-JS 라이브러리로, 컴포넌트 단위로 스타일을 정의하여 더욱 유지보수가 쉬운 스타일링을 가능하게 합니다.

설치 방법:

yarn add styled-components

10. React Router Dom

설명: React Router Dom은 React 애플리케이션에 라우팅 기능을 제공하는 라이브러리입니다. 다양한 URL 경로에 따라 컴포넌트를 렌더링할 수 있게 도와줍니다.

설치 방법:

yarn add react-router-dom

요약

위의 도구들은 현대적인 웹 애플리케이션 개발에 있어서 매우 유용하며, 효율적이고 빠른 개발 환경을 구축하는 데 필수적인 도구들입니다. 이들을 설치하고 적절히 활용하면, 프로젝트의 개발 속도와 품질을 크게 향상시킬 수 있습니다.