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

Autowini 프론트엔드 분리 프로젝트 CI/CD 파이프라인 구축 (Bitbucket 기반)

프로젝트 배경 및 개발 동기Autowini에서는 React로 분리 및 개선한 프론트엔드 프로젝트들이 여러 개 존재합니다.대표적으로 web-www-front (오토위니 웹), web-mobile-front (모바일 웹), web-admin-front (관리자 페이지) 등이 있습니다.기존 JSP 기반 페이지들 중 방문자 수가 많고 이슈가 잦은 페이지부터 차례로 React로 분리 및 개선 작업을 진행하고 있었습니다. 이 분리된 React 페이지들은 IDC 서버에 업로드된 빌드 결과물을 서비스하는 구조로, 기존에는 개발이 완료된 후 develop 브랜치에 머지하고, CLI를 통해 직접 IDC에 빌드 파일을 업로드하는 방식으로 운영하고 있었습니다.하지만 혼자 개발하는 환경이라면 문제가 없겠지만, 휴가 시 사수가 ..

프로젝트 내 다국어(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하..