프런트엔드 개발자를 위한 최고의 무료 도구

프런트엔드 프로젝트가 프레임워크 때문에 망하는 일은 드뭅니다. 망하는 이유는 빌드가 느리고, 아무도 테스트를 돌리지 않고, 번들이 조용히 커지다가 결국 화면이 4초 만에 뜨기 때문입니다.

이 여덟 가지는 모두 무료이고 서로 잘 맞물리며, 새 프로젝트에서 제가 가장 먼저 설치하는 것들입니다.

빌드 도구

Vite

즉시 뜨는 개발 서버와 빠른 프로덕션 빌드. 요즘 프런트엔드에서는 거의 기본값입니다.

vite.dev

프레임워크

Astro

기본적으로 자바스크립트를 전혀 내보내지 않아, 오히려 느린 콘텐츠 사이트를 만들기가 어렵습니다.

astro.build

스타일

Tailwind CSS

유틸리티 클래스 덕분에 프로젝트가 오래돼도 CSS가 끝없이 불어나지 않습니다.

tailwindcss.com

린트와 포맷

Biome

린터와 포매터가 바이너리 하나에. 설정 파일 더미를 빠른 도구 하나로 대체합니다.

biomejs.dev

단위 테스트

Vitest

밀리초 단위로 끝나는 테스트라, 사람들이 푸시 전에 실제로 돌립니다.

vitest.dev

종단 간 테스트

Playwright

실제 브라우저 테스트로 단위 테스트가 못 보는 버그를 잡고, 트레이스를 다시 재생할 수 있습니다.

playwright.dev

컴포넌트 작업대

Storybook

컴포넌트를 격리해 만들고 검토합니다. UI를 두 사람 이상이 만지는 순간부터 필수입니다.

storybook.js.org

번들 크기

Bundlephobia

의존성이 몇 킬로바이트를 잡아먹는지 설치 전에 확인합니다. 설치 후가 아니라.

bundlephobia.com

빌드 도구와 린터부터 정하세요. 이 둘이 매일의 작업 감각을 결정합니다.

고르는 것에서 끝나지 않고, 만들어야 한다면?

웹 앱, API, 인프라, 인터페이스. 바르셀로나 기반 프리랜서, 어디에 있는 클라이언트든 환영합니다.

연락하기


코멘트

Leave a Reply

Your email address will not be published. Required fields are marked *