[Quasar] TimePicker 한글 사용하기 (패키지 패치)

개요

Quasar는 국제화(i18n)를 지원합니다. 이를 이용해 간단히 ko-KR로 설정하면 컴포넌트의 주요 내용들이 한글로 표시됩니다. 예를 들어 DatePicker 컴포넌트의 경우, 요일이 한글로 표시됩니다.

하지만 Vuetify와 달리 Quasar 프레임워크의 TimePicker 컴포넌트는 국제화를 설정하여도 오전, 오후로 표기되었으면 하는 부분이 AM, PM 으로 표시됩니다.

본 글에서는 이와 관련된 내용을 직접 수정하고 패치로 만들어 프로젝트에 적용하는 방법을 기록하겠습니다.

TimePicker 표시 한글화 수정 결과

본문

코드 수정

프로젝트에 적용한 node_module을 직접 수정하였습니다.

node_module/quasar/src/components/time/QTime.js

QTime.js 파일의 'AM' 과 'PM' 문자열로 작성되어 있는 부분을 찾아 '오전', '오후'로 교체하였습니다.

코드 보존

코드의 수정 후, 동작을 확인하여 Time Picker 컴포넌트를 사용할 경우 AM/PM 문자가 오전/오후로 바뀌었음을 확인하였습니다.

수정한 코드가 프로젝트 구성시 반영되도록 package-patch 모듈을 설치한 후, 이를 이용해 patch 파일로 만들었습니다.

yarn add patch-package
yarn patch-package quasar
# patch 폴더가 생성되었다.

프로젝트에 모듈을 패키지 매니저로 설치한 후, 수정한 패치가 적용되도록 package.json 파일에 postinstall 항목을 추가하였습니다.

"scripts": {
  "postinstall": "patch-package"
}

동작 확인

프로젝트의 모듈을 설치시 수정한 내용이 반영되는지 확인하였습니다.

# 기존에 설치된 모듈을 삭제
rm node_module -rf
# 재설치
yarn install


...bash
patch-package
patch-package 6.4.7
Applying patches...
quasar@2.2.1 ✔
Done in 1.16s.

위와 같이 모듈의 코드가 수정되는 것을 확인하였습니다. 마지막으로 이것을 버전 관리 시스템에 등록하였습니다.

git add .
git commit -m"timepicker 한글 표시 수정`
git push

마무리

패키지의 소스를 수정하고 patch-package 모듈을 이용해 프로젝트에 적용 해보았습니다.

프로젝트에서 사용하는 패키지에 오류가 있다면 해당 오류가 해소되기 기다리거나, 직접 수정하고자 한다면 pull request와 같은 방법을 사용할 수 있습니다. 하지만 이러한 방법은 수정사항이 프로젝트에 반영될 때까지 시간이 걸립니다. 때문에 간단한 오류 수정이라면 본 글에서 소개한 방법을 사용하여 즉시 프로젝트에 적용하는 것도 좋은 선택입니다.