들어가며블로그에 광고 배너를 달면서 이런 요구사항이 생겼습니다.요구사항:- 좌측/우측 배너 각각 클릭 수 추적- 일별, 시간대별 통계 확인- 관리자 대시보드에서 시각화- 서버리스 환경 (Next.js on Vercel)처음엔 간단할 줄 알았습니다. "그냥 데이터베이스에 저장하면 되지 않나?" 하고요.// ❌ 순진한 첫 시도async function trackClick(bannerId: string) { await prisma.bannerClick.create({ data: { bannerId, timestamp: new Date() } });}문제:매 클릭마다 DB 쓰기 → 비용 증가통계 조회 시 전체 레코드 스캔 → 느림시간대별 집계를 매번 계산 → 비효율그래서 선택한 것이 Vercel KV ..

문제 출처문제 보러가기문제 설명네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다.영단어 변환 예시:1478 → "one4seveneight"234567 → "23four5six7"10203 → "1zerotwozero3"이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요.숫자-영단어 대응표:숫자영단어0zero1one2two3three4four5five6six7seven8eight9nine제한사항1 ≤ s의 길이 ≤ 50s가 "zero" 또는 "0"으로 시..

들어가며"자료구조? 그거 학교에서나 배우는 거 아니야?"실무에서 코딩만 하면 되지, 왜 자료구조를 알아야 하는지 의문을 가진 적 있으신가요? 저도 처음에는 그랬습니다. 하지만 자료구조는 단순히 이론이 아닙니다. 우리가 매일 작성하는 코드의 효율성과 직결되는 실전 개념입니다.컴퓨터의 메모리는 무한해 보이지만, 사실은 매우 한정적입니다. 이 한정된 공간에서 데이터를 어떻게 효율적으로 저장하고 관리할 것인가. 이것이 바로 자료구조를 배우는 이유입니다.오늘은 실무에서 가장 많이 사용되는 4가지 핵심 자료구조를 알아보겠습니다.1. 스택 (Stack): 드럼통처럼 쌓이는 구조스택이란?스택을 이해하는 가장 쉬운 방법은 드럼통을 떠올리는 것입니다. 드럼통에 물건을 하나씩 넣으면 위로 쌓이죠? 꺼낼 때는 가장 나중에 넣..

들어가며"이 알고리즘이 더 빠른데?" vs "저 알고리즘이 더 빠른데?"개발자들 사이에서 흔히 일어나는 논쟁입니다. 하지만 '빠르다'는 표현은 생각보다 애매합니다. 내 컴퓨터에서는 0.5초 걸렸는데, 동료 컴퓨터에서는 0.2초 걸렸다면? 과연 어느 알고리즘이 더 효율적인 걸까요?이런 모호함을 해결하기 위해 컴퓨터 과학에서는 Big O 표기법이라는 표준화된 방법을 사용합니다. 오늘은 이 Big O 표기법을 통해 알고리즘의 성능을 제대로 평가하는 방법을 알아보겠습니다.왜 시간이 아닌 단계(Step)로 측정할까?알고리즘의 성능을 초 단위로 측정하지 않는 이유는 명확합니다. 같은 알고리즘이라도 하드웨어 성능에 따라 실행 시간이 달라지기 때문입니다.최신 M4 맥북에서 돌린 알고리즘: 0.1초10년 된 노트북에서 ..

React의 Error Boundary는 컴포넌트 렌더링 도중 발생하는 오류를 포착하여 앱이 완전히 중단되지 않도록 돕는 강력한 기능입니다.하지만 한 가지 중요한 한계가 있습니다 — 비동기 코드에서 발생한 오류는 Error Boundary가 잡을 수 없습니다.## 왜 Error Boundary는 비동기 에러를 잡지 못할까?그 이유는 비동기 에러가 렌더링 시점의 콜스택이 모두 비워진 후에 발생하기 때문입니다.React는 컴포넌트를 렌더링할 때 하나의 연속된 콜스택 안에서 작업을 수행하며, Error Boundary 또한 이 흐름 안에서만 동작합니다.즉, 동기적인 렌더링 과정 중에 발생한 오류만 감지할 수 있습니다.class MyComponent extends React.Component { render(..

