브라우저/Node.js 런타임에서 비동기 코드의 실행 순서를 정확히 이해하는 것은 디버깅과 성능 최적화의 출발점입니다. 특히 마이크로태스크 큐는 렌더링 타이밍과 상태 일관성에 직접적인 영향을 주므로, 실무에서 정확한 모델을 갖추는 것이 중요합니다.핵심 개념 정리Call Stack: 자바스크립트가 함수를 동기적으로 실행하는 스택.Web APIs(환경): 타이머, DOM, Fetch 등 비동기 작업이 대기하는 영역.Task Queue(매크로태스크 큐): setTimeout, setInterval, setImmediate(Node) 등이 들어가는 큐.Microtask Queue(마이크로태스크 큐): Promise.then/catch/finally, queueMicrotask, MutationObserver 등..

Next.js는 App Router 기반으로 서버 컴포넌트와 데이터 페칭을 통합하면서캐싱 체계를 전면 재설계하였습니다. 본 글에서는 실무에서 가장 자주사용되는 네 가지 축, 즉 Request Memoization, Client RouterCache, Data Cache, Full Route Cache를 중심으로 원리를정리하고, 실행 가능한 예제와 함께 권장되는 베스트 프랙티스를 제시합니다.목차Request Memoization: 동일 요청 중복 제거Client Router Cache: 탐색 성능 최적화Data Cache: fetch 응답의 서버 캐싱 및 검증Full Route Cache: 페이지 단위 정적 캐싱(ISR 포함)실무 팁/주의사항, 비교 표, 참고 자료캐싱 전반 개념 맵서버 단계: Reques..

