도와줘요!! Antd DatePicker에서 한글이 안나와요!!

작은 지식이라도, 하루에 하나씩.

---

 

한 줄 요약

---

 

🦄 import 'moment/dist/locale/ko'🦄
🦄 import 'moment/locale/ko' 아님!!!🦄
🦄아주 황당한 일이 생겼으니 재미로 봐주세요🦄

 

 

 

본문

---

Dependency

antd: ^4.19.5
moment: ^2.29.2

 

 

 

아시다시피, antd는 moment를 사용합니다.

 

모멘트가 사망선고가 내려진지 엉겁의 시간이 흘렀지만, 모멘트가 감히 사망할것이라 추측하지 못한 탓인지, 아니면 그간 정이 너무 들었던지는 몰라도 antd는 계속해서 moment를 사용하고 있습니다. API도 moment 객체를 기준으로 설명하고 있고요.

 

물론, 모멘트 사후 moment.js를 쓰는 Component를 Day.js로 바꾸는 방법도 소개하고 있는데, 이게 여간 귀찮은게 아니라, 빨리빨리 뭔갈 화면에 그려야하는 상황에 놓인다면 눈 질끔 감고 yarn add moment를 터미널에 치고 맙니다.

 

 

여하튼, 오늘은 moment를 사용하는 antd의 DatePicker를 한글화 하는 방법에 대해서 알아보겠습니다.

 

 

본문2

---

먼저 간단히 DatePicker 컴포넌트를 불러봅시다.

 

import logo from "./logo.svg";
import "./App.css";
import { DatePicker } from "antd";

function App() {
  return (
    <div className="App">
      <DatePicker />
    </div>
  );
}

export default App;

 

 

 

 

기본적으로 DatePicker는 이렇게 영어를 출력합니다.

그래서 공식문서에서는 이를 한글화하려면, ConfigProvider를 사용하라는 말을 해줍니다.

 

 

https://ant.design/components/date-picker/#Localization

DatePicker - Ant Design

 

 

좋습니다. 그럼 문서가 시키는대로 ConfigProvider를 설정해봅시다.

 

 

 

import logo from "./logo.svg";
import "./App.css";
import { DatePicker } from "antd";
import moment from "moment";
import locale from "antd/lib/locale/ko_KR"; // 우린 한국인이니까 ko_KR를 불러옵시다
import { ConfigProvider } from "antd";

function App() {
  return (
    <ConfigProvider locale={locale}>
      <div className="App">
        <DatePicker />
      </div>
    </ConfigProvider>
  );
}

export default App;

 

 

 

아니 되긴 되었는데 왜 반푼이가 되었지?

 

뭔가 적용되긴 되었는데, 달/요일은 한글화가 되지 않은 반푼이 같은 모습입니다.

 

그래서 몇번의 구글링을 더 해본 결과, moment/locale/ko를 import 한 다음 moment.locale(ko)를 해줘야한다는 글을 보았습니다.

 

좋습니다. 그럼 해봅시다.

 

 

 

 

import logo from "./logo.svg";
import "./App.css";
import { DatePicker } from "antd";
import moment from "moment";
import "moment/locale/ko";
import locale from "antd/lib/locale/ko_KR";
import { ConfigProvider } from "antd";

moment.locale("ko");

function App() {
  return (
    <ConfigProvider locale={locale}>
      <div className="App">
        <DatePicker />
      </div>
    </ConfigProvider>
  );
}

export default App;

 

 

뭐야 왜 되는거야

 

 

 

? 왜 되는거지???

 

아니 어제는 분명 안됐는데???

 

 

 

 

 

 

---

 

확인 결과, 제가 이 문제를 겪은 moment 버전인 2.29.1에서 local 파일이 잘못 설정되었다는 것 같습니다... 그게 막 제보되어 22/04/04 딱 어제 새로운 버전이 배포되었네요..

 

오늘 이 문제를 재현하려고 쓴 2.29.2 버전에서는 아무런 문제 없이 잘되니, 안심하시고 다른 분들이 설명하신 대로 사용하시면 되겠습니다.

 

저는 엊그제 레포 이슈, 인터넷 게시글, 공식 문서, 과거의 제 코드에서 모두 moment/locale/ko를 import 하는데 저만 moment/dist/locale/ko를 import 해서 왕따 당하는 기분이였습니다.

 

근데 버전 이슈일 줄이야.....

 

 

분하다...분해...

 

 

 

참고 했던 글들

---

 

 

https://github.com/ant-design/ant-design/issues/31748

DatePicker component day names are not localized · Issue #31748 · ant-design/ant-design

 

 

https://maliceit.tistory.com/43

Javascript Moment JS : moment().fromNow()에서 언어를 한글로 변환하는 방법