배경 당근 테크 블로그에서 발행한 "의존성 그래프를 활용한 프로젝트 시각화 - 사이드 이펙트 한눈에 파악하기"를 보고 직접 적용해보았다. 글을 작성한 당근 개발자는 개발에 착수하기 전 일정을 산정하는데, 정작 작업하다가 예상치 못한 사이드 이펙트들로 일정을 지속적으로 미뤄지게 되었고, 이를 해결하고자 본 방법을 도입했다고 한다. 144개의 페이지가 존재하는 당근 웹에 비해 우리 웹의 규모가 작긴 하지만, 개발에 앞서 일정 산정 시 미처 고려하지 못했던 사이드 이펙트들로 인해 고생했던 경험에 공감했고 회사 프로젝트에서도 써먹어 볼 만하다고 판단했다. 구현 방법 해당 아티클에서는 자세한 구현 및 로직을 알려주지는 않아서 Cursor AI를 활용해 원하는 의도를 명시적으로 전달 후 구현을 완료했다. Depen..
배경PC 유튜브에서 알림 설정을 해두니까 브라우저 웹 푸시 알림이 온 걸 보고 구현하게 되었다. 사용자에게 알림을 주고 싶을 때 유용한 것 같아 React에서 사용하기 쉽도록 구현했다. 만들어두면 회사나 개인 프로젝트에서라도 쓰겠지.. https://developer.mozilla.org/en-US/docs/Web/API/Notification useWebNotification커스텀 훅 useWebNotification은 브라우저 Notification API를 React 에서 사용하기 쉽도록 래핑한 훅으로, 알림 권한 관리부터 알림 표시/닫기까지의 전 과정을 간편하게 처리한다.import { useCallback, useEffect, useRef, useState } from 'react';export..
배경모달 또는 팝업창을 닫을 때 외부 영역 클릭 이벤트를 감지해야 하는데, 그 때마다 아래와 같은 코드를 작성해야 한다. 똑같은 코드를 매번 작성하는 것은 정말 번거로운 일이다. 그래서 커스텀 훅으로 분리하여 재사용한다. const containerRef = useRef(null); useEffect(() => { function handleClickOutside(e) { if (containerRef.current && !containerRef.current.contains(e.target)) { setIsBankListOpen(false); } } document.addEventListener('mousedown', handleClickOutside)..
하면 좋을 것 같은데? 싶을 땐 하지마라!해야 될 것 같으면 한 번만 더 생각해라!이제 진짜 해야 된다 싶으면 프로파일링(측정)부터 시작하자.그래도 토스에서 성능 최적화 시점이 좀 늦는 것 같기는 하다고 한다. by 토스 프론트 리드개발자들은 늘 최적의 환경에서 테스트하기 때문에 실제로 불편함을 느끼는 사용자들을 발견하고 나서야 대처하게 된다.세상 모든 것은 트레이드오프가 있다.⇒ 최적화를 위해 시간을 줄였다면 어떤 것을 희생했다는 뜻프론트 최적화의 2가지 측면초기 로딩 속도가 빠른 것런타임에서 반응성이 빠르고 좋음초기 로딩 속도가 느린 이유대역폭지연 시간자바스크립트 실행 시간1. 대역폭대역폭 : 쌀가마니를 옮기는 트럭의 숫자2. 지연시간지연시간 : 쌀가마니를 옭기는 트럭의 속도캐싱 활용이동할 것 같은 ..
배경 우리가 개발하고 있는 웹 프로젝트의 로드 속도가 느린 것 같다는 피드백을 듣고 개선 작업에 착수했다. 웹 로드 속도를 개선하기 위해 각자 서칭 후 팀원들과 여러 의견을 나누었고, 아키텍처 개선/인프라 개선/번들 최적화 등 다양한 아이디어가 나왔다. 그 중에서 우리는 번들 다이어트가 우리 프로젝트에서 빠르게 효과를 볼 수 있으면서 적용하기 쉬울거라 판단했다. 이번 글은 타사의 번들 다이어트 사례를 조사하면서 알게 된 내용을 정리한 것이다. 번들 크기는 로드 속도에 직접적으로 영향을 끼치는 만큼 이미 여러 회사에서 해당 이슈를 해결하기 위해 여러 방법을 시도했고, 그 경험을 각종 컨퍼런스나 아티클로 공유하고 있어서 지식을 얻기 좋았다. 토스 - JavaScript Bundle Diet 토스 슬래시 2..
