자주 묻는 질문 | 바코사전

Question 1

바이브 코딩 사전은 어떤 순서로 보면 좋나요?

Accepted Answer

AI 코딩 도구, 코드 관리, 배포, 보안 순서로 보면 실제 작업 흐름과 가장 비슷합니다. 처음부터 모든 용어를 외우려고 하기보다, 실제로 앱을 만드는 순서에 맞춰 읽는 편이 이해가 빠릅니다. 먼저 클로드 코드(Claude Code), Cursor(커서), LLM처럼 작업을 도와주는 AI 도구를 이해하고, 그 다음 Git과 GitHub(깃허브)로 변경사항을 관리하는 흐름을 잡으면 됩니다. 그 다음에는 빌드(Build), 배포(Deploy), 버셀(Vercel)을 보면 로컬에서 만든 결과물이 어떻게 실제 URL이 되는지 이어집니다. 마지막으로 API 키(API Key), 토큰(Token), 환경변수(Environment Variable)를 보면 외부 서비스를 안전하게 붙이는 방법을 이해할 수 있습니다. 즉, 추천 순서는 `AI 도구 -> 코드 관리 -> 배포 -> 보안 -> 웹 기본`입니다. 모르는 용어가 나오면 관련 개념을 따라가며 돌아오는 방식이 가장 좋습니다.

Question 2

Git과 GitHub(깃허브)는 뭐가 달라요?

Accepted Answer

Git은 변경 이력 관리 도구이고, GitHub(깃허브)는 Git 저장소를 온라인에서 공유하고 연결하는 플랫폼입니다. Git은 내 컴퓨터 안에서도 동작하는 버전 관리 도구입니다. 파일이 언제 어떻게 바뀌었는지 기록하고, 필요하면 이전 상태로 돌아가거나 branch를 만들어 실험할 수 있게 해줍니다. GitHub(깃허브)는 Git으로 관리하는 저장소(Repository)를 온라인에 올려두는 서비스입니다. 팀원과 코드를 공유하고, PR로 리뷰를 받고, 버셀(Vercel) 같은 배포 서비스와 연결할 수 있습니다. 비유하면 Git은 변경 이력을 적는 노트이고, GitHub(깃허브)는 그 노트를 온라인에 올려 협업하고 자동화와 연결하는 작업 공간입니다.

Question 3

.env 파일은 GitHub(깃허브)에 올려도 되나요?

Accepted Answer

보통 올리면 안 됩니다. API 키(API Key)나 토큰(Token) 같은 비밀값이 들어갈 수 있기 때문입니다. .env 파일은 로컬 개발 환경에서 환경변수(Environment Variable)를 편하게 넣기 위한 파일입니다. 여기에 API 키(API Key), 데이터베이스 주소, 토큰(Token) 같은 민감한 값이 들어가는 경우가 많습니다. 이 파일을 GitHub(깃허브)에 올리면 저장소를 볼 수 있는 사람이 해당 비밀값을 볼 수 있습니다. 공개 저장소라면 검색 엔진이나 자동 수집 도구에 노출될 가능성도 있습니다. 대신 `.env.example`처럼 값은 비워두고 필요한 변수 이름만 적은 예시 파일을 올리는 방식이 좋습니다. 실제 값은 로컬 `.env`나 버셀(Vercel)의 환경변수 설정에 따로 넣습니다.

Question 4

빌드(Build)와 배포(Deploy)는 뭐가 달라요?

Accepted Answer

빌드(Build)는 실행 가능한 결과물로 만드는 과정이고, 배포(Deploy)는 그 결과물을 사용자가 접근할 수 있게 공개하는 과정입니다. 빌드(Build)는 개발자가 작성한 소스 코드를 브라우저나 서버가 실행하기 좋은 형태로 변환하는 과정입니다. Astro, Next.js, React 프로젝트에서는 이 단계에서 HTML, CSS, JavaScript 묶음이나 서버 실행 파일이 만들어집니다. 배포(Deploy)는 빌드된 결과물을 실제 사용자가 접속할 수 있는 환경에 올리는 과정입니다. 버셀(Vercel) 같은 플랫폼은 GitHub(깃허브)에서 코드를 가져와 빌드하고, 성공하면 공개 URL에 배포합니다. 둘은 이어져 있지만 같은 말은 아닙니다. 빌드가 실패하면 배포할 결과물이 없고, 빌드가 성공해도 환경변수(Environment Variable)나 라우팅 설정 때문에 배포된 사이트가 정상 동작하지 않을 수 있습니다.

