개발 도구 생태계

JavaScript와 TypeScript

웹의 프로그래밍 언어는 JavaScript다. 브라우저가 이해하는 유일한 프로그래밍 언어이고, 서버에서도 쓸 수 있다(Node.js). 웹 앱을 만든다면 결국 JavaScript를 쓰게 된다.

TypeScript는 JavaScript에 타입(type)을 추가한 것이다. “이 변수는 숫자다”, “이 함수는 문자열을 받아서 배열을 돌려준다” — 이런 규칙을 미리 선언해두면 실수를 잡아준다.

// JavaScript — 아무거나 넣어도 에러 안 남
let userName = "김상담";
userName = 42;  // 문제 없음 → 나중에 버그

// TypeScript — 타입이 안 맞으면 빨간 줄
let userName: string = "김상담";
userName = 42;  // ❌ 에러! string에 number 불가

바이브 코딩에서 TypeScript가 중요한 이유가 있다. AI가 코드를 짤 때 TypeScript를 쓰면, AI 스스로도 타입에 맞는 코드를 생성하게 된다. 타입이 일종의 “계약서” 역할을 해서, AI가 엉뚱한 데이터를 집어넣는 실수를 줄여준다.

변수, 함수, 객체 — 프로그래밍의 세 기둥

코드를 직접 짜지 않더라도, AI가 만든 코드를 읽으려면 세 가지만 알면 된다.

React — 화면을 만드는 도구

React는 Meta(Facebook)가 만든 UI 라이브러리다. 웹 화면을 컴포넌트(component)라는 조각으로 나눠서 만든다. 버튼 하나, 카드 하나, 네비게이션 바 하나가 각각 컴포넌트다. 레고 블록처럼 조립해서 화면을 구성한다.

// Button 컴포넌트
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

// 여러 곳에서 재사용
<Button label="저장" onClick={save} />
<Button label="취소" onClick={cancel} />
<Button label="삭제" onClick={remove} />

React의 핵심 개념은 상태(state)다. 버튼을 클릭하면 숫자가 올라가고, 입력창에 글을 쓰면 실시간으로 반영되는 것 — 이런 “변하는 데이터”를 React에서는 state로 관리한다. Ch.4에서 state management를 자세히 다룬다.

Next.js — React를 프로덕션으로

React만으로는 프로덕션 앱을 만들기 어렵다. 라우팅, SEO, 서버 사이드 렌더링, 이미지 최적화 등을 직접 구현해야 한다. Next.js는 Vercel이 만든 React 프레임워크로, 이 모든 것을 기본으로 제공한다.

npm과 yarn — 패키지 관리자

앱을 만들 때 모든 것을 처음부터 만들 필요가 없다. 다른 개발자들이 이미 만들어놓은 코드 조각들을 가져다 쓸 수 있다. 이 코드 조각을 패키지(package) 또는 라이브러리(library)라 부르고, 이것들을 설치하고 관리하는 도구가 패키지 관리자다.

npm(Node Package Manager)은 Node.js에 기본으로 딸려오는 패키지 관리자다. yarn은 Facebook이 만든 대안으로, npm보다 빠르고 안정적이다. 기능은 거의 같다. 중요한 건 하나의 프로젝트에서 둘을 섞어 쓰면 안 된다는 것이다.

package.json — 앱의 이력서

모든 Node.js 프로젝트의 루트에는 package.json 파일이 있다. 이 파일에 앱 이름, 버전, 사용하는 패키지 목록, 실행 명령어가 모두 적혀 있다. AI가 새 패키지를 설치하면 이 파일이 자동으로 업데이트된다.

lock 파일 — 버전을 고정하는 자물쇠

yarn.lock 또는 package-lock.json은 정확히 어떤 버전의 패키지를 사용하는지 기록한다. 이 파일이 없으면 다른 컴퓨터에서 설치할 때 다른 버전이 깔려서 버그가 생길 수 있다. 이 파일은 절대 삭제하지 마라.