React에서 “언제, 왜, 어떻게” 리렌더링이 일어나는지 정확히 이해하면 성능 최적화와 불필요한 복잡도 감소에 큰 도움을 줍니다. 이 글은 리렌더링의 이론을 체계적으로 정리하고, 실행 가능한 예시와 실무 체크리스트로 마무리합니다.핵심 개념: 렌더링 파이프라인 3단계Trigger: 상태(state) 변경, 상위 컴포넌트 렌더, context 값 변경, key 변경, 외부 스토어 구독 변경 등으로 “업데이트 필요”가 발생합니다. React는 내부 업데이트 큐에 변경을 기록합니다.Render: 변경된 상태로 함수 컴포넌트를 다시 호출하여 새로운 VDOM(Fiber 트리)을 만듭니다. 이전 트리와 비교(diff)하지만, 이 단계에서는 실제 DOM 조작이 없습니다.Commit: diff 결과를 실제 DOM에 최..

안녕하세요! 프론트엔드/풀스택 실무에서 자주 부딪히는 “JWT를 어디에 보관할 것인가” 문제를 정리했습니다. 저장 위치별 보안/UX 트레이드오프, 실제로 일어나는 탈취(steal) 시나리오, 그리고 탈취 되었을 때 어떻게 눈치채고 대응할지까지 바로 적용 가능한 체크리스트로 담았습니다.저장 위치별 비교구분localStoragesessionStorageCookie (HttpOnly 권장)접근성JS로 window.localStorage 읽기/쓰기탭 수명(탭 닫히면 소멸)JS 접근 불가(HttpOnly)·자동 전송(도메인/경로 일치 시)지속성브라우저 종료 후에도 유지탭 살아있는 동안만만료 시각/세션/영구 선택 가능XSS에 대한 노출높음(스크립트가 읽을 수 있음)높음낮음(HttpOnly면 읽기 불가)CSRF 위험..

서론이번 글에서는 아직 다루지 않은 SSR(Server-Side Rendering) 페이지의 풀 페이지 캐싱에 대해 이야기합니다.SSR은 매 요청마다 서버에서 HTML을 생성하므로 항상 최신 데이터를 보장하지만, 그만큼 성능 부담이 큽니다.그렇다면 SSR 페이지를 캐싱하면서도 신선함을 유지할 수 있는 방법은 무엇일까요?SSR의 본질 (Next.js 15 기준)SSR이 하는 일매 요청마다 서버에서 HTML 생성데이터는 요청 시점에 가져옴SEO 친화적, 항상 최신 상태 반영적합한 경우자주 변하는 데이터사용자별 맞춤형 페이지인증 필요 페이지성능 문제가 발생하는 경우모든 요청이 DB/API 호출을 동반고트래픽 시 서버 부하 급증TTFB(Time to First Byte) 지연따라서 풀 페이지 캐싱은 필수적인 최..

리액트에서 useEffect와 setInterval을 함께 쓰다 보면, 분명 1초마다 증가시키라고 했는데 상태가 갱신되지 않거나 0에 멈춰 있는 현상을 자주 만납니다. 원인은 대부분 “stale closure(오래된 클로저)” 입니다. 핵심만 간단히 정리합니다.TL;DR문제 원인: 빈 의존성 배열 []로 등록한 이펙트는 최초 렌더의 count를 클로저로 캡처합니다. 그 뒤 타이머 콜백은 계속 “초기값”만 봅니다.정석 해결: 다음 상태가 이전 상태에 의존하면, 항상 함수형 업데이트 setState(prev => ...)를 사용하세요.필수: 타이머는 반드시 정리(cleanup)합니다.문제 코드 import { useEffect, useState } from 'react' export default fun..

리액트 프로젝트를 하다 보면 꼭 한 번은 만나게 되는 상황이 있습니다.컴포넌트 트리 어딘가에서 에러가 터지면, 앱 전체가 그대로 하얀 화면(whitescreen of death)이 되어버리는 순간이죠.이럴 때 사용자를 보호해주는 최후의 안전망이 바로 ErrorBoundary입니다.그런데 재미있는 사실 하나. 함수 컴포넌트 전성시대인 지금도, ErrorBoundary만은 클래스 컴포넌트로만 작성해야 합니다."왜 아직도 클래스일까?" 오늘은 그 이유와 한계, 그리고 실전 적용 팁을정리해봅니다.TL;DR (Too Long; Didn’t Read)Error Boundary는 여전히 클래스 전용라이프사이클(getDerivedStateFromError, componentDidCatch)로만지원됩니다.함수형 훅으로 ..