Fact

추가 기능 개발 및 정산 베타 서비스 전달

저번 주에 대부분의 구현을 마치고 이번주 초에 QA를 진행해 마무리를 하고, 정산 서비스를 사용하는 부서에 전달했다.

• 로케일 선택창 숨기기. 정산 페이지에서만 우선 다국어 기능이 필요해서 path로 분기를 해 숨김처리를 했는데, 메뉴와 버튼 등도 다국어 처리가 필요해 권한에 따라 처리하는 걸로 변경했다.
• 로케일에 따라 날짜와 돈 단위 표시를 변경하는게 좋을 것 같아 처리를 했다.
• antd에서 제공하는 align은 데이터의 정렬과 헤더의 정렬도 함께 바꿔 테이블 헤더 타이들이 어떤 건 왼쪽 정렬, 어떤 건 오른쪽 정렬로 되어있었다. header title type이 string과 React Node여서 가운데 정렬하는 컴포넌트를 만들어서 처리했다.

const ColumnHeader = ({ id }: { id: keyof typeof ko }) => {
  return <div className='text-center'>{translate(id)}</div>;
};

• 정산상태가 승인일 경우 모든 버튼을 비활성화 처리했다. 상태를 store에 넣고 필요한 컴포넌트에 정산 상태만 뽑아서 조건부렌더링하는 방식으로!

재정비 시간

베타를 전달하고 재정비 시간을 갖기로 했다.
나는 그동안 미뤄뒀던

• 9월 회고를 썼고,
• 리팩토링 2판 스터디를 하며 읽은 것을 정리했고,
• 몇 가지 블로그 글을 읽었다

Finding

Intl

지금까지 숫자에 소수점을 찍거나, 날짜 포맷을 변경해야 하는 경우에는 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);
};

Feeling

Intl은 팀원분이 이런게 있다고 알려주셔서 찾아보고 사용할 수 있었다. 능동적으로 다양한 정보를 찾아서흡수해야겠다고 생각했다.

생활적인면에서는 요즘 한약도 챙겨먹고 운동도 하면서 체력과 컨디션이 올라오는 걸 느낀다. 성장이라는 단어에 신물이 다시 슬금슬금 빠지면서 ㅋㅋㅋ목마름이 생기고 있다. 할 일은 여전히 너무 많지만 앞으로 단기,장기 공부 목표를 세울 예정이다.