프론트엔드 필수 용어 50 (Front-end Essentials)

hong — Tue, 10 Feb 2026 10:37:33 +0000

1) HTML / 웹 기본 (1~10)

HTML: 웹 페이지 구조를 만드는 마크업 언어
Semantic HTML: 의미 있는 태그로 구조화(SEO/접근성에 유리)
DOM: 브라우저가 HTML을 객체 트리로 만든 것
Element / Node: DOM 구성 단위(요소/노드)
Attribute: 태그의 속성(src, alt, data-* 등)
Viewport: 화면 표시 영역(모바일 대응에 핵심)
Meta tag: 페이지 정보(문자셋/반응형/SEO 힌트)
URL / URI: 자원 위치 / 자원 식별자(더 넓은 개념)
SEO: 검색엔진 최적화(구조/속도/콘텐츠 모두 영향)
Accessibility(A11y): 장애/환경 관계없이 사용 가능하게 만드는 원칙

2) CSS / 레이아웃 (11~20)

CSS: 스타일(색/배치/폰트 등)을 정의
Selector: 스타일 적용 대상 선택자
Specificity: 어떤 스타일이 우선 적용되는지 규칙(우선순위)
Box Model: content + padding + border + margin
Display: block/inline/inline-block 등 배치 방식
Position: static/relative/absolute/fixed/sticky
Flexbox: 1차원(가로/세로) 레이아웃 배치
Grid: 2차원(행/열) 레이아웃 배치
Responsive Web: 화면 크기에 따라 적응형 레이아웃
Media Query: 화면 조건별 CSS 분기

3) JavaScript 기초 (21~30)

JavaScript: 브라우저 동작(로직/이벤트)을 담당
ES6+: 최신 문법(화살표 함수, let/const, 모듈 등)
Scope: 변수 유효 범위(전역/함수/블록)
Hoisting: 선언이 위로 끌어올려지는 동작
Closure: 함수가 바깥 스코프를 기억하는 특성
this: 실행 컨텍스트에 따라 달라지는 참조
Event Loop: 비동기 작업을 처리하는 JS 동작 원리
Promise: 비동기 결과를 다루는 객체
async/await: Promise를 더 읽기 쉽게 쓰는 문법
Debounce/Throttle: 잦은 이벤트 호출을 줄이는 기법(검색/스크롤)

4) 브라우저 동작 / 렌더링 (31~38)

Rendering: 화면에 그려지는 과정
Reflow(Layout): 레이아웃 다시 계산(비용 큼)
Repaint: 색/그림자 등 다시 그리기
Critical Rendering Path: 렌더링에 필요한 핵심 과정/자원 흐름
Caching: 리소스를 재사용해 로딩 속도 개선
Cookie: 브라우저에 저장되는 데이터(세션/설정 등)
LocalStorage/SessionStorage: 브라우저 저장소(간단 데이터 저장)
Service Worker: 오프라인/캐시/푸시를 가능하게 하는 백그라운드 스크립트

5) 네트워크 / API (39~44)

HTTP: 웹 통신 규약
HTTPS: 암호화된 HTTP(TLS 기반)
REST API: 자원 중심 설계 스타일
JSON: 프론트-백 데이터 교환 표준 포맷
CORS: 다른 출처 요청을 제한/허용하는 브라우저 정책
JWT: 토큰 기반 인증에 자주 쓰는 형식

6) 프레임워크 / 상태 / 빌드 (45~50)

SPA: 한 페이지에서 화면을 바꿔가며 동작하는 앱
CSR: 브라우저에서 렌더링(초기 로딩 느릴 수 있음)
SSR: 서버에서 HTML을 만들어 전달(SEO/초기속도 유리)
SSG: 빌드 시 정적 HTML 생성(빠르고 안정적)
State(상태) / Props: 화면 데이터 / 부모→자식 전달 값(React 기준)
Bundler: 여러 파일을 묶어 배포용으로 만드는 도구(Vite/Webpack 등)

게시물 프론트엔드 필수 용어 50 (Front-end Essentials)이 하우인포-IT·테크에 처음 등장했습니다.

개발자 필수 IT 용어 정리 (Developer IT Glossary)

hong — Tue, 10 Feb 2026 10:30:48 +0000

처음 개발을 시작하면 “그 말이 그 말 같고”, 회의나 문서에서 용어가 쏟아져서 멘붕 오기 쉽죠.
이 글은 개발자라면 자주 듣는 핵심 용어를 “짧고 실무적으로” 정리한 치트시트입니다. 필요할 때 북마크해두고 꺼내 보세요.

✅ 목차

