jjangsh 님의 블로그

1️⃣ 의존성 미인식 문제문제상황프로젝트 구조: apps/web, apps/mobile, packages/*로 구성된 pnpm workspace 기반 모노레포lodash 패키지를 web에서는 잘 사용했으나, mobile에서오류 발생Module not found: Can't resolve 'lodash'원인분석pnpm은 각 워크스페이스(예: apps/mobile)의 package.json에 명시된 의존성만 노출루트 혹은 다른 앱에만 설치되어 있으면 해당 workspace에서는 인식하지 못함해결과정apps/mobile/package.json의 dependencies에 lodash 추가아래 명령어로 workspace 단위 설치pnpm add lodash --filter ./apps/mobilemobile 프로..

🐞 문제 상황기존에는 window scroll 이벤트를 직접 핸들링하여상품 리스트를 무한 스크롤로 불러오고 있었습니다.하지만 모바일 환경에서 상품 개수가 적으면스크롤이 바닥에 닿을 때마다 API 요청이 반복적으로 발생데이터가 더 이상 없어도 getProducts가 계속 호출됨스켈레톤 UI가 깜빡거리고, 화면이 위아래로 흔들리는 문제가 발생추가로...Emitter.emit("tabview_scroll_to_bottom") 같이 커스텀 이벤트까지 직접 관리하고 있었는데,이벤트 중복/누락 문제, 복잡성, 예측 불가한 버그가 자주 발생🤔 원인window 이벤트 기반 무한 스크롤은모바일/웹 환경 차이, 렌더링 타이밍, 스크롤 계산 등에서 예기치 않은 동작이 많음코드가 길고, 유지보수가 어려움이벤트 중복 처리,..

문제상황프로젝트는 apps/web, apps/mobile, packages로 구성된 pnpm workspace 기반 모노레포 구조 web 프로젝트에서 정상적으로 사용 중인 lodash를 mobile 프로젝트에서 동일하게 사용하려 하자, 런타임에서 다음과 같은 오류 발생:Module not found: Can't resolve 'lodash' 처음에는 루트에 패키지가 설치되어 있으니 모든 하위 앱에서 자동으로 사용할 수 있을 거라 생각했지만, 실제로는 mobile 프로젝트에서 lodash를 인식하지 못함 원인 분석pnpm-workspace.yaml에는 다음과 같이 설정되어 있어, 프로젝트는 각각 workspace로 독립 관리되고 있음:packages: - "apps/*" - "packages/*" pn..

1. 문제 발생에그팝, 에그클럽, 에그데이 생성 버튼을 여러번 누르면 생성된 상세페이지로 가기전에 여러개의 모임생성 완료 알랏창이 뜨면서 모임이 여러개 생기는 문제점이 있었습니다.( 모임 생성 버튼 연속 클릭 시 중복 API 호출 발생 ) 모임 여러개 생기는 오류 영상 2. 원인 추론API 호출 제한 로직의 부재버튼 클릭 이벤트에 쓰로틀링(Throttling) 미적용 3. 해결 과정1. useTrottle 커스텀 훅 구현 2. 모임 생성 API 호출 간격 300ms, 모임생성 다음단계 버튼은 20초으로 useTrottle 커스텀 훅 적용 Q. 모임생성과 모임생성 다음 버튼 시간을 다르게 준 이유는?데이터베이스 작업(모임 생성): 20초 쓰로틀링 - Supabase insert 연산의 안정적 처리를..

개요[모바일 환경] 검색 페이지에서 상품 개수가 적은 경우, 스크롤을 아래로 당길 때마다 화면이 위아래로 흔들리고, 동시에 API 요청이 무한 반복되는 현상이 발생스크롤 이벤트가 반복적으로 발생상품이 적어 페이지의 높이가 짧을 때, 스크롤 바닥 도달 조건이 계속 충족되며 getProducts 함수가 반복 호출됨데이터가 더 이상 없는데도 API 요청 지속getProducts 호출 시, 더 이상 가져올 데이터가 없음을 확인하지 않아, 불필요한 API 요청이 계속 발생스켈레톤 UI 렌더링 조건 부정확isFetching(상태)만으로 스켈레톤 UI 렌더링 조건을 설정해, 데이터가 없는데도 스켈레톤이 표시되고, 높이가 변경되며 스크롤 이벤트가 반복 발생 요구사항모바일 환경 검색 페이지에서 화면 스크롤이 지속적으로 ..

문제 상황MUI Dialog 기반 모달 시스템을 사용하는 모바일 웹 환경에서모달(Alert, Confirm, Info 등)이 열린 상태로 뒤로가기 버튼을 누르거나 스와이프 제스처를 취했을 때,모달이 닫히지 않고 바로 이전 페이지로 이동하는 문제가 있었다.뒤로가기 후에도 모달이 유지됨으로써 사용자의 화면 탐색 흐름에 혼란을 주고 서비스 이용에 불편을 초래하고 특히 뒤로가기 버튼의 사용 빈도가 높은 모바일 환경에서는 사용자의 불편이 더 크게 나타날 것으로 예상했다.❗ 예상 동작:이전 페이지로 이동하면서 모달이 닫힘❌ 실제 동작:모달이 열린 채로 곧바로 이전 페이지로 이동 원인 분석기존에는 usePathname()으로 라우팅 변화만 감지하여 모달을 닫음문제는 모바일 브라우저의 뒤로가기 버튼은 popstate ..

📌 상황SNS 로그인 버튼을 빠르게 두 번 이상 클릭했을 때 중복 로그인 요청이 발생이를 막기 위해 isProcessing이라는 state를 이용해 요청 중인지 체크함 ⚠️ 시도 1: isProcessing으로 중복 로그인 방지const [isProcessing, setIsProcessing] = useState(false);const onLogin = async () => { if (isProcessing) return; setIsProcessing(true); try { await doLogin(); // 예: API 요청 또는 window.open } finally { setIsProcessing(false); }}; 🧨 문제가 생긴 이유setIsProcessing(true)..

Next.js를 사용해 로그인 및 계정 연결 UI를 만들다 보면 네이버, 카카오, 애플, 페이스북 등 여러 SNS 로그인 로직이 생기기 마련입니다.초기에는 각각의 SNS에 맞게 따로따로 작성했지만, 점차 중복이 많아지고 유지보수성이 떨어지는 문제가 생깁니다.이 포스트에서는 useSnsLogin 커스텀 훅을 통해 중복 로직을 통합한 과정을 소개합니다. 📍 리팩토링 전1. 로그인 페이지SNS 종류별로 로그인 함수를 각각 작성해야 했습니다:const onLoginKakao = async () => { ... };const onLoginNaver = async () => { ... };const onLoginApple = async () => { ... };const onLoginFacebook = async..

문제 상황카카오, 페이스북, 네이버와 같은 SNS 로그인 버튼을 연속해서 여러 번 눌렀을 때, 버튼이 반응하지 않거나 마지막 클릭에만 로그인 요청이 보내지는 현상이 발생했습니다.const onSnsLogin = debounce(async (provider: string) => { if (provider === "facebook") { onLoginFacebook(); } else { await createSnsLoginHandler(provider, goFrom)(); }}, 1000);이 코드에서는 버튼을 여러 번 눌러도 debounce가 마지막 호출만 처리하게 되어, 즉각적인 로그인 시도조차 발생하지 않는 것처럼 보이는 문제가 있었습니다. 원인 분석lodash.debounce는 기본적..

개요소셜 로그인 버튼을 여러 번 터치할 경우, 반복적으로 로그인 요청이 발생함이로 인해 다수의 요청이 동시에 발생하여 오류나 예상치 못한 동작이 발생할 수 있음 요구사항소셜 로그인 버튼을 여러 번 눌러도 한 번만 로그인 요청이 이루어지도록 개선 작업 내용SNS 로그인 로직 공통화SNS(소셜) 로그인 기능을 담당하는 로직을 하나로 통합 관리useSnsLogin 커스텀 훅 제작 ( https://jjangsh.tistory.com/87 )provider(구글, 네이버, 카카오 등)를 인자로 받아 처리할 수 있도록 커스텀 훅 구현에러 처리 및 반복되는 로직을 훅 내부에서 일괄 처리UI 개선UI(로그인 버튼)에서는 단순 클릭 이벤트만 처리하도록 로직 단순화로그인 로직 자체는 모두 커스텀 훅에서 담당중복 요청 ..