> 웹 프론트엔드 > JS 튜토리얼 > 사용하고 있지 않지만 사용해야 하는 NPM 패키지

사용하고 있지 않지만 사용해야 하는 NPM 패키지

Patricia Arquette
풀어 주다: 2024-12-19 17:39:10
원래의
785명이 탐색했습니다.

nderrated NPM Packages You’re Not Using (But Should Be)

NPM의 세계는 넓습니다. 200만 개가 넘는 패키지가 제공되므로 React, Lodash, Express 등 유명 제품에 끌리기 쉬우며 개발자로서의 삶을 훨씬 더 쉽게 만들어 줄 수 있는 과소평가된 보석을 놓치기 쉽습니다.

1. 날짜-fns-tz
오버헤드 없이 시간대 문제를 해결하세요

시간대는 최악입니다. 여러 시간대에 걸쳐 날짜를 구문 분석하고 형식을 지정하는 것은 빠르게 악몽으로 변할 수 있습니다. 순간 시간대와 같은 라이브러리가 인기가 있지만 종종 너무 부풀고 구식입니다. 날짜-fns-tz를 입력하세요.

과소평가된 이유:

  • 가벼우며 date-fns를 기반으로 구축되었습니다.
  • 하늘 아래 모든 것이 아닌 시간대 관리에 중점을 둡니다.
  • 현대적이고 나무를 흔들 수 있으며 모듈식 프로젝트에 적합합니다.

사용 사례:
다양한 시간대의 사용자를 위해 이벤트를 예약하는 앱을 구축하고 있습니다.

예:
`'date-fns-tz'에서 { formatInTimeZone } 가져오기;

const timeZone = '미국/New_York';
const 날짜 = 새로운 날짜();

const formattedDate = formatInTimeZone(date, timeZone, 'yyyy-MM-dd HH:mm:ssXXX');
console.log(formattedDate); // 2024-11-25 10:00:00-05:00`

2. clsx
동적 클래스 이름을 관리하는 더 스마트한 방법

React에서 복잡한 className 로직을 작성해야 한다면 그것이 얼마나 지저분해질 수 있는지 아실 것입니다. clsx는 조건부 클래스 이름을 깔끔하고 읽기 쉬운 코드로 단순화하는 작은 유틸리티입니다.

과소평가된 이유:

  • 조건부 논리, 배열 및 개체를 단일 유틸리티로 결합합니다.
  • 잘못된 값을 자동으로 처리합니다. 더 이상 클래스 문자열에 정의되지 않거나 null이 없습니다.
  • 동적 UI에 적합합니다.

사용 사례:
React에서 버튼, 모달 또는 양식에 대한 여러 클래스 조건을 관리합니다.

예:
`'clsx'에서 clsx 가져오기;

const isActive = true;
const isDisabled = false;

const ButtonClass = clsx('btn', { 'btn-active': isActive, 'btn-disabled': isDisabled });
console.log(buttonClass); // "btn btn-active"`

3. 아아
더욱 강력하고 읽기 쉬운 입력 검증 실행

입력 검증은 종종 상용구 코드처럼 느껴집니다. 필요하지만 반복적이고 지루합니다. ow(많은 훌륭한 NPM 도구 창시자)의 Sindre Sorhus는 입력 검증을 선언적이고 읽기 쉽게 만듭니다.

과소평가된 이유:

  • 자세한 오류 메시지가 포함된 TypeScript 친화적입니다.
  • 더 깔끔한 코드를 위한 표현적 구문.
  • 외부 종속성 없이 복잡한 유효성 검사를 처리합니다.

사용 사례:
API 응답, CLI 입력 또는 함수 인수를 검증합니다.

예:
`'ow'에서 ow 가져오기;

const verifyUser = (사용자) => {
ow(사용자, ow.object.exactShape({
이름: ow.string.minLength(3),
나이: ow.number.integer.Positive,
이메일: ow.string.url,
}));
};

validateUser({ 이름: 'John', 나이: 25, 이메일: 'example@example.com' }); // 통과`

4. npm-확인
의존성을 점검하세요

프로젝트의 종속성이 오래된 것인지 또는 제거할 수 있는 것이 있는지 궁금한 적이 있습니까? npm-check는 node_modules의 Marie Kondo와 같습니다.

과소평가된 이유:

  • 오래되었거나 사용되지 않거나 누락된 종속성을 확인합니다.
  • 대화형 CLI를 사용하면 패키지를 직접 업데이트하거나 제거할 수 있습니다.
  • 글로벌 및 로컬 패키지에서 작동합니다.

사용 사례:
수동 검사 없이 프로젝트 종속성을 깨끗하고 최신 상태로 유지합니다.

예:
npx npm-검사

이 명령을 실행하면 종속성을 업데이트하거나 제거할 수 있는 옵션이 포함된 대화형 종속성 목록이 제공됩니다.

5. 로그 기호
최소한의 노력으로 향상된 CLI 피드백

CLI 도구 또는 스크립트를 구축하시나요? 로그 기호를 사용하면 로그를 더욱 직관적으로 만들 수 있습니다. 터미널 출력에 플랫폼 친화적인 아이콘(체크 표시, 십자 표시, 경고)을 추가합니다.

과소평가된 이유:

  • 터미널 출력을 시각적으로 매력적이고 이해하기 쉽게 만듭니다.
  • 가벼우며 사용자 정의가 가능합니다. = macOS, Linux, Windows 등 모든 플랫폼에서 작동합니다.

사용 사례:
사용자 정의 CLI 도구 또는 배포 스크립트에 시각적 피드백을 추가합니다.

예:
`'log-symbols'에서 logSymbol 가져오기;

console.log(logSymbols.success, '빌드가 성공적으로 완료되었습니다!');
console.log(logSymbols.error, '데이터베이스 연결에 실패했습니다.');
console.log(logSymbols.warning, '기본 구성을 사용합니다.');`

NPM에는 일반적인 용의자보다 더 많은 것이 있습니다.

다음번에 반복적인 작업에 갇히거나 무언가를 처리하는 더 스마트한 방법을 찾고 있다면 NPM 생태계의 잘 알려지지 않은 부분에 대해 알아보세요.

가장 과소평가된 NPM 패키지는 무엇입니까?

위 내용은 사용하고 있지 않지만 사용해야 하는 NPM 패키지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