개발 기본 개념
웹·네트워크
API·백엔드
데이터베이스
DevOps·배포
클라우드
보안
성능·모니터링
아키텍처
헷갈리는 용어 10쌍 정리

1) 개발 기본 개념

알고리즘(Algorithm): 문제를 푸는 절차/방법. (예: 정렬, 탐색)
자료구조(Data Structure): 데이터를 담는 방식. (배열, 리스트, 해시맵, 스택/큐)
컴파일(Compile): 소스코드를 기계가 실행하기 쉬운 형태로 변환.
인터프리터(Interpreter): 실행하면서 한 줄씩 해석하는 방식.
런타임(Runtime): 프로그램이 “실제로 실행되는 시간/환경”.
빌드(Build): 실행 파일/패키지를 만들기 위한 전체 과정(컴파일+번들링 등 포함).
라이브러리(Library): 내가 호출해서 쓰는 도구 모음.
프레임워크(Framework): 프레임워크가 내 코드를 호출(흐름을 주도).
의존성(Dependency): 내 코드가 필요로 하는 외부 모듈/패키지.
버전(Version) / 호환성(Compatibility): “업데이트”가 항상 좋은 건 아니고, 호환이 핵심.

2) 웹·네트워크 필수 용어

IP: 인터넷에서 기기를 구분하는 주소.
포트(Port): 한 기기 안에서 서비스(프로그램)를 구분하는 문 번호. (80/443 등)
DNS: howinfo.kr 같은 도메인을 IP로 바꿔주는 “전화번호부”.
HTTP / HTTPS: 웹 통신 규약 / 암호화(보안)된 HTTP.
요청(Request) / 응답(Response): 클라이언트가 “주세요” → 서버가 “여기요”.
헤더(Header): 부가 정보(인증, 타입, 캐시 등).
바디(Body): 실제 데이터(JSON, 파일 등).
쿠키(Cookie): 브라우저에 저장되는 작은 데이터(세션/설정 등).
세션(Session): “로그인 상태” 같은 서버 측 사용자 상태.
캐시(Cache): 자주 쓰는 데이터를 임시 저장해 속도 개선.
CDN: 이미지/정적파일을 사용자 가까운 서버에서 빠르게 제공.
CORS: 다른 출처(도메인) 요청을 브라우저가 제한하는 보안 정책.
웹소켓(WebSocket): 실시간 통신(채팅, 알림 등)에 자주 사용.

3) API·백엔드 용어

API: 기능을 “요청해서 사용”할 수 있게 만든 규칙/창구.
엔드포인트(Endpoint): API 주소(예: /api/users).
REST: URL은 자원, 메서드(GET/POST/PUT/DELETE)는 행위라는 설계 스타일.
CRUD: Create/Read/Update/Delete(데이터 기본 4대 작업).
GraphQL: 필요한 데이터만 골라서 요청하는 API 방식.
미들웨어(Middleware): 요청-응답 사이에서 공통 처리(인증, 로깅 등).
페이징(Pagination): 한 번에 다 주지 말고 페이지로 나눠서 주기.
레이트 리미트(Rate Limit): 너무 많이 호출하면 제한(DDOS/남용 방지).
Idempotent(멱등성): 같은 요청을 여러 번 보내도 결과가 같음(예: GET, 보통 PUT).

4) 데이터베이스(DB) 용어

SQL: 관계형 DB에서 쓰는 질의 언어(MySQL, PostgreSQL 등).
NoSQL: 문서/키값/그래프 등 다양한 방식(MongoDB, Redis 등).
스키마(Schema): 테이블 구조(컬럼, 타입, 제약조건).
인덱스(Index): 검색을 빠르게 해주는 “목차” (대신 쓰기 성능/용량 비용).
트랜잭션(Transaction): 여러 작업을 하나처럼 처리(중간 실패 시 롤백).
ACID: 트랜잭션이 지켜야 할 성질(원자성/일관성/격리성/지속성).
락(Lock): 동시에 수정할 때 충돌을 막는 잠금.
정규화/비정규화: 중복 제거 vs 성능 위해 일부 중복 허용.
복제(Replication): DB를 여러 대로 복사해 안정성/읽기 성능 확보.
샤딩(Sharding): 데이터를 여러 DB로 나눠 저장(대규모 확장).

5) DevOps·배포 용어

