가비지 컬렉션 정리

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

• format_list_bulleted Front End/Javascript
• · 2024. 11. 21.
• textsms

크루루 서비스의 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