개발자 언어 단어장

프로그래밍 핵심 용어를 한눈에 정리하고 학습하세요

API

(에이피아이)

응용 프로그램 연결 인터페이스

초급backend

📖 정의

서로 다른 프로그램이 대화할 수 있게 해주는 약속된 규칙

🎯 실생활 비유

🥩 고기집 메뉴판처럼, 손님이 주문하면(요청) 주방이 요리를 내주는(응답) 정해진 방식

💡 실제 예시

날씨 앱이 기상청 서버에서 날씨 정보를 가져올 때 API를 사용합니다

💻 코드 예시

fetch("/api/users").then(res => res.json())

Asynchronous

(어싱크러너스)

비동기 처리

중급javascript

📖 정의

일이 끝날 때까지 기다리지 않고 다른 일을 동시에 처리하는 방식

🎯 실생활 비유

🍖 고기집 주방장이 삼겹살 굽는 동안 동시에 된장찌개도 끓이는 것처럼, 한 작업 끝나길 기다리지 않고 여러 일 동시 처리

💡 실제 예시

웹사이트에서 사진을 로딩하는 동안 다른 글자나 버튼을 먼저 보여주는 것

💻 코드 예시

const data = await fetch("/api/data").then(r => r.json())

State

(스테이트)

상태

중급frontend

📖 정의

화면에 보이는 데이터나 값들을 기억하고 관리하는 것

🎯 실생활 비유

🚗 자동차 계기판처럼, 현재 속도, 연료량, 기어 상태를 실시간으로 기억하고 표시하는 것

💡 실제 예시

좋아요 버튼을 눌렀을 때 하트 색깔이 바뀌는 것도 State가 바뀐 거예요

💻 코드 예시

const [count, setCount] = useState(0)

CRUD

(크러드)

생성/읽기/수정/삭제

초급backend

📖 정의

데이터를 만들고(Create), 보고(Read), 고치고(Update), 지우는(Delete) 4가지 기본 동작

🎯 실생활 비유

📋 고기집 예약 시스템처럼, 예약 등록(생성), 예약 확인(읽기), 시간 변경(수정), 예약 취소(삭제)

💡 실제 예시

인스타그램에서 사진 올리고, 보고, 수정하고, 삭제하는 모든 기능이 CRUD예요

💻 코드 예시

await prisma.user.create({ data: { name, email } })

Component

(컴포넌트)

부품

초급frontend

📖 정의

웹사이트를 만들 때 사용하는 재사용 가능한 작은 조각들

🎯 실생활 비유

🔧 자동차 부품처럼, 핸들, 타이어, 엔진을 조립해서 완성된 차를 만드는 것. 같은 부품을 여러 차에 재사용

💡 실제 예시

여러 페이지에서 똑같이 쓰이는 "좋아요 버튼"을 한 번만 만들어서 여러 곳에 붙일 수 있어요

💻 코드 예시

function Button({ children, onClick }) { return <button onClick={onClick}>{children}</button> }

Middleware

(미들웨어)

중간 처리기

중급backend

📖 정의

요청이 들어올 때 중간에서 검사하거나 처리하는 프로그램

🎯 실생활 비유

🚪 호프집 입구 직원처럼, 손님이 들어오면 신분증 확인하고 미성년자는 막는 역할

💡 실제 예시

로그인 안 한 사람은 마이페이지 못 보게 막는 것

💻 코드 예시

export function middleware(request) { if (!request.cookies.token) return redirect("/login") }

TypeScript

(타입스크립트)

타입 있는 자바스크립트

중급typescript

📖 정의

변수나 함수에 어떤 종류의 데이터가 들어갈지 미리 정해놓는 프로그래밍 언어

🎯 실생활 비유

🚗 자동차 주유구처럼, 휘발유 차에 경유 넣으려고 하면 "잘못된 연료" 경고 뜨는 것

💡 실제 예시

age라는 변수에는 숫자만 넣을 수 있고, name에는 글자만 넣을 수 있게 정해놓기

💻 코드 예시

const user: { name: string; age: number } = { name: "철수", age: 25 }

Props

(프랍스)

속성

초급frontend

📖 정의

