안전망 설치하기: 타입, 인터페이스, 그리고 Null 처리

자유로움의 대가와 타입스크립트의 등장

원래 자바스크립트에서는 변수를 하나 만들면 그 안에 숫자를 넣었다가, 문자를 넣었다가, 배열을 넣어도 아무런 에러가 나지 않습니다. 이 유연함은 처음 코드를 짤 때는 편하지만, 시스템이 커지고 복잡해지면 거대한 지뢰밭으로 변합니다.

AI도 실수한다: 명확한 규칙의 필요성

AI에게 "사용자 프로필 컴포넌트를 만들어줘"라고 요청했다고 가정해 봅시다. AI가 짠 코드 내부에서는 사용자의 나이(age)가 '숫자'라고 예상하고 수학 계산을 하고 있는데, 막상 서버에서 '이십세'라는 '문자' 데이터를 보내준다면 어떻게 될까요? 코드는 즉시 고장 나고 화면은 에러를 뿜어낼 것입니다. AI가 코드를 아무리 잘 작성하더라도, 외부에서 들어오는 데이터의 생김새를 확신할 수 없기 때문입니다.

타입(Type)이라는 튼튼한 안전망

이러한 문제를 해결하기 위해 등장한 것이 자바스크립트에 '엄격한 규칙'을 덧붙인 타입스크립트(TypeScript)입니다. 타입스크립트는 코드를 작성할 때 "이 상자(변수)에는 오직 숫자만 들어올 수 있다", "이 함수는 반드시 문자를 반환해야 한다"라고 이름표 옆에 경고문을 붙이는 것과 같습니다.

이렇게 타입을 미리 지정해 두면, 에러가 발생할 만한 코드를 짜는 즉시 화면에 빨간 줄이 그어지며 경고를 보냅니다. 바이브 코딩을 할 때 AI가 타입스크립트로 코드를 작성하도록 유도하면, AI 스스로가 자신이 짠 코드의 앞뒤 맥락이 맞는지 검증하게 되어 코드의 품질과 안정성이 비약적으로 상승합니다.

데이터의 설계도, 인터페이스 (Interface)

기본적인 숫자(Number)나 문자(String) 외에, 프론트엔드에서는 주로 객체(Object) 형태의 데이터를 다룹니다. 사용자 정보, 게시글 정보, 상품 정보 등은 모두 수많은 속성이 묶여 있는 객체입니다. 이때 이 객체가 구체적으로 어떻게 생겼는지 미리 약속하는 설계도를 인터페이스(Interface) 또는 타입(Type Alias)이라고 부릅니다.

객체의 생김새를 미리 약속하기

서버에서 사용자 데이터를 받아온다고 할 때, 우리는 AI에게 "User라는 데이터 설계도를 만들어줘. 이 안에는 반드시 고유 ID(숫자), 이름(문자), 이메일(문자)이 포함되어야 해"라고 명확히 지시해야 합니다. 설계도가 튼튼해야 이 데이터를 사용하는 모든 컴포넌트가 혼란 없이 작동하기 때문입니다.

// User 데이터의 생김새(설계도)를 약속합니다.
interface User {
  id: number;           // 무조건 숫자여야 함
  name: string;         // 무조건 문자여야 함
  email: string;        // 무조건 문자여야 함
  profileImage?: string; // ? 표시: 이미지가 있을 수도 있고, 없을 수도 있음
}

가장 무서운 적, 데이터가 없을 때 (Null & Undefined)

프론트엔드 앱이 죽는(크래시) 원인의 절반 이상은 바로 "데이터가 올 줄 알았는데, 빈 껍데기가 왔다"는 상황에서 발생합니다. 컴퓨터는 없는 데이터를 억지로 꺼내 쓰려고 할 때 치명적인 에러를 뱉어냅니다. 이 '빈 껍데기' 상태를 자바스크립트에서는 `null` 또는 `undefined`라고 부릅니다.

옵셔널 체이닝 (Optional Chaining)과 방어적 코딩

서버 통신이 느려서 아직 데이터가 안 왔거나, 애초에 데이터가 없는 경우를 방어해야 합니다. AI에게 코드를 맡길 때 가장 강조해야 하는 것이 바로 이 부분입니다. "데이터가 없을 때 에러가 나지 않도록 안전하게 처리해 줘"라고 요구하는 것이 바이브 코딩의 핵심 방어술입니다.

이를 위한 가장 세련된 도구가 옵셔널 체이닝(`?.`)입니다. 객체 안의 데이터를 꺼낼 때 마침표(`.`) 대신 물음표와 마침표(`?.`)를 찍으면, "앞의 데이터가 혹시 비어있으면 에러를 내지 말고 조용히 넘어가라"는 뜻이 됩니다.