어떤 리액트 자바스크립트 프로젝트든지 그 수준을 높여줄 다섯 가지 마이크로 라이브러리들

Fay McInteer, 2020년 6월 19일

 

지난 몇 년 간 마이크로 자바스크립트 라이브러리들의 인기가 폭발했다는 것은 비밀이 아니다. 한 줌의 기능들을 사용하고자 거대하고 완전한 기능을 가진 프레임 워크들을 비싼 돈 내고 사지 않고 당신의 코드베이스에 포함할 유용하고, 잘 유지 보수되고 있으며 믿을 수 있는 라이브러리들을 골라내기 위해 어디서 시작해야 할지 약간 막막할 수 있다. 여기 어떤 크기의 자바스크립트 프로젝트더라도 그 수준을 높여줄, 내가 사용해 본 적 있는 굉장한 라이브러리들이 몇 개 있다.

 

is.js

arasatasaygin/is.js

아마도 내가 가장 좋아하는 라이브러리로, 나는 최근에 이것을 내 최신 프로젝트에 끌어들였다. 나는 코드베이스의 가독성을 향상시키고자 여러가지 이 메소드들을 정말 많은 곳에 사용했다. 이것들은 이해하기 쉽고 API 문서화가 굉장히 잘 되어 있다. 내가 흔히 사용하는 두 가지를 살펴 보자.

 

is.empty

// Before
const arr = []
!!arr.length OR arr.length > 0
const obj = {nestedObj: {}}
!!Object.keys(obj.nestedObj).length OR Object.keys(obj.nestedObj).length > 0
// After
is.not.empty(arr)
is.not.empty(obj.nestedObj)

 

is.existy

// Before
const test = undefined
test !== undefined || test !== null
// After
is.existy(test)

 

React-use

streamich/react-use

난 이 프레임워크에 대해 좋은 말 밖에 못 들어 봤고 나 역시 이걸 너무 좋아한다. 여기에 끼워 사용할 유용한 훅들의 종류가 폭넓은데 나는 지금까지 겨우 두 개 정도만 사용했는데도 이미 그 혜택을 느낀다. 여기에 재능 기부 하는 수 많은 사람들에 의해 활발히 유지 보수 되고 있고 앞으로도 한동안 존재할 것이란 느낌이 든다. 어떤 자바스크립트 프레임워크를 사용할 때라도 오래되거나 버그가 많은 코드를 가져오는 것을 지양해야 한다는 것은 고려할 점이다. 그러니 지원이 필요하거나 버그를 발견했다면 거기엔 당신의 문제를 보여줄만한 누군가가 있다.

 

여기서는 많은 예시를 들진 않겠지만 내 1순위는 useMount이다.

 

나는 Create React App 프로젝트에 이게 편리하다는 것을 알아냈는데 왜냐면 이것은 경고를 주지 않고는 빈 종속 배열을 사용한 useEffect 메소드를 생성하게 놔두지 않기 때문이다. 이에 대해 자세히 알고 싶다면 여기 매우 긴 댓글들이 있는데 나는 들어가지 않겠다. 하지만 우회로로, 이 편리한 리액트 훅을 대신 사용할 수 있다.

 

// Before
useEffect(() => {
 mountedAction()
}, []);
//After
useMount(() => { mountedAction() })

 

Date-fns

date-fns/date-fns

이것은 moment.js의 기능을 다 가지고 있지는 않지만 뭔가 더 가벼운 것을 찾고 있다면 무거운 moment.js의 대단한 대체품이다. 이것을 날짜들을 처리할 날짜 정하기 컴포넌트에 끼워서 날짜 정하기 컴포넌트 밖에서 날짜를 다루는 API 메소드들을 사용할 수 있기 때문에 프로젝트들 하는데에 특히 유용하다.

 

이걸로 할 수 있는 것들이 한가득이지만 비교 메소드들이 내가 찾은 가장 편리한 것이다. 몇 가지 예시들을 보자.

expect(differenceInSeconds(orderDate, new Date())).to.be.greaterThan(-1000);
expect(isPast(new Date(2020, 6, 2)).toBeTruthy()
expect(isToday(new Date(2014, 6, 2)).toBeFalsy()

 

Pass-meter

syntaqx/pass-meter

아마 여기 열거한 라이브러리들 중 가장 간단할텐데, 딱 한 가지 일만 하지만 그것을 잘한다. 비밀번호의 견고성을 시험하는 것이다. 빨리 실행시키는 간단한 로그인 시스템을 위한 정말 빠른 도우미라는 것 말고는 더 할 말이 별로 없다. 사용 하면 즉각 실패할 블랙리스트 비밀번호 조차도 패스하게 해준다. 이것 때문에 문서에 있는 예시가 이것이 어떻게 작동하는지를 나타내는 가장 깨끗한 것이라고 생각한다.

const meter = new PassMeter()
const pass  = 'apasswordtotest'
console.log('The password "' + pass + '" is ' + meter.test(pass) + '% strong');

 

Anime

juliangarnier/anime

난 이 라이브러리의 융통성에 뿅 갔다. 시작하기 쉬운데다가 만약 당신이 어떤 영감을 원한다면 이 코드펜 라이브러리에 놀라운 예시 갤러리가 있다. 이 갤러리가 당신이 알아야 할 모든 것을 말해주므로 난 여기서 멈추겠다.

 

결론

이 글은 날짜들부터 애니메이션을 만들기 위한 간단한 확인 라이브러리까지 폭넓은 기능을 다룬다. 우리는 우리가 만드는 다양한 UI들에서 이 모든 문제들을 겪었었다. 이러한 라이브러리들은 왔다가 또 갈 것이지만, 우리는 잘 관리된 코드베이스에 모쪼록 다수가 참여하는 것을 고르도록 해야 한다. 그래야 그것들이 꽤나 오랜 시간동안 존재할 것이며 최신 표준에 맞추어 업데이트 되고 있다는 확신을 가질 수 있다. 이 목록이 당신에게 유용했길 바라며 댓글에서 더욱 굉장한 라이브러리들에 대해 듣게되길 바란다.