스택(Stack)과 큐(Queue)란? 스택과 큐는 데이터를 저장하고 꺼내는 순서를 규정한 선형 자료구조(linear data structure) 임. 스택(Stack) 마지막에 들어온 데이터가 가장 먼저 나가는 구조(LIFO, Last In First Out) 즉, “나중에 넣은 것이 먼저 나온다.” 라는 특징을 가짐. 예를 들...

해시(Hash)란? 해시는 데이터를 고정된 크기의 값으로 변환하는 함수 또는 과정을 의미함. 쉽게 말해, 입력값을 일정한 규칙으로 ‘압축’하여 짧은 고유 값으로 바꾸는 기술임. 예를 들어, "apple" → 1024, "banana" → 5321" 과 같이 임의의 데이터를 일정한 크기의 숫자나 문자열로 매핑함. 이렇게 생성된 값을 해시값(Hash ...

TanStack Query의 staleTime과 gcTime 차이 TanStack Query는 데이터 캐싱과 상태 관리를 효율적으로 처리하기 위한 강력한 라이브러리다. 그중에서도 staleTime과 gcTime은 데이터의 생명주기를 조절하는 핵심 설정이다. staleTime 이란? staleTime은 데이터를 가져온 후, 얼마 동안 신선한(f...

사이드프로젝트 회의를 하는데 새로들어오신 분이 왜 merge방식을 사용하는지에 의문을 가지셨다. 스프린트 별로 브랜치를 파서 거기에 머지를 하는 방식보다 rebase를 하는게 훨씬 깔금한게 아닌지에 대한것이었다. 간단하게만 알고 있어서 완벽히 이해한게 맞는지는 모르겠지만 ! merge와 rebase의 차이점을 다시 한번 정리하고자 한다. ...

실행 컨텍스트란? 자바스크립트에서 실행 컨텍스트(Execution Context) 는 코드가 실행되는 환경 즉, 변수나 함수가 “어디에 속해 있고, 어떻게 접근 가능한지”를 결정하는 핵심 메커니즘이다. 실행 컨텍스트의 종류 실행 컨텍스트는 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트로 나뉜다. 🧩 1. 전역 실행 컨텍스트 (G...

🧩 문제 상황 다음과 같은 코드로 로그인 상태를 체크하고, 비로그인 사용자는 /login 페이지로 리다이렉트하도록 설정했다. if (!isLoggedIn) { const newUrl = new URL(window.location.href); const searchParams = new URLSearchParams(); searchPara...

🧭 React Router → Next.js 라우터 마이그레이션 배경 기존 렛츠커리어(LET’S CAREER) 서비스는 React 기반으로 개발되었으며, 라우팅은 react-router-dom을 사용하고 있었다. 하지만 Next.js 도입을 통해 SSR(Server Side Rendering) 과 SEO 최적화, 빌드 효율성 개선 등의 이...

클로저(Closure)란? 클로저(Closure) 는 “함수가 만들어질 때의 주변 변수들을 기억하는 것”을 말한다. 즉, 함수가 자신이 만들어진 환경을 기억하는 것 ! 이는 자바스크립트의 두 가지 특징에서 비롯된다 함수는 일급 객체이다. (변수에 담기거나, 인자로 전달될 수 있음) 렉시컬 스코프(Lexical Scope) 를 따른다. (함...

Reflow란? Reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정이다. DOM 구조나 CSS 스타일이 변경되어 요소의 크기나 위치가 달라지면 브라우저는 이를 다시 계산해야한다. 이때 한 요소의 변경이 다른 요소에도 영향을 미칠 수 있기 때문에, 비용이 큰 작업이다. 예를 들어 아래와 같은 속성을 변경하면 Ref...

이벤트 전파(Event Propagation) DOM(Document Object Model) 내에서 특정 요소에 이벤트가 발생했을 때, 그 이벤트가 어떤 경로를 따라 전달되는지를 설명하는 개념이다. 이는 이벤트가 발생한 시점부터 상위 요소로 전달되는 전체 흐름을 이해하기 위한 핵심적인 메커니즘으로, 캡처링(Capturing) → 타깃(Target)...