바이브 코더 치트시트

01 / CORE

당신이 길러야 할 세 가지 힘

바이브 코딩은 '코드를 잘 짜는 능력'이 아니다. 아래 세 가지의 합이다.

01

전체 흐름 파악

// 얕지만 넓게

모든 걸 깊이 알 필요는 없다. 데이터가 어디서 와서 어디로 가는지, 큰 그림의 부품들이 어떻게 맞물리는지 그릴 수 있으면 된다.

02

빠르게 채우기

// 편견 없이

모르는 단어가 나오면 자존심 상해하지 말고 즉시 묻는다. "이게 뭐야?"를 부끄러워하지 않는 사람이 가장 빨리 큰다.

03

완성 기준 낮추기

// 현재 완료형

'언젠가 완벽하게'가 아니라 '지금 돌아가게'. 동작하는 못난 버전이 완벽한 상상보다 백 배 낫다. 일단 끝내라.

02 / WHY

왜 굳이 공부해야 할까

AI가 다 해주는데 왜? 이 세 줄이 답이다.

A

용어를 알아야 → 정확히 요청한다"버튼 눌리게 해줘"보다 "클릭 이벤트에 핸들러 붙여줘"가 훨씬 정확한 결과를 부른다.

B

개념이 쌓여야 → 결과를 판단한다AI도 틀린다. 맞는지 틀린지 가늠할 최소한의 지식이 없으면 그냥 믿을 수밖에 없다.

C

구조를 이해해야 → 어디를 볼지 안다막혔을 때 "어디가 문제일까"를 짚는 능력. 지도가 있어야 길을 잃어도 돌아온다.

03 / CONCEPTS

알아야 할 구조 개념

비개발자가 자주 듣지만 뜻은 흐릿한 말들. 외우지 말고 익숙해져라.

⌕

자주 듣는 말

작업 흐름

UI 컴포넌트

앱 구조

인증 & 권한

데이터 & 보안

에러 읽기

Repository (Repo)

레포·저장소

프로젝트 파일 전체와 변경 이력이 보관되는 한 묶음. 보통 GitHub에 둔다.

예) "레포 주소 알려줘" = 프로젝트 코드 공간 링크

Commit / Push

커밋·푸시

변경 사항을 저장하는 지점(커밋)과, 그걸 온라인 저장소로 올리는 것(푸시).

예) 작업 → 커밋(저장) → 푸시(공유)

Branch / Merge

브랜치·머지

원본을 건드리지 않고 따로 작업하는 갈래(브랜치)와, 그걸 다시 합치는 것(머지).

비유) 원고 사본에서 고친 뒤 본문에 반영

Library / Package

라이브러리·패키지

남이 미리 만들어둔 기능 묶음. 직접 안 만들고 가져다 쓴다.

비유) 직접 안 만들고 사 오는 부품

Dependency

의존성

내 프로젝트가 돌아가려면 필요한 외부 부품들. 빠지면 안 돌아간다.

예) A를 깔아야 B가 작동하는 관계

Framework

프레임워크

앱의 뼈대와 규칙을 미리 잡아주는 큰 틀. 그 위에 살을 붙인다.

예) React, Next.js, Flutter

Boilerplate

보일러플레이트

매번 똑같이 들어가는 기본 뼈대 코드. 시작점으로 복붙하는 틀.

비유) 새 문서 만들 때의 기본 양식

Refactor

리팩터링

동작은 그대로 두고 코드를 더 깔끔하게 정리하는 일.

예) "이 부분 리팩터해줘" = 기능 유지하며 정돈

Hardcoding

하드코딩

값을 유연하게 안 빼고 코드에 직접 박아 넣는 것. 급할 땐 쓰지만 나중에 골치.

예) 가격 10000을 코드에 그대로 적어둠

Edge Case

엣지 케이스

드물지만 터지는 예외 상황. 빈 값, 0, 엄청 긴 입력 등.

예) 이름을 안 넣고 제출했을 때

Breaking Change

호환성 깨짐

업데이트 후 기존에 잘 되던 게 갑자기 안 되게 만드는 변경.

예) 라이브러리 버전 올렸더니 화면이 깨짐

Legacy

레거시

오래돼서 손대기 부담스럽지만 아직 돌아가는 옛날 코드/시스템.

뉘앙스) "레거시라서…" = 낡아서 조심스럽다

Technical Debt

