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

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 umsungju..

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

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기존에 ..

화면 좌측 하단이나 우측 하단에 자주 보이는 Scroll To Top 버튼을 몇 번 구현한 적이 있습니다. 하지만 매번 스크롤 이벤트를 어떻게 활용해야 성능적으로 최적화할 수 있을까? 고민했었던 것 같습니다. 이번에는 그런 고민을 명쾌하게 해결하고, 더 깔끔한 방식으로 구현했기에 경험을 공유하려 합니다. 현재 저는 오토위니 모바일의 일부 JSP 레거시 페이지를 React 프로젝트로 마이그레이션 하는 작업을 진행 중입니다. 여러 페이지 중 해외 운송 정보를 보여주는 "Shipping Schedule" 페이지에 Scroll To Top 버튼을 적용했는데, 이번에는 기존 방식보다 더 최적화된 방식으로 개발할 수 있었습니다. #  기존 구현 방식의 비효율성 기존에 Scroll To Top 버튼을 구현할 때마다 ..

Optimistic Update란 무엇일까?Optimistic Update는 한국말로는 낙관적 업데이트라고 말합니다. 성공적인 상태 업데이트가 이뤄질 거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법입니다. 사용자 요청을 서버가 성공적으로 처리할 거라고 미리 예상하고, UI를 즉각적으로 변경해서 사용자에게 서버 응답 속도와 관계없이 즉각적인 피드백을 제공해서 사용자들이 시스템을 빠르게 쓸 수 있다는 점입니다. 특히 네트워크 상태가 좋지 않거나 응답 시간이 길어도 사용자 경험에는 영향을 덜 미치게 됩니다. 다만, 서버에서 오류가 발생하면 잠시동안 화면에 잘못된 정보가 표시될 수 있습니다. 따라서 이 경우를 대비한 오류 핸들링(롤백) 로직을 같이 설계해야 하는 주의점이 있습니다. Autowi..