한 번은 date-fns를 사용하지 않으려고 했습니다.

우리 팀의 Pull Requests 중 하나에서 date-fns가 한 가지 용도에 대한 구성 요소 라이브러리의 종속성으로 추가되는 것을 발견했습니다. 즉, 직불 카드의 만료 날짜를 나타내므로 타임스탬프를 "MM/yy"문자열로 변환합니다.
You don't (may not) need lodash/underscore 에서 영감을 받아 2자리 월 및 2자리 연도 형식을 구현할 수는 없는지 속으로 생각했습니다. 간단해 보이죠?

기본 날짜documentation를 검사하면 getMonth - 월을 나타내는 0 인덱스 정수를 반환합니다. 먼저 사람이 읽을 수 있는 달의 값을 증가시켜야 합니다. 연도에 관해서는 getFullYear 가 있는데, 이는 매우 자명합니다.

함수를 작성해 보겠습니다. 반드시 재사용하기 위해서가 아니라 쉽게 테스트할 수 있도록 함수를 작성해 보겠습니다. 그리고 가장 멍청한 것을 작성하고 테스트마다 개선해 봅시다 ;)

function expiration(date) {
  return `${date.getMonth() + 1}/${date.getFullYear() % 100}`;
}


그것은 다음과 같이 훌륭하게 작동합니다

it('should return 11/22 for nov 2022 expiration', () => {
  expect(expiration(new Date(2022, 10)).toEqual('11/22');
});


하지만 물론 한 자릿수 개월 동안은 실패할 것입니다.

it('should return 03/23 for March 2022 expiration', () => {
  expect(expiration(new Date(2023, 2)).toEqual('03/23');
});

// Expected "3/23" to equal "03/23"


재미있는 속임수로 이 문제를 해결할 수 있습니다. 결과가 무엇이든 제목0을 간단히 채운 다음 substr에 대한 음의 인수를 사용하여 마지막 두 문자를 유지합니다.

function expiration(date) {
  return `0${date.getMonth() + 1}`.substr(-2) + 
         `/${date.getFullYear() % 100}`;
}


끝난 것 같나요? 무엇이 빠졌습니까?
.
.
.
.
.
.
.
.
.
.
.
.
.
.
맞아요. date.getFullYear() % 100의 나머지가 한 자리라면 어떻게 될까요?

it('should return 03/00 for March 2100 expiration', () => {
  expect(expiration(new Date(2100, 2)).toEqual('03/00');
});

// Expected "03/0" to equal "03/00"


우리를 이끄는

function expiration(date) {
  return `0${date.getMonth() + 1}`.substr(-2) +
         "/" +
         `0${date.getFullYear() % 100}`.substr(-2);
}


휴! 이제 알아낼 일만 남았습니다. 00이 무엇입니까? 2000 또는 2100?
date-fns , lodash 와 같은 라이브러리에서 사용할 수 있는 기능을 구현하는 데 얼마나 갔습니까?
트리 쉐이킹*이 최적의 프로덕션 JavaScript 패키징에서 깔끔한 작업을 수행하고 있다는 점을 고려할 때 번거로움(및 위험!)을 감수할 가치가 있습니까?

마지막으로 다른 방식으로 작성하고 싶은지 알려주세요. 코너 케이스를 놓친 적이 있습니까? "테스트 기반 개발"보다는 "이전 테스트"에 더 가깝지만 테스트 기반 접근 방식이 마음에 드셨기를 바랍니다.

*코드와 종속성의 모듈화(예: es-modules 또는 기타 구현 사용)를 사용하고 번들러가 사용하지 않는 코드를 다듬기 위해 모듈화를 활용할 수 있는 경우 제공

좋은 웹페이지 즐겨찾기