(번역) 세계 최고의 개발자가 되기 위한 17가지 자바스크립트 저장소 + 8개 추가
kidow
@kidow
태그
JavaScript
설명
자바스크립트 기술을 몇 단계 업그레이드해줄 깃허브 리포지토리들을 소개합니다.
배포
배포
수정일
Nov 15, 2023 01:47 AM
생성일
Oct 29, 2023 03:58 PM
Javascript 개발 생산성에 탄력을 줄 17가지 저장소를 소개한 글이 있어서 가져와보았습니다. 추가로 이 글에 대해 제가 추천하는 저장소도 같이 소개해봅니다.
1. Trigger.dev
✅ 애플리케이션 내에서 장기 실행 작업을 생성하고 관리하세요.
Trigger.dev는 서버리스 환경에서 장기 실행 작업을 생성하고 모니터링할 수 있는 오픈 소스 라이브러리입니다. Next.js, Remix, Astro, Nest.js, Nuxt 등과 같은 프레임워크에서 사용할 수 있습니다.
또한 웹훅, 스케쥴링, 이벤트 등 세 가지 통신 방법을 제공합니다.
- 스케쥴링은 반복되는 작업에 이상적입니다.
- 이벤트는 페이로드 수신 시 작업을 트리거합니다.
- 웹훅은 특정 이벤트가 발생할 때 작업을 트리거합니다.
가장 좋은 점은 Trigger.dev를 사용하면 다양한 서비스를 통합하고 이러한 이벤트가 발생할 때 특정 이벤트나 자동화를 수행할 수 있다는 것입니다.
아마도 Trigger.dev를 만드신 분이 쓴 글이라서 이 추천이 나온 것 같습니다. 콘텐츠 마케팅을 염두한다면 이런 식의 주제 선정도 좋을 것 같네요.
2. Chart.js
✅ 동적 자바스크립트 차트를 쉽게 만드세요.
Chart.js는 시각적으로 매력적인 대화형 차트와 그래프를 만드는 데 널리 사용되는 JavaScript 라이브러리입니다. Chart.js를 사용하면 선형 차트, 막대 차트, 방사형 차트, 도넛 차트 등을 포함한 다양한 차트를 만들 수 있습니다.
이는 사용자 정의가 가능하고 반응성이 뛰어나며 대화형 애니메이션 차트를 생성할 수 있는 간단한 API를 제공합니다.
3. React flow
✅ React 애플리케이션에 기능이 풍부한 대화형 다이어그램을 추가하세요.
React Flow는 React 애플리케이션에서 대화형 노드 기반 그래프와 다이어그램을 구축하기 위한 JavaScript 라이브러리입니다.
워크플로우, 마인드맵, 프로세스 다이어그램 및 기타 그래프 기반 구조의 시각적 표현을 생성할 수 있는 일련의 React 컴포넌트를 제공합니다.
다음과 같은 기능들을 제공합니다:
- 드래그 앤 드롭으로 노드 배치
- 노드와 엣지 유형을 고도로 커스텀가능합니다.
- 다양한 작업을 효과적으로 처리하기 위한 플러그인 및 컴포넌트가 내장되어 있습니다.
4. Monaco Editor for React
✅ 모든 기능을 갖춘 브라우저 기반 코드 편집기.
Monaco Editor는 VS Code로 구축된 오픈소스 코드 편집기입니다. 빠르고 가벼우며 독립형 웹 기반 코드 편집기로 사용하거나 다른 애플리케이션에 통합할 수 있습니다.
Monaco Editor for React를 사용하면 완벽하게 반응하고 맞춤설정 가능한 코드 편집기를 웹 애플리케이션에 추가할 수 있습니다. 구문 강조, 자동 완성, 오류 검사 등과 같은 지능형 기능을 제공합니다.
5. Novu
✅ 모든 알림을 한 곳에서 관리하세요.
Novu는 개발자를 위한 최초의 오픈 소스 알림 인프라입니다. 이메일, SMS, 다이렉트, 푸시 등 모든 형태의 커뮤니케이션을 단일 대시보드에서 관리하고 모니터링할 수 있습니다.
Novu를 사용하면 다양한 통신 제공업체에 연결하고 알림을 제어하는 템플릿과 규칙을 만들 수 있습니다.
다음과 같은 기능을 제공합니다:
- 여러 프로그래밍 언어에 대한 알림을 위한 통합 API입니다.
- 사전 구축된 앱 내 알림 구성 요소입니다.
- Twillo, Sendgrid 등 다양한 통합 지원
6. NX
✅ 프로젝트를 위한 스마트하고 빠르며 확장 가능한 빌드 시스템입니다.
NX는 CI를 빠르게 유지하고 작업 공간을 쉽게 유지 관리할 수 있도록 해주는 차세대 빌드 시스템입니다. NX는 분산 작업 실행 및 계산 캐싱과 같은 최신 기술을 사용하여 프로젝트를 확장합니다.
다음과 같은 기능을 제공합니다:
- 모노레포 아키텍처
- 원격 캐싱
- 여러 시스템에 걸쳐 작업을 자동화되고 동적으로 배포
- 동일한 코드를 두 번 다시 작성하지 않는 빠른 CI와 스마트함.
7. ClickVote
✅ 좋아요, 찬성, 리뷰 컴포넌트를 애플리케이션에 원활하게 통합하세요.
Clickvote는 모든 웹 사이트, SPA 또는 코드 없는 도구에 좋아요 및 업보트 컴포트를 쉽게 추가할 수 있는 오픈 소스 라이브러리입니다. 복잡한 코드를 작성하지 않고도 반응 컴포넌트를 생성하는 프로세스를 단순화합니다.
다음과 같은 기능을 제공합니다:
- 좋아요, 평가, 별표 및 피드백을 위한 사전 구축된 구성 요소 제공
- React, Vue, Svelte, HTML 등 다양한 프레임워크를 지원
- 사용자에 대한 즉각적인 분석 대시보드 제공
8. Mantine
✅ React 애플리케이션을 위한 멋진 UI 컴포넌트.
Mantine은 최신 웹 애플리케이션 구축을 위한 인기 있는 오픈 소스 React 컴포넌트 라이브러리입니다. 반응성이 뛰어나고 멋진 사용자 인터페이스를 만들 수 있는 액세스 가능하고 커스텀 가능한 컴포넌트 세트를 제공합니다.
다음과 같은 기능을 제공합니다:
- 최신 애플리케이션 구축을 위한 고도로 사용자 정의 가능한 구성 요소
- 일반적인 프런트엔드 작업을 단순화하는 내장 훅
- 다크 모드 및 TypeScript 지원
9. Styled Components
✅ JavaScript 내에서 CSS 코드를 작성하세요.
Styled Components는 React 애플리케이션의 스타일을 지정하는 데 널리 사용되는 라이브러리입니다. 범위가 지정된 스타일로 사용자 정의 구성 요소를 생성하여 JavaScript 내에서 CSS 코드를 작성할 수 있습니다.
스타일 구성 요소에서는 스타일이 구성 요소 내에 포함되어 명확하고 유지 관리 가능한 코드 구조를 보장합니다.
다음과 같은 기능을 제공합니다:
- 간편한 유지 관리 및 디버깅.
- 컴포넌트 기반 스타일링
- 클래스명 버그가 없음
10. Supabase
✅ 오픈 소스 Firebase 대안.
Supabase는 소프트웨어 애플리케이션에 인증, 파일 저장소, Postgres 및 실시간 데이터베이스를 추가할 수 있는 오픈 소스 Firebase 대안입니다.
Supabase를 사용하면 몇 분 안에 안전하고 확장 가능한 애플리케이션을 구축할 수 있습니다.
다음과 같은 기능을 제공합니다:
- 실시간 데이터 동기화
- RESTful API를 통한 서버리스 기능 및 상호 작용
- 애플리케이션에 대한 인증, 보안 및 확장성
11. TanStack Query
✅ TS/JS, React, Solid, Vue 및 Svelte에 대한 비동기식 상태 관리
TanStack Query는 소프트웨어 애플리케이션 내에서 데이터 가져오기, 캐싱, 동기화 및 업데이트 프로세스를 단순화하는 강력한 데이터 가져오기 및 상태 관리 라이브러리입니다.
TanStack Query를 사용하면 서버 상태의 메모리 및 가비지 수집을 관리하고, 백그라운드에서 데이터를 업데이트하고, 데이터를 캐시하는 등의 작업을 수행할 수 있습니다.
다음과 같은 기능을 제공합니다:
- 자동 캐싱
- 페이지 매김 및 무한 로딩
- 쿼리 검사를 위한 강력한 개발자 도구
- TS/JS, React, Solid, Vue 및 Svelte 지원
12. Axios
✅ HTTP 요청을 수행하는 간단한 방법
Axios는 웹 브라우저 및 Node.js 환경에서 HTTP 요청을 만드는 데 널리 사용되는 JavaScript 라이브러리입니다.
비동기식 HTTP 작업을 처리하는 간단하고 일관된 방법을 제공하여 웹 서비스 및 API에서 데이터를 보내고 받는 프로세스를 단순화합니다.
다음과 같은 기능을 제공합니다:
- Promise API를 기반으로 구축
- 자동 JSON 데이터 변환
- 브라우저 및 Node.js 지원
- 인터셉터 제공
13. Swiper
✅ 현대적인 캐러셀과 터치 슬라이더를 만드세요.
Swiper는 웹 애플리케이션에서 터치 지원 캐러셀 및 슬라이더를 구축하기 위한 현대적이고 모바일 친화적인 JavaScript 라이브러리입니다.
데스크톱과 모바일 장치에서 원활하게 작동하는 반응형 및 대화형 슬라이드쇼, 이미지 갤러리, 콘텐츠 캐러셀을 생성하기 위한 간단하고 강력하며 사용자 정의 가능한 API를 제공합니다.
다음과 같은 기능을 제공합니다:
- 모든 화면 크기에 완벽하게 반응합니다.
- 터치 및 드래그 이벤트 지원
- 풍부한 전환 효과.
14. Chance
✅ JavaScript용 무작위 생성기 도우미.
Chance는 테스트, 시뮬레이션, 데이터 시각화 등 다양한 목적을 위해 무작위 데이터를 생성할 수 있는 오픈 소스 소프트웨어입니다.
임의의 숫자, 문자열, 이름, 전화번호, 주소, 이메일 등을 생성할 수 있습니다. 이를 사용하여 다양한 시나리오를 시뮬레이션하고 데이터를 모의하며 다양한 입력을 처리하는 애플리케이션의 능력을 테스트할 수 있습니다.
15. Day.js
✅ Moment.js에 대한 최고의 대안.
Day.js는 다양한 날짜 및 시간 작업을 처리하기 위한 최소한의 JavaScript 라이브러리입니다.
Moment.js를 사용한다면 이미 Day.js 사용법을 알고 있는 것입니다. Moment.js와 달리 Day.js는 가볍기 때문에(2KB) 개발자들 사이에서 인기가 높습니다.
다음과 같은 기능을 제공합니다:
- 불변 객체를 사용하여 데이터 일관성을 보장합니다.
- 복잡한 날짜 조작을 단순화하고 코드 가독성을 향상시키는 체인 가능한 API입니다.
- 플러그인을 통해 고도로 사용자 정의 가능하고 확장 가능합니다.
MomentJS는 더 이상 유지 관리할 수 없으므로 Dayjs로 이동하는 것이 매우 중요합니다.
16. FullCalendar
✅ JavaScript 애플리케이션을 위한 완전한 대화형 달력.
FullCalendar는 웹 애플리케이션에서 대화형 및 사용자 정의 가능한 달력 인터페이스를 만드는 데 널리 사용되는 JavaScript 라이브러리입니다.
이벤트 표시를 위한 강력한 기능 세트를 제공합니다. 월, 주, 일 및 일정 보기를 포함한 다양한 달력 보기를 지원하므로 시간 기반 데이터와 관련된 애플리케이션을 구축하는 데 적합합니다.
- 다양한 뷰 제공
- 고도로 사용자 정의 가능하고 대화형입니다.
- 클릭 이벤트 처리 및 드래그 앤 드롭 지원.
17. Zod
✅ 스키마 유효성 검사 라이브러리
Zod는 TypeScript 우선 스키마 선언 및 유효성 검사 라이브러리입니다. 이를 통해 기본 데이터 유형, 배열 및 객체를 포함한 모든 데이터 유형에 대한 데이터 구조와 스키마를 간결하고 유형이 안전한 방식으로 정의할 수 있습니다.
Zod를 사용하면 복잡한 데이터 모델을 만들고 입력 데이터의 유효성을 검사하며 애플리케이션의 유형 안전성을 보장할 수 있습니다.
여기서부터는 제가 생각하는 유용한 저장소들을 추가로 소개합니다.
18. Upptime
웹사이트 모니터링 및 상태 페이지를 무료로 구축할 수 있는 라이브러리입니다.
Github Actions를 사용하여 최소 5분마다 자동으로 웹사이트를 방문하여 잘 작동하고 있는지 확인합니다. 만약 웹사이트가 다운되면 자동으로 저장소에 새로운 이슈를 엽니다. 멤버를 할당하거나 Slack에 알림을 보낼 수도 있습니다.
19. ContentLayer
Gatsby의 대안으로 추천하는 라이브러리입니다. Gatsby보다 훨씬 빠르고 쉽게 개발 블로그를 구축할 수 있습니다. 다만 아직 1버전이 나오지 않은 베타 버전이라는 점, 현재는 Nextjs만 지원한다는 점이 한계라 볼 수 있습니다. 저는 지금 버전으로도 매우 잘 동작하기 때문에 Gatsby를 더이상 사용하지 않고 있습니다. mdx도 지원합니다.
20. Tiptap
개발자를 위한 오픈 소스 콘텐츠 편집기를 제공합니다. 일반적으로 우리가 아는 에디터 라이브러리와 달리 유료 버전이 있는데, 공동 편집을 할 수가 있습니다. 그 외에도 많은 고품질 기능들을 제공하는 라이브러리입니다.
21. React Email
React 및 Typescript로 이메일 UI를 디자인을 할 수 있는 라이브러리입니다. 리액트로 코드를 짜면 자동으로 email에 최적화된 html 코드로 변환해줍니다.
22. Tremor
대시보드를 빠르게 구축할 수 있도록 특화된 컴포넌트들을 제공하는 React 전용 라이브러리입니다. 기타 다른 라이브러리와 다른 점은 Bar, Line, Donut, Scatter 등의 차트 컴포넌트 등을 제공한다는 점입니다.
23. Sonner
잘 알려지진 않았지만 힙한 디자인으로 구성된 Toast 라이브러리입니다. React와 Vue를 지원합니다.
24. Lucide
1300개가 넘는 아이콘 컴포넌트들을 NPM으로 제공하는 라이브러리입니다. 바닐라js, React, Vue, Angular, Svelte 등 거의 모든 프레임워크를 지원합니다.
25. Fuse.js
배열 필터링 기능이 필요할 때 추천하는 라이브러리입니다.
마무리
이 외에도 좋은 자바스크립트 라이브러리가 있거나 의견을 공유하고 싶으시다면 댓글을 달아주세요.
- JavaScript