부모가 자식 컴포넌트한테 데이터를 전달하는 방법

🎯 실생활 비유

🍺 호프집 주문서처럼, "테이블 5번, 생맥주 3잔, 양념치킨" 정보를 주방에 전달

💡 실제 예시

<Button color="blue">클릭</Button> 여기서 color="blue"가 Props예요

💻 코드 예시

function Button({ color, size, children }) { return <button className={`${color} ${size}`}>{children}</button> }

Hook

(훅)

고리 함수

중급frontend

📖 정의

React에서 특별한 기능을 쓸 수 있게 해주는 마법 같은 함수들

🎯 실생활 비유

🔌 자동차 액세서리처럼, 블랙박스, 네비게이션 등 필요한 기능을 차에 연결해서 사용

💡 실제 예시

useState로 숫자를 기억하고, useEffect로 화면이 뜨면 자동으로 뭔가 실행하기

💻 코드 예시

const [count, setCount] = useState(0); useEffect(() => { console.log(count) }, [count])

REST API

(레스트 에이피아이)

REST 방식 인터페이스

중급backend

📖 정의

GET(가져오기), POST(만들기), PUT(수정), DELETE(삭제) 명령어로 데이터를 다루는 API 규칙

🎯 실생활 비유

🍴 고기집 주문 방식처럼, 주문하고(POST), 메뉴판 보고(GET), 추가 주문(PUT), 취소하는(DELETE) 정해진 방법

💡 실제 예시

인스타그램에서 사진 목록 보기(GET), 사진 올리기(POST), 수정(PUT), 삭제(DELETE)

💻 코드 예시

app.get("/api/users", async (req, res) => { const users = await db.user.findMany(); res.json(users) })

Authentication

(어썬티케이션)

인증

중급security

📖 정의

"당신이 정말 본인이 맞나요?"를 확인하는 과정

🎯 실생활 비유

🔑 호프집 멤버십 카드처럼, 신분증 보여주고 본인 확인하는 과정

💡 실제 예시

아이디와 비밀번호를 입력해서 로그인하는 게 인증이에요

💻 코드 예시

const session = await getServerSession(); if (!session) redirect("/login")

Authorization

(오써라이제이션)

권한 부여

중급security

📖 정의

"이 사람이 이걸 할 수 있나요?"를 확인하는 과정

🎯 실생활 비유

🚗 발렛파킹처럼, 키 있어도 주인만 차 가져갈 수 있는 것. 직원은 주차만 가능

💡 실제 예시

일반 유저는 글만 쓸 수 있고, 관리자만 글을 삭제할 수 있게 하는 것

💻 코드 예시

if (user.role !== "admin") return new Response("Unauthorized", { status: 403 })

JWT

(제이더블유티)

토큰

고급security

📖 정의

로그인 정보를 암호화한 출입증 같은 것

🎯 실생활 비유

🎫 호프집 스탬프 카드처럼, 한 번 찍으면 재입장할 때 다시 신분증 안 봐도 되는 출입증

💡 실제 예시

로그인하면 서버가 토큰을 주고, 이후 요청할 때마다 그 토큰을 보여주면 돼요

💻 코드 예시

const token = jwt.sign({ userId: user.id }, SECRET); res.setHeader("Authorization", `Bearer ${token}`)

ORM

(오알엠)

객체-DB 변환기

중급database

📖 정의

어려운 데이터베이스 명령어를 쉬운 코드로 바꿔주는 도구

🎯 실생활 비유

🚗 자동차 내비게이션처럼, "강남역"이라고 말하면 복잡한 좌표로 자동 변환해주는 것

💡 실제 예시

user.findAll() 이렇게만 쓰면 "SELECT * FROM users" 같은 복잡한 명령어로 자동 변환

💻 코드 예시

const users = await prisma.user.findMany({ where: { active: true } })

SSR

(에스에스알)

서버 렌더링

고급frontend

📖 정의

서버가 완성된 웹페이지를 만들어서 보내주는 방식

🎯 실생활 비유

🥩 고기집에서 이미 구워진 고기를 받는 것처럼, 완성된 페이지를 받아서 바로 보는 방식

💡 실제 예시