Question 5

AI는 왜 md 파일을 자주 쓰나요?

Accepted Answer

md 파일은 사람이 읽기 쉽고 AI가 구조를 파악하기 쉬운 가벼운 문서 형식이라 개발 문서와 작업 지시문에 잘 맞습니다. md 파일은 마크다운(Markdown) 파일을 말합니다. 일반 텍스트처럼 가볍게 열 수 있으면서도 `# 제목`, `- 목록`, 링크, 코드블록처럼 문서 구조를 표현할 수 있습니다. AI 입장에서는 md 파일이 특히 다루기 쉽습니다. 문서 안에 제목, 목록, 코드 예시, 설명이 텍스트로 선명하게 남아 있어서 내용을 읽고 요약하거나 수정하기 좋습니다. 사람도 HTML이나 워드 파일보다 구조를 빠르게 훑을 수 있습니다. 그래서 README, 개발 문서, 기획 메모, 블로그 초안, PRD, AI에게 줄 작업 지시문에 md 파일이 자주 쓰입니다. 코드 저장소 안에서 Git으로 변경 이력을 관리하기도 편합니다. 한마디로 md 파일은 사람과 AI가 함께 읽고 고치기 좋은 문서 형식입니다.

Question 6

데이터베이스와 엑셀은 뭐가 다른가요?

Accepted Answer

엑셀은 사람이 직접 표를 보고 정리하기 좋은 도구이고, 데이터베이스는 앱이 데이터를 안정적으로 저장하고 조회하기 위한 시스템입니다. 데이터베이스(Database)와 엑셀은 둘 다 데이터를 표처럼 볼 수 있다는 점이 비슷합니다. 그래서 처음에는 둘이 같은 역할처럼 느껴질 수 있습니다. 엑셀은 사람이 직접 열어서 정리하고 계산하고 공유하기 좋은 도구입니다. 예산표, 간단한 목록, 임시 정리표, 분석용 표처럼 사람이 눈으로 보고 손으로 다루는 작업에 강합니다. 데이터베이스는 웹사이트나 앱이 계속 데이터를 저장하고, 빠르게 찾고, 여러 사용자가 동시에 접근해도 안전하게 다루기 위한 시스템입니다. 회원 정보, 주문 내역, 댓글, 권한, 결제 기록처럼 서비스가 계속 기억해야 하는 데이터는 보통 데이터베이스에 둡니다. 작은 실험이나 수동 관리는 엑셀로 충분할 수 있지만, 앱에서 자동으로 읽고 쓰는 데이터라면 데이터베이스를 검토하는 편이 좋습니다.

Question 7

React는 왜 쓰나요?

Accepted Answer

React는 복잡한 화면을 컴포넌트로 나누고, 사용자 행동에 따라 바뀌는 상태를 체계적으로 다루기 위해 씁니다. React를 쓰는 이유는 화면이 커질수록 HTML과 JavaScript만으로 관리하기가 어려워지기 때문입니다. 버튼, 카드, 검색창, 목록, 모달처럼 반복되는 화면 조각이 많아지면 구조가 금방 복잡해집니다. React에서는 이런 화면 조각을 컴포넌트(Component)로 나눕니다. 같은 카드나 버튼을 여러 곳에서 재사용할 수 있고, 화면의 역할을 파일과 함수 단위로 분리하기 쉬워집니다. 또 사용자가 클릭하거나 입력했을 때 화면 상태가 바뀌는 흐름을 더 체계적으로 다룰 수 있습니다. 검색어, 필터, 로그인 상태, 장바구니, 대시보드 데이터처럼 바뀌는 값이 많을수록 React의 장점이 커집니다. 단순한 소개 페이지나 아주 작은 화면은 HTML, CSS, JavaScript만으로도 충분합니다. 하지만 로그인, 검색, 필터, 댓글, 관리자 화면처럼 상태와 반복 UI가 많아지면 React가 편해집니다.