Git: 코드 변경 이력 관리(버전 관리).
브랜치(Branch): 작업용 가지.
PR/MR: 코드 리뷰를 위한 변경 요청(Pull Request/Merge Request).
CI/CD: 자동 빌드·테스트·배포 파이프라인.
배포(Deploy): 서버에 새 버전을 올리는 작업.
릴리즈(Release): “사용자에게 기능이 제공되는 상태”까지 포함한 개념.
롤백(Rollback): 문제가 있으면 이전 버전으로 되돌리기.
Blue-Green 배포: 두 환경(파랑/초록) 운영 후 트래픽만 스위칭.
Canary 배포: 일부 사용자에게만 먼저 배포해 안전 확인.
컨테이너(Container): 실행 환경을 통째로 묶어 어디서나 동일하게 실행.
Docker: 컨테이너를 쉽게 만들고 실행하는 도구.
Kubernetes(K8s): 컨테이너를 대규모로 운영·자동화(배치/스케일링 등).
IaC: 인프라를 코드로 관리(Terraform 등).

6) 클라우드 용어

리전(Region) / AZ: 지역 / 그 지역 안의 데이터센터 묶음.
인스턴스(Instance): 클라우드에서 실행되는 서버(가상 컴퓨터).
VPC: 클라우드 내부 가상 네트워크.
로드밸런서(LB): 트래픽을 여러 서버로 분산.
오토스케일링: 트래픽에 따라 서버 수 자동 증감.
오브젝트 스토리지: 파일 저장소(S3 같은 개념).
매니지드 서비스: 운영을 클라우드가 대신 해줌(DB, 큐 등).

7) 보안 용어(실무에서 진짜 많이 나옴)

인증(Authentication): “너 누구야?”
인가(Authorization): “너 이거 할 권한 있어?”
OAuth 2.0: 구글/네이버 로그인 같은 “위임 인증” 표준.
JWT: 토큰 기반 인증에서 자주 쓰는 형식.
암호화(Encryption): 키가 있어야 복호화 가능(비밀 유지).
해시(Hash): 원복 불가한 변환(비밀번호 저장에 사용).
XSS: 악성 스크립트를 페이지에 심는 공격.
CSRF: 사용자가 원치 않는 요청을 몰래 보내게 하는 공격.
SQL Injection: SQL 쿼리에 악성 입력을 섞어 탈취/조작하는 공격.

8) 성능·모니터링 용어

지연시간(Latency): 한 요청이 끝나는 데 걸리는 시간.
처리량(Throughput): 초당 처리 가능한 요청 수.
동시성(Concurrency): 동시에 여러 일을 “겉보기로” 처리.
병렬성(Parallelism): 실제로 동시에 처리(CPU 코어 등).
로그(Logging): 사건 기록(에러/흐름 추적).
메트릭(Metrics): 숫자로 보는 상태(CPU, 메모리, 응답시간).
트레이싱(Tracing): 요청이 서비스들을 거치는 경로 추적.
SLA/SLO: 서비스 약속/목표(예: 가용성 99.9%).

9) 아키텍처 용어

모놀리식(Monolith): 한 덩어리 앱(단순하지만 커지면 부담).
마이크로서비스(MSA): 기능별로 잘게 나눔(확장성↑, 운영 복잡도↑).
이벤트 기반(Event-driven): “무슨 일이 발생하면” 처리(비동기).
메시지 큐(Message Queue): 작업을 줄 세워 처리(RabbitMQ, Kafka 등).
캐시 서버(Redis 등): DB 부담 줄이고 속도 향상.
스테이트리스(Stateless): 서버가 상태를 들고 있지 않음(스케일링 유리).
스테이트풀(Stateful): 상태를 서버가 가짐(세션 서버 등).

10) 헷갈리는 용어 10쌍(초보 탈출 포인트)

인증 vs 인가: 누구냐 / 권한 있냐
암호화 vs 해시: 되돌릴 수 있음 / 되돌릴 수 없음
컴파일 vs 빌드: 변환 / 결과물 만들기 전체 과정
라이브러리 vs 프레임워크: 내가 호출 / 얘가 내 코드를 호출
배포 vs 릴리즈: 서버에 올림 / 사용자에게 제공
동시성 vs 병렬성: 번갈아 처리 / 실제 동시에 처리
쿠키 vs 세션: 브라우저 저장 / 서버 상태
SQL vs NoSQL: 관계형 / 비관계형(문서·키값 등)
모놀리식 vs MSA: 한 덩어리 / 쪼개서 운영
캐시 vs DB: 빠른 임시 저장 / 원본 저장소

마무리: “용어를 알면, 속도가 붙습니다”

처음엔 단어가 벽처럼 느껴져도, 자주 쓰는 용어부터 “정확한 의미 + 쓰는 상황”을 익히면
문서 읽기/회의 이해/문제 해결 속도가 확 올라가요.

게시물 개발자 필수 IT 용어 정리 (Developer IT Glossary)이 하우인포-IT·테크에 처음 등장했습니다.

웹개발 보관 - 하우인포-IT·테크