검색엔진(구글)이 페이지 내용을 바로 볼 수 있어서 검색 결과에 잘 나와요

💻 코드 예시

export async function generateMetadata() { const data = await fetchData(); return { title: data.title } }

CSR

(씨에스알)

클라이언트 렌더링

중급frontend

📖 정의

브라우저가 받은 후에 화면을 만드는 방식

🎯 실생활 비유

🥩 고기집에서 생고기 받아서 테이블에서 직접 굽는 것처럼, 재료만 받아서 브라우저가 조리

💡 실제 예시

처음엔 빈 화면이 보이다가 로딩 후 내용이 나타나는 앱들

💻 코드 예시

const [data, setData] = useState(null); useEffect(() => { fetch("/api/data").then(r => r.json()).then(setData) }, [])

Webhook

(웹훅)

알림 연결

중급backend

📖 정의

뭔가 일어나면 자동으로 다른 곳에 알려주는 시스템

🎯 실생활 비유

🔔 대리운전 앱처럼, 호출하면 자동으로 기사님에게 알림 가는 시스템

💡 실제 예시

GitHub에 코드 올리면 자동으로 서버에 배포되게 하는 것

💻 코드 예시

app.post("/webhook/github", async (req, res) => { const event = req.body; await deployApp(); res.sendStatus(200) })

Cache

(캐시)

임시 저장소

중급performance

📖 정의

자주 쓰는 데이터를 빠르게 꺼낼 수 있게 임시로 저장해두는 것

🎯 실생활 비유

🚗 자주 가는 길을 내비게이션이 기억해두는 것처럼, 빠른 경로를 저장해뒀다가 재사용

💡 실제 예시

한 번 봤던 웹사이트가 다음엔 더 빨리 뜨는 이유가 캐시 때문이에요

💻 코드 예시

export const revalidate = 3600; // Next.js에서 1시간마다 캐시 갱신

Deployment

(디플로이먼트)

배포

초급devops

📖 정의

만든 프로그램을 인터넷에 올려서 다른 사람들이 쓸 수 있게 하는 것

🎯 실생활 비유

🥩 새로 만든 고기집을 정식 오픈하는 것처럼, 웹사이트를 서버에 올려서 손님 받기 시작

💡 실제 예시

개발 끝나면 Vercel이나 Netlify 같은 곳에 올려서 친구들한테 링크 공유하기

💻 코드 예시

vercel --prod 또는 git push origin main (자동 배포 설정 시)

Environment Variable

(인바이런먼트 베리어블)

환경 변수

초급devops

📖 정의

비밀번호나 중요한 설정을 코드에 직접 안 쓰고 따로 보관하는 것

🎯 실생활 비유

🔐 차 키를 가방에 안 넣고 금고에 따로 보관하는 것처럼, 중요한 정보는 안전하게 숨김

💡 실제 예시

API 키나 데이터베이스 비밀번호를 .env 파일에 저장해서 GitHub에 안 올리기

💻 코드 예시

const apiKey = process.env.NEXT_PUBLIC_API_KEY

Responsive Design

(리스폰시브 디자인)

반응형 디자인

초급frontend

📖 정의

화면 크기에 따라 자동으로 모양이 바뀌는 디자인

🎯 실생활 비유

🚗 자동차 사이드미러처럼, 운전자 체형에 맞춰 자동으로 각도 조절되는 것

💡 실제 예시

같은 웹사이트를 핸드폰에서 보면 세로로, 컴퓨터에서 보면 가로로 잘 보이는 것

💻 코드 예시

<div className="w-full md:w-1/2 lg:w-1/3">...</div>

Callback

(콜백)

나중에 실행할 함수

초급javascript

📖 정의

"이 일이 끝나면 이걸 해줘"라고 미리 말해놓는 함수

🎯 실생활 비유

📞 대리운전 호출할 때 "도착하면 전화주세요" 번호 남기는 것처럼, 나중에 실행할 함수 지정

💡 실제 예시

버튼 클릭하면 뭘 할지 미리 정해놓기

💻 코드 예시

button.addEventListener("click", () => { console.log("클릭됨") })

Promise

(프라미스)

약속

중급javascript

📖 정의

"나중에 데이터 줄게" 하는 약속을 담은 객체