기술 부채

급하게 대충 짜둔 탓에 나중에 갚아야 할 정리 비용.

뉘앙스) "빚이 쌓였다" = 손볼 게 밀려 있다

MVP

최소 기능 제품

핵심 기능만 담아 빨리 내놓는 첫 버전. 완벽보다 검증이 목적.

예) 일단 로그인+글쓰기만 되는 v1

Scope

범위·스코프

이번에 만들 것의 경계. 늘어나면 "스코프가 커진다".

뉘앙스) "그건 이번 스코프 밖" = 다음에 하자

Edge Case

엣지 케이스

드물지만 터지는 예외 상황. 빈 값, 0, 엄청 긴 입력 등.

예) 이름을 안 넣고 제출했을 때

Workaround

임시 우회책

근본 해결은 아니지만 당장 돌아가게 만드는 임시 방편.

뉘앙스) "일단 우회로 막아둠"

Deprecated

지원 중단

더 이상 권장하지 않고 곧 사라질 예정인 기능. 새 방식으로 옮겨야 한다.

예) "이 함수는 deprecated야" = 쓰지 마

Syntax

문법·신택스

코드를 쓰는 정해진 규칙. 어기면 바로 에러.

예) "신택스 에러" = 괄호·따옴표 같은 표기 오류

Open Source

오픈소스

코드가 공개돼 누구나 보고 가져다 쓸 수 있는 소프트웨어.

예) React, Supabase 모두 오픈소스

SDK

에스디케이

특정 서비스를 쉽게 연동하도록 묶어 제공하는 개발 도구 모음.

예) "결제 SDK 붙여줘" = 결제 연동 키트 설치

Local / Production

로컬·프로덕션

내 컴퓨터에서만 도는 환경(로컬)과, 실제 사용자가 쓰는 운영 환경(프로덕션).

예) "로컬에선 되는데 프로덕션에선 안 돼"

Build

빌드

사람이 쓴 코드를 컴퓨터가 실행할 형태로 포장·변환하는 과정.

예) "빌드 실패" = 포장 단계에서 에러남

Run / Server

실행·서버 띄우기

앱을 작동시켜 화면을 보는 것. 보통 "서버를 띄운다"고 한다.

예) npm run dev → 미리보기 주소가 뜸

Hot Reload

핫 리로드

코드를 고치면 새로고침 없이 화면에 즉시 반영되는 기능.

예) 저장하자마자 화면이 바뀜

Terminal / CLI

터미널·명령줄

버튼 대신 글자 명령으로 컴퓨터에 시키는 검은 입력창.

예) 설치·실행 명령을 여기에 입력

Console / Log

콘솔·로그

프로그램이 속으로 무슨 일을 했는지 보여주는 기록창. 에러도 여기 뜬다.

예) 브라우저 F12 → 빨간 에러 메시지

Error / Stack Trace

에러·스택 트레이스

문제가 난 지점과 거쳐온 경로를 알려주는 에러 보고서.

팁) 통째로 AI에 붙여넣으면 원인 찾기 빠름

Endpoint

엔드포인트

API에서 특정 기능에 접근하는 주소 한 칸.

예) /users = 사용자 목록을 주는 창구

Payload

페이로드

요청·응답에 실어 보내는 실제 데이터 알맹이.

예) 폼 제출 시 함께 보내는 입력값 꾸러미

Migration

마이그레이션

데이터베이스 구조(테이블·열)를 바꾸는 변경을 차곡차곡 적용하는 것.

예) "전화번호 열 추가" 같은 구조 변경 반영

Webhook

웹훅

어떤 일이 생기면 자동으로 다른 서비스에 알려주는 통보 장치.

예) 결제 완료되면 자동으로 내 앱에 알림

Rate Limit

요청 제한

짧은 시간에 너무 많이 요청하면 막는 한도.

예) "잠시 후 다시 시도하세요" 가 뜨는 이유

Cache

캐시

자주 쓰는 걸 가까이 임시 저장해 속도를 높이는 것. 가끔 옛날 값이 남아 문제.

예) "캐시 비우고 새로고침" = 강제로 최신 받기

Rollback

롤백

문제가 생겼을 때 잘 되던 이전 상태로 되돌리는 것.

예) 배포가 망가지면 직전 버전으로 롤백

CI/CD

자동 배포

코드를 올리면 검사·빌드·배포가 자동으로 돌아가는 파이프라인.

