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재귀 또는 스택으로 구현하..

코딩테스트에서 기본적인 문제를 해결하려면 자바스크립트 문법 중에서도 조금 더 실전적인 도구들을 다룰 줄 알아야 합니다.레벨 2에서는 고차 함수, 객체/Set/Map 활용, 정렬과 정규식, 그리고 ES6 이상의 편의 문법들을 중심으로 정리합니다.✅ 고차 함수 (map, filter, reduce)map: 각 요소에 함수를 적용해 새로운 배열 생성[1, 4, 9].map(x => x * 2); // [2, 8, 18]filter: 조건에 맞는 요소만 걸러냄[5, 12, 8].filter(x => x >= 10); // [12]reduce: 모든 요소를 누적 계산[2, 4, 6].reduce((sum, num) => sum + num, 0); // 12※ reduce 사용 시 빈 배열 체크 & 초기값 설정 주..