개발 지식 지도

프론트엔드

사용자가 보고 클릭하는 부분 (버튼, 목록, 폼).

예: 로그인 화면, 대시보드 카드

백엔드

화면 뒤에서 처리하는 부분 (저장, 계산, 권한 확인).

예: 비밀번호 확인, 글 저장

API

프론트와 백엔드가 대화하는 약속된 창구 (주소 + 규칙).

예: POST /api/login

데이터베이스(DB)

정보를 표처럼 저장해 두는 창고.

예: 회원 표, 게시글 표

배포

내 컴퓨터가 아니라 인터넷에 올려 다른 사람이 접속하게 하는 것.

예: Vercel에 올리면 URL이 생김

환경 변수

비밀번호·키처럼 코드에 직접 쓰지 않고 따로 넣는 설정 값.

예: .env 파일, Vercel Environment Variables

HTML

페이지의 뼈대 (제목, 버튼, 입력칸 자리).

CSS

모양·간격·색 (디자인).

예: Tailwind = 미리 만든 스타일 단어 모음

JavaScript / TypeScript

클릭·입력에 반응하는 동작. TypeScript는 실수 줄이는 검사 포함 버전.

컴포넌트

재사용하는 UI 조각 (버튼, 카드, 모달).

페이지 라우팅

주소(/login, /builds)마다 어떤 화면을 보여줄지.

상태(state)

화면에 기억해 두는 값 (입력 중 글자, 로딩 중 여부).

반응형

폰·PC 화면 너비에 맞게 배치가 바뀌는 것.

접근성(a11y)

키보드·스크린리더로도 쓸 수 있게 하는 것.

요청(Request) / 응답(Response)

클라이언트가 보내고, 서버가 돌려주는 한 세트.

HTTP 메서드

GET=조회, POST=생성, PATCH/PUT=수정, DELETE=삭제.

엔드포인트

API의 구체적인 주소 한 개.

예: /api/builds

상태 코드

200 성공, 400 잘못된 요청, 401 로그인 필요, 403 권한 없음, 500 서버 오류.

서버 액션 / Route Handler

Next 등에서 서버 쪽 코드를 실행하는 방식.

검증(validation)

들어온 값이 규칙에 맞는지 검사 (이메일 형식, 글자 수).

테이블 / 행 / 열

표 / 한 줄 기록 / 항목(이름, 이메일).

기본 키(id)

각 행을 구분하는 고유 번호.

관계

글 작성자 = 회원 id 처럼 표끼리 연결.

마이그레이션

표 구조 변경을 기록·적용하는 절차.

RLS (행 수준 보안)

‘내 글만 보이게’ 같은 규칙을 DB에 거는 것 (Supabase 핵심).

인덱스

자주 찾는 열을 빠르게 찾기 위한 목차.

인증 (Authentication)

신분 확인 (로그인).

인가 (Authorization)

권한 확인 (관리자만 삭제 등).

세션 / 쿠키

브라우저에 남겨 ‘로그인 유지’하는 방식.

JWT 등 토큰

신분을 담은 문자열. 탈취되면 위험 → 안전하게 보관.

OAuth / 소셜 로그인

구글·깃허브 계정으로 대신 로그인.

비밀번호 해시

비밀번호를 그대로 저장하지 않고 복구 어렵게 변환.

시크릿 / API 키

서비스 출입 비밀번호. 코드·채팅·스크린샷에 넣지 않기.

.env

시크릿을 넣는 로컬 설정 파일. Git에 올리면 안 됨.

XSS

악성 스크립트가 페이지에 심어져 다른 사용자 정보를 훔침.

SQL 인젝션

입력값으로 DB 명령을 조작. ORM·파라미터 쿼리로 완화.

CORS

다른 사이트에서 내 API를 호출할 수 있는지 제한.

최소 권한

필요한 권한만. 읽기만 되면 쓰기 키 주지 않기.

로컬

내 컴퓨터에서 실행.

프로덕션

실제 사용자가 쓰는 환경.

프리뷰 배포

PR/브랜치마다 생기는 임시 주소로 미리 확인.

빌드