예) 깃에 푸시하면 알아서 사이트가 갱신됨

Pull Request (PR)

풀 리퀘스트

"이 변경을 본문에 합쳐달라"고 검토를 요청하는 절차.

비유) 수정안을 올려 승인받고 반영

Diff

디프·변경분

바뀌기 전과 후를 나란히 비교해 무엇이 달라졌는지 보여주는 것.

예) AI가 고친 부분을 초록/빨강으로 표시

Staging

스테이징

실서비스에 올리기 전 똑같은 환경에서 최종 점검하는 단계.

예) 스테이징에서 확인 후 프로덕션 배포

Dependency Install

패키지 설치

프로젝트에 필요한 외부 부품들을 한 번에 받아오는 것.

예) npm install — 처음 받을 때 꼭 실행

Network Tab

네트워크 탭

브라우저가 서버와 주고받은 요청·응답을 들여다보는 개발자 도구 창.

팁) 데이터 안 올 때 여기서 요청 상태 확인

Breakpoint

중단점

코드가 특정 지점에서 멈추게 해 값을 들여다보는 디버깅 표시.

비유) 영상 일시정지하고 한 장면 뜯어보기

Radix UI 프리미티브 기준 전체 컴포넌트. AI에게 "이런 컴포넌트로 만들어줘"라고 이름을 대면 결과가 정확해진다.

오버레이 · 띄우는 것

Dialog

다이얼로그·모달

화면 위에 겹쳐 떠서 뒤를 가리는 창. 닫기 전까지 뒤 작업을 막는다.

예) 프로필 편집 팝업 창

Alert Dialog

경고 다이얼로그

중요한 결정을 강제로 확인받는 모달. 응답하기 전엔 못 넘어간다.

예) "정말 삭제할까요? 되돌릴 수 없습니다"

Popover

팝오버

버튼을 누르면 그 옆에 떠서 풍부한 내용을 보여주는 작은 패널.

예) 설정 아이콘 누르면 뜨는 옵션 패널

Hover Card

호버 카드

링크에 마우스를 올리면 미리보기를 띄워주는 카드.

예) 사용자 이름에 올리면 뜨는 프로필 미리보기

Tooltip

툴팁

요소에 마우스를 올리거나 포커스하면 뜨는 짧은 설명.

예) 아이콘 위에 잠깐 뜨는 "저장" 글자

Toast

토스트

잠깐 떴다 사라지는 짧은 알림 메시지.

예) "저장되었습니다" 가 잠깐 뜨고 사라짐

메뉴 · 선택

Dropdown Menu

드롭다운 메뉴

버튼을 누르면 펼쳐지는 동작·기능 목록.

예) "더보기(⋯)" 누르면 나오는 수정·삭제 메뉴

Context Menu

컨텍스트 메뉴

우클릭(또는 길게 누르기)으로 뜨는 메뉴.

예) 파일을 우클릭하면 나오는 메뉴

Menubar

메뉴바

데스크톱 앱처럼 늘 위에 떠 있는 메뉴 모음.

예) 파일 / 편집 / 보기 상단 메뉴줄

Navigation Menu

내비게이션 메뉴

사이트를 이동하는 링크들의 모음.

예) 홈·소개·문의 같은 상단 메뉴

Select

셀렉트

버튼을 눌러 목록에서 하나를 고르는 드롭다운.

예) 국가 선택 드롭다운

Dropdown vs Select

메뉴 vs 선택

드롭다운 메뉴는 '동작'을, 셀렉트는 '값 선택'을 위한 것. 헷갈리기 쉽다.

구분) 삭제하기(메뉴) / 사이즈 M 고르기(셀렉트)

입력 · 컨트롤

Form

폼

사용자 입력을 모으고 검증 규칙으로 잘못된 값을 거르는 양식.

예) 회원가입 입력 양식 전체

Label

레이블

입력칸에 붙는 이름표. 클릭하면 해당 칸이 활성화된다.

예) 입력창 위의 "이메일" 글자

Checkbox

체크박스

켜짐/꺼짐을 표시하는 네모 칸. 여러 개를 동시에 고를 수 있다.

예) "약관에 동의합니다" 체크

Radio Group

라디오 그룹

여러 개 중 딱 하나만 고르는 동그란 선택 버튼 묶음.

예) 결제수단: 카드 / 계좌이체 중 택1

