들어가며

국제화와 현지화의 차이

프론트엔드에서의 국제화와 현지화

현지화 추상화에 대한 고민

아니 국가별로 분리하기엔 겹치는 로직이 너무 많은데...?

1. 상품의 이름을 입력한다.
2. 상품의 가격을 입력한다.
3. 상품의 카테고리를 선택한다.
4. 상품의 설명을 입력한다.
5. 상품의 이미지를 업로드한다.
6. 상품의 재고 위치를 입력한다.
7. 상품의 결제 방식을 선택한다.

1. 상품의 이름을 입력한다.
2. 상품의 가격을 입력한다.
3. 상품의 카테고리를 선택한다.
4. 상품의 설명을 입력한다.
5. 상품의 이미지를 업로드한다.
6. 상품의 재고 위치를 입력한다.
7. 상품의 결제 방식을 선택한다.

무한 원숭이 정리

무한 원숭이 정리는 무한성에 기초한 정리로, 타자기 앞에 앉아서 마음대로 쳐대는 원숭이가 프랑스 국립 박물관의 모든 책을 언젠가는 쳐 낼 가능성이 거의 확실하다는 정리이다. - 위키백과

우리의 어플리케이션은 한국/미국/일본/중국/베트남 총 5개의 국가를 지원해야 합니다.
각 국가의 경우 국가에 맞는 배송 API를 통해 요청이 이루어지며, 각 국가의 오후 6시마다 배송에 대한 분기처리가 존재합니다. 분기 처리의 루트 또한 국가별로 상이합니다.
이외에도 유저의 등급과 관련된 부분들이 존재합니다.

• 한국 배송 API / 오후 6시 이전 / VIP 유저
• 한국 배송 API / 오후 6시 이후 / VIP 유저
• 한국 배송 API / 오후 6시 이전 / 일반 유저
• 한국 배송 API / 오후 6시 이후 / 일반 유저
• 미국 배송 API / 오후 6시 이전 / VIP 유저
• 미국 배송 API / 오후 6시 이후 / VIP 유저
• 미국 배송 API / 오후 6시 이전 / 일반 유저
• 미국 배송 API / 오후 6시 이후 / 일반 유저
• 일본 배송 API / 오후 6시 이전 / VIP 유저
• 그 외 무한한 케이스...

모노레포를 통한 해결법

패키지 레이어

• Case 1. Utility Layer의 utils 패키지는 하위 레이어인 Configuration Layer의 eslint-config 패키지를 의존할 수 있다.
• Case 2. UI Component Layer의 ui 패키지는 하위 레이어인 Utility Layer의 locale 패키지를 의존할 수 있다.
• Case 3. React Based Utility Layer의 hooks 패키지는 상위 레이어인 UI Component Layer의 components 패키지를 의존할 수 없다.
• Case 4. Service Layer의 queries 패키지는 상위 레이어인 Domain Business Layer의 domain 패키지를 의존할 수 없다.

Configuration Layer

• eslint-config : 각 패키지에 사용되는 eslint의 설정 파일인 eslint.config.js 파일을 정의한다.
• typescript-config : 각 패키지에 사용되는 typescript의 설정 파일인 tsconfig.json 파일을 정의한다.

ex) ui 패키지에서의 storybook 관련 eslint 설정 추가

Utility Layer

• utils : 각 패키지에 사용되는 유틸리티 함수를 정의한다. 해당 유틸리티 함수는 도메인에 종속되는 비즈니스 로직을 포함하지 않는다.
• locale : 각 패키지에 사용되는 측량, 시간 등 현지화 및 번역 함수를 정의한다. 해당 현지화 함수는 도메인에 종속되는 비즈니스 로직을 포함하지 않는다.

React Based Utility Layer

• hooks : 각 패키지에 사용되는 커스텀 훅을 정의한다.
• store : 각 패키지에 사용되는 전역 상태 관리 스토어를 정의한다.

UI Component Layer

• ui : 각 패키지에 사용되는 컴포넌트를 정의한다.

Service Layer

• queries : 각 패키지에 사용되는 네트워크 요청 관련 함수 및 커스텀 훅을 정의한다.

Domain Business Layer

• domain : 각 패키지에 사용되는 도메인 비즈니스 로직 및 컴포넌트를 정의한다.

탑다운 방식으로 이해해보기

• app-kr : 한국 어플리케이션
• app-us : 미국 어플리케이션, 센트 표시 여부가 결정되어야한다.
• app-jp : 일본 어플리케이션
• app-cn : 중국 어플리케이션
• app-vn : 베트남 어플리케이션

• app-kr : 한국 어플리케이션
  • /components/KoreanExchangeRateForm.tsx
• app-us : 미국 어플리케이션
  • /components/USExchangeRateForm.tsx
• app-jp : 일본 어플리케이션
  • /components/JapaneseExchangeRateForm.tsx
• app-cn : 중국 어플리케이션
  • /components/ChineseExchangeRateForm.tsx
• app-vn : 베트남 어플리케이션
  • /components/VietnameseExchangeRateForm.tsx

1// packages/domain
2function ExchangeRateForm(
3   // 확장을 결정하는 props를 주입받는다.
4) {
5  return <form>
6    //...
7  </form>;
8}
9
10// app-en
11function USExchangeRateForm() {
12  return <ExchangeRateForm someProp={utilsForUSA} />;
13}
14

1// packages/queries
2function useGetExchangeRate() {
3  return useQuery({
4    queryKey: ['exchangeRate'],
5    queryFn: () => axios.get('/api/exchange-rate'),
6  });
7}
8
9// packages/domain
10function ExchangeRateForm() {
11  const { data } = useGetExchangeRate();
12
13  return <form>
14    //...
15  </form>;
16}
17

1import { Input, Button } from '@repo/ui';
2
3// packages/domain
4function ExchangeRateForm() {
5  const { data } = useGetExchangeRate();
6
7  return <form>
8    //...
9    <Input />
10    <Button>
11      //...
12    </Button>
13  </form>;
14}
15

1import { useInput } from '@repo/hooks';
2
3// packages/domain
4function ExchangeRateForm() {
5  const { value, handleChange } = useInput();
6  const { data } = useGetExchangeRate();
7
8  return <form>
9    //...
10    <Input value={value} onChange={handleChange} />
11    <Button>
12      //...
13    </Button>
14  </form>;
15}
16

1import { translate } from '@repo/locale';
2
3// packages/domain
4function ExchangeRateForm() {
5  const { value, handleChange } = useInput();
6  const { data } = useGetExchangeRate();
7
8  return <form>
9    //...
10    <Input value={value} onChange={handleChange} />
11    <Button>
12      {translate('계산')}
13    </Button>
14  </form>;
15}
16

마치며