크루루 서비스의 PopOverMenu 컴포넌트 개선기(1), createPortal과 합성 이벤트 문제 해결

React에서 createPortal을 활용해 팝오버 메뉴(Popover Menu)를 구현할 때는, 스타일과 이벤트 처리에 대한 고려가 필요합니다. 이번 포스트에서는 기존 CSS hover를 사용하는 코드에서, React 상태(useState)로 이벤트를 관리하는 코드로의 전환 과정을 소개하고, createPortal 사용 시 발생하는 이벤트 버블링 문제 해결 방법을 다룹니다.기존 서비스에서 Popover Menu는 특정 요소에 종속되지 않고 자유롭게 위치하도록, createPortal을 활용해 body에 렌더링했습니다. createPortal을 사용하면 overflow: hidden과 같은 부모 요소의 스타일 영향을 받지 않아, Popover Menu가 자유롭게 표시될 수 있습니다.import { Pr..

• format_list_bulleted React
• · 2024. 11. 23.
• textsms

[React] useLayoutEffect와 useEffect

useLayoutEffect와 useEffect를 사용하면서 느꼈던 의문을 해결하기 위해서 파보기로 했습니다.우선 브라우저의 렌더링 과정에 대해서 간략하게 알아보겠습니다. 크게 4가지로 나눌 수 있습니다.파싱레이아웃페인트컴포지팅해당 과정에 대해서 자세히 알고 싶으시다면 제가 발표한 테코톡 참고해주세용~ 기본적으로 useLayoutEffect 와 useEffect 훅은 해당 렌더링 과정에 관여하는 훅입니다.useLayoutEffect는 Layout단계 직후 실행됩니다.useEffect는 Paint 단계 직후 실행됩니다.저는 여기서 해당 훅들이 어떻게 렌더링 타이밍을 정확하게 감지하는지에 대한 의문이 생겼습니다.1️⃣ useLayoutEffect가 Layout 직후 실행되는 방법React는 가상 DOM(Vi..

• format_list_bulleted React
• · 2024. 11. 22.
• textsms

Tanstack Query의 useQuery 캐싱 매커니즘 분석하기

크루루 서비스에서 알 수 없는 에러가 발생했습니다. 조사 결과, 원인은 TanStack Query의 Error 데이터 캐싱으로 판단되었습니다. 이 과정에서 몇 가지 의문이 들었고, 이를 탐구하면서 알게 된 내용을 공유하고자 합니다.❗️ 문제 상황우리 서비스는 TanStack Query의 staleTime을 0으로 설정하여 사용하고 있었습니다. 그러나, 에러가 발생했을 때 여전히 캐싱된 에러 데이터를 사용하고 있었고, 이를 다시 throw하는 동작을 관찰할 수 있었습니다.staleTime이 0이라면 데이터가 즉시 "stale" 상태로 간주되어야 하므로, 새로운 데이터를 요청해야 한다고 생각했지만, 실제 동작은 다르게 이루어졌습니다.❓ 왜 TanStack Query는 Error 데이터를 캐싱할까?TanSta..

• format_list_bulleted React
• · 2024. 11. 21.
• textsms

가비지 컬렉션 정리

가비지 컬렉션(Garbage Collection, GC)이란, 자바스크립트 엔진이 메모리를 자동으로 관리하는 시스템으로, 프로그램이 더 이상 사용하지 않는 객체를 메모리에서 해제하는 것을 의미합니다.GC가 메모리를 해제하는 시점은 명확히 프로그래머가 제어할 수는 없지만, 참조(references)를 기준으로 동작합니다GC가 메모리를 해제하는 조건GC는 특정 객체가 도달 불가능(garbage)하다고 판단될 때 해당 객체를 메모리에서 제거루트에서 도달할 수 없는 객체는 가비지로 간주되어 메모리 해제 대상이 됩니다.let obj = { key: "value" };obj = null; // obj가 더 이상 참조되지 않음 → 가비지로 간주됨위를 정리하면 다음과 같다.obj는 변수로, 객체({ key: "valu..

• format_list_bulleted Javascript
• · 2024. 11. 21.
• textsms

크루루 서비스의 PopOverMenu 컴포넌트 개선기(2), 자식 요소 컴포넌트 렌더러 만들기

크루루 | 쉽고 간편한 리크루팅 솔루션크루루는 대학 연합동아리 및 스타트업 리크루팅에 최적화된 지원자 관리 솔루션입니다. 공고 제작, 지원자 관리, 평가 등 리크루팅의 모든 단계를 크루루와 함께 해결하세요.www.cruru.kr우리 서비스 크루루에서 PopOverMenu는 다양한 자식 요소를 지원해야 했습니다. 특히, 메뉴 항목 내부에서 하위 메뉴를 트리거하는 SubTrigger 요소가 필요하다는 점을 인지하게 되었고, 이를 구성하기 위해 고민한 내용을 공유합니다.기존 PopOverMenu는 단일 레벨의 메뉴를 지원했으나, 단계적으로 이동하는 메뉴를 복합적으로 구성할 필요성이 제기되었습니다. 특히 사용자가 메뉴를 통해 여러 옵션을 계층적으로 탐색하는 상황에서, 하위 트리거(SubTrigger)를 제공하여..

• format_list_bulleted React
• · 2024. 11. 16.
• textsms

[디버깅] 크루루 서비스의 자동 로그인 문제와 Tanstack Query 캐싱 이슈 해결기

이번 스프린트에서 크루루 서비스는 자동 로그인 기능을 구현했습니다. 하지만 정상적으로 동작하지 않았고, 정확한 원인을 파악하기 어려운 상황이었습니다. 클라이언트 측에서 에러가 던져졌으나, 네트워크 요청은 200 응답을 보이는 이상한 현상이 발생했습니다. 서버와 클라이언트 중 어디서 문제가 발생했는지 알 수 없었기 때문에, 여러 방법을 통해 디버깅을 진행했습니다. APIClient를 직접 점검했지만, 별다른 문제는 보이지 않았고, 심지어 에러를 throw하는 코드 주변에 console.log를 추가해도 아무것도 찍히지 않았습니다. 이처럼 이상한 증상을 기반으로 저는 Tanstack Query의 캐싱 메커니즘이 원인이 아닐까 생각했습니다. Tanstack Query Dev Tool을 활용해 데이터를  확인한..

• format_list_bulleted React
• · 2024. 11. 13.
• textsms