Switch

스위치·토글

켜고 끄는 on/off 막대형 스위치.

예) 다크모드 켜기/끄기

Toggle

토글 버튼

눌리면 켜지고 다시 누르면 꺼지는 두 상태 버튼.

예) 굵게(B) 서식 버튼

Toggle Group

토글 그룹

토글 버튼 여러 개를 묶은 것.

예) 왼쪽/가운데/오른쪽 정렬 버튼 묶음

Slider

슬라이더

막대를 드래그해 범위 안에서 값을 고르는 입력.

예) 볼륨·가격대 조절 막대

One-Time Password

OTP 입력 필드

인증번호 한 자리씩 칸칸이 넣는 입력 묶음.

예) 문자로 온 6자리 인증번호 입력

Password Toggle

비밀번호 보기 토글

비밀번호를 가렸다 보였다 전환하는 눈 모양 버튼이 달린 입력.

예) 비번 칸 오른쪽 👁 눈 아이콘

Toolbar

툴바

버튼·토글·메뉴 등 컨트롤을 한 줄로 묶어 놓은 띠.

예) 글 편집기 상단의 서식 버튼 모음

콘텐츠 · 펼침

Accordion

아코디언

제목을 누르면 아래 내용이 펼쳐지는 접이식 목록.

예) 자주 묻는 질문(FAQ) 펼침 목록

Collapsible

콜랩서블

한 영역을 접었다 폈다 하는 단순 펼침 컴포넌트.

예) "더보기"로 숨겨둔 내용 펼치기

Tabs

탭

여러 패널을 겹쳐 두고 하나씩 골라 보는 탭 구조.

예) 상품정보 / 리뷰 / 배송 탭 (이 사전처럼!)

Progress

프로그레스 바

작업이 얼마나 진행됐는지 보여주는 막대.

예) 파일 업로드 70% 진행 막대

Avatar

아바타

사용자 사진을 보여주고, 없으면 이니셜로 대체하는 동그란 이미지.

예) 프로필 사진 / 이름 첫 글자 원형

Scroll Area

스크롤 영역

브라우저마다 다른 스크롤바를 통일된 모양으로 꾸민 스크롤 박스.

예) 채팅창처럼 안에서만 스크롤되는 영역

Separator

구분선

내용을 시각적·의미적으로 나누는 선.

예) 메뉴 항목 사이의 가는 가로줄

Aspect Ratio

비율 박스

콘텐츠를 정해진 가로세로 비율로 고정해 담는 틀.

예) 썸네일을 항상 16:9로 유지

데이터 · 표시

Table

테이블·표

행과 열로 데이터를 정렬해 보여주는 표.

예) 주문 내역 목록, 회원 명단

Card

카드

관련 정보를 한 덩어리로 묶어 테두리·여백으로 감싼 박스.

예) 상품 한 개를 담은 사진+이름+가격 카드

Badge

배지

상태나 분류를 작게 표시하는 알약 모양 라벨.

예) "신상" "품절" "NEW" 같은 작은 표식

Callout

콜아웃

주의·안내를 눈에 띄게 강조하는 박스. 보통 아이콘이 붙는다.

예) "⚠ 이 작업은 되돌릴 수 없습니다" 안내 박스

Skeleton

스켈레톤

내용이 로딩되는 동안 자리를 잡아주는 회색 뼈대 모양.

예) 글 뜨기 전 회색 줄들이 깜빡이는 화면

Spinner

스피너

로딩 중임을 알리는 빙글빙글 도는 표시.

예) 버튼 누른 뒤 도는 동그란 로딩 아이콘

Frontend

프론트엔드

사용자가 직접 보고 누르는 화면. 눈에 보이는 모든 것.

비유) 식당의 홀과 메뉴판

Backend

백엔드

화면 뒤에서 데이터를 처리·저장하는 보이지 않는 부엌.

비유) 주문을 받아 요리하는 주방

API

에이피아이

프론트와 백엔드가 약속된 방식으로 주고받는 창구. "이렇게 요청하면 저렇게 답한다"는 메뉴판.

예) 화면이 "내 주문 목록 줘" → 서버가 목록 응답

Client / Server

클라이언트·서버

요청하는 쪽(브라우저)과 처리해 응답하는 쪽(서버 컴퓨터).

비유) 손님(클라이언트)과 주방(서버)

BaaS

백엔드 서비스

