VIBECODING 365 / DICTIONARY
비동기/어웨이트
Async/Await
DEFINITION
정의
서버 요청, 파일 읽기, 타이머처럼 결과가 바로 오지 않는 작업을 순서대로 읽히는 코드처럼 작성하게 해 주는 JavaScript 문법이다. async 함수 안에서 await를 사용하면 Promise가 끝날 때까지 다음 줄 실행을 기다린다. 바이브 코딩 초보자는 '데이터가 아직 오기 전에 화면이 먼저 그려지는 문제'를 자주 만나는데, async/await를 이해하면 로딩 상태, 에러 처리, 재시도 흐름을 더 안전하게 설계할 수 있다. 단, await는 실패할 수 있으므로 try/catch나 에러 UI와 함께 써야 한다.
ENGLISH
Async/Await
EXAMPLE
Q&A 목록 컴포넌트에서 const questions = await fetch('/api/questions').then(r => r.json())처럼 서버 데이터를 받은 뒤 카드 목록을 렌더링한다.
관련
이어서 볼 문서
RELATED TERMS
연관 용어
Document Object Model (DOM)
웹 문서를 노드 트리로 다루는 플랫폼 중립 모델이다. WHATWG DOM 표준이 이벤트, 작업 중단, 노드 트리를 정의하며, 자바스크립트 언어 자체는 아니다.
프론트엔드·UI 핫 리로드Hot Reload
코드 변경 시 전체 앱을 재시작하지 않고 변경된 부분만 실시간으로 브라우저/앱에 반영하는 개발 기능이다. Hot Module Replacement(HMR)라고도 불리며, 바이브 코딩에서 핵심적인 피드백 루프를 제공한다. AI가 코드를 수정할 때마다 브라우저에서 즉시 결과를 확인할 수 있으므로, '프롬프트 → 코드 생성 → 즉시 시각적 확인'이라는 빠른 반복 주기가 가능하다. 전통적 개발에서는 코드 수정 → 빌드 → 브라우저 새로고침 → 상태 재설정이라는 지루한 과정을 거쳤지만, 핫 리로드는 앱의 현재 상태(로그인 상태, 입력된 폼 데이터 등)를 유지한 채 변경된 부분만 교체하므로 개발 경험이 극적으로 개선된다. Next.js(React), Vite, Remix 등 현대 웹 프레임워크는 핫 리로드를 기본 제공하며, Bolt.new는 이 기능을 활용하여 AI가 코드를 작성하는 동시에 라이브 프리뷰를 실시간 업데이트한다. React Native에서는 Expo Go를 통해 모바일 기기에서도 핫 리로드가 가능하다.
프론트엔드·UI 테일윈드 CSSTailwind CSS
Adam Wathan이 2017년에 만든 유틸리티 퍼스트(utility-first) CSS 프레임워크로, 미리 정의된 작은 CSS 클래스들을 HTML에 직접 조합하여 스타일을 구성하는 방식이다. 전통적 CSS가 '.login-button { background: blue; padding: 8px 16px; ... }'처럼 별도 파일에 클래스를 정의하는 반면, Tailwind는 '<button className="bg-blue-500 py-2 px-4 rounded">'처럼 HTML 안에서 바로 스타일을 적용한다. 바이브 코딩에서 AI가 가장 선호하는 스타일링 방식으로, 그 이유는 HTML과 스타일이 같은 파일에 있어 AI가 컨텍스트를 파악하기 쉽고, 클래스 이름이 스타일 값을 직접 설명하므로(bg-blue-500 = 파란 배경) AI가 의미를 이해하기 쉬우며, 별도의 CSS 파일을 관리할 필요가 없어 멀티파일 수정이 줄어들기 때문이다. v0, Bolt.new 등의 AI UI 빌더가 기본 스타일링 시스템으로 Tailwind를 채택하고 있으며, shadcn/ui 같은 인기 컴포넌트 라이브러리도 Tailwind 기반이다.