🎯 실생활 비유

🚗 대리운전 예약처럼, 아직 안 왔지만 "출발", "도착" 상태를 실시간으로 확인 가능

💡 실제 예시

서버에서 데이터 가져오는 중... 성공하면 then, 실패하면 catch

💻 코드 예시

fetch("/api/data").then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err))

GraphQL

(그래프큐엘)

유연한 API 언어

고급backend

📖 정의

내가 원하는 데이터만 정확히 요청할 수 있는 방식

🎯 실생활 비유

🥩 고기집에서 "삼겹살 200g, 된장찌개만" 주문하면 딱 그것만 나오는 것처럼 필요한 것만 요청

💡 실제 예시

REST는 전체 유저 정보를 다 주지만, GraphQL은 이름만 달라고 하면 이름만 줘요

💻 코드 예시

query { user(id: "1") { name email posts { title } } }

Docker

(도커)

컨테이너 도구

고급devops

📖 정의

프로그램을 상자에 담아서 어디서든 똑같이 실행되게 하는 도구

🎯 실생활 비유

🚗 자동차를 컨테이너에 실으면 어느 나라에서도 똑같이 운전 가능한 것처럼 프로그램 포장

💡 실제 예시

내 컴퓨터에서 되던 프로그램이 친구 컴퓨터에선 안 될 때, 도커로 포장하면 어디서든 작동해요

💻 코드 예시

docker build -t myapp . && docker run -p 3000:3000 myapp

Git

(깃)

버전 관리

초급devops

📖 정의

코드의 변경 기록을 저장하고 관리하는 도구

🎯 실생활 비유

🚗 블랙박스처럼, 사고 났을 때 과거 영상 확인하듯 코드 변경 기록을 저장하고 복구 가능

💡 실제 예시

실수로 코드 망쳤을 때 어제 버전으로 되돌리기, 친구랑 협업할 때 코드 합치기

💻 코드 예시

git add . && git commit -m "feat: 새 기능 추가" && git push origin main

Closure

(클로저)

기억하는 함수

고급javascript

📖 정의

함수가 만들어진 곳의 변수를 계속 기억하는 것

🎯 실생활 비유

🍺 호프집 단골 손님처럼, "저번에 드셨던 그 메뉴요?" 하고 기억하는 것. 함수가 외부 변수 기억

💡 실제 예시

비밀번호를 함수 안에 숨겨놓고, 그 함수만 비밀번호를 알 수 있게 하기

💻 코드 예시

function outer() { const count = 0; return function inner() { return count + 1 } }

Debounce

(디바운스)

멈출 때 실행

중급performance

📖 정의

연타를 막고 마지막 한 번만 실행하는 기법

🎯 실생활 비유

🚗 주차장 차단기처럼, 차가 계속 지나가도 완전히 빠져나간 후에만 문 내리는 것

💡 실제 예시

검색창에 글자 입력할 때마다 검색하지 않고, 입력 멈추면 그때 검색하기

💻 코드 예시

const debouncedSearch = debounce((query) => fetchResults(query), 500)

Throttle

(쓰로틀)

주기적 실행

중급performance

📖 정의

일정 시간마다 한 번씩만 실행하는 기법

🎯 실생활 비유

🚦 신호등처럼, 차가 아무리 많이 와도 정해진 시간 간격으로만 신호 바뀌는 것

💡 실제 예시

스크롤할 때 매번 체크하지 않고 0.1초마다 한 번씩만 체크하기

💻 코드 예시

const throttledScroll = throttle(() => handleScroll(), 100)

Lazy Loading

(레이지 로딩)

늦게 불러오기

중급performance

📖 정의

필요할 때만 데이터나 이미지를 불러오는 기법

🎯 실생활 비유

🥩 뷔페 고기집처럼, 처음부터 모든 고기 안 가져오고 먹을 만큼만 계속 가져오는 것

💡 실제 예시

스크롤 내리면 그때 사진이 나타나는 인스타그램

💻 코드 예시

const LazyComponent = lazy(() => import("./HeavyComponent")); <Suspense fallback={<Loading />}><LazyComponent /></Suspense>

총 30개의 용어

