크루루 서비스의 PopOverMenu 컴포넌트 개선기

크루루 | 쉽고 간편한 리크루팅 솔루션크루루는 대학 연합동아리 및 스타트업 리크루팅에 최적화된 지원자 관리 솔루션입니다. 공고 제작, 지원자 관리, 평가 등 리크루팅의 모든 단계를 크루루와 함께 해결하세요.www.cruru.kr1. createPortal로 구현된 PopoverMenu 이벤트 처리 문제 해결React에서 createPortal을 활용해 팝오버 메뉴(Popover Menu)를 구현할 때는, 스타일과 이벤트 처리에 대한 고려가 필요합니다. 이번 포스트에서는 기존 CSS hover를 사용하는 코드에서, React 상태(useState)로 이벤트를 관리하는 코드로의 전환 과정을 소개하고, createPortal 사용 시 발생하는 이벤트 버블링 문제 해결 방법을 다룹니다.기존 서비스에서 Popov..

• format_list_bulleted Front End/React
• · 2024. 11. 16.
• textsms

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

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

• format_list_bulleted Front End/React
• · 2024. 11. 13.
• textsms

Next.js vs Remix 뭐가 더 좋을까?

서론Next.js와 Remix는 무엇인가?현대 웹 개발에서는 사용자 경험과 성능을 최적화하기 위해 다양한 프레임워크들이 사용됩니다. 그 중에서도 Next.js와 Remix는 React 기반의 프레임워크로, 각각 고유한 방식으로 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트와 서버 간의 데이터를 효율적으로 관리하는 방식 등을 제공합니다.Next.js는 Vercel에서 개발한 풀 스택 웹 프레임워크로, React 애플리케이션의 서버 사이드 렌더링과 정적 사이트 생성 기능을 쉽게 구현할 수 있도록 해줍니다. 파일 기반 라우팅, 이미지 최적화, API 라우팅 같은 기능을 제공해 성능 향상과 SEO 최적화에 유리한 옵션으로 알려져 있습니다.Remix는 풀 스택 웹 프레임워크로, 데이..

• format_list_bulleted Front End
• · 2024. 10. 31.
• textsms

[JS] requestAnimationFrame이 매크로 큐(Macro Queue)에서 관리된다고?

처음에 저는 requestAnimationFrame이 리페인트 이전에 계산이 일어나는 함수로 알고 있었습니다. 그런데 이것이 이벤트 루프와 관련이 있다는 블로그 글을 읽게 되면서 의문이 생겼습니다. 정말로 requestAnimationFrame이 매크로 큐에서 관리되는 걸까요?rAF는 Macro Queue에서 관리될까?이 궁금증을 해결하기 위해 많은 자료를 찾아보았고, 결론적으로 requestAnimationFrame은 이벤트 루프의 매크로 큐와 직접적인 관련이 없다는 사실을 알게 되었습니다. 그 이유는 다음과 같습니다.큐(Queue)는 기본적으로 FIFO(First In First Out) 형식의 자료구조입니다.큐에 포함된 항목은 일반적으로 취소할 수 없습니다.하지만 requestAnimationFra..

• format_list_bulleted 카테고리 없음
• · 2024. 9. 29.
• textsms

React 서비스 SEO 성능 개선하기 (feat. SSR)

저희 서비스의 SEO를 개선시키기위해 논의를 하였는데요, 이와 더불어 React-Helmet이란 라이브러리를 인지하게 되었습니다.리액트 라이브러리인 React-Helmet을 이용하여 meta태그를 주입할 수 있다는 것을 알았는데요, 이를 이용하여 SEO를 개선할 수 있는 작업에 대해서 살펴보고, 우리 서비스는 어떤 선택을 할 것인지에 대해서 이야기 해보려 합니다.SPA 서비스의 경우 index.html파일이 하나이기 때문에, 라우트 별로 meta태그를 설정하는 것이 까다롭습니다.SPA의 경우 다음과 같은 특징을 가지는데요,SPA의 특성상 중요한 컨텐츠가 자바스크립트 로딩 후에 나타난다.SPA는 URL이 동적으로 변경되기 때문에 크롤러가 URL변화를 완벽히 감지하지 못한다.구글 크롤러의 경우, 자바스크립트..

• format_list_bulleted Front End/React
• · 2024. 9. 22.
• textsms

[React] Drag & Drop (DnD) 직접 구현하기 (2). Mouse Event를 사용하여 구현하기

[React] Drag & Drop (DnD) 직접 구현하기 (2). Mouse Event를 사용하여 구현하기기존에 Drag Event를 통해 드래그 앤 드롭 기능을 구현했지만, 페이지 레이아웃이 변경되거나 요소가 다시 렌더링되는 Reflow 상황에서 이벤트가 중단되었습니다. 이로 인해 드래그 중이던 요소가 예상치 못한 위치에 놓이거나, 드래그 자체가 취소되는 문제가 발생했습니다.이 문제를 해결하기 위해 Mouse Event를 사용하여 드래그 기능을 다시 구현하기로 결정했습니다. Mouse Event는 Reflow의 영향을 받지 않아 안정적인 이벤트 처리가 예상했으나, event.dataTransfer 객체를 사용할 수 없다는 점이 문제가 있었습니다.event.dataTransfer는 Drag & Dro..

• format_list_bulleted Front End/React
• · 2024. 9. 17.
• textsms