프론트엔드 개발자가 북마크해야 할 리소스 모음 (3/3) - 개발 & 테스트편

프론트엔드 개발을 하면서 어떤 에디터, 테스트 도구 쓸까 라는 고민해 보신 적 있으신가요?

개발 환경 구축부터 테스트, 최적화에 필요한 도구들을 정리해 봤습니다. 필요할 때마다 찾아보세요!

---

🔧 개발자 도구

코드 에디터 & IDE

• VS Code - 마이크로소프트 코드 에디터
• WebStorm - JetBrains JavaScript IDE
• Cursor - AI 기반 코드 에디터

코드 스니펫 & 템플릿

• 30 seconds of code - 짧은 코드 스니펫
• CodePen - 프론트엔드 코드 공유
• HTML5 Boilerplate - HTML5 템플릿

API & 모킹

• JSON Placeholder - 가짜 REST API
• Random User Generator - 랜덤 사용자 데이터
• Lorem Ipsum - 더미 텍스트 생성기
• MSW - Mock Service Worker

브라우저 테스트 & 호환성

• BrowserStack - 크로스 브라우저 테스트
• Can I Use - 브라우저 호환성 확인
• Browserslist - 타겟 브라우저 쿼리 도구

버전 관리

• GitHub - Git 저장소 & 협업
• GitLab - DevOps 플랫폼
• Bitbucket - Git 저장소

🎯 코드 품질 관리

린터 & 포매터

• ESLint - JavaScript 린터
• Prettier - 코드 포매터
• Stylelint - CSS 린터

Git Hooks

• Husky - Git hooks 관리
• lint-staged - Staged 파일 린트

코드 분석

• SonarQube - 코드 품질 분석
• CodeClimate - 코드 리뷰 & 분석

AI 코드 리뷰

• CodeRabbit - AI 기반 PR 리뷰
• Codium AI - AI PR 분석 & 테스트 생성
• Qodana - JetBrains 코드 품질 플랫폼

🧪 테스트 & 디버깅

테스트 프레임워크

• Vitest - Vite 기반 테스트 프레임워크
• Jest - JavaScript 테스트 프레임워크
• React Testing Library - React 테스트 라이브러리

E2E 테스트

• Playwright - 모던 E2E 테스트
• Cypress - JavaScript E2E 테스트

비주얼 테스트

• Chromatic - Storybook 비주얼 테스트
• Percy - 비주얼 리뷰 플랫폼

디버깅 도구

• React DevTools - React 디버깅
• Redux DevTools - Redux 디버깅
• Chrome DevTools - 브라우저 개발자 도구

API 테스트

• Postman - API 개발 & 테스트
• Insomnia - API 클라이언트

🚀 CI/CD & 배포

CI/CD 플랫폼

• GitHub Actions - GitHub CI/CD
• GitLab CI - GitLab CI/CD
• CircleCI - 클라우드 CI/CD

배포 플랫폼

• Vercel - Next.js 최적화 배포
• Netlify - JAMstack 배포
• Cloudflare Pages - 엣지 배포
• Railway - 풀스택 배포

♿ 접근성 도구

접근성 검사

• WAVE - 웹 접근성 평가 도구
• Axe DevTools - 접근성 테스트 확장 프로그램
• Pa11y - 자동화된 접근성 테스트

색상 대비 확인

• WebAIM Contrast Checker - 색상 대비 검사
• Contrast Ratio - 대비율 계산기
• Color Oracle - 색맹 시뮬레이터

접근성 라이브러리

• React Aria - Adobe의 접근성 후크
• Radix UI - 접근성 우선 UI 컴포넌트

⚡ 성능 & 최적화

성능 측정

• Lighthouse - 웹 성능 감사
• WebPageTest - 웹 성능 테스트
• PageSpeed Insights - Google 성능 분석

번들 분석

• Webpack Bundle Analyzer - Webpack 번들 분석
• Vite Bundle Visualizer - Vite 번들 분석
• Bundle Phobia - npm 패키지 크기 확인

이미지 최적화

• Squoosh - 이미지 압축 도구
• TinyPNG - PNG/JPG 압축
• ImageOptim - 이미지 최적화 앱

모니터링 & 분석

• Sentry - 에러 모니터링
• LogRocket - 세션 재생 & 모니터링
• Google Analytics - 웹 분석
• Vercel Analytics - Web Vitals 모니터링

📚 학습 리소스

문서화

• MDN Web Docs - 웹 기술 문서
• Web.dev - Google의 웹 개발 가이드
• JavaScript.info - 모던 JavaScript 튜토리얼

코딩 챌린지

• Frontend Mentor - 프론트엔드 챌린지
• Codewars - 코딩 문제
• LeetCode - 알고리즘 문제

---

💬 도움이 되셨나요? 유용한 리소스가 있다면 댓글로 공유해 주세요!