[Refactor] date-fns 라이브러리 제거 #469

lydiacho · 2024-10-16T17:41:57Z

Related Issue : Closes #458

🧑‍🎤 Summary

date-fns 라이브러리에서 사용하던 기능을 유틸함수로 직접 구현하여
date-fns 라이브러리를 제거하였습니다.

아래 코멘트가 굉장히 긴데 내용은 정말 별거 없고 그냥 읽기 쉬우시라고 코드도 같이 정리해둔것이니 부담없이 봐주세요!

🧑‍🎤 Screenshot

전

후

미미하지만...
tokenInstance 번들 25KB
빌드시간 약 0.5s 감소

🧑‍🎤 Comment

기존에 사용하던 모듈들은 다음과 같았어요

isAfter

import { isAfter } from 'date-fns/isAfter';
const beforeRecruiting = isAfter(new Date(applicationStart || ''), new Date());

isBefore

import { isBefore } from 'date-fns/isBefore';
const afterRecruiting = isBefore(soptApplyAccessTokenExpiredTime, new Date());

differenceInSeconds

import { differenceInSeconds } from 'date-fns/differenceInSeconds';
const diffInSeconds = differenceInSeconds(ExpiryTime, now);

subMinutes, format, locale/ko

const formattedApplicationEnd = format(subMinutes(new Date(applicationEnd || ''), 1), 'M월 dd일 (E) aaa HH시 mm분', {
  locale: ko,
});

변환해보자!

일단 기본적으로 고려한건 기존에 라이브러리를 사용하던 코드의 형태를 최대한 수정하지 않도록
date-fns에서 정의하는 타입 형태를 거의 그대로 가져왔어요

0️⃣ Date 형변환
기존 코드들을 살펴보니
Date 받아야할 곳에

const afterRecruiting = isBefore(soptApplyAccessTokenExpiredTime, new Date());

서버에서 받은 UTC 문자열을 바로 넣어줄 때도 있고

const beforeRecruiting = isAfter(new Date(applicationStart || ''), new Date());

이렇게 문자열 / 빈문자열을 Date 타입으로 변환해서 넣어줄 때도 있더라고요

기존에 date-fns는 모든 date prop을 string | number | Date 로 받아서 Date가 아니어도 알아서 변환을 해줬죠
저도 그 부분을 추가했습니다.
number는 넣어주는 경우는 없으니까 제외하고, string이 들어왔을 땐 별도로 형변환해주었어요 .

참고로 객체타입 아니고 문자열이니 typeof로 검사해줬어요

if (typeof date === 'string') date = new Date(date);
if (typeof dateToCompare === 'string') dateToCompare = new Date(dateToCompare);

1️⃣ isAfter, isBefore

이 친구들은 간단했어요.

기능 : date이 dateToCompare보다 이후인지 / 이전인지
타입 (출처 : 공식문서) :

function isBefore(
  date: string | number | Date,  // number 생략
  dateToCompare: string | number | Date  // number 생략
): boolean

→ Date.getTime() 을 사용해서 밀리초로 변환 후 차이 값 활용

export const isBefore = (date: Date | string, dateToCompare: Date | string): boolean => {
  if (typeof date === 'string') date = new Date(date);
  if (typeof dateToCompare === 'string') dateToCompare = new Date(dateToCompare);
  return date.getTime() < dateToCompare.getTime();
};

2️⃣ differenceInSeconds

기능 : 두 일시 간격이 몇 초인지 반환
타입 :

function differenceInSeconds(
  laterDate: string | number | Date, // number 생략
  earlierDate: string | number | Date, // number 생략
  options?: DifferenceInSecondsOptions // option 안써서 생략
): number

→ Date.getTime()을 사용해서 밀리초 차이값을 구한 후, 1000 나눠서 초 단위로 변환

이때 소수점 없애야 하는데 반올림 아니고 버림인 것 확인하고 Math.floor 사용

export const differenceInSeconds = (laterDate: Date | string, earlierDate: Date | string): number => {
  if (typeof laterDate === 'string') laterDate = new Date(laterDate);
  if (typeof earlierDate === 'string') earlierDate = new Date(earlierDate);
  return Math.floor((laterDate.getTime() - earlierDate.getTime()) / 1000);
};