서버·DB·인증을 직접 안 만들고 빌려 쓰는 완성형 백엔드(Supabase, Firebase 등).

예) 바이브 코딩에서 가장 흔히 쓰는 등받이

Deploy / Hosting

배포·호스팅

내 컴퓨터에서만 돌던 걸 인터넷에 올려 누구나 접속하게 만드는 것.

예) Vercel에 올려 실제 주소(URL)로 공개

Domain / DNS

도메인·DNS

앱의 인터넷 주소(이름)와, 그 이름을 실제 서버로 안내하는 전화번호부.

예) myapp.com → 실제 서버로 연결

Routing

라우팅

주소(URL)에 따라 어떤 화면을 보여줄지 정하는 길 안내.

예) /about → 소개 페이지, /cart → 장바구니

Endpoint

엔드포인트

API에서 특정 기능에 접근하는 주소 한 칸.

예) /api/orders = 주문 목록을 주는 창구

Request / Response

요청·응답

화면이 서버에 "이거 줘/해줘"라고 보내고(요청), 서버가 결과를 돌려주는(응답) 한 쌍의 대화.

예) 검색 입력(요청) → 결과 목록(응답)

Status Code

상태 코드

요청이 잘됐는지 숫자로 알려주는 응답 신호. 200 성공, 404 없음, 500 서버 오류.

예) 403 = 권한 없음, 401 = 로그인 필요

Server vs Client Side

서버·클라이언트 처리

계산·검증을 사용자 기기에서 하느냐(클라이언트), 서버에서 하느냐의 구분. 보안은 서버에서.

원칙) 중요한 검증은 반드시 서버에서

Webhook

웹훅

어떤 일이 생기면 자동으로 다른 서비스에 알려주는 통보 장치.

예) 결제 완료되면 자동으로 내 앱에 알림

Third-party Service

외부 서비스 연동

결제·이메일·지도처럼 남이 만든 기능을 내 앱에 끌어다 쓰는 것.

예) 결제는 Stripe, 메일은 Resend 연결

Build / Bundle

빌드·번들

흩어진 코드를 브라우저가 빠르게 읽을 하나의 묶음으로 포장하는 과정.

예) "빌드 실패" = 배포 직전 포장 단계 에러

CDN

씨디엔

전 세계에 흩어진 서버에 콘텐츠를 미리 복사해 가까운 곳에서 빠르게 주는 배달망.

예) 이미지·파일을 더 빨리 불러오게

Monolith vs Microservice

단일·분리 구조

앱을 한 덩어리로 만드느냐, 기능별로 잘게 쪼개 따로 굴리느냐의 설계 방향.

비유) 한 채 큰 집 vs 여러 작은 건물

Environment

환경 (dev/prod)

개발용(dev)·테스트용(staging)·실서비스용(prod)처럼 용도별로 나눠둔 실행 공간.

예) 개발에서 실험 → 운영에 배포

Authentication

인증 (Authn)

"너 누구야?"를 확인하는 단계. 로그인으로 신원을 증명한다.

비유) 건물 입구에서 신분증 확인

Authorization

인가·권한 (Authz)

"너 이거 해도 돼?"를 판단하는 단계. 인증과 다른 개념이다.

비유) 들어온 사람 중 누가 어느 층에 들어갈 수 있나

Session / Token (JWT)

세션·토큰

로그인 후 "나 인증된 사람"임을 증명하는 임시 출입증. 매번 다시 로그인 안 하게 해준다.

비유) 입장 후 손목에 채워주는 밴드

OAuth / SSO

소셜 로그인

구글·카카오 같은 외부 계정으로 대신 로그인. 비밀번호를 내 앱이 안 가져도 된다.

예) "Google로 계속하기" 버튼

Role

역할

사용자를 묶는 등급. 역할마다 할 수 있는 일이 다르다.

예) admin / 일반회원 / 게스트

Password Hashing

비밀번호 해싱

비밀번호를 원문 그대로 저장하지 않고 되돌릴 수 없게 변환해 보관하는 것.

원칙) 비번은 절대 평문 저장 금지 — 인증 서비스에 맡기기

2FA / MFA

2단계 인증

비밀번호에 더해 문자·앱 코드 등 두 번째 확인을 요구하는 보안.

예) 로그인 후 문자로 온 6자리 추가 입력

Permission

권한·퍼미션

