부록
라이브러리
자주 사용되는 라이브러리를 공유합니다.
1. 범용 유틸리티
| 라이브러리 | 설명 |
|---|---|
lodash | 배열, 객체, 문자열 등을 다룰 때 유용한 헬퍼 함수 모음. 거의 모든 프로젝트에서 유용함 |
dayjs | 날짜 관련 처리 (moment보다 가볍고 빠름) |
uuid | 고유 식별자(UUID) 생성에 사용 |
axios | HTTP 요청을 쉽게 처리하는 라이브러리 (프론트 & 백 모두 사용 가능) |
2. 상태관리 (프론트엔드)
| 라이브러리 | 설명 |
|---|---|
zustand | 매우 가볍고 직관적인 상태관리 라이브러리 |
redux-toolkit | Redux를 더 쉽게 사용하게 도와주는 공식 툴킷 |
recoil | React 전용 상태관리 (컴포넌트별 상태 분리 강력) |
3. UI 관련
| 라이브러리 | 설명 |
|---|---|
clsx | 조건부로 className을 깔끔하게 처리할 수 있는 유틸 |
tailwindcss | 유틸리티 퍼스트 CSS 프레임워크, 빠르고 일관된 스타일링 가능 |
framer-motion | 애니메이션을 쉽게 구현할 수 있음 (React에서 자주 사용) |
react-hook-form | 폼 처리 및 유효성 검사에 매우 효율적인 라이브러리 |
4. 테스트
| 라이브러리 | 설명 |
|---|---|
jest | 가장 인기 있는 JS 테스트 프레임워크 |
vitest | Vite 기반 프로젝트에 최적화된 테스트 프레임워크 |
testing-library | 사용자 관점에서 테스트하는 접근법 제공 |
5. 유효성 검사 & 스키마
| 라이브러리 | 설명 |
|---|---|
zod | 타입스크립트 친화적인 스키마/유효성 검사 |
yup | 직관적인 유효성 검사 라이브러리 (react-hook-form과도 자주 함께 사용) |
6. 백엔드 & API 도우미
| 라이브러리 | 설명 |
|---|---|
express | Node.js에서 가장 널리 쓰이는 웹 프레임워크 |
cors | CORS 설정용 미들웨어 |
dotenv | .env 환경변수 관리 |
jsonwebtoken | JWT 발급/검증 |
7. 개발 편의 도구
| 라이브러리 | 설명 |
|---|---|
chalk | 콘솔에 색깔 있는 메시지를 출력할 수 있음 (디버깅용으로 유용) |
nodemon | 서버 파일 수정 시 자동 재시작 |
prettier | 코드 자동 포매팅 |
eslint | 코드 스타일 및 잠재적 오류 감지 |
8. 유틸리티 & 헬퍼 라이브러리
| 라이브러리 | 설명 |
|---|---|
ramda | 함수형 프로그래밍 도우미, 불변성과 조합(Composition)에 강함 |
date-fns | dayjs처럼 날짜 처리에 특화. 체인형 방식 아님. 각 기능이 모듈화되어 있음 |
qs | query string 파싱 및 stringify 도구. URL 쿼리 관리에 유용 |
deepmerge | 객체 깊은 병합에 유용한 툴 |
9. 개발 편의/자동화 도구
| 라이브러리 | 설명 |
|---|---|
concurrently | 여러 명령어를 동시에 실행 (프론트/백 동시 실행 등) |
cross-env | 다양한 OS 환경에서 동일한 환경변수 설정 가능 |
zx | 쉘 스크립트를 JS처럼 작성 가능. Node로 빌드 도구 만들 때 편함 |
nodemailer | 백엔드에서 이메일 전송할 때 사용 |
10. 인증/보안 관련
| 라이브러리 | 설명 |
|---|---|
bcrypt | 비밀번호 해싱 및 비교 |
helmet | Express 보안 관련 헤더 설정 미들웨어 |
cookie | 쿠키 파싱/문자열화 처리 라이브러리 |
csurf | CSRF 공격 방지를 위한 미들웨어 |
11. 데이터 시각화/그래프
| 라이브러리 | 설명 |
|---|---|
chart.js | 쉽고 빠르게 차트 시각화 구현 가능 |
recharts | React 전용 차트 라이브러리. 커스터마이징 쉬움 |
d3.js | 강력한 데이터 시각화 라이브러리. 학습 난이도 높지만 유연성 최고 |
12. 네트워크 & API 통신 도우미
| 라이브러리 | 설명 |
|---|---|
swr | React용 데이터 패칭 훅. 로컬 캐싱과 리렌더링 자동 처리 |
react-query / tanstack-query | 비동기 데이터 관리의 끝판왕. API 상태 캐싱, 리페치 등에 강함 |
msw | 프론트엔드에서 API mocking이 필요한 경우 아주 유용 (개발/테스트에 최고) |
13. 파일 처리 / 업로드
| 라이브러리 | 설명 |
|---|---|
multer | Express에서 multipart/form-data 파일 업로드 처리 |
formidable | Node.js에서 파일 업로드 처리하는 또 다른 강력한 대안 |
file-saver | 클라이언트 측에서 파일 다운로드 가능하게 함 |
xlsx | Excel 파일을 JS에서 읽고 쓸 수 있게 해줌 |
14. 코드 품질 & 린팅
| 라이브러리 | 설명 |
|---|---|
standard | JavaScript 스타일 가이드 + 자동 린팅 도구 |
lint-staged | Git 커밋 전에 변경된 파일만 린트 실행 |
husky | Git hook 쉽게 설정 가능 (commit, push 전에 자동 검사 등) |
15. 마크다운/텍스트/에디터
| 라이브러리 | 설명 |
|---|---|
marked | 마크다운 → HTML 변환 라이브러리 |
turndown | HTML → 마크다운 변환 |
slate | 커스텀 텍스트 에디터 구현을 위한 강력한 프레임워크 |
quill | WYSIWYG 에디터 (간단하게 쓰기 좋음) |
16. 그 외 유용한 것들
| 라이브러리 | 설명 |
|---|---|
faker / @faker-js/faker | 테스트용 가짜 데이터 생성 |
nanoid | 매우 빠르고 충돌 확률 적은 ID 생성기 |
highlight.js | 코드 구문 강조 (블로그, 문서 등에서 사용) |
html2canvas | DOM 요소를 이미지로 캡쳐 |
sortablejs | 드래그 앤 드롭 UI 구현에 탁월 |