로딩 중...

개발자 언어 단어장

프로그래밍 핵심 용어를 한눈에 정리하고 학습하세요

API

(에이피아이)

응용 프로그램 연결 인터페이스

초급backend

📖 정의

서로 다른 프로그램이 대화할 수 있게 해주는 약속된 규칙

🎯 실생활 비유

🥩 고기집 메뉴판처럼, 손님이 주문하면(요청) 주방이 요리를 내주는(응답) 정해진 방식

💡 실제 예시

날씨 앱이 기상청 서버에서 날씨 정보를 가져올 때 API를 사용합니다

💻 코드 예시

fetch("/api/users").then(res => res.json())

Asynchronous

(어싱크러너스)

비동기 처리

중급javascript

📖 정의

일이 끝날 때까지 기다리지 않고 다른 일을 동시에 처리하는 방식

🎯 실생활 비유

🍖 고기집 주방장이 삼겹살 굽는 동안 동시에 된장찌개도 끓이는 것처럼, 한 작업 끝나길 기다리지 않고 여러 일 동시 처리

💡 실제 예시

웹사이트에서 사진을 로딩하는 동안 다른 글자나 버튼을 먼저 보여주는 것

💻 코드 예시

const data = await fetch("/api/data").then(r => r.json())

State

(스테이트)

상태

중급frontend

📖 정의

화면에 보이는 데이터나 값들을 기억하고 관리하는 것

🎯 실생활 비유

🚗 자동차 계기판처럼, 현재 속도, 연료량, 기어 상태를 실시간으로 기억하고 표시하는 것

💡 실제 예시

좋아요 버튼을 눌렀을 때 하트 색깔이 바뀌는 것도 State가 바뀐 거예요

💻 코드 예시

const [count, setCount] = useState(0)

CRUD

(크러드)

생성/읽기/수정/삭제

초급backend

📖 정의

데이터를 만들고(Create), 보고(Read), 고치고(Update), 지우는(Delete) 4가지 기본 동작

🎯 실생활 비유

📋 고기집 예약 시스템처럼, 예약 등록(생성), 예약 확인(읽기), 시간 변경(수정), 예약 취소(삭제)

💡 실제 예시

인스타그램에서 사진 올리고, 보고, 수정하고, 삭제하는 모든 기능이 CRUD예요

💻 코드 예시

await prisma.user.create({ data: { name, email } })

Component

(컴포넌트)

부품

초급frontend

📖 정의

웹사이트를 만들 때 사용하는 재사용 가능한 작은 조각들

🎯 실생활 비유

🔧 자동차 부품처럼, 핸들, 타이어, 엔진을 조립해서 완성된 차를 만드는 것. 같은 부품을 여러 차에 재사용

💡 실제 예시

여러 페이지에서 똑같이 쓰이는 "좋아요 버튼"을 한 번만 만들어서 여러 곳에 붙일 수 있어요

💻 코드 예시

function Button({ children, onClick }) { return <button onClick={onClick}>{children}</button> }

Middleware

(미들웨어)

중간 처리기

중급backend

📖 정의

요청이 들어올 때 중간에서 검사하거나 처리하는 프로그램

🎯 실생활 비유

🚪 호프집 입구 직원처럼, 손님이 들어오면 신분증 확인하고 미성년자는 막는 역할

💡 실제 예시

로그인 안 한 사람은 마이페이지 못 보게 막는 것

💻 코드 예시

export function middleware(request) { if (!request.cookies.token) return redirect("/login") }

TypeScript

(타입스크립트)

타입 있는 자바스크립트

중급typescript

📖 정의

변수나 함수에 어떤 종류의 데이터가 들어갈지 미리 정해놓는 프로그래밍 언어

🎯 실생활 비유

🚗 자동차 주유구처럼, 휘발유 차에 경유 넣으려고 하면 "잘못된 연료" 경고 뜨는 것

💡 실제 예시

age라는 변수에는 숫자만 넣을 수 있고, name에는 글자만 넣을 수 있게 정해놓기

💻 코드 예시

const user: { name: string; age: number } = { name: "철수", age: 25 }

Props

(프랍스)

속성

초급frontend

📖 정의

