프론트엔드 개발에 유용한 생산성 도구들을 살펴본다. 생산성 도구들은 코드의 안전성과 테스트 비용 등을 아껴준다.
1. 번들 도구
1) Vite : js 실행도구
컴포넌트 단위로 개발하고 결합하여 JS 애플리케이션을 실행하는 도구
- Vite 기반 프레임워크 : Astro 1.0, Nuxt 3, SvelteKit 1, …
모듈 번들러 Rollup 포함
작은 js 조각으로 나누어 CommonJS/AMD 모듈 등으로 다시 컴파일하고 결합
- 로딩 시간, 용량을 줄여서 결과적으로 성능 향상
- 트리 쉐이킹 : 사용하지 않는 모듈 제거
- 호환성 증가, 부작용 방지
- 환경 변수와 모드 설정, 플러그인 통합
- 정적 사이트 빌드와 배포 (
vite preview는 production 용도가 아님) - 서버렌더링(SSR), 백엔드 통합
ESBuild 번들러는 왜 사용하지 않는가?
esbuild는 매우 신속하게 XML을 유지하는 유능한 번들러이지만 애플리케이션 번들링에 필요한 일부 중요한 기능, 특히 코드 손상 및 CSS 처리 기능이 미흡합니다. 그 때까지는 Rollup 이 해당 기능을 대신합니다.
2) ESLinter
소스코드를 분석하여 오류나 오타, 잠재적 버그를 찾아주는 도구
3) Prettier
코드를 일관된 스타일로 정렬해주는 코드 포맷터
2. 테스트 도구
1) Storybook : 컴포넌트 테스트 도구
package.json 의 개발 도구로 포함하여 쓸 수 있다.
- 사용자 입장에서 바라보는 렌더링 상태로 컴포넌트를 테스트
- 예) Button 을 만든 경우, 실제 렌더링 출력과 기능을 확인
- 공유 : 독립적으로 퍼블리싱, 임베딩, 결합해보기
- 에디트 : 속성 편집, 디버깅 - 동작 출력
참고
3. 라이브러리
1) Zod : 스키마 Validation
- 외부 API 데이터에 대해 스키마를 선언하거나 파싱하는데 사용
- TypeScript 4.5 이상에서 지원
2) Hightlightjs : 코드 블럭 (197가지 언어)
3) ToastUI : UI 컴포넌트
4) svelte-french-toast : 상단 팝업 알리미 (자동 사라짐)
5) marked : Markdown 문자열을 HTML로 변환
4. 폰트, 아이콘
1) Lucide 아이콘
2) 랜덤 프로파일 (사용자 정보)
- 랜덤 섬네일 300px : 숫자는 사이즈
3) 랜덤 풍경/동물 사진
랜덤 이미지 API 는 무척 다양하다. 검색하면 바로 나옴.
9. Review
- 일단 업로드하고, 계속 업데이트 하자!
끝! 읽어주셔서 감사합니다.