특정 동작을 할 수 있는지 정해둔 개별 허가. 역할에 묶이기도 한다.

예) "삭제 권한", "읽기 전용 권한"

Access / Refresh Token

액세스·리프레시 토큰

짧게 쓰는 출입증(액세스)과, 그게 만료되면 새로 발급받는 열쇠(리프레시).

예) 자동 로그인 유지가 가능한 이유

Cookie

쿠키

브라우저에 저장돼 로그인 상태 등을 기억하게 하는 작은 데이터.

예) 다시 방문해도 로그인이 유지됨

Sign up / Sign in

가입·로그인

계정을 새로 만드는 것(가입)과 기존 계정으로 들어가는 것(로그인)의 구분.

주의) 둘은 다른 화면·다른 처리

Magic Link

매직 링크

비밀번호 없이 이메일로 받은 링크를 눌러 로그인하는 방식.

예) "로그인 링크를 메일로 보냈어요"

Logout / Expiry

로그아웃·만료

출입증을 버리거나(로그아웃), 시간이 지나 자동으로 무효가 되는 것(만료).

예) 오래 두면 다시 로그인하라고 뜨는 이유

Protected Route

보호된 경로

로그인한 사람만 들어갈 수 있게 막아둔 화면.

예) 비로그인 시 마이페이지 접근 차단

Database

데이터베이스

정보를 표(테이블) 형태로 저장하고 빠르게 찾게 해주는 보관소.

비유) 잘 정리된 거대 엑셀 + 검색 기능

Table / Row / Column

테이블·행·열

데이터를 담는 표, 한 건의 기록(행), 항목 종류(열).

예) users 테이블 / 한 행 = 한 사용자 / 열 = 이름·이메일

RLS

행 수준 보안

"각 사용자는 자기 데이터만 본다"를 DB 차원에서 강제하는 규칙. 프론트가 뚫려도 막아준다.

예) A는 A의 주문만, B는 B의 주문만 조회 가능

CRUD

크루드

데이터로 할 수 있는 네 가지 기본 동작: 생성·조회·수정·삭제.

예) 게시글 쓰기/보기/고치기/지우기

Environment Variable

환경변수·시크릿

API 키·비밀번호처럼 코드에 직접 안 쓰고 따로 숨겨두는 설정값.

원칙) 비밀 키를 코드/깃에 노출하면 안 됨

Public / Private Key

공개·비밀 키

화면(프론트)에 노출돼도 되는 키와, 절대 서버 밖으로 나가면 안 되는 키의 구분.

주의) service_role 같은 비밀 키는 프론트에 두면 안 됨

Schema

스키마

데이터를 어떤 표·열·형식으로 담을지 정해둔 설계도.

예) users 표엔 이름(글자)·나이(숫자) 열

Relation / Foreign Key

관계·외래 키

표끼리 연결하는 고리. "이 주문은 이 사용자 것"처럼 묶어준다.

예) 주문 표가 사용자 표를 가리킴

Query

쿼리·질의

데이터베이스에 "이런 조건의 데이터 줘"라고 묻는 요청.

예) "지난주 가입자만 뽑아줘"

Index

인덱스

검색을 빠르게 하려고 미리 만들어둔 색인. 책 뒤 찾아보기 같은 것.

예) 이메일로 자주 찾으면 이메일에 인덱스

JSON

제이슨

프로그램끼리 데이터를 주고받을 때 쓰는, 사람도 읽을 수 있는 표기법.

예) {"name":"민수","age":30}

Backup

백업

데이터가 날아갈 때를 대비해 따로 복사해 두는 것.

원칙) 지우기 전엔 항상 백업 확인

Encryption

암호화

데이터를 가로채도 못 읽게 잠가두는 것. 전송 중·저장 시 모두 적용 가능.

예) https = 주고받는 내용이 암호화됨

Storage

스토리지

이미지·파일처럼 표에 안 맞는 큰 데이터를 따로 담아두는 보관소.

예) 프로필 사진·첨부파일 저장

Seed Data

시드 데이터

테스트·시작용으로 미리 넣어두는 예시 데이터.

예) 빈 화면 대신 샘플 글 몇 개 미리 채움

PII

개인정보

이름·이메일·전화처럼 개인을 식별하는 민감 정보. 다루기 신중해야 한다.

원칙) 꼭 필요한 것만 모으고 잘 보호

