프론트엔드 개발자 엄성준 블로그

프로젝트 내 다국어(i18n)를 관리하다 보면, 기능이 변경되거나 삭제될 때마다 사용하지 않는 번역 키가 남게 됩니다.이번에는 WiniLogis 프로젝트에서 점점 쌓여가던 불필요한 다국어 키를 정리한 과정을 공유하려고 합니다.❗️ 문제 상황WiniLogis에서는 Google Cloud Sheet를 기반으로 다국어를 관리하고 있습니다. 개발 환경에서는 스크립트를 통해 Sheet에 작성된 다국어 데이터를 public/locales/{언어}/translation.json 형태로 변환하여 저장합니다.public/ └─ locales/ ├─ en/translation.json ├─ es/translation.json └─ ru/translation.json 그러나 프로젝트가 커지고 여러 기능..

web-www-front는 오토위니(AutoWini)에서 기존 JSP 기반의 레거시 페이지를 React로 분리 및 개선하기 위해 만들어진 통합 프로젝트입니다. 현재까지 분리된 주요 페이지는 다음과 같습니다.필터 검색 페이지통합 검색 페이지찜 목록 페이지 (마이위니)운송 정보 제공 페이지파츠위니 통합 검색 페이지파츠위니 필터 검색 페이지이 프로젝트를 진행하면서 “테스트 코드를 도입할 필요가 있을까?”라는 질문을 스스로에게 던지고 있었습니다.🤔 테스트 코드, 정말 필요한 걸까?최근 여러 기업들의 채용 공고를 보면 "테스트 코드 작성 경험"이나 "TDD 경험자 우대"라는 문구를 자주 볼 수 있습니다.저 역시 Toss의 es-toolkit과 NaverPay의 hidash 라이브러리에 테스트 코드 및 벤치마크..

Window 운영체제에서 .jpg 확장자 이미지가 다운로드는 되지만 열리지 않는 문제를 해결한 과정을 공유합니다.이번 문제는 안드로이드 폰에서 캡처한 이미지가 .jpg 확장자로 저장되었지만, 실제 내부 포맷은 AVIF였기 때문에 발생했습니다. ❗️ 문제 상황Mac이나 Chrome 브라우저에서는 정상적으로 열리지만, 특정 Windows 환경에서는 이미지를 열 수 없는 문제가 발생했습니다. 🔍 문제 분석터미널에서 문제가 된 이미지를 확인해보았습니다.autowini2@autowiniui-MacBookPro-5 Desktop % file test.jpgtest.jpg: ISO Media, AVIF Imageautowini2@autowiniui-MacBookPro-5 Desktop % file umsungjun..

리스트 영역(. listContainer)의 width를 마우스 드래그로 조절하는 기능을 구현하던 중 예상치 못한 문제가 발생했습니다.일반적으로는 mousedown → mousemove → mouseup 이벤트 흐름을 따라 자연스럽게 동작합니다. 하지만 DOM 안에 iframe이 존재하면 문제가 생겼습니다. ❗️ 문제 상황 기본적인 resize 로직은 다음과 같이 작성했습니다:startResizing(event) { this.isResizing = true; this.initialX = event.clientX; const listContainer = document.querySelector('.listContainer'); this.initialWidth = listContainer.offset..

Autowini 프로젝트에서 Node.js로 구글 스프레드시트 다국어 데이터를 가져오던 중, PERMISSION_DENIED 오류가 발생했습니다.{ "code": 403, "message": "Method doesn't allow unregistered callers (callers without established identity). Please use API Key or other form of API consumer identity to call this API.", "status": "PERMISSION_DENIED"}🔍 원인 확인 과정처음에는 스프레드시트 공유 설정과 IAM 서비스 계정 키를 재발급하며 문제를 해결하려 했습니다.구글 스프레드시트에서 서비스 계정 이메일 편집자 권한 부여G..

WiniLogis 프로젝트에 코드 스타일을 통일하기 위해 Prettier를 도입했습니다.기존 오토위니 마이그레이션 프로젝트에서 사용 중이던 .prettierrc.json 파일을 그대로 가져와 프로젝트 루트에 추가했는데, VSCode 하단 상태바에 Prettier가 표시되지도 않고 저장 시에도 코드가 전혀 정렬되지 않는 문제가 발생했습니다. 적용했던 .prettierrc.json 설정{ "endOfLine": "lf", // 줄바꿈 문자: LF (\n) "singleQuote": true, // 문자열에 작은따옴표 사용 "jsxSingleQuote": true, // JSX에서도 작은따옴표 사용 "semi": true, // 세미콜론 사용 "tabWidth": 2, // 들여쓰기 너비: 2칸 "..

🧪 코드 및 현상 재현처음에는 아래와 같은 로직으로 채팅 입력창을 구현했습니다.사용자가 에 메시지를 입력한 뒤 Enter 키를 누르면, 메시지를 전송하고 입력창을 초기화하는 구조입니다.const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); // 줄바꿈 방지 sendMessage(inputValue); setInputValue(''); }}; 한글로 "안녕하세요"를 입력하고 Enter를 누르면,메시지가 두 번 전송되거나마지막 글자인 "요"만 따로 전송되는 등 이상한 동작이 나타났습니다.처음에는 handleSend() 함수가 두 번 호출되는 문제라고 생..

🌍 React i18n 다국어 처리 최적화, 실제 적용기Autowini 서비스를 개발하면서 다국어(i18n) 지원을 위해 react-i18next를 도입해 사용하고 있었습니다.처음에는 번역 JSON 파일을 import해서 사용하는 방식으로 구축했지만, 프로젝트가 커질수록 청크 파일 크기 증가와 초기 로딩 성능 저하 문제를 겪게 됐습니다. 그래서 언어 처리 방식을 아예 바꾸고 i18n 번들 최적화를 적용했습니다. 그 과정을 공유해 보려고 합니다.📌 기존 방식: import로 언어 번들 포함처음에는 아래와 같이 다국어 JSON을 import해서 resources에 직접 넣는 방식이었습니다.import ko from './locales/ko/translation.json';import en from '...

Vanilla JS로 프로젝트를 진행하던 중 익숙한 에러 메시지를 다시 마주쳤습니다.예전에도 본 기억이 있는데, 이번 기회에 에러 원인과 해결 방법을 정리해 두면 좋을 것 같아 공유합니다.💥 에러 메시지Failed to load module script: Expected a JavaScript-or Wasm module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.🔍 원인 분석index.html 에서 다음과 같이 모듈 스크립트를 불러오고 있었습니다. index.js 내부에서는 App.js를 import하..

최근 1년 전 개발한 React 포트폴리오 프로젝트를 Next.js로 마이그레이션하는 작업을 진행하며, Next.js에 대해 알지 못했던 부분을 보완하고 필요한 정보를 얻기 위해 공식 문서를 참고했습니다.  그런데 공식 문서가 한글을 지원하지 않아, 자연스럽게 한글로 제공되는 Next.js 한글 문서를 접하게 되었고, 그 과정에서 모든 페이지의 이미지가 깨지는 문제를 발견하여 해결할 수 있었습니다.   Pull Request 링크: https://github.com/luciancah/nextjs-ko/pull/158 [no-issue] fix: external image 컴포넌트의 baseUrl 수정 by umsungjun · Pull Request #158 · luciancah/nextjs-ko기존에 ..