부모가 자식 컴포넌트한테 데이터를 전달하는 방법

🎯 실생활 비유

🍺 호프집 주문서처럼, "테이블 5번, 생맥주 3잔, 양념치킨" 정보를 주방에 전달

💡 실제 예시

<Button color="blue">클릭</Button> 여기서 color="blue"가 Props예요

💻 코드 예시

function Button({ color, size, children }) { return <button className={`${color} ${size}`}>{children}</button> }

Hook

(훅)

고리 함수

중급frontend

📖 정의

React에서 특별한 기능을 쓸 수 있게 해주는 마법 같은 함수들

🎯 실생활 비유

🔌 자동차 액세서리처럼, 블랙박스, 네비게이션 등 필요한 기능을 차에 연결해서 사용

💡 실제 예시

useState로 숫자를 기억하고, useEffect로 화면이 뜨면 자동으로 뭔가 실행하기

💻 코드 예시

const [count, setCount] = useState(0); useEffect(() => { console.log(count) }, [count])

REST API

(레스트 에이피아이)

REST 방식 인터페이스

중급backend

📖 정의

GET(가져오기), POST(만들기), PUT(수정), DELETE(삭제) 명령어로 데이터를 다루는 API 규칙

🎯 실생활 비유

🍴 고기집 주문 방식처럼, 주문하고(POST), 메뉴판 보고(GET), 추가 주문(PUT), 취소하는(DELETE) 정해진 방법

💡 실제 예시

인스타그램에서 사진 목록 보기(GET), 사진 올리기(POST), 수정(PUT), 삭제(DELETE)

💻 코드 예시

app.get("/api/users", async (req, res) => { const users = await db.user.findMany(); res.json(users) })

Authentication

(어썬티케이션)

인증

중급security

📖 정의

"당신이 정말 본인이 맞나요?"를 확인하는 과정

🎯 실생활 비유

🔑 호프집 멤버십 카드처럼, 신분증 보여주고 본인 확인하는 과정

💡 실제 예시

아이디와 비밀번호를 입력해서 로그인하는 게 인증이에요

💻 코드 예시

const session = await getServerSession(); if (!session) redirect("/login")

Authorization

(오써라이제이션)

권한 부여

중급security

📖 정의

"이 사람이 이걸 할 수 있나요?"를 확인하는 과정

🎯 실생활 비유

🚗 발렛파킹처럼, 키 있어도 주인만 차 가져갈 수 있는 것. 직원은 주차만 가능

💡 실제 예시

일반 유저는 글만 쓸 수 있고, 관리자만 글을 삭제할 수 있게 하는 것

💻 코드 예시

if (user.role !== "admin") return new Response("Unauthorized", { status: 403 })

JWT

(제이더블유티)

토큰

고급security

📖 정의

로그인 정보를 암호화한 출입증 같은 것

🎯 실생활 비유

🎫 호프집 스탬프 카드처럼, 한 번 찍으면 재입장할 때 다시 신분증 안 봐도 되는 출입증

💡 실제 예시

로그인하면 서버가 토큰을 주고, 이후 요청할 때마다 그 토큰을 보여주면 돼요

💻 코드 예시

const token = jwt.sign({ userId: user.id }, SECRET); res.setHeader("Authorization", `Bearer ${token}`)

ORM

(오알엠)

객체-DB 변환기

중급database

📖 정의

어려운 데이터베이스 명령어를 쉬운 코드로 바꿔주는 도구

🎯 실생활 비유

🚗 자동차 내비게이션처럼, "강남역"이라고 말하면 복잡한 좌표로 자동 변환해주는 것

💡 실제 예시

user.findAll() 이렇게만 쓰면 "SELECT * FROM users" 같은 복잡한 명령어로 자동 변환

💻 코드 예시

const users = await prisma.user.findMany({ where: { active: true } })

SSR

(에스에스알)

서버 렌더링

고급frontend

📖 정의

서버가 완성된 웹페이지를 만들어서 보내주는 방식

🎯 실생활 비유

🥩 고기집에서 이미 구워진 고기를 받는 것처럼, 완성된 페이지를 받아서 바로 보는 방식

💡 실제 예시