코드를 서버가 실행할 형태로 묶는 과정. 실패하면 배포 안 됨.

도메인 / DNS

외우기 쉬운 주소와 실제 서버 연결.

로그 / 모니터링

에러와 속도를 기록·알림 (Sentry 등).

저장소(repository)

프로젝트 폴더 + 이력.

커밋

변경을 기록한 한 지점. 메시지와 함께.

브랜치

본선(main)을 안 건드리고 실험하는 갈래.

push / pull

내 기록 올리기 / 원격 기록 받아오기.

PR (Pull Request)

변경 검토 후 합치기 요청.

충돌(conflict)

같은 줄을 서로 다르게 고쳐 합치기 전 선택이 필요.

재현

같은 방식으로 문제를 다시 일으키기. 디버깅 1단계.

스택 트레이스

에러가 난 코드 위치 목록.

단위 테스트

작은 함수가 기대한 값을 내는지 자동 검사.

E2E 테스트

브라우저에서 클릭 흐름을 자동으로 따라가기.

린트 / 타입체크

코드 스타일·타입 실수를 실행 전에 잡기.

네이티브 앱

그 플랫폼 전용 언어·도구로 만든 앱. 성능·OS 기능 접근이 유리.

예: Swift(iOS), Kotlin(안드로이드)

크로스플랫폼

한 코드베이스로 iOS·안드로이드를 같이 만드는 방식.

예: React Native, Flutter, Expo

Expo

React Native를 쉽게 시작·빌드·배포하게 돕는 도구 모음. 바이브에 흔함.

시뮬레이터 / 에뮬레이터

컴퓨터 안에서 가짜 폰으로 앱을 실행. 실기기와 100% 같지 않음.

예: iOS Simulator, Android Emulator

실기기 테스트

실제 폰에 설치해 확인. 카메라·푸시·성능은 여기서 필수.

권한 (Permission)

카메라·위치·알림·사진첩 등을 쓰기 전 사용자 동의. 거부 시 흐름 설계 필요.

푸시 알림

앱을 안 켜도 오는 알림. 서버·토큰·OS 설정이 연결되어야 함.

딥링크 / 유니버설 링크

링크를 누르면 앱 특정 화면으로 바로 열림.

백그라운드

앱이 화면에 없을 때 동작. OS가 강하게 제한함.

안전 영역 (Safe Area)

노치·홈 바를 피해 버튼을 배치하는 여백.

PWA

웹을 홈 화면에 추가해 앱처럼 쓰는 방식. 스토어 없이 배포 가능(기능 제한 있음).

브릿지 / 네이티브 모듈

JS 등에서 기기 전용 기능(센서 등)을 호출하는 연결 층.

개발자 계정

스토어에 앱을 올릴 자격. 애플은 연 요금, 구글도 등록비.

서명 / 키스토어 / 인증서

‘이 앱이 우리가 만든 것’임을 증명. 키 분실=업데이트 불능에 가깝.

번들 ID / 패키지 이름

앱 고유 주소 같은 식별자. 한 번 정하면 바꾸기 어려움.

예: com.honggildong.myapp

AAB / IPA

안드로이드 업로드 묶음 / iOS 설치 패키지.

프로비저닝 프로필

iOS에서 어떤 기기에 어떤 앱을 설치·배포할지 묶는 설정.

심사 (Review)

스토어 직원이 가이드 위반·사기·불안정 등을 검사.

샌드박스

결제·로그인 등을 테스트용으로 안전하게 시험하는 환경.

단계적 출시

사용자 일부에게만 먼저 배포해 문제 확인.

강제 업데이트

너무 낮은 버전 앱 사용을 막아 보안·호환 문제를 줄임.

JSON

데이터를 중괄호·목록 형태로 주고받는 흔한 형식.

REST

URL + GET/POST 등으로 자원을 다루는 API 스타일.

GraphQL

클라이언트가 필요한 필드만 골라 요청하는 API 방식.

페이지네이션

목록을 한 번에 다 안 받고 페이지·커서로 나눠 받기.

타임아웃

너무 오래 걸리면 실패로 처리.

재시도 / 백오프