화면이나 콘솔에 뜬 에러를 읽을 줄 알면 AI에게 정확히 전달하고 어디를 볼지 짚을 수 있다. 메시지는 요약 말고 그대로 복사해 전달하는 게 핵심.

HTTP 상태 코드 · 서버의 응답 신호

200 OK

성공

요청이 정상 처리됐다는 신호. 문제없음.

예) 데이터를 잘 받아온 상태

301 / 302

리디렉션

요청한 주소가 다른 곳으로 옮겨졌다는 안내. 자동으로 넘어간다.

예) 옛 주소 → 새 주소로 자동 이동

400 Bad Request

잘못된 요청

보낸 데이터 형식·내용이 틀려서 서버가 거부한 것.

예) 필수 값이 빠졌거나 형식이 안 맞음

401 Unauthorized

인증 필요

"너 누구인지 모르겠다." 로그인이 안 됐거나 토큰이 만료됨.

볼 곳) 로그인 상태·토큰 만료 여부

403 Forbidden

권한 없음

"누군진 알지만 이건 못 한다." 로그인은 됐는데 권한이 부족.

볼 곳) 역할·RLS 권한 정책

404 Not Found

없음

요청한 주소·데이터가 존재하지 않는다.

볼 곳) URL·엔드포인트·ID 오타

429 Too Many

요청 과다

짧은 시간에 너무 많이 요청해 막힌 것(rate limit).

예) "잠시 후 다시 시도하세요"

500 Server Error

서버 오류

서버 쪽 코드가 터진 것. 내 화면 잘못이 아닐 때가 많다.

볼 곳) 서버 로그·백엔드 함수

503 Unavailable

일시 불가

서버가 과부하거나 점검 중이라 잠시 응답 못 함.

예) 잠시 후 다시 시도하면 풀리기도

콘솔에 자주 뜨는 에러

Syntax Error

문법 오류

괄호·따옴표·쉼표 같은 표기를 빠뜨려 코드를 못 읽는 것.

볼 곳) 에러가 가리키는 줄의 괄호·따옴표

undefined / null

값이 없음

있어야 할 값이 비어 있어서 터지는 가장 흔한 에러.

예) "cannot read property of undefined"

is not a function

함수가 아님

함수처럼 부르려 한 게 실은 함수가 아닐 때.

볼 곳) 이름 오타·불러오기(import) 누락

CORS Error

코어스 오류

브라우저가 다른 주소로의 요청을 보안상 막은 것. 서버 설정으로 풀어야 한다.

볼 곳) 서버의 허용 도메인(CORS) 설정

Failed to fetch

요청 실패

서버에 아예 닿지 못한 것. 주소·네트워크·서버 꺼짐 의심.

볼 곳) API 주소·서버 실행 여부

Unexpected token

예상 못한 토큰

읽으려던 데이터(보통 JSON)가 형식이 깨졌을 때.

예) JSON 대신 에러 페이지(HTML)가 옴

Module not found

모듈 없음

필요한 패키지가 설치 안 됐거나 경로가 틀린 것.

볼 곳) 패키지 설치(install)·경로 오타

Timeout

시간 초과

정해진 시간 안에 응답이 안 와서 끊긴 것.

볼 곳) 느린 요청·무한 루프·서버 지연

에러 읽는 법 · 습관

Read top line first

첫 줄부터

에러는 보통 첫 줄에 핵심이 있다. 길어도 위에서부터 읽는다.

팁) 메시지 + 파일명 + 줄 번호를 먼저 확인

Stack Trace

스택 트레이스

에러가 거쳐온 경로 기록. 내 코드와 관련된 줄을 찾는다.

팁) 통째로 복사해 AI에 전달

Reproduce

재현

에러가 어떤 동작에서 나는지 다시 만들어내는 것. 고치기의 출발점.

팁) "이렇게 하면 항상 난다"를 찾기

Copy, don't summarize

요약 말고 복붙

에러를 말로 바꾸지 말고 원문 그대로 전달하라. 거기에 답이 있다.

원칙) 한 글자도 빼지 말고 그대로

04 / PROMPT

AI에게 정확히 요청하는 법

같은 의도라도 어떻게 말하느냐에 따라 결과가 천차만별이다.

패턴 1 — 부품 이름으로 말한다

막연한 요청

"로그인 같은 거 만들어줘." ↓ 어떤 구조를 원하는지 명시하면

