프론트엔드 개발 도구 모음

목차

⚙️ Library & Framework

    React

    Next.js

    Node.js

📦 Bundler & Build

    webpack

    turbopack

    vite

🔁 Transpiler

    Babel

    Sass

🎨 UI

    TailwindCSS

    Font Awesome

    Google fonts

🔄 State Management Library

    Redux

    Zustand

    Jotai

🔧 API Library

    axios

    Tanstack Query

✅ Testing

     jest

    Storybook

    Percy

    Applitools

    Chromatic

    BackstopJS

    Loki

🧹 Code Quality

    ESLint

    Prettier

    Stylelint

🛠️ CI/CD & Release

    Github Actions

    Husky

    Netlify

    Vercel

 

 

⚙️ Library & Framework

• React : UI를 구성하는 데에 사용되는 JS 라이브러리
• Next.js : React 기반 SSR 및 정적 웹사이트 생성 지원의 웹 개발 프레임워크
• Node.js : JS를 서버에서도 실행하도록 돕는 런타임 실행 환경

---

📦 Bundler & Build

*모듈 번들러 : 여러 개의 모듈 파일을 하나로 묶는 도구

*빌드 도구 : 코드 변환, 최적화, 번들링 등 코드를 실제 실행 가능한 형태로 가공/자동화하는 도구

• webpack :  JS 모듈을 하나의 파일로 번들링하는 오픈소스 모듈 번들러
• Turbopack : Vercel에서 제작한 Webpack의 차세대 대안
• Vite: ES 모듈 기반의 초고속 개발 서버와 빌드 기능을 제공하는 차세대 프론트엔드 빌드 도구.

 

---

🔁 Transpiler

*트랜스파일러 : js, ts, jsx, tsx 등을  javascript로 변환시키는 프로그램

• Babel : 최신 JS 문법을 구형 브라우저에도 호환 가능하도록 변환
• Sass : CSS 전처리기로, 더 강력한 문법과 변수/중첩 기능 제공

---

🎨 UI

• Tailwind CSS : 유틸리티 퍼스트 방식의 CSS 프레임워크
• Font Awesome : 웹/앱용 아이콘 라이브러리
• Google fonts : 구글에서 제공하는 웹 폰트 라이브러리 및 API 서비스

---

🔄 Statement Management Library

[ Flux 패턴 기반 ]

• Redux : 전역 상태를 예측 가능하게 관리할 수 있는 대표적인 상태 관리 라이브러리
• Zustand : 간단하고 가벼운 React 상태 관리 라이브러리
• Jotai : Atom 단위로 상태를 관리하는 React 상태 관리 라이브러리

---

🔧 API Library

• axios : Promise 기반의 HTTP 클라이언트 비동기 통신 JS 라이브러리
• TanStack Query : 서버 상태(비동기 데이터)를 캐싱, 동기화, 갱신하는 React 데이터 패칭 라이브러리

---

✅ Testing

• jest : 페이스북이 개발한 테스팅 프레임워크
• Storybook : UI 컴포넌트를 개별적으로 관리하고 문서화할 수 있는 도구

[ Percy를 이용한 시각적 회귀 테스트 ]

• Percy : UI 스냅샷을 찍고 비교하여 시각적 변경 감지
• Applitools : AI 기반의 시각적 테스팅 플랫폼
• Chromatic : Storybook과 연동된 UI 테스트 및 리뷰 서비스
• BackstopJS : 오슨소스 시각적 회귀 테스트 프레임워크 (무료)
• Loki : Storybook과 연동하여 시각적 테스트를 수행하는 도구 (무료)

---

🧹 Code Quality

• ESLint : 코드 스타일, 문법 오류 등을 정적 분석으로 탐지하는 도구
• Prettier : 코드 포맷팅 도구, 일관된 코드 스타일 유지
• Stylelint : CSS 코드 스타일 검사 및 오류 탐지

---

🛠️ CI/CD & Release

• Github Actions : 코드 푸시/PR 등 이벤트에 따라 자동으로 빌드, 테스트, 배포 작업을 수행할 수 있는 자동화 도구
• Husky : Git Hook을 활용하여 커밋/푸시 전 자동 코드 검사 혹은 테스트를 실행하는 도구
• Netlify : 정적 사이트 및 프로젝트를 쉽게 배포할 수 있는 클라우드 플랫폼
• Vercel : Next.js 제작사에서 제공하는 배포 플랫폼, SSR 및 SSG 사이트에 최적화된 배포 환경 제공