사내 백오피스 프로젝트에서 숫자의 단위가 같은데폰트의 크기가 달라 가독성이 떨어진다는 요구사항을 받았습니다. 이 프로젝트는 특성상 가격 데이터를 많이 다루기 때문에숫자의 가독성이 중요했습니다.해결방법 함께 알아봅시다. 😀 📝 문제 상황 ⦁가변폭 폰트 vs 고정폭 폰트해당 현상이 발생한 이유는 사용중인 Pretendard 폰트가 가변폭 폰트이기 때문입니다.⦁ 가변폭 폰트 (Proportional Font)글자마다 너비가 서로 다르게 설정된 폰트입니다. 예를 들어 i는 좁고, m은 넓게 표시됩니다.- 일반적인 본문에 사용⦁ 고정폭 폰트 (monospaced font, fixed-pitch, fixed-width, non-proportional font)모든 글자와 기호가 동일한 너비를 가지는 폰트입니다...

신규 프로젝트의 다국어 적용을 마치고기존 프로젝트에도 다국어 적용이 필요한 상황이었습니다.하지만 문제는 기존 프로젝트는 자바스크립트 프로젝트라는 것입니다. 신규 프로젝트는 타입스크립트로 진행했기 때문에어려움 없이 자동완성의 혜택을 누릴 수 있었지만,자바스크립트 프로젝트에서는 다국어 메시지 자동완성이 불가능했습니다. 자동완성 없이 다국어 메시지를 적용한다고? 🤔 이건 여러모로 좋지 않을 것 같아서방법을 찾아봤습니다. 결론부터 말하면 부분적 타입스크립트 도입 + JSDoc을 활용해서다국어 메시지의 자동완성을 구현했던 건에 대해서 소개하겠습니다. 😀 📝 JavaScript 프로젝트에서 .d.ts 파일 생성하기 ⦁1. 타입스크립트를 devDependencies로 설치yarn add -D typescript..

https://hyunki99.tistory.com/124 [Next.js] Next 15 국제화라이브러리 비교 + 적용하기 (i18n, next-intl)요즘의 모던하고 글로벌한 웹에는 국제화(i18n)와 지역화(i10n)라는 개념이 등장합니다.쉽게 정리하면 다음과 같습니다.✅ 국제화(i18n, Internationalization): → 다국어 지원을 위해 코드 구조를 준비hyunki99.tistory.com지난 시간에 next-intl 라이브러리를 사용해서다국어 지원을 구현했습니다. 이제 더 중요한 숙제가 남았는데요, 바로 다국어 메시지 관리입니다.프로젝트의 규모가 커지고 지원하는 언어가 늘어나면다국어 메시지를 관리하기 복잡해집니다. 코드를 수정할 때마다 각각의 언어 파일의 Json을 찾아 수정하..

요즘의 모던하고 글로벌한 웹에는 국제화(i18n)와 지역화(i10n)라는 개념이 등장합니다.쉽게 정리하면 다음과 같습니다.✅ 국제화(i18n, Internationalization): → 다국어 지원을 위해 코드 구조를 준비하는 과정→ 예: 문자열을 하드코딩하지 않고 번역 파일을 사용✅ 지역화(l10n, Localization):→ 특정 언어와 문화에 맞게 UI와 콘텐츠를 변경하는 과정→ 예: 날짜/시간 형식 변경, 통화 기호 적용 ($, ¥ 등) , 번역된 텍스트 사용🚀 쉽게 말하면 i18n은 "준비", l10n은 "적용"하는 과정이다.이번에 저희 회사에서 신규 백오피스 프로젝트에 일본어 지원이 필요해국제화를 적용하게 되었습니다. Next.js 15의 앱라우터에서 국제화를 도입한 경험을 공유합니다..

Next.js 14버전으로 개발한 웹사이트를 구글 서치 콘솔에 등록하려고 했지만,robots 메타태그에서 noindex에 의해 제외되었다는 메시지가 표시되었습니다. 🤔 문제를 확인해 보니, 웹사이트는 정상적으로 동작하는 것처럼 보였지만next build를 통해 생성된 빌드 파일이 Next.js 에러 페이지를 출력하고 있었습니다. html id="__next_error__" 해결과정 함께 알아봅시다 😀 📝 문제 상황  ⦁__next_error__Next.js의 에러 페이지는 기본적으로 메타태그를 포함합니다.따라서 noindex 메타태그가 자동으로 삽입되었기 때문에 구글의 검색엔진이 색인 작업을 하지 않았습니다. 해당 현상은 next dev를 통해 개발환경에서 실행했을 경우에는 재현되지 않습니다.따..

요즘 멋있는 웹에는 위와 같은 SNS 공유 기능이 꼭 들어있는데요.Web Share API를 사용하면 간단하게 구현할 수 있습니다. 웹 표준 기술인 Web Share API는웹 애플리케이션에서 URL, 텍스트, 이미지 등을다른 앱으로 공유할 수 있게 해줍니다. 기기의 네이티브 공유 인터페이스와 연동되어별도로 개발하지 않아도 사용자의 기기에서 친숙한UI를 제공할 수 있는 장점도 있습니다. 사용방법 함께 알아봅시다. 😀 📝 공식문서https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API Web Share API - Web APIs | MDNThe Web Share API provides a mechanism for sharing text, links..

https://hyunki99.tistory.com/117 [React] 리액트 QR 코드 생성하기 (qrcode.react)프로젝트에서 주소를 복사하기 위해서QR 코드를 생성하고 스캔해야 하는기능을 구현해야 했었는데요. 먼저 QR 코드 생성을 위해서qrcode.react 라이브러리를 사용했습니다.사용방법 알아봅시다hyunki99.tistory.comQR 코드 생성은 이쪽입니다. 😀  저번 포스팅에서 QR 코드를 생성했으니,이번에는 QR 코드 스캔입니다. HTML5의 웹 표준 API인 getUserMedia를 사용하면사용자의 브라우저에서 카메라에 접근할 수 있습니다.이 영상 데이터를 통해서 QR 스캔 등 필요한 기능을 구현할 수 있습니다. 하지만 직접 구현하는 방법은 시간과 노력과 연구가 필요하기 때문..

프로젝트에서 주소를 복사하기 위해서QR 코드를 생성하고 스캔해야 하는기능을 구현해야 했었는데요. 먼저 QR 코드 생성을 위해서qrcode.react 라이브러리를 사용했습니다.사용방법 알아봅시다 😀 QR코드 스캔은 2탄으로 작성할게요📝 라이브러리 소개https://www.npmjs.com/package/qrcode.react qrcode.reactReact component to generate QR codes. Latest version: 4.1.0, last published: 7 days ago. Start using qrcode.react in your project by running `npm i qrcode.react`. There are 970 other projects in the npm..