정확한 요청

"이메일/비번 인증을 Supabase Auth로 붙이고, 로그인하면 세션 토큰으로 상태를 유지해줘. 소셜 로그인은 일단 빼자."

패턴 2 — 권한·보안을 먼저 짚는다

위험한 요청

"내 데이터 화면에 다 뿌려줘." ↓ 누가 무엇을 볼 수 있는지 정하면

안전한 요청

"이 테이블에 RLS를 켜서 각 유저가 자기 행만 조회/수정하게 해줘. 비밀 키는 환경변수로 빼고 프론트엔 노출하지 마."

패턴 3 — 구조를 먼저 물어본다

바로 구현

(구조 없이 "그냥 만들어줘") ↓ 큰 그림을 먼저 그리면 길을 안 잃는다

설계 먼저

"코드 짜기 전에, 이 앱에 필요한 화면·데이터 테이블·인증 흐름을 초보자 기준으로 먼저 정리해줘. 그다음 하나씩 만들자."

06 / EXPORT

Lovable에서 GitHub로 내보내기

AI로 만든 코드를 내 것으로 가져오는 단계. 버전 관리·협업·배포의 출발점이다.

PART A — Git 연동 셋업 (계정당 한 번만)

1

Lovable Settings 열기

Lovable의 Settings(설정)로 들어간다.

2

사이드바에서 Git 선택

왼쪽 사이드바 메뉴에서 Git을 고른다.

3

GitHub 선택 후 연결 추가

GitHub를 고르고 Add Connection 버튼을 누른다.

4

계정 추가

Install on new account에서 Add Account 버튼을 누른다.

5

GitHub 데이터 사용 인가

GitHub가 데이터 접근 권한을 요청하면 인가(허락)한다. 이걸로 Lovable과 GitHub 계정 연결이 끝난다.

PART B — 프로젝트 연결 (프로젝트마다)

1

작업 중인 프로젝트 열기

GitHub로 내보낼 프로젝트를 연다.

2

Lovable 아이콘 → Settings

왼쪽 위의 Lovable 아이콘을 누른 뒤 Settings를 클릭한다.

3

Project > Git > GitHub

왼쪽 사이드바에서 Project 아래의 Git → GitHub를 선택한다.

4

내 계정 옆 Connect 클릭

리스트에 보이는, 연결된 내 GitHub 계정 옆의 Connect 버튼을 누른다. 이제 이 프로젝트가 GitHub 레포와 이어진다.

PART C — VS Code에서 Codespaces로 실행 (클라우드 개발환경)

1

확장 프로그램 설치

VS Code에서 GitHub Codespaces 확장(Extension)을 설치한다.

2

새 Codespace 만들기

VS Code 위쪽 검색창(명령 팔레트)에 아래를 입력하고 엔터.

>create new codespace

3

레포지토리 선택

방금 Lovable에서 가져온 레포지토리를 고른다.

4

devcontainer 설정 (처음 한 번만)

Copilot에게 아래처럼 요청해 개발환경 설정 파일을 만들게 한다.

Copilot에게 입력initialize devcontainer configuration for this project.
1. confirm the specs from package.json
2. make sure to install ghcr.io/devcontainers-contrib/features/bun and use bun
3. make sure to have git-lfs
4. make sure to run bun run dev -- --port {forwardedPort} after attaching to this codespace.

5

컨테이너 다시 빌드

오른쪽 아래 알림에 "dev container 설정이 바뀌었으니 다시 빌드하라"는 메시지가 뜨면 Rebuild Now 버튼을 누른다.

알림 원문: "We've noticed a change to the dev container configuration. Rebuild the container to apply them now."

6

브라우저에서 포트 열기

Codespace가 준비되면, 다시 위 검색창에 아래를 입력하고 엔터.

>Open Port in Browser

7

첫 항목 선택 → 브라우저 열림

목록에서 첫 번째 항목을 선택하면 만든 앱이 브라우저에 열린다.

한 걸음 더 — 양방향 동기화

연결 후엔 Lovable에서 바꾼 건 GitHub로 자동 반영되고, 반대로 VS Code·Cursor 등에서 기본 브랜치에 푸시한 변경도 몇 초 안에 Lovable에 나타난다. 레포 주소를 복사해 내 컴퓨터로 clone하면, 원하는 에디터에서 이어서 개발할 수 있다.

07 / DEBUG