서버가 빈 HTML 껍데기를 보내고, 브라우저가 JavaScript를 실행해서 화면을 그리는 방식입니다. React 단독 사용 시 기본 동작 방식입니다.
서버에서 HTML을 미리 생성해 브라우저로 보내는 렌더링 방식입니다. JavaScript가 모두 실행되기 전에도 사용자가 콘텐츠를 먼저 볼 수 있어 첫 화면 표시와 SEO에 유리할 수 있습니다.
빌드 시점에 HTML을 미리 생성해 두는 렌더링 방식입니다. 사용자가 요청하면 이미 만들어진 HTML을 바로 전달하므로 응답이 빠르고, CDN에 캐싱하기 좋습니다. 블로그 글이나 문서처럼 자주 바뀌지 않는 콘텐츠에 적합합니다.
하나의 웹 페이지를 기반으로 JavaScript가 화면을 동적으로 전환하는 애플리케이션 방식입니다. 페이지 이동 시 매번 전체 문서를 새로고침하지 않고 필요한 부분만 업데이트합니다.
검색 엔진이 웹페이지의 내용을 잘 이해하고, 관련 검색 결과에 적절하게 노출할 수 있도록 개선하는 최적화입니다. 제목, 설명, 구조화된 HTML, 메타데이터 등이 중요한 요소로 사용됩니다. SSR은 페이지의 HTML을 미리 제공할 수 있어, 검색 엔진이 콘텐츠를 더 쉽게 확인하는 데 도움이 될 수 있습니다.
서버가 보낸 정적 HTML에 JavaScript 이벤트 핸들러를 연결하는 과정입니다. hydration이 완료되어야 버튼 클릭 같은 상호작용이 가능해집니다.
여러 JavaScript 파일과 의존성을 하나(또는 소수)의 파일로 묶은 결과물입니다. 번들이 클수록 다운로드와 실행에 시간이 걸립니다.
번들을 페이지별 또는 기능별로 나누어, 현재 필요한 코드만 로드하는 최적화 기법입니다. Next.js는 페이지 단위로 자동 코드 분할을 해줍니다.
API 요청이 순차적으로 이어져 전체 로딩이 느려지는 현상입니다. A 요청이 끝나야 B를 시작하고, B가 끝나야 C를 시작하는 식으로 대기 시간이 누적됩니다.
사용자가 페이지에 들어온 뒤, 화면에 첫 번째 콘텐츠(예: 텍스트, 이미지)가 보이기까지 걸리는 시간입니다. 이 시간이 짧을수록 사용자는 화면이 더 빨리 나타나고, 덜 답답하게 느껴집니다.
빌드 과정에서 실제로 사용되지 않는 코드를 번들에서 제거해 파일 크기를 줄이는 최적화 기법입니다. 나무를 흔들어 필요 없는 잎을 떨어뜨리는 모습에 비유해 붙은 이름입니다.
특정 시점을 나타내는 값입니다. 문자열, 숫자, Date 객체 등 여러 데이터 형식으로 표현될 수 있으며, 타임스탬프 자체는 "시간을 나타내는 개념"이고 어떤 형식으로 담느냐는 별개의 문제입니다. 기록의 작성일, 수정일 등을 저장할 때 사용됩니다.
비동기 작업(데이터 로딩 등) 중에 대체 UI(로딩 스피너 등)를 보여주는 React 기능입니다. <Suspense fallback={<Loading />}> 형태로 사용합니다.
데이터베이스 테이블을 프로그래밍 언어의 객체로 매핑해 SQL 대신 코드로 데이터를 다룰 수 있게 해주는 도구입니다. 예를 들어 db.post.findMany() 같은 코드가 내부적으로 SQL 쿼리로 변환됩니다. Prisma, Drizzle 등이 대표적입니다.
컴포넌트가 처음으로 DOM에 삽입되어 화면에 나타나는 시점을 말합니다. React에서 useEffect(() => {}, [])가 실행되는 시점이 마운트 직후입니다.
클라이언트가 서버에 일정 간격으로 반복 요청을 보내 새 데이터가 있는지 확인하는 방식입니다. 예를 들어 채팅 앱에서 5초마다 fetch('/api/messages')를 호출해 새 메시지를 확인하는 것이 폴링입니다. WebSocket 같은 실시간 연결 대신 사용하는 단순한 대안입니다.
데이터를 한꺼번에 보내는 대신, 준비된 부분부터 나눠서 보내는 전송 방식입니다. Next.js에서는 Suspense를 사용하면 서버가 완성된 HTML 부분부터 브라우저로 전송하고, 나머지는 준비되는 대로 이어서 보냅니다. 사용자는 전체 페이지가 완성될 때까지 기다리지 않고 점진적으로 콘텐츠를 볼 수 있습니다.
전 세계 여러 지역에 서버(엣지 서버)를 배치해서, 사용자와 가장 가까운 서버에서 콘텐츠를 제공하는 시스템입니다. 원본 서버가 멀리 있어도 가까운 CDN 서버에서 캐싱된 파일을 받으므로 응답 속도가 빨라집니다. 정적 파일(HTML, CSS, JS, 이미지)을 제공하는 데 주로 사용됩니다.
Next.js 13부터 도입된 새로운 파일 기반 라우팅 시스템입니다. app/ 디렉토리를 사용하며, 서버 컴포넌트와 중첩 레이아웃을 기본 지원합니다.
별도의 라우터 설정 없이 폴더와 파일 구조가 곧 URL 경로가 되는 방식입니다. app/about/page.tsx → /about
해당 경로의 UI를 정의하는 파일입니다. 이 파일이 있어야 해당 경로가 공개적으로 접근 가능한 페이지가 됩니다.
하위 페이지들이 공유하는 껍데기(레이아웃)를 정의하는 파일입니다. 네비게이션 바, 사이드바 등 공통 UI를 배치합니다.
페이지가 로딩되는 동안 보여줄 대체 UI를 정의하는 파일입니다. React의 Suspense를 내부적으로 활용합니다.
에러 발생 시 보여줄 UI를 정의하는 파일입니다. React의 Error Boundary를 내부적으로 활용하여 에러를 격리합니다.
URL의 일부를 변수로 받는 라우트입니다. app/posts/[slug]/page.tsx로 만들면 /posts/hello, /posts/world 등 다양한 경로를 하나의 파일로 처리합니다.
앱 전체를 감싸는 최상위 레이아웃(app/layout.tsx)입니다. <html>과 <body> 태그를 포함하며, 모든 페이지에 공통으로 적용됩니다.
레이아웃 안에 레이아웃이 겹쳐지는 구조입니다. 예를 들어 루트 레이아웃(헤더) 안에 대시보드 레이아웃(사이드바)이 중첩될 수 있습니다.
파일에서 하나의 기본값을 내보내는 JavaScript 문법입니다. page.tsx, layout.tsx 등 Next.js 규칙 파일은 반드시 default export를 사용해야 합니다.
서버에서만 실행되어 JavaScript 번들에 포함되지 않는 컴포넌트입니다. DB 조회, 파일 읽기 등 서버 자원에 직접 접근할 수 있고, 번들 크기를 줄여줍니다.
브라우저에서도 실행되어 사용자 상호작용(클릭, 입력 등)을 처리할 수 있는 컴포넌트입니다. useState, useEffect 등 React Hook을 사용할 수 있습니다.
파일 최상단에 'use client'를 선언하면 해당 파일과 그 하위 import가 클라이언트 컴포넌트 경계로 지정됩니다. 상호작용이 필요한 컴포넌트에만 사용합니다.
컴포넌트를 서버용과 클라이언트용으로 구분하는 React의 새로운 아키텍처입니다. Next.js App Router는 RSC를 기반으로 동작합니다.
데이터를 전송 가능한 형태(JSON 등)로 변환하는 것입니다. 서버 → 클라이언트로 props를 전달할 때 직렬화 가능한 값(문자열, 숫자, 배열 등)만 보낼 수 있습니다.
파일 간 import 관계로 만들어지는 구조입니다. 'use client'가 이 트리에서 서버/클라이언트 경계를 나누는 기준이 됩니다.
JSX 기반으로 React가 만드는 컴포넌트 계층 구조입니다. 모듈 의존성 트리와 달리, children으로 전달된 서버 컴포넌트는 클라이언트 컴포넌트 안에서도 서버 컴포넌트로 유지됩니다.
children prop을 통해 서버 컴포넌트와 클라이언트 컴포넌트를 조합하는 패턴입니다. 클라이언트 컴포넌트가 서버 컴포넌트를 children으로 받으면, 서버 컴포넌트의 장점을 유지할 수 있습니다.
React Context Provider를 클라이언트 컴포넌트로 만들고, 이를 서버 컴포넌트에서 감싸 하위 클라이언트 컴포넌트에 공통 상태를 제공하는 패턴입니다. 테마처럼 여러 컴포넌트가 함께 써야 하는 값을 공유할 때 유용하며, 서버 컴포넌트의 렌더링 이점도 함께 유지할 수 있습니다.
서버 컴포넌트의 렌더링 결과를 직렬화한 데이터입니다. 서버 컴포넌트의 렌더링된 React 엘리먼트 트리, 클라이언트 컴포넌트의 번들 참조(placeholder), 그리고 서버에서 클라이언트로 전달되는 props가 포함됩니다. 클라이언트는 이 데이터를 받아 클라이언트 컴포넌트 번들과 합쳐 최종 UI를 구성합니다.
프로젝트의 모든 파일과 변경 이력을 보관하는 공간입니다. 내 컴퓨터에 있는 로컬 저장소와 GitHub 같은 서비스에 있는 원격 저장소를 연결해 코드를 관리합니다.
독립적인 작업 공간입니다. 원본 코드에 영향을 주지 않고 기능 개발이나 버그 수정을 따로 진행할 수 있습니다.
코드의 변경사항을 하나의 단위로 저장하는 것입니다. 변경 내용과 메시지를 함께 기록하여 나중에 이력을 추적할 수 있습니다.
내 컴퓨터(로컬)의 커밋을 원격 저장소에 업로드하는 것입니다. push를 해야 다른 사람이 내 변경사항을 확인할 수 있습니다.
원격 저장소의 최신 변경사항을 내 컴퓨터(로컬)에 가져와 반영하는 것입니다. 다른 사람이 push한 코드를 내 로컬에 동기화할 때 사용합니다.
한 브랜치의 변경사항을 다른 브랜치에 합치는 것입니다. 보통 feature 브랜치의 작업이 끝나면 main 브랜치에 합칩니다.
내 브랜치의 변경사항을 다른 브랜치에 합쳐달라고 요청하는 것입니다. 팀원이 코드를 리뷰하고 승인하는 단위이기도 합니다.
다른 사람의 저장소를 내 계정으로 복사하는 것입니다. 원본 저장소에 직접 push 권한이 없을 때 사용합니다.
두 명이 같은 파일의 같은 부분을 다르게 수정했을 때 Git이 자동으로 합칠 수 없어 발생하는 상태입니다. 개발자가 직접 어떤 코드를 남길지 결정해야 합니다.
원래 정상적으로 사용되거나 통제되어야 하는 대상의 제어권을 중간에서 가로채는 것입니다. 보안 문맥에서는 세션 쿠키를 탈취하거나 DNS 응답을 조작하는 등의 공격을 뜻하고, 일반 프로그래밍 문맥에서는 이벤트, 요청 흐름, 라우팅 같은 기존 동작을 가로채 다른 동작으로 바꾸는 것을 뜻하기도 합니다. 원래 흐름의 제어권이 다른 곳으로 넘어간다는 점이 핵심입니다.
내 서비스 도메인이 아닌 다른 서버의 이미지를 그대로 <img src>로 참조해서 보여주는 방식입니다. 핫링크(hotlink)라고도 부릅니다. 내 글을 여는 모든 방문자의 브라우저가 그 외부 서버에 직접 요청을 보내기 때문에, 방문자 IP가 외부 서버에 노출되고, 외부 서버가 다운되거나 이미지를 바꾸면 내 글이 깨지거나 모르게 변조될 수 있습니다. 또 남의 서버 대역폭을 무단으로 소비하게 되어 저작권·예의 측면에서도 권장되지 않습니다. 다른 블로그에서 글을 가져오거나 이미지 URL을 그대로 붙여넣을 때 흔히 생기며, 보통은 이미지를 내 스토리지에 다시 업로드해서 해결합니다.
많은 콘텐츠 중에서 가치 있는 것을 의도를 가지고 골라 묶어 보여주는 일입니다. 단순한 정렬과 달리 추천이나 선별의 의도가 들어 있습니다. 예를 들어 알고리즘이 인기도와 사용자 취향을 기반으로 글을 추려서 보여주는 Trending 페이지는 큐레이션의 한 형태입니다. 원래는 박물관·미술관에서 작품을 선별하고 기획·전시하는 큐레이터(curator)의 일에서 온 말입니다.
완벽한 정답을 계산하기보다는, 충분히 좋은 결과를 빠르게 내기 위해 미리 정해둔 단순한 규칙·경험칙입니다. 모든 경우를 분석하지 않고 "대체로 잘 맞는 조건" 으로 판단을 단축한다는 점이 핵심입니다. 예를 들어 iOS 환경에서 쓰이는 브라우저는 입력 필드의 font-size 가 16px 미만이면 포커스 시 자동으로 화면을 확대하는데, 이는 "글자가 작으면 사용자가 못 읽을 것이다" 라는 휴리스틱에 따른 동작입니다. UX 분야에서는 닐슨(Nielsen)의 10가지 UX 휴리스틱이 사용성 평가의 대표적인 경험칙으로 자주 인용됩니다.
데이터가 유효하다고 간주되는 시간입니다. 원래는 IP 패킷이 라우터를 거칠 때마다 1씩 줄어드는 카운터(무한 루프 방지용)에서 시작된 개념이지만, 지금은 캐시·DNS·세션 토큰 등 만료가 있는 모든 데이터에 폭넓게 쓰입니다. 식료품의 유통기한과 비슷한 역할을 합니다.
HTTP Cache-Control 응답 헤더의 디렉티브(지시어)로, 응답을 받은 시점부터 N초 동안 캐시가 fresh로 간주되는 시간을 의미합니다. 그 시간 안에 들어오는 요청은 origin 서버까지 가지 않고 브라우저나 CDN 같은 캐시에서 바로 응답을 받아 처리됩니다.
max-age와 같은 역할을 하지만 공용 캐시(CDN, proxy 같은 shared cache)에만 적용됩니다. 브라우저 같은 개인 캐시는 무시하고 max-age나 기본값을 따르므로, CDN과 브라우저의 캐시 유효 시간을 서로 다르게 두고 싶을 때 사용합니다.
HTTP Cache-Control 디렉티브(지시어) 중 하나로, max-age가 만료된 뒤에도 정해진 시간 동안은 stale(낡은) 응답을 즉시 반환하면서 백그라운드에서 origin에 새 응답을 받아 캐시를 갱신합니다. 사용자는 origin 응답을 기다리지 않고 빠르게 화면을 보고, 다음 요청부터는 신선한 콘텐츠를 받게 됩니다. 같은 이름의 React 데이터 fetching 라이브러리(use-swr)도 이 전략에서 이름을 따왔습니다.
input 같은 포커스 가능한 요소가 포커스를 잃는 순간 발생하는 DOM 이벤트입니다. 사용자가 Tab 키로 다음 요소로 이동하거나 다른 영역을 클릭해서 입력 칸을 떠날 때 발화하며, 반대로 포커스를 받는 순간은 focus 이벤트가 발생합니다. React에서는 onBlur prop 으로 다루고, 폼 검증에서는 입력 도중에는 에러를 표시하지 않고 사용자가 칸을 떠난 뒤부터 보여주는 "validate on blur" 패턴에 자주 쓰입니다.
화면 가장자리(주로 좌우, 때로는 하단)에서 슬라이드되어 나타나는 패널형 UI 컴포넌트입니다. 서랍을 잡아당기는 동작과 닮아서 붙은 이름이며, 화면 중앙에 떠서 결정을 요구하는 Modal/Dialog 와 달리 본문은 그대로 두고 보조 컨텍스트를 펼치는 데 적합합니다. 햄버거 메뉴를 누르면 옆에서 나오는 내비게이션, 댓글이나 상세 정보를 본문 옆에 띄우는 사이드 시트, 모바일에서 아래에서 올라오는 바텀 시트가 모두 Drawer 패턴입니다. Material Design 에서 대중화됐고 shadcn/ui 등 주요 컴포넌트 라이브러리에도 기본 제공됩니다.
화면 한쪽에 좁게 고정해 주요 이동 경로나 도구를 아이콘 중심으로 배치한 UI 영역입니다. 전체 사이드바보다 공간을 적게 쓰고, 사용자가 자주 쓰는 화면 전환이나 명령에 빠르게 접근하게 해줍니다. 텍스트 라벨을 항상 보이게 하기보다 툴팁, 선택 상태, 확장 패널과 함께 쓰는 경우가 많습니다.
고정된 버튼 영역이나 헤더가 스크롤 콘텐츠 위에 겹칠 때, 경계를 딱 잘라 보이지 않게 하려고 얕은 투명 그라디언트를 덧씌우는 UI 처리입니다. 콘텐츠가 배경으로 부드럽게 사라지는 것처럼 보여 구분감을 주며, edge fade나 fade overlay라고도 부릅니다. 모달 뒤를 어둡게 막는 강한 dimmed scrim과 달리, 여기서는 시선 흐름과 계층을 부드럽게 정리하는 용도로 사용합니다.
모달, 바텀 시트, 팝오버 같은 레이어가 열렸을 때 배경 위에 반투명한 어두운 막을 덮어 뒤쪽 화면을 낮은 명도로 보이게 만드는 UI 처리입니다. 사용자의 시선을 열린 레이어로 모으고, 배경 화면이 현재 조작 대상이 아니라는 것을 알려줍니다. 보통 dimmed background, dim overlay, scrim 같은 표현과 함께 쓰입니다.