검색엔진(구글)이 페이지 내용을 바로 볼 수 있어서 검색 결과에 잘 나와요

💻 코드 예시

export async function generateMetadata() { const data = await fetchData(); return { title: data.title } }

CSR

(씨에스알)

클라이언트 렌더링

중급frontend

📖 정의

브라우저가 받은 후에 화면을 만드는 방식

🎯 실생활 비유

🥩 고기집에서 생고기 받아서 테이블에서 직접 굽는 것처럼, 재료만 받아서 브라우저가 조리

💡 실제 예시

처음엔 빈 화면이 보이다가 로딩 후 내용이 나타나는 앱들

💻 코드 예시

const [data, setData] = useState(null); useEffect(() => { fetch("/api/data").then(r => r.json()).then(setData) }, [])

Webhook

(웹훅)

알림 연결

중급backend

📖 정의

뭔가 일어나면 자동으로 다른 곳에 알려주는 시스템

🎯 실생활 비유

🔔 대리운전 앱처럼, 호출하면 자동으로 기사님에게 알림 가는 시스템

💡 실제 예시

GitHub에 코드 올리면 자동으로 서버에 배포되게 하는 것

💻 코드 예시

app.post("/webhook/github", async (req, res) => { const event = req.body; await deployApp(); res.sendStatus(200) })

Cache

(캐시)

임시 저장소

중급performance

📖 정의

자주 쓰는 데이터를 빠르게 꺼낼 수 있게 임시로 저장해두는 것

🎯 실생활 비유

🚗 자주 가는 길을 내비게이션이 기억해두는 것처럼, 빠른 경로를 저장해뒀다가 재사용

💡 실제 예시

한 번 봤던 웹사이트가 다음엔 더 빨리 뜨는 이유가 캐시 때문이에요

💻 코드 예시

export const revalidate = 3600; // Next.js에서 1시간마다 캐시 갱신

Deployment

(디플로이먼트)

배포

초급devops

📖 정의

만든 프로그램을 인터넷에 올려서 다른 사람들이 쓸 수 있게 하는 것

🎯 실생활 비유

🥩 새로 만든 고기집을 정식 오픈하는 것처럼, 웹사이트를 서버에 올려서 손님 받기 시작

💡 실제 예시

개발 끝나면 Vercel이나 Netlify 같은 곳에 올려서 친구들한테 링크 공유하기

💻 코드 예시

vercel --prod 또는 git push origin main (자동 배포 설정 시)

Environment Variable

(인바이런먼트 베리어블)

환경 변수

초급devops

📖 정의

비밀번호나 중요한 설정을 코드에 직접 안 쓰고 따로 보관하는 것

🎯 실생활 비유

🔐 차 키를 가방에 안 넣고 금고에 따로 보관하는 것처럼, 중요한 정보는 안전하게 숨김

💡 실제 예시

API 키나 데이터베이스 비밀번호를 .env 파일에 저장해서 GitHub에 안 올리기

💻 코드 예시

const apiKey = process.env.NEXT_PUBLIC_API_KEY

Responsive Design

(리스폰시브 디자인)

반응형 디자인

초급frontend

📖 정의

화면 크기에 따라 자동으로 모양이 바뀌는 디자인

🎯 실생활 비유

🚗 자동차 사이드미러처럼, 운전자 체형에 맞춰 자동으로 각도 조절되는 것

💡 실제 예시

같은 웹사이트를 핸드폰에서 보면 세로로, 컴퓨터에서 보면 가로로 잘 보이는 것

💻 코드 예시

<div className="w-full md:w-1/2 lg:w-1/3">...</div>

Callback

(콜백)

나중에 실행할 함수

초급javascript

📖 정의

"이 일이 끝나면 이걸 해줘"라고 미리 말해놓는 함수

🎯 실생활 비유

📞 대리운전 호출할 때 "도착하면 전화주세요" 번호 남기는 것처럼, 나중에 실행할 함수 지정

💡 실제 예시

버튼 클릭하면 뭘 할지 미리 정해놓기

💻 코드 예시

button.addEventListener("click", () => { console.log("클릭됨") })

Promise

(프라미스)

약속

중급javascript

📖 정의

