개발 용어가 헷갈리시나요?
AI로 개발을 시작하는 사람들이 막히는 개념을 쉬운 설명과 실제 코드 예제로 이해하세요
전체 31개 용어
API
통신Application Programming Interface의 약자. 두 소프트웨어가 서로 데이터를 주고받을 수 있도록 정해진 규칙과 인터페이스입니다. 예를 들어 날씨 앱이 기상청 서버에서 날씨 데이터를 가져오는 방식이 API입니다.
// API 호출 예시 (fetch)
const response = await fetch('https://api.example.com/weather?city=Seoul');
const data = await response.json();
console.log(data.temperature); // 25REST
아키텍처Representational State Transfer. HTTP를 기반으로 자원(Resource)을 URI로 표현하고 GET/POST/PUT/DELETE 메서드로 조작하는 아키텍처 스타일입니다. 대부분의 웹 API가 REST 방식을 따릅니다.
// REST API 설계 예시
GET /users → 사용자 목록 조회
GET /users/1 → id=1 사용자 조회
POST /users → 새 사용자 생성
PUT /users/1 → id=1 사용자 수정
DELETE /users/1 → id=1 사용자 삭제JSON
데이터 형식JavaScript Object Notation. 데이터를 텍스트로 표현하는 경량 형식입니다. 키-값 쌍으로 구성되며 API 응답, 설정 파일 등에 널리 사용됩니다. 사람이 읽기 쉽고 언어에 독립적입니다.
// JSON 데이터 예시
{
"name": "홍길동",
"age": 30,
"skills": ["JavaScript", "Python"],
"address": {
"city": "서울",
"zip": "04524"
}
}HTTP
프로토콜HyperText Transfer Protocol. 웹 브라우저와 서버가 데이터를 주고받을 때 사용하는 통신 규약입니다. 요청(Request)과 응답(Response) 구조로 동작하며, 상태 코드(200, 404, 500 등)로 결과를 전달합니다.
// HTTP 요청/응답 구조
// 요청 (Request)
GET /index.html HTTP/1.1
Host: www.example.com
Accept: text/html
// 응답 (Response)
HTTP/1.1 200 OK
Content-Type: text/html
<html>...</html>HTTPS
보안HTTP에 SSL/TLS 암호화를 추가한 보안 프로토콜입니다. 브라우저와 서버 간 데이터를 암호화하여 중간에서 도청하거나 변조하는 것을 방지합니다. 오늘날 모든 웹사이트가 HTTPS를 사용해야 합니다.
// HTTPS 확인 방법
// 브라우저 주소창에 자물쇠 아이콘이 표시됨
// URL이 https://로 시작함
// Node.js에서 HTTPS 서버 생성
const https = require('https');
const fs = require('fs');
const options = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem')
};
https.createServer(options, (req, res) => {
res.end('안전한 HTTPS 서버');
}).listen(443);URL
웹 기초Uniform Resource Locator. 인터넷에서 리소스의 위치를 나타내는 주소입니다. 프로토콜, 도메인, 경로, 쿼리스트링 등으로 구성됩니다.
// URL 구조 분석
https://www.example.com:8080/path/page?name=홍길동&age=30#section1
│ │ │ │ │ │
프로토콜 도메인 포트 경로 쿼리스트링 앵커
// JavaScript로 URL 파싱
const url = new URL('https://example.com/search?q=react');
console.log(url.hostname); // example.com
console.log(url.pathname); // /search
console.log(url.searchParams.get('q')); // reactDNS
네트워크Domain Name System. 사람이 읽을 수 있는 도메인 이름(google.com)을 컴퓨터가 이해하는 IP 주소(142.250.196.46)로 변환해주는 시스템입니다. 인터넷의 전화번호부라고 불립니다.
// DNS 조회 흐름
1. 브라우저에 "google.com" 입력
2. DNS 서버에 "google.com의 IP는?" 질의
3. DNS 서버가 "142.250.196.46" 응답
4. 해당 IP 서버에 HTTP 요청
// Node.js에서 DNS 조회
const dns = require('dns');
dns.lookup('google.com', (err, address) => {
console.log('IP 주소:', address);
});Server (서버)
인프라클라이언트의 요청을 받아 처리하고 응답을 돌려주는 컴퓨터 또는 프로그램입니다. 웹 서버, 데이터베이스 서버, 파일 서버 등 다양한 종류가 있습니다.
// Node.js로 간단한 웹 서버 만들기
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('안녕하세요, 서버입니다!');
});
server.listen(3000, () => {
console.log('서버가 3000번 포트에서 실행 중');
});Client (클라이언트)
웹 기초서버에 요청을 보내고 응답을 받아 사용자에게 보여주는 프로그램입니다. 웹 브라우저가 대표적인 클라이언트입니다. 사용자가 직접 상호작용하는 쪽입니다.
// 클라이언트(브라우저)에서 서버로 요청 보내기
// fetch API 사용
async function getUserData(userId: string) {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error('사용자를 찾을 수 없습니다');
}
return response.json();
}
// 사용
const user = await getUserData('123');
console.log(user.name);Frontend (프론트엔드)
개발 영역사용자가 직접 보고 상호작용하는 웹의 앞단(화면) 부분입니다. HTML, CSS, JavaScript로 구성되며 React, Vue, Angular 같은 프레임워크를 사용합니다.
// React 프론트엔드 컴포넌트 예시
function WelcomeButton() {
const [clicked, setClicked] = useState(false);
return (
<button onClick={() => setClicked(true)}>
{clicked ? '클릭됨!' : '클릭하세요'}
</button>
);
}
// HTML + CSS + JS가 합쳐진 UI를 만드는 영역Backend (백엔드)
개발 영역서버, 데이터베이스, 비즈니스 로직을 담당하는 웹의 뒷단 부분입니다. 클라이언트의 요청을 처리하고, 데이터를 저장·조회하며, 보안을 담당합니다.
// Express.js 백엔드 API 예시
import express from 'express';
const app = express();
// 사용자 목록 반환 API
app.get('/api/users', async (req, res) => {
const users = await db.query('SELECT * FROM users');
res.json(users);
});
// 새 사용자 생성 API
app.post('/api/users', async (req, res) => {
const { name, email } = req.body;
const user = await db.query(
'INSERT INTO users (name, email) VALUES (?, ?)',
[name, email]
);
res.status(201).json(user);
});Database (데이터베이스)
데이터데이터를 구조화하여 저장하고 효율적으로 조회·수정·삭제할 수 있는 시스템입니다. 관계형(MySQL, PostgreSQL)과 NoSQL(MongoDB, Redis) 두 종류가 있습니다.
// SQL 기본 쿼리
-- 테이블 생성
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
email VARCHAR(200) UNIQUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- 데이터 삽입
INSERT INTO users (name, email) VALUES ('홍길동', 'hong@example.com');
-- 데이터 조회
SELECT * FROM users WHERE name = '홍길동';
-- 데이터 수정
UPDATE users SET email = 'new@example.com' WHERE id = 1;
-- 데이터 삭제
DELETE FROM users WHERE id = 1;Deployment (배포)
운영개발한 애플리케이션을 실제 사용자가 접근할 수 있는 서버에 올리는 과정입니다. Vercel, Netlify, AWS, GCP 등의 클라우드 플랫폼을 주로 사용합니다.
# Vercel로 Next.js 앱 배포하기
# 1. Vercel CLI 설치
npm install -g vercel
# 2. 프로젝트 디렉토리에서 배포
vercel
# 3. 프로덕션 배포
vercel --prod
# GitHub 연동 시 푸시할 때마다 자동 배포
git push origin main # → 자동으로 Vercel에 배포됨Git
버전 관리소스 코드의 변경 이력을 관리하는 분산 버전 관리 시스템입니다. 여러 개발자가 협업하거나, 실수로 코드를 망가뜨렸을 때 이전 버전으로 되돌릴 수 있습니다.
# Git 기본 명령어
git init # 저장소 초기화
git add . # 모든 변경사항 스테이징
git commit -m "기능 추가" # 커밋 생성
git push origin main # 원격 저장소에 업로드
git pull origin main # 원격 저장소에서 다운로드
git branch feature/login # 새 브랜치 생성
git checkout feature/login # 브랜치 전환
git merge feature/login # 브랜치 병합npm
패키지 관리Node Package Manager. JavaScript 패키지(라이브러리)를 설치하고 관리하는 도구입니다. package.json 파일로 프로젝트의 의존성을 관리합니다.
# npm 기본 사용법
npm init # 새 프로젝트 초기화
npm install react # 패키지 설치
npm install -D typescript # 개발 의존성으로 설치
npm uninstall lodash # 패키지 제거
npm run dev # package.json의 scripts 실행
npm update # 패키지 업데이트
# package.json 예시
{
"dependencies": {
"react": "^18.0.0"
},
"scripts": {
"dev": "next dev",
"build": "next build"
}
}Webpack
빌드 도구JavaScript 모듈 번들러입니다. 여러 파일로 분리된 JavaScript, CSS, 이미지 등을 하나 또는 여러 개의 번들 파일로 합쳐줍니다. 최근에는 Vite가 대안으로 많이 사용됩니다.
// webpack.config.js 기본 설정
const path = require('path');
module.exports = {
entry: './src/index.js', // 진입점
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js' // 출력 파일
},
module: {
rules: [
{
test: /.tsx?$/, // .ts, .tsx 파일
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /.css$/, // CSS 파일
use: ['style-loader', 'css-loader']
}
]
}
};TypeScript
언어JavaScript에 정적 타입을 추가한 언어입니다. 코드 작성 시 타입 오류를 미리 잡아주고 자동 완성 기능을 향상시켜 대규모 프로젝트에서 유지보수성을 높입니다.
// TypeScript 타입 예시
interface User {
id: number;
name: string;
email: string;
age?: number; // 선택적 필드
}
function greet(user: User): string {
return `안녕하세요, ${user.name}님!`;
}
// 타입 오류를 컴파일 시점에 잡음
const user: User = { id: 1, name: '홍길동', email: 'hong@test.com' };
greet(user); // OK
greet({ name: '김철수' }); // 오류: id, email 누락React
프레임워크Meta(Facebook)가 만든 UI 라이브러리입니다. 컴포넌트 기반으로 UI를 구성하고, 상태(State) 변화에 따라 화면을 자동으로 업데이트합니다. 현재 가장 널리 사용되는 프론트엔드 도구입니다.
// React 컴포넌트와 상태 관리
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 상태 선언
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>
증가
</button>
<button onClick={() => setCount(count - 1)}>
감소
</button>
</div>
);
}
export default Counter;Next.js
프레임워크React 기반의 풀스택 웹 프레임워크입니다. SSR, SSG, ISR 등 다양한 렌더링 방식을 지원하고, 파일 기반 라우팅, API 라우트, 이미지 최적화 등의 기능을 제공합니다.
// Next.js App Router 파일 구조
app/
├── layout.tsx # 공통 레이아웃
├── page.tsx # 홈 페이지 (/)
├── about/
│ └── page.tsx # /about 페이지
└── api/
└── users/
└── route.ts # API 엔드포인트
// app/api/users/route.ts
export async function GET() {
const users = [{ id: 1, name: '홍길동' }];
return Response.json(users);
}SSR
렌더링Server-Side Rendering. 서버에서 HTML을 완성하여 클라이언트에 전송하는 방식입니다. 초기 로딩 속도가 빠르고 SEO에 유리하지만, 서버 부하가 증가합니다.
// Next.js에서 SSR (서버 컴포넌트)
// app/products/page.tsx
async function ProductsPage() {
// 서버에서 데이터를 가져와 렌더링
const products = await fetch('https://api.example.com/products')
.then(res => res.json());
return (
<ul>
{products.map((p: { id: number; name: string }) => (
<li key={p.id}>{p.name}</li>
))}
</ul>
);
}
export default ProductsPage;CSR
렌더링Client-Side Rendering. 브라우저(클라이언트)에서 JavaScript가 실행되어 HTML을 생성하는 방식입니다. 초기 로딩은 느리지만 이후 상호작용이 빠릅니다. React의 기본 방식이었습니다.
// CSR 방식: 'use client'로 클라이언트에서 렌더링
'use client'
import { useState, useEffect } from 'react';
function ProductList() {
const [products, setProducts] = useState([]);
useEffect(() => {
// 브라우저에서 데이터 가져오기
fetch('/api/products')
.then(res => res.json())
.then(data => setProducts(data));
}, []);
return <ul>{products.map((p: { id: number; name: string }) => <li key={p.id}>{p.name}</li>)}</ul>;
}SSG
렌더링Static Site Generation. 빌드 시점에 HTML을 미리 생성해두는 방식입니다. 서버 부하가 없고 CDN으로 빠르게 배포할 수 있습니다. 변경이 드문 블로그, 문서 사이트에 적합합니다.
// Next.js SSG: 빌드 시 정적 페이지 생성
// app/blog/[slug]/page.tsx
// 빌드 시 생성할 경로 목록 반환
export async function generateStaticParams() {
const posts = await fetch('/api/posts').then(r => r.json());
return posts.map((post: { slug: string }) => ({ slug: post.slug }));
}
// 각 경로의 컴포넌트 (빌드 시 실행됨)
async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params;
const post = await fetch(`/api/posts/${slug}`).then(r => r.json());
return <article>{post.content}</article>;
}ISR
렌더링Incremental Static Regeneration. SSG의 장점을 유지하면서 일정 시간 간격으로 페이지를 재생성하는 방식입니다. 빠른 성능과 최신 데이터를 동시에 제공합니다.
// Next.js ISR: 60초마다 페이지 재생성
async function NewsPage() {
const news = await fetch('https://api.example.com/news', {
next: { revalidate: 60 } // 60초마다 재검증
}).then(res => res.json());
return (
<div>
{news.map((item: { id: number; title: string }) => (
<article key={item.id}>{item.title}</article>
))}
</div>
);
}
// On-demand revalidation (수동 재생성)
// /api/revalidate route에서 revalidatePath('/news') 호출Middleware (미들웨어)
서버요청(Request)이 서버 핸들러에 도달하기 전에 실행되는 함수입니다. 인증 확인, 로깅, CORS 설정, 리다이렉션 등의 공통 처리를 담당합니다.
// Next.js middleware.ts (루트에 위치)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const token = request.cookies.get('auth-token');
// 로그인이 필요한 페이지 보호
if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
export const config = {
matcher: ['/dashboard/:path*']
};Cookie (쿠키)
상태 관리웹 브라우저에 저장되는 작은 텍스트 데이터입니다. 서버가 설정하고 이후 요청 시 자동으로 서버에 전송됩니다. 로그인 세션, 사용자 설정 등을 저장하는 데 사용됩니다.
// 쿠키 설정 (서버)
// HTTP 응답 헤더
Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Strict; Max-Age=3600
// Next.js에서 쿠키 다루기
import { cookies } from 'next/headers';
// 쿠키 읽기
const cookieStore = await cookies();
const theme = cookieStore.get('theme')?.value;
// 쿠키 설정 (API Route에서)
response.cookies.set('user-pref', 'dark-mode', {
httpOnly: true,
maxAge: 60 * 60 * 24 * 7 // 7일
});Session (세션)
인증서버 측에서 사용자의 상태를 유지하는 메커니즘입니다. 서버에 세션 데이터를 저장하고 클라이언트에는 세션 ID(쿠키)만 전달합니다. JWT와 함께 인증에 많이 사용됩니다.
// 세션 기반 인증 흐름
1. 사용자 로그인 (ID/PW 전송)
2. 서버: 검증 후 세션 생성 & 저장
sessions['abc123'] = { userId: 1, name: '홍길동' }
3. 서버 → 클라이언트: Set-Cookie: sessionId=abc123
4. 이후 요청 시 쿠키 자동 전송
Cookie: sessionId=abc123
5. 서버: 세션 조회 → 사용자 확인
// Express.js 세션 예시
app.use(session({
secret: 'my-secret-key',
resave: false,
saveUninitialized: false
}));JWT
인증JSON Web Token. 서버와 클라이언트 간에 정보를 안전하게 전달하는 토큰 형식입니다. 헤더.페이로드.서명 세 부분으로 구성되며, 서버가 상태를 저장하지 않아도 되는 Stateless 인증에 사용됩니다.
// JWT 구조
// eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjF9.signature
// [헤더].[페이로드].[서명]
// JWT 생성 (서버)
import jwt from 'jsonwebtoken';
const token = jwt.sign(
{ userId: 1, name: '홍길동' }, // 페이로드
process.env.JWT_SECRET!, // 비밀키
{ expiresIn: '24h' }
);
// JWT 검증 (서버)
const decoded = jwt.verify(token, process.env.JWT_SECRET!);
console.log(decoded.userId); // 1OAuth
인증타사 서비스(Google, GitHub, Kakao 등)의 계정으로 우리 서비스에 로그인할 수 있게 해주는 인증 프레임워크입니다. 사용자 비밀번호를 직접 받지 않아 보안이 향상됩니다.
// Google OAuth 로그인 흐름
1. 사용자 "Google로 로그인" 버튼 클릭
2. Google 로그인 페이지로 리다이렉트
https://accounts.google.com/o/oauth2/auth?
client_id=xxx&redirect_uri=우리사이트/callback&scope=email
3. 사용자 Google 로그인 후 동의
4. Google → 우리 서버에 authorization code 전달
5. 우리 서버 → Google에 code로 access token 교환
6. access token으로 사용자 정보 조회
7. 우리 서비스에 세션/JWT 생성WebSocket
통신서버와 클라이언트 간의 실시간 양방향 통신 프로토콜입니다. HTTP와 달리 연결을 유지하면서 서버가 먼저 데이터를 보낼 수 있어 채팅, 실시간 알림, 게임 등에 사용됩니다.
// WebSocket 클라이언트 (브라우저)
const ws = new WebSocket('wss://example.com/chat');
ws.onopen = () => {
console.log('서버에 연결됨');
ws.send(JSON.stringify({ type: 'join', room: '일반' }));
};
ws.onmessage = (event) => {
const message = JSON.parse(event.data);
console.log('받은 메시지:', message.text);
};
ws.onclose = () => {
console.log('연결이 끊어짐');
};
// 메시지 전송
ws.send(JSON.stringify({ type: 'message', text: '안녕하세요!' }));CDN
인프라Content Delivery Network. 전 세계에 분산된 서버 네트워크를 통해 사용자와 가까운 서버에서 콘텐츠를 제공하는 시스템입니다. 이미지, JS, CSS 등 정적 파일의 로딩 속도를 크게 향상시킵니다.
// CDN 사용 예시 (HTML에서 라이브러리 로드)
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
// Next.js에서 이미지 최적화 (CDN 자동 사용)
import Image from 'next/image';
function Avatar() {
return (
<Image
src="/avatar.jpg"
alt="프로필 사진"
width={100}
height={100}
// Vercel Edge Network(CDN)를 통해 자동 최적화 제공
/>
);
}Cache (캐시)
성능자주 사용하는 데이터를 빠른 저장소에 임시 저장해두는 기술입니다. 서버에 매번 요청하지 않고 저장된 데이터를 재사용하여 응답 속도를 높이고 서버 부하를 줄입니다.
// Next.js 캐시 제어
// 60초 동안 캐시 (ISR)
const data = await fetch('/api/data', {
next: { revalidate: 60 }
});
// 캐시 사용 안 함 (항상 최신 데이터)
const data2 = await fetch('/api/realtime', {
cache: 'no-store'
});
// 영구 캐시 (빌드 시 한 번만)
const data3 = await fetch('/api/static', {
cache: 'force-cache'
});
// Redis 캐시 예시 (서버)
await redis.set('user:1', JSON.stringify(user), 'EX', 3600);
const cached = await redis.get('user:1');