3️⃣ subMinutes

기능 : 입력된 날짜에서 특정 수 (분)만큼 빼기
타입 :

function subMinutes(
  date: DateArg<DateType>, // Date | string 으로 수정
  amount: number,
  options?: SubMinutesOptions<ResultDate> // option 안써서 생략
): ResultDate // Date로 수정

Date.getTime()으로 밀리초 변환 → 변환한 값 - amount * 60 * 1000 → 결괏값 setTime()으로 다시 Date 타입으로 변환

export const subMinutes = (date: Date | string, amount: number): Date => {
  if (typeof date === 'string') date = new Date(date);
  const newDate = new Date();
  newDate.setTime(date.getTime() - amount * 60 * 1000);
  return newDate;
};

4️⃣ format, locale/ko
타입 :

function format(
  date: string | number | Date,  // number 생략
  formatStr: string,
  options?: FormatOptions // options 삭제 
): string

요 format 함수 변환 작업을 하면서
언석님이 추천해주셨언 Intl.DateTimeFormat을 활용해보고자 했어요.
그런데 결론부터 말하자면 최선의 선택은 아닌 것 같아서 그냥 직접 파싱함수 구현해주었습니다.

Intl.DateTimeFormat 시도 과정

일단 코드 내에서 쓰고있는 format은 아래와 같았어요

M월 dd일 (E) aaa HH시 mm분
M월 dd일 (E)
M월 dd일 EEEE
M월 dd일

date-fns의 format을 사용하면 LDML Date Field Symbol Table 기준에 맞춰 아래와 같이 format 문자열을 넣어주면 잘 변환이 되어요.

const formattedApplicationStart = format(..., 'M월 dd일 (E) aaa HH시 mm분');

그런데 Intl.DateTimeFormat은 LDML을 기반으로 하지 않기 때문에 완전히 다른 형태로 format을 설정해줘야 해요.
거두절미하고 Intl.DateTimeFormat을 활용한 유틸함수도 일단 만들어보았는데요

interface formatIntlOptions {
  year: 'numeric' | '2-digit';
  month: 'numeric' | 'long';
  day: 'numeric' | '2-digit';
  weekday: 'long' | 'short' | 'narrow';
  // 오전 오후 표시할 수 있는 건 없네...
  hour: 'numeric' | '2-digit';
  minute: 'numeric' | '2-digit';
}

export const _formatIntl = (date: Date, options: Partial<formatIntlOptions>): string => {
  return new Intl.DateTimeFormat('ko-KR', { ...options, timeZone: 'Asia/Seoul' }).format(date);
};

유틸함수 이렇게 구현하고 아래와 같이 테스트용 코드를 작성해서 output을 출력해봤어요 (format라브는 date-fns 쓴거, format유틸은 제가만든 유틸함수 쓴거, formatIntl이 DateTimeFormat 쓴거!)

const format라브 = format(new Date('2024-06-20T15:27:45.000Z'), 'M월 dd일 (E) aaa HH시 mm분', { locale: ko });
const format유틸 = _format(new Date('2024-06-20T15:27:45.000Z'), 'M월 dd일 (E) aaa HH시 mm분');
const formatIntl = _formatIntl(new Date('2024-06-20T15:27:45.000Z'), {
  month: 'long',
  day: '2-digit',
  weekday: 'short',
  hour: '2-digit',
  minute: '2-digit',
});
console.log('🚀format by lib: ', format라브);
console.log('🚀format by util: ', format유틸);
console.log('🚀format by Intl: ', formatIntl);

결과는 이랬어요

직접 만들어서 써보고 느낀 Intl 메소드의 한계점

우리가 사용하는 format이 곳곳마다 조금씩 다른데, 형태가 한가지가 아닌 경우엔 사용하는 곳에서 (위에처럼) 매번 options prop을 직접 넣어줘야함.
그나마 편하게 선택할 수 있게 타입추론 가능하도록 interface를 만들었지만, options prop 자체에도 한계점이 있음
- 오전 오후 표시 기능 없어서 따로 추가해야 함
- 시 / 분의 단위도 따로 붙여줘야 함