"나중에 데이터 줄게" 하는 약속을 담은 객체

🎯 실생활 비유

🚗 대리운전 예약처럼, 아직 안 왔지만 "출발", "도착" 상태를 실시간으로 확인 가능

💡 실제 예시

서버에서 데이터 가져오는 중... 성공하면 then, 실패하면 catch

💻 코드 예시

fetch("/api/data").then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err))

GraphQL

(그래프큐엘)

유연한 API 언어

고급backend

📖 정의

내가 원하는 데이터만 정확히 요청할 수 있는 방식

🎯 실생활 비유

🥩 고기집에서 "삼겹살 200g, 된장찌개만" 주문하면 딱 그것만 나오는 것처럼 필요한 것만 요청

💡 실제 예시

REST는 전체 유저 정보를 다 주지만, GraphQL은 이름만 달라고 하면 이름만 줘요

💻 코드 예시

query { user(id: "1") { name email posts { title } } }

Docker

(도커)

컨테이너 도구

고급devops

📖 정의

프로그램을 상자에 담아서 어디서든 똑같이 실행되게 하는 도구

🎯 실생활 비유

🚗 자동차를 컨테이너에 실으면 어느 나라에서도 똑같이 운전 가능한 것처럼 프로그램 포장

💡 실제 예시

내 컴퓨터에서 되던 프로그램이 친구 컴퓨터에선 안 될 때, 도커로 포장하면 어디서든 작동해요

💻 코드 예시

docker build -t myapp . && docker run -p 3000:3000 myapp

Git

(깃)

버전 관리

초급devops

📖 정의

코드의 변경 기록을 저장하고 관리하는 도구

🎯 실생활 비유

🚗 블랙박스처럼, 사고 났을 때 과거 영상 확인하듯 코드 변경 기록을 저장하고 복구 가능

💡 실제 예시

실수로 코드 망쳤을 때 어제 버전으로 되돌리기, 친구랑 협업할 때 코드 합치기

💻 코드 예시

git add . && git commit -m "feat: 새 기능 추가" && git push origin main

Closure

(클로저)

기억하는 함수

고급javascript

📖 정의

함수가 만들어진 곳의 변수를 계속 기억하는 것

🎯 실생활 비유

🍺 호프집 단골 손님처럼, "저번에 드셨던 그 메뉴요?" 하고 기억하는 것. 함수가 외부 변수 기억

💡 실제 예시

비밀번호를 함수 안에 숨겨놓고, 그 함수만 비밀번호를 알 수 있게 하기

💻 코드 예시

function outer() { const count = 0; return function inner() { return count + 1 } }

Debounce

(디바운스)

멈출 때 실행

중급performance

📖 정의

연타를 막고 마지막 한 번만 실행하는 기법

🎯 실생활 비유

🚗 주차장 차단기처럼, 차가 계속 지나가도 완전히 빠져나간 후에만 문 내리는 것

💡 실제 예시

검색창에 글자 입력할 때마다 검색하지 않고, 입력 멈추면 그때 검색하기

💻 코드 예시

const debouncedSearch = debounce((query) => fetchResults(query), 500)

Throttle

(쓰로틀)

주기적 실행

중급performance

📖 정의

일정 시간마다 한 번씩만 실행하는 기법

🎯 실생활 비유

🚦 신호등처럼, 차가 아무리 많이 와도 정해진 시간 간격으로만 신호 바뀌는 것

💡 실제 예시

스크롤할 때 매번 체크하지 않고 0.1초마다 한 번씩만 체크하기

💻 코드 예시

const throttledScroll = throttle(() => handleScroll(), 100)

Lazy Loading

(레이지 로딩)

늦게 불러오기

중급performance

📖 정의

필요할 때만 데이터나 이미지를 불러오는 기법

🎯 실생활 비유

🥩 뷔페 고기집처럼, 처음부터 모든 고기 안 가져오고 먹을 만큼만 계속 가져오는 것

💡 실제 예시

스크롤 내리면 그때 사진이 나타나는 인스타그램

💻 코드 예시

const LazyComponent = lazy(() => import("./HeavyComponent")); <Suspense fallback={<Loading />}><LazyComponent /></Suspense>

총 30개의 용어