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

현재 오토위니에서는 React 기반으로 대부분의 프론트엔드 프로젝트를 분리하여 운영하고 있습니다. web-www-front, web-mobile-front, web-mobile-search, web-admin-front 등 다양한 프로젝트가 Bitbucket Pipelines를 통해 자동 빌드 및 배포되고 있습니다. 지난 1편에서는 파이프라인 구축 과정을 다루었다면, 이번 2편에서는 배포 성공·실패 결과를 팀원들에게 실시간으로 공유하여 운영 효율을 높인 '알림 자동화' 과정을 공유합니다.왜 배포 알림이 필요했는가?기존 파이프라인은 자동화되어 있었지만, 결과 확인 방식에는 한계가 있었습니다.정보의 파편화: 배포 결과를 확인하려면 매번 Bitbucket Pipeline 페이지에 직접 접속해야 했습니다.공유..

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

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

정말 중요한 기획의 퍼블리싱을 맡게 되었습니다. 전 페이지의 퍼블리싱을 끝내고 다음 주 월요일이 배포인데 문제가 생겼습니다. 바로 Chrome에서는 정상 작동하는 CSS가, Safari에서는 정상 작동하지 않는 아주 절망적인 상황이 벌어졌습니다. 먼저 시간이 없기 때문에 문제 해결을 위해 이전에 작성해 두었던 코드를 분석해 본 결과 .commonBookingStep1PopUpRequestTimeWrapper { font-size: 0.8rem; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1rem; color: #000; > :nth-child(1) { span { color: #d10023; } } > :nth-child(2) {..

2023년 7월 3일에 회사에 입사한 지 5개월이 지났습니다. 우수사원 상을 수상하게 되었습니다! 앞으로도 어떠한 요구 사항이든 구현할 수 있고 모든 문제에 대처할 수 있는 능력을 키우기 위해 끊임없이 노력하겠습니다!

먼저 면접 기회를 제공해 주신 오토위니에 대단히 감사합니다. 다음으로 오늘 면접 내용에 대해서 간단하게 적어볼까 합니다. 오늘 면접은 2시 대면 면접이었고 20분 전에 회사에 도착한 것 같습니다. 2시에 면접을 시작하였고 면접관 세분이 들어오셨는데 먼저 처음에 인사를 할 때부터 분위기가 되게 좋았던 것 같습니다. 그 후에 사전에 없던 라이브 코딩을 진행하게 되었는데요. 첫 번째 문제는 라이브 코딩으로 API통신을 통해서 값을 형태에 맞게 예외처리를 통해서 출력하는 내용이었습니다. 두 번째 문제는 주어진 코드를 보고 어떤 점이 문제인지 확인하고 해결하는 문제였습니다. 난이도는 NHN 면접과 크게 다를 바 없는 것 같습니다. 그 후로 간단한 자기소개, 개발을 하며 어려웠던 점, 개발 방식, 어느 때에 개발을..