따라서 굳이 이걸 복잡하게 활용하기보다
기존에 저희가 쓰던 date-fns의 LDML 형태의 format 사용을 유지하되, 저희가 사용할만한 옵션만 따로 빼서 간단히 파서를 만들어주는게 훨씬 쉽겠다 싶었어요!

그래서 저희가 쓰고있는/쓸만한 기호만 추출해서
숫자로 변환해주고 + 기호 외의 글자는 그대로 유지되도록 정규식 replace 메소드 써서 함수 만들어줬어요

format함수

export const format = (date: Date | string, formatStr: string): string => {
  if (typeof date === 'string') date = new Date(date);
  const days = ['월', '화', '수', '목', '금', '토', '일'];
  const formatter: { [key: string]: string } = {
    M: (date.getMonth() + 1).toString(),
    dd: date.getDate().toString().padStart(2, '0'),
    E: days[date.getDay() - 1],
    EEEE: days[date.getDay() - 1] + '요일',
    aaa: date.getHours() < 12 ? '오전' : '오후',
    HH: date.getHours().toString().padStart(2, '0'),
    hh: (date.getHours() % 12 || 12).toString().padStart(2, '0'),
    mm: date.getMinutes().toString().padStart(2, '0'),
  };

  return formatStr.replace(/M|dd|E|EEE|aaa|HH|hh|mm/g, (substr) => formatter[substr]);
};

date-fns 라브 코드도 열어봤는데 훨씬 복잡하지만 대충 이런 맥락으로 구현되어있더라구요

간단한 테스트 완료

저는 로컬에서 서버를 띄우는걸 포기했어요
그래서 이 유틸함수를 어떻게 간단하게 테스트해보면 좋을까... 하다가
postman에서 저희가 받는 UTC 문자열 하나 따와서 sampleDate로 넣어놓고,
date-fns 메소드를 먹였을 때의 Output과 제 유틸함수를 적용시킨 output을 일치 연산자로 비교해서 체크해줬어요

아무래도 테스트케이스가 부족하겠지만... 추후 서버 복구되면 QA 한번 돌려보면 될 것 같아요

테스트용 임시 함수

const dateTest = () => {
  const sampleDate = '2024-06-20T15:27:45.000Z';

  const isBefore라브 = isBefore(sampleDate, new Date(1987, 1, 11));
  const isBefore유틸 = _isBefore(sampleDate, new Date(1987, 1, 11));
  console.log('🚀isBefore Test:', isBefore라브 === isBefore유틸);

  const isAfter라브 = isAfter(sampleDate, new Date(1987, 1, 11));
  const isAfter유틸 = _isAfter(sampleDate, new Date(1987, 1, 11));
  console.log('🚀isAfter Test:', isAfter라브 === isAfter유틸);

  const dIS라브 = differenceInSeconds(sampleDate, new Date(2014, 6, 2, 12, 30, 7, 999));
  const dIS유틸 = _differenceInSeconds(sampleDate, new Date(2014, 6, 2, 12, 30, 7, 999));
  console.log('🚀differenceInSeconds Test:', dIS라브 === dIS유틸);

  const subMinutes라브 = subMinutes(new Date(sampleDate), 30);
  const subMinutes유틸 = _subMinutes(new Date(sampleDate), 30);
  console.log('🚀subMinutes Test:', subMinutes라브.getTime() === subMinutes유틸.getTime());

  const format라브 = format(sampleDate, 'M월 dd일 (E) aaa HH시 mm분', { locale: ko });
  const format유틸 = _format(sampleDate, 'M월 dd일 (E) aaa HH시 mm분');
  console.log('🚀format Test:', format유틸 === format라브);
};

첨언

UTC든 뭐든 Date 객체로 감사면 시스템에 맞춰 한국 표준 시간대로 자동으로 변환이 되더라고요. 저희는 이제 문자로 prop 받아도 무조건 다 Date로 변환시켜주는 방식을 사용하니까 locale 관련되어 따로 처리는 안해줬어요. 그래도 방법은 알아두었으니 혹시 모를 케이스를 대비해 추가하면 좋을 것 같다 싶다면 말씀해주세요! 추가하겠습니다.

height · 2024-10-16T17:42:01Z

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

eonseok-jeon

고생하셨습니다 :)

src/common/utils/dateFormatter.ts

cloudflare-workers-and-pages · 2024-10-21T10:17:48Z

