갱신 중 오래됨(Stale-While-Revalidate) Stale-While-Revalidate
갱신 중 오래됨은 새 응답을 백그라운드에서 확인하는 동안 허용된 오래된 캐시를 한 번에 표시할 수 있습니다.
↗기술 & 테스트
웹을 구성하는 부품과 그것이 잘 작동하는지 보여주는 테스트를 배우세요.
01 / Atlas
모든 기술 & 테스트 용어
간단한 의미, 예시, 사용 시점, 공식성, 코드명을 포함한 용어 열기
-
01 · 더 많은 세부 정보 -
02 · 핵심 검색 엔진 최적화 Search Engine Optimization
SEO는 유용한 공개 페이지가 발견되고 이해되는 데 도움을 줍니다. 또한 크롤링 및 색인을 쉽게 유지합니다.
↗ -
03 · 더 많은 세부 정보 계약 테스트 Contract Testing
계약 테스트는 개별적으로 배포할 수 있는 두 시스템이 여전히 합의된 형식으로 메시지를 교환하는지 확인합니다.
↗ -
04 · 더 많은 세부 정보 관찰 가능 신호(Observability Signals) Observability Signals
관찰 가능 신호는 시스템이 자신의 동작에 대해 보내는 증거입니다. 일반적인 신호는 추적(traces), 메트릭(metrics), 로그(logs), 서비스 간 작은 컨텍스트를 전달하는 배기(baggage)입니다.
↗ -
05 · 핵심 낙관적 UI Optimistic UI
낙관적 UI는 서버가 확인하기 전에 예상 결과를 보여줍니다. 실패하면 이전 결과를 복원하고 발생한 일을 설명합니다.
↗ -
06 · 핵심 단위 테스트 Unit Test
단위 테스트는 소프트웨어의 작은 부분 하나를 자체적으로 검사합니다. 느리거나 신뢰할 수 없는 외부 시스템은 테스트에서 제외됩니다.
↗ -
07 · 핵심 단위, 통합 및 종단 간 테스트 — 학습 번들 Unit, Integration & End-to-End Testing — Learning Bundle
이 학습 번들은 세 가지 테스트 범위를 비교합니다. 단위 테스트는 논리 자체를 검사합니다. 통합 테스트는 구성 요소 사이의 경계를 검사합니다. 엔드투엔드 테스트는 사람들이 사용하는 시스템 전체를 실행합니다. 이 번들은 하나의 표준 테스트 수준이 아닙니다.
↗ -
08 · 핵심 데이터 가져오기 생명주기 Data Fetching Lifecycle
데이터 가져오기 수명 주기는 하나의 읽기 요청을 따릅니다. 대기 상태에서 성공 또는 오류로 진행합니다. 성공은 데이터를 포함하거나 비어 있을 수 있습니다.
↗ -
09 · 핵심 데이터 변형 Data Mutation
데이터 변형은 서버 데이터를 생성, 변경, 또는 삭제합니다. 화면은 해당 작업의 대기 및 최종 결과를 추적합니다.
↗ -
10 · 핵심 데이터 사전 가져오기 Data Prefetching
데이터 사전 가져오기는 화면이 열리기 전에 필요한 데이터를 미리 로드합니다. 새로운 캐시된 결과는 다음 화면을 더 빠르게 만들 수 있습니다.
↗ -
11 · 더 많은 세부 정보 로컬 우선 동기화 Local-First Sync
로컬 우선 동기화는 장치에 작업 복사본을 유지합니다. 사용자는 오프라인에서도 읽고 쓸 수 있으며, 다른 장치의 복사본과 변경 사항을 결합할 수 있습니다.
↗ -
12 · 핵심 리액트 React
React는 컴포넌트 기반 인터페이스를 위한 JavaScript 라이브러리입니다. 데이터, props, 또는 상태 변경은 화면을 업데이트할 수 있습니다. 이것은 ReAct가 아닙니다.
↗ -
13 · 핵심 린트 Lint
린트는 코드를 실행하지 않고 검사합니다. 가능한 버그, 안전하지 않은 패턴, 스타일 문제 및 깨진 프로젝트 규칙을 찾아냅니다.
↗ -
14 · 핵심 마크다운 Markdown
Markdown은 작은 기호로 일반 텍스트를 포맷합니다. 이러한 기호는 제목, 목록, 링크 및 코드 블록을 만듭니다.
↗ -
15 · 더 많은 세부 정보 모듈 번들러 Module Bundler
모듈 번들러는 코드 모듈 간의 연결을 따라가고 파일을 배포할 준비를 합니다. 종종 파일을 분할, 변경, 개선합니다.
↗ -
16 · 더 많은 세부 정보 보안 테스트 Security Testing
보안 테스트는 명확한 계획을 사용하여 보안 규칙을 확인하고 공격자가 이용할 수 있는 약점을 찾습니다. 디자인, 코드, 설정, 시스템 운영을 포함합니다.
↗ -
17 · 더 많은 세부 정보 부하 테스트 Load Testing
부하 테스트는 계획된 트래픽 하에서 시스템의 속도와 신뢰성을 확인합니다. 계획에는 사용자 수, 요청 또는 작업 패턴이 설정됩니다.
↗ -
18 · 더 많은 세부 정보 불안정한 테스트 Flaky Test
Flaky Test는 코드를 안 바꿔도 성공했다가 실패하기도 해요. 보통 타이밍, 순서, 함께 쓰는 상태, 무작위성, 또는 외부 시스템 때문에 일어나요.
↗ -
19 · 핵심 뷰 Vue
Vue는 구성 요소 인터페이스를 위한 자바스크립트 프레임워크입니다. 템플릿은 화면을 설명하고, 반응형 데이터가 이를 업데이트합니다.
↗ -
20 · 더 많은 세부 정보 비동기 경쟁 조건 Async Race Condition
비동기 경합은 겹치는 작업이 예상치 못한 순서로 완료될 때 발생합니다. 더 오래된 결과가 더 새로운 결과를 덮어쓸 수 있습니다.
↗ -
21 · 핵심 빌드 Build
빌드는 소스 파일과 나열된 의존성들을 실행, 테스트, 또는 배포할 수 있는 점검된 결과물로 만들어요.
↗ -
22 · 핵심 서버 상태 Server State
서버 상태는 서버가 소유한 원격 데이터입니다. 화면이 복사본을 유지하며 반드시 갱신해야 합니다.
↗ -
23 · 더 많은 세부 정보 서버 측 렌더링 Server-side Rendering
서버 측 렌더링(SSR)은 각 요청마다 서버에서 HTML을 생성한 다음, 준비된 페이지를 브라우저로 전송합니다. 클라이언트 동작은 나중에 첨부될 수 있습니다.
↗ -
24 · 더 많은 세부 정보 성능 예산 Performance Budget
성능 예산은 작업 시작 전에 파일 크기, 타이밍 또는 사용자 경험에 대해 설정한 제한입니다. 이는 설계 및 코드 선택을 안내하는 데 도움을 줍니다.
↗ -
25 · 더 많은 세부 정보 수화 Hydration
하이드레이션은 브라우저 동작과 상태를 서버나 빌드가 이미 생성한 HTML과 연결합니다. 이는 페이지의 선택된 부분을 대화형 컨트롤로 바꿉니다.
↗ -
26 · 핵심 스모크 테스트 Smoke Test
Smoke Test는 작고 빠른 테스트 모음이야. 빌드가 더 깊은 테스트나 실사용을 견딜 수 있는지 알려줘.
↗ -
27 · 더 많은 세부 정보 시각 회귀 테스트 Visual Regression Test
시각적 회귀 테스트는 오늘 렌더링된 이미지를 동일한 브라우저 조건에서 승인된 참조 이미지와 비교합니다.
↗ -
28 · 핵심 시맨틱 버전 관리 Semantic Versioning
시맨틱 버전 관리(SemVer)는 공개 API가 어떻게 변경되었는지 보여주기 위해 MAJOR.MINOR.PATCH 숫자를 사용합니다. 또한 사전 릴리스와 빌드 레이블에 대한 규칙을 설정합니다.
↗ -
29 · 핵심 오류 경계 Error Boundary
에러 경계는 컴포넌트 트리 한 부분 내에서 화면 충돌을 포착합니다. 그곳에서 안전한 대체물을 보여줍니다.
↗ -
30 · 더 많은 세부 정보 요청 중복 제거 Request Deduplication
요청 중복 제거는 이미 실행 중인 요청을 일치하는 호출자가 공유할 수 있게 합니다. 각 호출자는 동일한 결과를 받습니다.
↗ -
31 · 핵심 요청 취소 Request Cancellation
요청 취소는 완료되지 않은 클라이언트 작업이 더 이상 필요하지 않음을 나타냅니다. 지원되는 API는 중단 신호를 수신합니다.
↗ -
32 · 핵심 자바스크립트 JavaScript
자바스크립트는 ECMAScript 표준을 기반으로 한 프로그래밍 언어입니다. 주로 웹사이트와 다른 프로그램이 사용자 동작에 반응하고 시간에 따라 변경되도록 만드는 데 사용됩니다.
↗ -
33 · 핵심 접근성 테스트 Accessibility Testing
접근성 테스트는 콘텐츠와 컨트롤이 접근성 요구를 충족하는지 확인하기 위해 도구와 사람을 사용합니다. 여기에는 키보드와 보조 기술을 사용한 테스트가 포함됩니다.
↗ -
34 · 더 많은 세부 정보 접근성, 성능 및 관측 가능성 — 학습 번들 Accessibility, Performance & Observability — Learning Bundle
이 학습 번들은 세 가지 품질 분야를 결합합니다. 접근성은 누가 제품을 사용할 수 있는지를 확인합니다. 성능은 응답 속도와 자원 비용을 확인합니다. 관찰 가능성은 실행 중인 시스템을 설명하는 데 도움이 됩니다. 이 번들은 하나의 표준 품질 지표가 아닙니다.
↗ -
35 · 핵심 정적 사이트 생성 Static Site Generation
정적 사이트 생성(SSG)은 방문자가 요청하기 전에, 보통 빌드 과정 동안 각 경로의 HTML을 만듭니다. 그런 다음 서버는 준비된 파일을 보낼 수 있습니다.
↗ -
36 · 핵심 종단 간 테스트 End-to-end Test
엔드투엔드(E2E) 테스트는 조립되고 배포된 시스템을 통해 완전한 사용자 또는 비즈니스 여정을 따릅니다.
↗ -
37 · 더 많은 세부 정보 컴포넌트 테스트 Component Test
컴포넌트 테스트는 실제 렌더링 공간에 하나의 인터페이스 부분을 배치합니다. 그런 다음 해당 부분에 제어된 입력과 데이터를 제공하고, 동작을 확인합니다.
↗ -
38 · 핵심 코어 웹 바이탈 Core Web Vitals
코어 웹 바이탈은 페이지 로딩, 입력 반응, 시각적 안정성을 위한 구글의 실제 사용자 측정값 세트입니다. 현재 측정 항목은 LCP, INP, CLS입니다.
↗ -
39 · 더 많은 세부 정보 쿼리 무효화 Query Invalidation
쿼리 무효화는 일치하는 캐시 데이터를 오래된 것으로 표시합니다. 화면에 있는 관련 데이터는 백그라운드에서 새로고침될 수 있습니다.
↗ -
40 · 더 많은 세부 정보 클라이언트 측 렌더링 Client-side Rendering
클라이언트 측 렌더링(CSR)은 브라우저가 JavaScript와 필요한 데이터가 도착한 후에 앱 화면 대부분을 구성한다는 것을 의미합니다.
↗ -
41 · 핵심 터미널 Terminal
Terminal은 명령어 셸과 도구를 쓰는 글자 창이야. 파일을 살펴보고, 명령을 실행하고, 작업을 자동화할 수 있어.
↗ -
42 · 더 많은 세부 정보 테스트 더블 Test Double
Test Double은 진짜 시스템 부품 대신 서는 거야. Stub, fake, spy, mock이 통제나 관측을 도와줘.
↗ -
43 · 더 많은 세부 정보 테스트 데이터 및 픽스처 Test Data and Fixture
테스트 데이터와 픽스처는 알려진 입력과 설정 단계를 의미합니다. 각각의 테스트마다 시스템을 동일한 상태로 만듭니다.
↗ -
44 · 더 많은 세부 정보 테스트 주도 개발 Test-driven Development
테스트 주도 개발(TDD)은 세 가지 단계를 반복합니다. 작은 실패 테스트를 작성합니다. 통과하는 최소한의 코드를 작성합니다. 그런 다음 동작을 변경하지 않고 코드를 정리합니다.
↗ -
45 · 더 많은 세부 정보 테스트 커버리지 Test Coverage
테스트 커버리지는 어떤 코드, 요구사항, 상태, 혹은 위험 요소를 테스트가 확인하는지를 보여줍니다. 비율은 단지 대략적인 표시일 뿐입니다.
↗ -
46 · 핵심 테스트 케이스 Test Case
Test Case는 하나의 행동이나 위험을 확인해. 시작 상태, 행동, 예상 결과를 적어.
↗ -
47 · 핵심 통합 테스트 Integration Test
통합 테스트는 시스템의 두 개 이상의 구성 요소가 실제 연결 지점을 통해 함께 작동하는지 확인합니다.
↗ -
48 · 더 많은 세부 정보 트랜스파일러 Transpiler
트랜스파일러는 소스 코드를 한 언어 버전이나 문법에서 다른 소스 코드로 변경하는 컴파일러입니다.
↗ -
49 · 핵심 파이썬 Python
파이썬은 읽기 쉬운 코드의 범용 프로그래밍 언어입니다. 이 도구들은 웹 서비스, 자동화, 데이터, 머신러닝을 포함합니다.
↗ -
50 · 핵심 패키지 관리자 Package Manager
패키지 관리자는 소프트웨어 패키지와 해당 패키지가 의존하는 패키지를 검색, 설치, 기록, 업데이트 및 게시합니다.
↗ -
51 · 핵심 폴링 Polling
폴링은 변화를 확인하기 위해 타이머에 따라 읽기를 반복합니다. 간격은 작업 완료 시 적응, 일시정지 또는 중단될 수 있습니다.
↗ -
52 · 핵심 프런트엔드 상태 관리 Frontend State Management
프런트엔드 상태 관리는 화면이 무엇을 기억할지, 그 데이터가 어디에 저장될지, 무엇이 데이터를 변경할 수 있는지를 결정합니다.
↗ -
53 · 핵심 프론트엔드 웹 스택 — 학습 번들 Frontend Web Stack — Learning Bundle
이 학습 번들은 세 가지 브라우저 기술을 연결합니다. HTML은 문서에 의미를 부여합니다. CSS는 문서의 모습을 제어합니다. JavaScript 또는 TypeScript는 동작을 추가합니다. 이 시스템 관점은 하나의 표준 기술이 아닙니다.
↗ -
54 · 핵심 회귀 테스트 Regression Test
회귀 테스트는 나중에 코드가 바뀌어서 예전에 잘 되던 기능이 망가지지 않았는지 확인해요.
↗ -
55 · 핵심 CSS CSS
CSS는 문서 요소가 어떻게 보이고 서로 맞물리는지를 제어하는 웹 규칙 집합입니다. 색상, 간격, 레이아웃, 화면 크기 변화 및 시각 상태를 설정할 수 있습니다.
↗ -
56 · 핵심 DOM DOM
문서 객체 모델(DOM)은 문서를 노드라고 불리는 객체들의 트리로 변환합니다. 프로그램은 표준 도구를 사용하여 문서를 읽고 변경합니다.
↗ -
57 · 핵심 HTML HTML
HTML은 웹 페이지의 구성 요소와 의미를 제공하는 표준 마크업 언어입니다. 이것은 브라우저에게 제목, 링크, 이미지, 폼 등이 무엇인지 알려줍니다.
↗ -
58 · 더 많은 세부 정보 Next.js Next.js
Next.js는 React 위에 구축된 프레임워크입니다. 라우팅, 서버 및 브라우저 렌더링, 데이터 로딩, 자산 최적화 및 배포 규칙을 추가합니다.
↗ -
59 · 핵심 npm npm
npm은 자바스크립트 패키지 레지스트리이자 명령줄 도구입니다. 패키지를 설치하고, 나열하며, 배포하고, 프로젝트 스크립트를 실행합니다.
↗ -
60 · 더 많은 세부 정보 shadcn/ui shadcn/ui
shadcn/ui는 애플리케이션에서 편집 가능한 UI 컴포넌트 소스를 제공합니다. 일반적으로 접근 가능한 기본 컨트롤과 Tailwind CSS를 결합합니다.
↗ -
61 · 핵심 Tailwind CSS Tailwind CSS
Tailwind CSS는 유틸리티 우선 CSS 프레임워크입니다. HTML의 작은 클래스들이 공통 디자인 값과 변형을 적용합니다.
↗