프론트엔드 개발자 엄성준

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

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

오늘 React Context를 톺아보려는 이유는 많은 기업에서 React를 사용하면서 Props 전달이 필요한 상황에서 Context를 적극 활용하고 있다는 생각이 들어서입니다.이 글에서는 공식 문서(React v18.3.1)를 참고해 Context의 개념과 사용법을 정리해 보려고 합니다.https://ko.react.dev/learn/passing-data-deeply-with-context Context를 사용해 데이터를 깊게 전달하기 – ReactThe library for web and native user interfacesko.react.dev React Context는 왜 등장했을까요? React를 사용해 본 사람이라면 부모 컴포넌트에서 자식 컴포넌트로 Props를 전달하는 과정을 경험해 ..

최근 사내 프로젝트 개발 중 국내 사용자에게만 가격 정보를 가리는 기능을 구현할 일이 있었습니다. 여러 조건들을 고려하며 진행하던 중, 브라우저에서 설정된 언어를 어떻게 감지할 수 있을까?라는 고민이 생겼고, 이 과정에서 Web APIs의 Navigator 객체에 대해 알게 되었습니다.Navigator 객체에는 language라는 속성이 있는데, 이 값이 사용자가 브라우저에 설정한 언어를 나타냅니다. 그러나 여기서 문제가 하나 더 발생했습니다. 브라우저마다 한국어를 표현하는 방식이 달랐던 것입니다.* 버전마다 차이가 존재할 수 있습니다.일반적으로 Chrome과 Edge: ko일반적으로 Safari, Firefox, Opera: ko-KR같은 한국어라도 브라우저에 따라 ko 혹은 ko-KR로 반환되기 때문..

기존에도 React로 만든 프로젝트를 여러 번 배포해 보았지만, 주로 Vercel, GitHub, Spotify 같은 플랫폼을 이용해 흔히 '클릭 한 번'으로 쉽게 배포하는 방식만 경험했습니다. 그런데 많은 사람들이 AWS를 사용해 배포한다는 이야기를 듣고, 저도 직접 AWS를 활용한 배포를 경험해보고 싶어 이번에 도전해 보았습니다. 저는 아래 블로그 글을 참고해 배포를 진행했는데, 설명이 매우 친절하게 되어 있어 이 글만으로도 충분히 배포 과정을 따라갈 수 있었습니다. https://velog.io/@ijy1995/AWS-S3%EB%A1%9C-REACT-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 AWS S3로 REACT 배포하기AWS S3로 REACT 배포velog.io 느낀 점..

WiniLogis는 글로벌 무역 부킹 서비스를 제공하는 플랫폼으로, 블로그를 운영하고 있습니다.현재 블로그의 콘텐츠는 WiniLogis 관리자 사이트를 통해 관리되지만, 단순 텍스트만 입력할 수 있다는 문제가 있어 다른 플랫폼에서 운영하는 블로그에 비해 가독성이 떨어지는 문제가 있었습니다. WiniLogis 관리자의 블로그 글 작성 시 가독성 문제를 해결하기 위해, 텍스트 에디터를 도입하여 글을 편집할 수 있도록 개선한 방법에 대해 작성하려고 합니다.먼저 React 프로젝트와 잘 어울리는 텍스트 에디터를 찾기 위해 여러 정보를 조사했습니다. 아래 글을 통해 다양한 텍스트 에디터의 종류를 확인하고, 각 에디터의 장단점을 비교하여 최종적으로 적용할 에디터를 결정했습니다.https://code-b.dev/bl..

먼저 이벤트 루프(Event Loop)에 대해서 알기 전에 JavaScipt의 특징인 Single Thread(싱글 스레드)에 대해서 알아보겠습니다.스레드(Thread) & 프로세스(Process)프로세스(Process): 실행 중인 프로그램 자체를 의미합니다. 운영체제에서 하나의 독립된 작업 단위로 관리됩니다. 각각의 프로세스는 자신만의 메모리 공간을 가지고 독립적으로 실행됩니다.스레드(Thread): 프로세스 내에서 실행되는 작은 작업 단위입니다. 한 프로세스는 여러 개의 스레드를 가질 수 있고, 스레드들은 같은 프로세스 내에서 메모리 공간을 공유하며 동시에 실행될 수 있습니다.싱글 스레드(Single Thread) & 멀티 스레드(Multi Thread)싱글 스레드: 하나의 스레드에서 모든 작업을 ..

다른 블로그 글과 공식 문서를 참고하면서 여러 가지 명령어를 시도했지만 잘되지 않아 어려움을 겪었습니다. 그러나 ChatGPT를 통해 간단하게 배포할 수 있는 방법을 알아냈고, 이를 공유합니다.1. EAS CLI 설치먼저 EAS CLI를 설치해야 합니다. 터미널에서 다음 명령어를 실행하세요: *Mac일 경우 sudo를 앞에 붙여주시면 됩니다.npm install -g eas-cli2. EAS 초기화EAS CLI를 사용하기 전에 프로젝트를 EAS에 연결해야 합니다. 프로젝트 디렉토리에서 다음 명령어를 실행하여 초기화합니다:eas init3. Expo 계정 로그인EAS를 사용하려면 Expo 계정에 로그인해야 합니다. 아직 로그인하지 않았다면 다음 명령어를 사용하세요:eas login4. EAS Update를..

이전에 WiniLogis의 메인 페이지 성능을 개선하기 위해 Google Lighthouse를 사용하여 Core Web Vitals 점수를 체크한 적이 있습니다. 이 과정에서 지적받은 주요 문제 중 하나는 현재 페이지에서 사용 중인 PNG와 JPG 이미지들을 차세대 이미지 포맷으로 교체하라는 것이었습니다.이 문제를 해결하기 위해 여러 블로그와 자료를 참고하면서 HTML의 태그에 대해 알게 되었고, 이를 적용하게 되었습니다. 태그를 활용하면, WebP 형식을 지원하지 않는 브라우저에서는 기존의 PNG나 JPG 이미지를 표시할 수 있으며, WebP를 지원하는 브라우저에서는 요소를 통해 WebP 이미지를 로드할 수 있습니다. 이 방법을 통해 페이지 성능을 개선하고, 다양한 브라우저 환경에서도 최적화된 이미..

AuctionWini Seller 사이트의 메인 페이지에서 사용된 Slider는 데이터를 map 함수로 반복 처리하여 1px씩 동적으로 계속 움직이는 방식으로 구현되어 있었습니다. 이러한 방식으로 구현된 Slider는 초기 로드 시 많은 자원을 소모하여 페이지 로딩 시간이 길어졌습니다. 이로 인해 사용자 경험이 저하되었고, Google Lighthouse 평가에서도 성능 점수가 낮게 나오는 문제가 발생했습니다.이 문제를 해결하기 위해 React-Swiper를 도입하여 Slider 문제를 개선했습니다.React-Swiper로 교체 전React-Swiper로 교체 후React-Swiper Code {5 {data.map((carInfo) => { return (..