저번 주에 대부분의 구현을 마치고 이번주 초에 QA를 진행해 마무리를 하고, 정산 서비스를 사용하는 부서에 전달했다.
const ColumnHeader = ({ id }: { id: keyof typeof ko }) => {
return <div className='text-center'>{translate(id)}</div>;
};
베타를 전달하고 재정비 시간을 갖기로 했다.
나는 그동안 미뤄뒀던
지금까지 숫자에 소수점을 찍거나, 날짜 포맷을 변경해야 하는 경우에는 substring으로 처리하거나 momentJS 라이브러리를 이용했다. 다국어를 지원하는 페이지라서 언어에 따라 숫자포맷과 날짜 포맷을 다르게 처리해야할 필요가 있었는데 Intl
객체를 이용해처리했다.
Intl 객체는 각 언어에 맞는 문자비교, 숫자, 시간, 날짜비교를 제공하는, ECMAScript 국제화 API를 위한 이름공간입니다. Collator, NumberFormat, DateTimeFormat는 Intl 객체의 속성을 위한 생성자입니다.
출처 : MDN - Intl
const LOCALE = {
vi: { code: 'vi-VN', currency: 'VND' },
ko: { code: 'ko-KR', currency: 'KRW' },
} as const;
export const convertNumberFormat = (locale: keyof typeof LOCALE, value: number) => {
return new Intl.NumberFormat(LOCALE[locale].code).format(value);
};
export const convertCurrencyFormat = (locale: keyof typeof LOCALE, value: number) => {
return new Intl.NumberFormat(LOCALE[locale].code, { style: 'currency', currency: LOCALE[locale].currency }).format(
value
);
};
export const convertDateFormat2 = (locale: keyof typeof LOCALE, date: string) => {
const value = new Date(date);
return new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'short' }).format(value);
};
Intl은 팀원분이 이런게 있다고 알려주셔서 찾아보고 사용할 수 있었다. 능동적으로 다양한 정보를 찾아서흡수해야겠다고 생각했다.
생활적인면에서는 요즘 한약도 챙겨먹고 운동도 하면서 체력과 컨디션이 올라오는 걸 느낀다. 성장이라는 단어에 신물이 다시 슬금슬금 빠지면서 ㅋㅋㅋ목마름이 생기고 있다. 할 일은 여전히 너무 많지만 앞으로 단기,장기 공부 목표를 세울 예정이다.