Deploying sopt-recruiting-frontend-test with Cloudflare Pages

Latest commit:	`ab2d87d`
Status:	✅ Deploy successful!
Preview URL:	https://9b286585.sopt-recruiting-frontend-test.pages.dev
Branch Preview URL:	https://refactor--458-remove-datefns.sopt-recruiting-frontend-test.pages.dev

View logs

* [Refactor] context provider를 컴포넌트로 분리 (#437) * refactor: device type provider component로 분리 * chore: alias 추가 * refactor: useDeviceType 적용 * refactor: recruiting info provider component로 분리 * refactor: useRecruitingInfo 적용 * refactor: theme provider component로 분리 * refactor: useTheme 적용 * docs: 기존 파일 제거 * chore: 에러 메세지 수정 * chore: 변수명 통일 * chore: 불필요한 export 제거 * [Refactor] 번들 크기 개선 - 1 (#434) * buil: bundle size visualizer 설치 * refactor: lottie 관련 필요 기능만 구현하기 * build: light 버전 import * chore: lottie file size 줄이기 * [Refactor] 번들 크기 개선 - 2 (#435) * build: date-fns locale import 범위 좁히기 * chore: 코드 복구 * [Refactor] 번들 크기 개선 - 3 (#432) * refactor: lazy loading 적용 * refactor: dialogs들에도 lazy import 적용 * build: manual chunk 적용 * chore: visualizer 자동 open option 제거 * [Feat] 테스트 코드 초기 세팅 (#439) * build: library 설치 * feat: lint 설정 * feat: config 설정 * feat: custom render 생성 * build: library 추가 설치 * feat: test setup 파일 추가 * chore: alias 추가 * fix: custon render option 속성 optional 하게 받기 * chore: 주석 제거 * build: test library 버전업 * fix: custom render type 수정 * feat: custom render에 memory router 추가 * feat: custom render에 query client provider 추가 * fix: fillStyle을 null로 설정할 수 없는 에러 해결 * fix: test 환경에 modal div 생성 * fix: custom render에 form provider 추가 * fix: window 함수 선언 * docs: README 수정 * [Chore] reviewer에 주용이 추가 (#443) * chore: 주용이 추가 * [Refactor] token 필요없는 fetch custom hook 만들기 (#445) * feat: 기존 axios instace -> fetch instance로 대체 * refactor: 기존 코드 fetch instance로 변경 * refactor: headers type 제한 * feat: instace option method type 제한 * [Refactor] ApplyPage 로직 분리 - 1 (#441) * chore: 관심사 끼리 분류 * refactor: 페이지 이탈 alert custom hook으로 분리 * refactor: isReview 전역 변수로 빼기 * refactor: apply page loading 제거 * feat: useDialog hook 생성 * refactor: useDialog 적용 * chore: dialog들 Form Provider 바깥으로 빼기 * chore: 오타 제거 * refactor: isReview 전역변수 제거 * feat: useEventListener custom hook 제작 * refactor: useEventListener 적용 * [Feat] env 개발 환경 분리하기 (#448) * feat: env 분리 * feat: build 명령어 분리 * fix: build 명령어 수정 * [Feat] 환경변수를 활용한 동적 메타태그 구현 (#455) * install: react-helmet-async 설치 * feat: provider 추가 * feat: index.html에서 helmet으로 이동 * feat: URL 추가 * fix: isMakers context->env로 가져오기 * chore: 테스트용 연산자 제거 * fix: 환경변수 말고 MODE 활용 * fix: useDate 내부 isMakers도 수정 * [Refactor] fetch instance 기능 보강 (#450) * feat: error 처리 로직 세분화를 위한 custom error 생성 * feat: params 처리 * feat: form data 처리 * refactor: instance 적용 * chore: fetcher로 이름 변경 * [Feat] browserslist 추가 (#452) * feat: browserslist 추가 * feat: 지원되는 browser 파악하는 regex 생성 * design: 지원 안 되는 브라우저 안내 페이지 생성 * feat: browser 판단 로직 구현 * fix: supported browsers ts로 변경 * [Design] 지원 안 되는 브라우저 안내 페이지 퍼블리싱 (#464) * design: 지원되지 않는 페이지 퍼블리싱 * fix: icon들 png -> svg 변경 * desing: 반응형 구현 * design: 중앙 정렬 * fix: 문의하기 링크 수정 * design: 높이 수정 * design: header 추가 * design: layout 추가 * design: css 수정 * design: sopt logo 변경 * fix: 비교 연산자 수정 * [Feat] 지원 안 되는 브라우저 안내 페이지 pre render 하기 (#465) * feat: unsupported page html 파일 생성하기 * fix: 지원 안되는 브라우저 경로 수정 * design: 문장 사이 공백 추가 * refactor: script 위치 수정 * design: css 파일 추출 * refactor: build 명령어 수정에 따른 html, css 파일 수정 * refactor: renderToStaticMarkup으로 변경 * feat: gitignore에 unsupported.html 추가 * design: css 수정 * [Refactor] lottie-react 재도입 및 patch를 이용한 번들 사이즈 감소 (#466) * chore: 사용 안되는 컴포넌트 제거 * refactor: lottie-react로 변경 * refactor: patch를 이용하여 lottie-web/light 버전 이용 * docs: read me 수정 * [Feat] MSW 도입 (#453) * install: msw 설치 * feat: generate worker script * feat: msw 기본 코드 테스트 * chore: amplitude 주석처리 * chore: 주석 해제 * [Refactor] date-fns 라이브러리 제거 (#469) * feat: isBefore, isAfter 함수 구현 * feat: differenceInSeconds 함수 구현 * feat: subMinutes 함수 구현 * feat: format 함수 구현 * remove: Intl 덜어내기 * feat: string -> Date 형변환 처리 추가 * remove: test 용 파일 삭제 * remove: date-fns 라이브러리 삭제 * feat: EEEE RegExp 추가 * fix: toDate 함수 분리 * fix: 요일 인덱스 버그 픽스 * fix: toDate 적용 및 throw Error -> console error로 수정 * fix: throw Error 코드 복구 * fix: chrome 판단 regex 수정 (#470) * [Refactor] OpenAPI를 이용하여 api interface 추출하기 (#472) * feat: openapi spec을 이용한 api interface 생성 * feat: api interface를 가지는 fetcher 생성 * feat: 각 api에 맞는 interface 추출하기 위한 명령어 작성 * chore: 명령어 실행 * feat: gitattributes 설정 * fix: 명령어 폴더명 수정 * fix: 빌드 에러 수정 * [Refactor] Amplitude tracking 로직 컴포넌트로 분리 (#473) * feat: amplitude event track component 생성 * feat: Button component에 Amplitude event track component 감싸기 * refactor: amplitude event track component 적용 * fix: build error * fix: build error * fix: 지원되지 않는 브라우저 로직 수정 --------- Co-authored-by: lydiacho <[email protected]>

* [Refactor] context provider를 컴포넌트로 분리 (#437) * refactor: device type provider component로 분리 * chore: alias 추가 * refactor: useDeviceType 적용 * refactor: recruiting info provider component로 분리 * refactor: useRecruitingInfo 적용 * refactor: theme provider component로 분리 * refactor: useTheme 적용 * docs: 기존 파일 제거 * chore: 에러 메세지 수정 * chore: 변수명 통일 * chore: 불필요한 export 제거 * [Refactor] 번들 크기 개선 - 1 (#434) * buil: bundle size visualizer 설치 * refactor: lottie 관련 필요 기능만 구현하기 * build: light 버전 import * chore: lottie file size 줄이기 * [Refactor] 번들 크기 개선 - 2 (#435) * build: date-fns locale import 범위 좁히기 * chore: 코드 복구 * [Refactor] 번들 크기 개선 - 3 (#432) * refactor: lazy loading 적용 * refactor: dialogs들에도 lazy import 적용 * build: manual chunk 적용 * chore: visualizer 자동 open option 제거 * [Feat] 테스트 코드 초기 세팅 (#439) * build: library 설치 * feat: lint 설정 * feat: config 설정 * feat: custom render 생성 * build: library 추가 설치 * feat: test setup 파일 추가 * chore: alias 추가 * fix: custon render option 속성 optional 하게 받기 * chore: 주석 제거 * build: test library 버전업 * fix: custom render type 수정 * feat: custom render에 memory router 추가 * feat: custom render에 query client provider 추가 * fix: fillStyle을 null로 설정할 수 없는 에러 해결 * fix: test 환경에 modal div 생성 * fix: custom render에 form provider 추가 * fix: window 함수 선언 * docs: README 수정 * [Chore] reviewer에 주용이 추가 (#443) * chore: 주용이 추가 * [Refactor] token 필요없는 fetch custom hook 만들기 (#445) * feat: 기존 axios instace -> fetch instance로 대체 * refactor: 기존 코드 fetch instance로 변경 * refactor: headers type 제한 * feat: instace option method type 제한 * [Refactor] ApplyPage 로직 분리 - 1 (#441) * chore: 관심사 끼리 분류 * refactor: 페이지 이탈 alert custom hook으로 분리 * refactor: isReview 전역 변수로 빼기 * refactor: apply page loading 제거 * feat: useDialog hook 생성 * refactor: useDialog 적용 * chore: dialog들 Form Provider 바깥으로 빼기 * chore: 오타 제거 * refactor: isReview 전역변수 제거 * feat: useEventListener custom hook 제작 * refactor: useEventListener 적용 * [Feat] env 개발 환경 분리하기 (#448) * feat: env 분리 * feat: build 명령어 분리 * fix: build 명령어 수정 * [Feat] 환경변수를 활용한 동적 메타태그 구현 (#455) * install: react-helmet-async 설치 * feat: provider 추가 * feat: index.html에서 helmet으로 이동 * feat: URL 추가 * fix: isMakers context->env로 가져오기 * chore: 테스트용 연산자 제거 * fix: 환경변수 말고 MODE 활용 * fix: useDate 내부 isMakers도 수정 * [Refactor] fetch instance 기능 보강 (#450) * feat: error 처리 로직 세분화를 위한 custom error 생성 * feat: params 처리 * feat: form data 처리 * refactor: instance 적용 * chore: fetcher로 이름 변경 * [Feat] browserslist 추가 (#452) * feat: browserslist 추가 * feat: 지원되는 browser 파악하는 regex 생성 * design: 지원 안 되는 브라우저 안내 페이지 생성 * feat: browser 판단 로직 구현 * fix: supported browsers ts로 변경 * [Design] 지원 안 되는 브라우저 안내 페이지 퍼블리싱 (#464) * design: 지원되지 않는 페이지 퍼블리싱 * fix: icon들 png -> svg 변경 * desing: 반응형 구현 * design: 중앙 정렬 * fix: 문의하기 링크 수정 * design: 높이 수정 * design: header 추가 * design: layout 추가 * design: css 수정 * design: sopt logo 변경 * fix: 비교 연산자 수정 * [Feat] 지원 안 되는 브라우저 안내 페이지 pre render 하기 (#465) * feat: unsupported page html 파일 생성하기 * fix: 지원 안되는 브라우저 경로 수정 * design: 문장 사이 공백 추가 * refactor: script 위치 수정 * design: css 파일 추출 * refactor: build 명령어 수정에 따른 html, css 파일 수정 * refactor: renderToStaticMarkup으로 변경 * feat: gitignore에 unsupported.html 추가 * design: css 수정 * [Refactor] lottie-react 재도입 및 patch를 이용한 번들 사이즈 감소 (#466) * chore: 사용 안되는 컴포넌트 제거 * refactor: lottie-react로 변경 * refactor: patch를 이용하여 lottie-web/light 버전 이용 * docs: read me 수정 * [Feat] MSW 도입 (#453) * install: msw 설치 * feat: generate worker script * feat: msw 기본 코드 테스트 * chore: amplitude 주석처리 * chore: 주석 해제 * [Refactor] date-fns 라이브러리 제거 (#469) * feat: isBefore, isAfter 함수 구현 * feat: differenceInSeconds 함수 구현 * feat: subMinutes 함수 구현 * feat: format 함수 구현 * remove: Intl 덜어내기 * feat: string -> Date 형변환 처리 추가 * remove: test 용 파일 삭제 * remove: date-fns 라이브러리 삭제 * feat: EEEE RegExp 추가 * fix: toDate 함수 분리 * fix: 요일 인덱스 버그 픽스 * fix: toDate 적용 및 throw Error -> console error로 수정 * fix: throw Error 코드 복구 * fix: chrome 판단 regex 수정 (#470) * [Refactor] OpenAPI를 이용하여 api interface 추출하기 (#472) * feat: openapi spec을 이용한 api interface 생성 * feat: api interface를 가지는 fetcher 생성 * feat: 각 api에 맞는 interface 추출하기 위한 명령어 작성 * chore: 명령어 실행 * feat: gitattributes 설정 * fix: 명령어 폴더명 수정 * fix: 빌드 에러 수정 * [Refactor] Amplitude tracking 로직 컴포넌트로 분리 (#473) * feat: amplitude event track component 생성 * feat: Button component에 Amplitude event track component 감싸기 * refactor: amplitude event track component 적용 * fix: build error * fix: build error * fix: 지원되지 않는 브라우저 로직 수정 * 배포 전 점검 (#475) * fix: build 명령어 수정 * fix: 오티 날짜 수정 * refactor: 기수 배열 자동으로 계산 * fix: 이름, 이메일, 전화번호 자동으로 안 채워지는 에러 해결 * fix: 파일 업로드 실패 시 업로드 상태 초기화 * refactor: 불필요한 props 제거 * fix: 임시저장 안 불러와지는 에러 해결 * fix: makers일 경우 knownPath에 빈 값 실어보내기 * fix: 빌드 에러 해결 * fix: 서류 결과 확인 에러 수정 * fix: 최종 결과 페이지 날짜 에러 해결 * chore: 코드 원상복구 --------- Co-authored-by: lydiacho <[email protected]>

lydiacho added 9 commits October 16, 2024 23:13

feat: isBefore, isAfter 함수 구현

e83394e

feat: differenceInSeconds 함수 구현

3a67265

feat: subMinutes 함수 구현

b98d32b

feat: format 함수 구현

4f16fb8

remove: Intl 덜어내기

63afc4a

feat: string -> Date 형변환 처리 추가

7374bdb

remove: test 용 파일 삭제

ceb709b

remove: date-fns 라이브러리 삭제

e62d6d6

feat: EEEE RegExp 추가

2075ced

lydiacho requested review from wuzoo and eonseok-jeon October 16, 2024 17:41

lydiacho self-assigned this Oct 16, 2024

pull-request-size bot added the size/M label Oct 16, 2024

eonseok-jeon approved these changes Oct 17, 2024

View reviewed changes

src/common/utils/dateFormatter.ts Outdated Show resolved Hide resolved

src/common/utils/dateFormatter.ts Outdated Show resolved Hide resolved

src/common/utils/dateFormatter.ts Outdated Show resolved Hide resolved

lydiacho added 4 commits October 18, 2024 16:11

fix: toDate 함수 분리

ac856e3

fix: 요일 인덱스 버그 픽스

9074cfc

fix: toDate 적용 및 throw Error -> console error로 수정

215b287

fix: throw Error 코드 복구

ab2d87d

pull-request-size bot added size/L and removed size/M labels Oct 21, 2024

lydiacho merged commit 4ca93aa into develop Jan 27, 2025
1 check passed

lydiacho deleted the refactor/#458_remove-datefns branch January 27, 2025 08:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Refactor] date-fns 라이브러리 제거 #469

[Refactor] date-fns 라이브러리 제거 #469

lydiacho commented Oct 16, 2024

height bot commented Oct 16, 2024

eonseok-jeon left a comment

cloudflare-workers-and-pages bot commented Oct 21, 2024 •

edited

Loading

[Refactor] date-fns 라이브러리 제거 #469

[Refactor] date-fns 라이브러리 제거 #469

Conversation

lydiacho commented Oct 16, 2024

🧑‍🎤 Summary

🧑‍🎤 Screenshot

🧑‍🎤 Comment

변환해보자!

Intl.DateTimeFormat 시도 과정

간단한 테스트 완료

첨언

height bot commented Oct 16, 2024

eonseok-jeon left a comment

Choose a reason for hiding this comment

cloudflare-workers-and-pages bot commented Oct 21, 2024 • edited Loading

Deploying sopt-recruiting-frontend-test with Cloudflare Pages

cloudflare-workers-and-pages bot commented Oct 21, 2024 •

edited

Loading