프론트엔드 개발자에게 하위 브라우저 호환성 문제는 피할 수 없는 과제입니다. 모든 서비스에는 구형 브라우저를 사용하는 사용자가 존재하며, 이를 무시할 수 없기 때문인데요.

이런 문제를 해결하기 위해 Polyfill을 사용하지만 Polyfill을 사용하는 데도 단점이 있습니다. 불필요한 Polyfill 스크립트까지 다운로드하게 되는 경우가 생기며, 이는 JavaScript 코드의 크기를 증가시키고 사용자 경험(UX)에 영향을 미칠 수 있기 때문인데요. 특히 최신 브라우저를 사용하는 사용자에게도 필요 없는 Polyfill이 포함되어 로드 속도를 저하시킬 수 있습니다.

이러한 문제를 해결하기 위해, 토스 에서 동적으로 필요한 Polyfill만 제공하는 자체 Polyfill 서비스를 구축한 블로그 아티클을 재미있게 읽었습니다. 이 접근 방식은 브라우저 환경에 따라 꼭 필요한 Polyfill만 제공함으로써, 불필요한 스크립트 로드를 방지하고 성능을 극대화하는데요.

구현 방식
 1. User-Agent 기반 브라우저별 맞춤형 Polyfill 생성
    * 클라이언트(브라우저)가 Polyfill 서버에 요청을 보낼 때, 요청 헤더에 포함된 User-Agent 정보를 기반으로 브라우저 정보를 추출합니다.
    * 이 과정에서
      browserslist-useragent
      라이브러리를 사용해 브라우저와 필요한 기능을 매핑합니다.
 2. esbuild를 활용한 Polyfill 스크립트 생성
    * 생성된 Polyfill 목록을 기반으로
      core-js
      모듈에서 필요한 Polyfill을 가져와 JavaScript 코드를 생성합니다.
    * esbuild
      를 활용해 Polyfill 스크립트를 하나로 묶고, 크기를 줄이기 위해 압축 및 최적화를 수행합니다.
 3. Polyfill 서버 배포
    * 생성된 Polyfill 스크립트는 Node.js 서버 또는 AWS Lambda 같은 서버리스 환경에 배포됩니다.
    * 클라이언트가 서버에 요청을 보내면 해당 브라우저에 필요한 Polyfill만 포함된 최적화된 스크립트를 실시간으로 반환합니다.

사실 번들 크기의 최적화는 모든 프로젝트에서 최우선 과제가 아닐 수 있습니다. 그러나 저속 네트워크나 저사양 기기를 사용하는 환경에서는 번들 크기에 다라 사용자 경험에 직접적인 영향을 미칠 수 있습니다. 특히 이러한 환경일 경우 사용자들은 로딩 속도에 더욱 민감하게 반응하므로, 동적 Polyfill 서비스를 통한 최적화는 의미 있는 개선이 될 수 있습니다.

또한 이러한 접근 방식은 개발과 사용자 경험 모두에서 win-win 전략이 될수 있다고 느꼇습니다. 개발자는 최신 JavaScript 기능을 제약 없이 활용할 수 있고, 사용자는 자신의 브라우저 환경에 관계없이 항상 최적화된 성능과 안정적인 서비스를 경험할 수 있기 때문입니다.

https://toss.tech/article/smart-polyfills

동적 Polyfill 서비스로 실현하는 토스의 브라우저 호환성

안녕하세요.
글 하나 작성해서 공유드립니다.
저와 같은 주니어 개발자나 취준생분들에게 도움이 되면 좋겠네요!
감사합니다.

https://velog.io/@leehyunho2001/%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC%EB%A7%8C-%EC%9E%98%EC%8D%A8%EB%8F%84-%EC%9D%B4%EC%81%A8-%EB%B0%9B%EB%8A%94%EB%8B%A4

개발자도구로 이쁨받는 방법

데이터

박진슬

IGAWorks 마케터

경원

IGAWorks Sales Enablement

신윤희

IGAWorks 프로덕트 매니저

현동형

igaworks

이현호

IGAworks 그로스 컨설턴트

Sieun Sierra yun

IGAWorks 그로스컨설팅

박성우(SUNG)

아이지에이웍스 프론트엔드 엔지니어

윤태원

아이지에이웍스 매체운영

최경미

아이지에이웍스 웹 개발자

조명준

아이지에이웍스 데이터 엔지니어

임지규

아이지에이웍스 백엔드 개발자

이지원

아이지에이웍스 프론트엔드 개발자

차지형

아이지에이웍스 프론트엔드

이희승

박진호 Danny

김영길

백지연

cto, full stack, b2b saas 사업총괄

아이지에이웍스 매니저

서윤

아이지에이웍스 PM

장용국 (William)

프로덕트 매니저

사막여우

정예림

아이지에이웍스

언어

프론트엔드

백엔드

데이터베이스

데브옵스

핵심 프로세스는 아니지만, 상황에 따라 코드 리뷰를 하기도 한다

하지 않거나 형식적인 리뷰 절차만 있다

코드리뷰가 업무의 핵심 프로세스로 자리 잡혀 있나요?

일주일에 야근은 며칠 정도 하나요?

주변에 나의 성장에 도움이 되는, 배울 만한 동료가 있나요?

아이지에이웍스에서 계속 일 하는 건 내 커리어에 도움이 된다고 생각하시나요?

제품의 구현 과정에 개발자들의 의견이 어느 정도 반영된다고 생각하시나요?

구현하는 제품이 회사의 성장에 기여한다고 느껴지나요?

개발, 인간 관계 등에 대해 어려움을 겪을 때 회사 내에 도움을 받을 멘토가 있나요?

나의 개발 생산성을 극대화 할 수 있도록 재택 근무 여부를 자유롭게 선택할 수 있나요?