배경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..

기존17개의 nextjs 앱의 모노레포, 인프라 레벨에서 라우팅해줌제품 전체 200개 이상의 url제품 전체 8.7GB 코드베이스각 스쿼드에서 페이지 별로 앱을 나눠서 개발단점페이지 이동할 때마다 유저에게 하나의 앱을 쓰는 경험을 주기 힘듦.다른 nextjs 앱이기 때문에 페이지 로딩 시 html, js, css를 전부 다시 내려받아야함스쿼드 독립적, 효율적인 개발이 힘듦.앱 간의 의존성이 있음공통 컴포넌트의 경우 한번 수정되도 모든 앱에 영향을 끼쳐서 작은 이슈에도 전체 롤백해야함Module Federation PoCNextjs에 적용 가능한 오픈소스 기반의 Module Federation을 적용할 수 있는 플러그인 존재기존 앱에 적용해보니까 동작하는 것은 확인그러나, Next.js 측에서 모듈 페더레..

https://youtu.be/emGLxi0LvNI?si=NXWu45SAjQAdLAmn섬세한 ISFP의 코드 가독성 개선 경험 / if(kakao)2022발표자가 집중한 부분은 "어떻게 하면 정확한 단어를 고를지"와 "어떻게 하면 한 눈에 잘 보이는 형태로 작성할 수 있을지"이다.정확한 단어 고르기다른 뜻을 가진 단어와 구분하기const data = await loadData();load : 가져와서 싣다fetch : 가져오다fetchData로 함수명을 바꾸던가 const success = await loadData() 로 바꾸는게 적절해보인다고 함. 성공여부만 반환하도록리액트쿼리에서 isLoading, isFetching의 의미를 구분하는데 도움이 됨.get : 가져오다query : 질문하다테스팅 라이..