프론트엔드 면접에서 자주 듣는 질문 중 하나가 "의존성 주입(Dependency Injection, DI) 경험이 있나요?"입니다.이 질문은 단순히 특정 DI 프레임워크를 써봤냐를 묻는 게 아니라, 코드 구조와 의존성 관리 문제를 이해하고 있는지를 확인하는 의도에 가깝습니다.1. 의존성 문제(Dependency Problem)란?소프트웨어에서 어떤 클래스나 모듈이 다른 객체를 직접 생성하거나 강하게 참조하면 문제가 발생합니다.class UserService { private api = new ApiClient(); // 직접 생성 → 강한 결합}이 경우:테스트하기 어려움 (ApiClient를 Mock으로 교체 불가)재사용성이 낮음 (다른 구현체로 교체하기 힘듦)결합도가 높아 유지보수가 어려움즉, 의존성..

의의와 배경useRef는 리렌더링 간에도 유지되는 가변 저장소를 제공한다. 값 변경이 렌더를 유발하지 않는다는 점에서 useState와 구분되며, 컴포넌트 인스턴스마다 독립적으로 유지된다는 점에서 단순 let과도 다르다. 주로 DOM 접근, 타이머/외부 핸들 저장, 최신 값 보관 등 렌더와 무관한 정보를 관리할 때 사용한다.목차개념 정리: 렌더링 모델과 ref.current비교: useState vs useRef vs let사용 시나리오와 코드 예시주의사항(안티패턴)체크리스트결론개념 정리useRef(initial)는 { current: T } 형태의 객체를 반환한다.ref.current를 변경해도 컴포넌트는 리렌더링되지 않는다.같은 컴포넌트 인스턴스에서 렌더 간 동일한 ref 객체가 유지된다.의도: “렌..

의의와 배경Core Web Vitals는 구글이 웹 사용자 경험을 정량화하기 위해 정의한 핵심 성능 지표다. 이 지표는 실제 사용자 경험을 직접적으로 반영하며 검색 순위(SEO)에도 영향을 미친다. 프론트엔드 개발자는 필수적으로 이해하고 지속적으로 관리해야 한다.목차개요: 지표 정의와 목표 기준LCP: 의미, 원인, 개선 체크리스트INP: 의미, 원인, 개선 체크리스트CLS: 의미, 원인, 개선 체크리스트측정 방법: Lab vs Field, 실측 코드 예시실무 팁/흔한 실수체크리스트와 결론개요Core Web Vitals는 세 가지 지표로 구성된다.지표의미권장 기준주의 구간LCP (Largest Contentful Paint)가장 큰 콘텐츠가 화면에 보이기까지의 시간≤ 2.5s2.5s ~ 4.0sINP (..

프론트엔드를 하다 보면 상태 변경과 데이터 변환이 정말 자주 등장한다. 이때 함수형 프로그래밍(FP)은 코드를 더 예측 가능하고 테스트하기 쉽게 만든다. 이번 글은 핵심을 짧게 정리하고, 코드 예제로 바로 확인한다. 실제로 언제 FP가 맞는지도 함께 본다.1. 기본 개념 한 줄 요약함수형 프로그래밍은 순수 함수와 불변성에 기반한 선언적 스타일이다.동일 입력 → 동일 출력, 외부 상태 변경 없음. 원본은 건드리지 않고 새 값을 만든다.2. 순수 함수 vs 부수효과, 코드로 비교 // 순수: 동일 입력이면 항상 동일 출력, 외부 상태 변경 없음 function add(a: number, b: number): number { return a + b; } // 비순수: 외부 상태(total)를 변경..

프로그래밍을 하다 보면 반복문을 자주 사용하게 된다. 그중에서도 while문과 do-while문은 조건 기반 반복문으로 자주 비교된다. 이번 글에서는 이 두 문법의 차이를 직접 코드 예제를 통해 확인하고, 실제로 어떤 상황에서 어떤 문법이 더 적합한지를 정리해본다.1. 기본적인 차이점while문은 조건을 먼저 확인한 후 코드 블록을 실행하고,do-while문은 코드 블록을 먼저 실행한 후 조건을 확인한다.// while문 - 조건 먼저 확인let whileCounter = 0;while (whileCounter 결과적으로 while문은 조건이 false이면 한 번도 실행되지 않지만, do-while문은 조건이 false여도 최소 한 번은 실행된다.2. 조건이 처음부터 false인 경우// while문le..

레벨 5는 알고리즘 문제 풀이에서 가장 높은 난이도를 가진 단계입니다. 복잡한 자료구조와 고급 최적화 기법을 자바스크립트로 구현할 수 있어야 하며, 성능과 메모리 효율을 고려한 코드 작성 능력이 요구됩니다.🧠 핵심 주제1. 메모이제이션 (Memoization)중복 계산을 피하기 위한 값 저장 기법입니다.const memo = {};function fib(n) { if (n DFS + DP 유형에서도 자주 사용됩니다. 키로 (node, step) 형태의 값을 Map에 저장해 중복 탐색을 방지합니다.2. 캐싱입력이 동일한 연산 결과를 저장합니다. 메모이제이션과 유사하나 범용적입니다.const cache = new Map();function expensiveFn(x) { if (cache.has(x)) ..

레벨 4에서는 심화된 알고리즘과 자료구조를 JavaScript로 다룰 수 있어야 합니다. 그래프와 트리 등 복잡한 구조의 탐색, 백트래킹, 동적 계획법, 그리고 언어의 한계를 뛰어넘는 최적화 기법 등이 요구됩니다.그래프 탐색 (DFS/BFS 활용)그래프 표현: 인접 리스트/행렬로 표현방문 처리: 배열 또는 Set 사용다중 컴포넌트 탐색 필요가중치 그래프: 다익스트라(우선순위 큐 필요), 0-1 BFS, A* 알고리즘트리 구조 및 조작트리 순회: 전위, 중위, 후위 (DFS/BFS 활용)트라이(Trie) 구현:class TrieNode {constructor() { this.children = {}; this.end = false; }}class Trie {constructor() { this.root =..

레벨 3에서는 재귀 알고리즘과 자료구조를 직접 구현하거나 활용하는 문제가 등장합니다. 재귀 호출, 그래프 탐색, 큐/스택 구현, 이진 탐색과 같은 알고리즘 패턴을 자바스크립트로 다룰 수 있어야 합니다. 또한 문자열/배열 조작 기법과 일부 유용한 메서드의 심화 사용이 요구됩니다.✅ 재귀 함수재귀는 함수가 자기 자신을 호출하여 문제를 해결하는 기법입니다. 예를 들어 팩토리얼 계산이나 DFS 탐색을 재귀로 구현할 수 있습니다. 종료 조건(base case)을 명확히 해야 하며, 너무 깊은 재귀는 Maximum call stack size exceeded 오류가 발생할 수 있습니다.function factorial(n) { if (n ✅ DFS / BFS (깊이/너비 우선 탐색)DFS재귀 또는 스택으로 구현하..