실패 시 다시 시도. 간격을 늘려 서버를 덜 때림.

멱등 키

같은 결제·제출이 두 번 적용되지 않게 하는 고유 값.

낙관적 UI

서버 응답 전에 화면을 먼저 바꾼 뒤, 실패 시 되돌림.

오프라인 큐

망이 없을 때 작업을 쌓아 두었다가 연결 시 전송.

로컬 상태

한 컴포넌트 안에서만 쓰는 값 (입력 중 글자).

전역 상태

여러 화면이 공유 (테마, 장바구니).

서버 상태

DB/API에서 온 데이터. 캐시·재검증이 중요.

단방향 데이터 흐름

데이터가 위에서 아래로 흐르게 해 예측 가능하게 함.

관심사 분리

UI / 데이터 가져오기 / 비즈니스 규칙을 파일로 나누기.

기술 부채

빨리 가려고 쌓아 둔 엉성함. 이자가 붙어 속도가 느려짐.

도메인

업무 개념 단위 (회원, 주문, 게시글).

유저 플로

사용자가 목표까지 가는 클릭 순서.

와이어프레임

색 없이 배치만 그린 뼈대 스케치.

빈 상태 (Empty state)

데이터 없을 때 안내 + 다음 행동 버튼.

온보딩

첫 사용자를 핵심 기능으로 안내.

카피

버튼·에러 문장. 개발 용어 대신 사람 말.

접근성

더 많은 사람이 쓸 수 있게 (대비, 포커스, 라벨).

디자인 토큰

색·간격·글자 크기 변수. 일관성 유지.

PG / 결제 대행

카드 처리를 대신 해주는 서비스 (Stripe, 토스페이먼츠 등).

웹훅

결제 성공/실패를 서버가 비동기로 통지받음.

인앱 결제

스토어 안에서 디지털 상품 결제. 수수료·정책 있음.

샌드박스 결제

가짜 돈으로 결제 흐름 시험.

환불 · 차지백

돈 되돌리기 / 카드사 분쟁. 기록 보관 필요.

개인정보

누구인지 알 수 있는 정보 (이름, 이메일, 전화번호 등).

처리방침

무엇을 왜 얼마나 보관하는지 공개하는 문서. URL이 필요한 경우 많음.

동의 / 철회

선택 수집은 켜고 끌 수 있어야 함.

최소 수집

당장 필요 없는 정보는 안 받음.

추적 · ATT

앱 추적 투명성. iOS에서 광고 식별자 추적 시 동의 창.

데이터 삭제 요청

계정·데이터 지워 달라는 요청에 대응하는 절차.

크래시

앱이 강제 종료. 리포트로 스택을 받음.

브레드크럼

에러 직전 사용자 행동 흔적.

알림 임계값

에러가 N건 넘으면 슬랙 등 통지.

온콜

장애 때 누가 보는지 정하는 운영 역할.

롤백

문제 있는 버전을 이전으로 되돌림.

피처 플래그

새 기능을 일부에게만 켜 위험 축소.

번들 사이즈

내려받는 JS/코드 양. 클수록 첫 로딩 느림.

LCP / CLS

주요 콘텐츠가 보이는 시점 / 레이아웃 흔들림 (웹).

지연 로딩

필요할 때 이미지·화면을 불러 초기 비용 감소.

메모이제이션

같은 계산 반복을 줄임. 남용 시 오히려 복잡.

N+1 쿼리

목록 한 번 + 각 행마다 DB 조회 → 매우 느림.

쓰로틀 / 디바운스

입력이 잦을 때 처리를 제한·지연.

슬라이스

하루 안에 검증 가능한 한 조각 기능.

완료 조건

무엇이 보이거나 어떤 명령이 성공하면 끝인지.

규칙 파일

CLAUDE.md / AGENTS.md 등 프로젝트 고정 지시.

하네스

규칙·스킬·훅·테스트로 에이전트를 감싸는 장치.

환각

모델이 없는 API·파일을 지어냄. 문서로 검증.

컨텍스트 윈도우

한 대화에 넣을 수 있는 정보의 양. 넘치면 앞부분을 잊음.