[요약] Part 1. AI 코드를 읽기 위한 JS/TS 필수 지식

데이터의 저장과 흐름 제어: 변수, 함수, 모듈

프론트엔드의 데이터 흐름을 통제하는 최소 단위인 변수, 함수, 모듈의 핵심 규칙입니다.

안전한 데이터 보관함, const와 let

• 기본은 `const`: 절대로 변하지 않아야 하는 값(설정, 환경 변수 등). 의도치 않은 변경 버그 차단.
• 예외적인 `let`: 데이터 카운터, 반복문 등 갱신이 필수적인 경우에만 제한적 사용.
• 코드 읽기 팁: AI 코드에서 `let`을 발견하면 "값이 언제, 어떻게 바뀌는지" 추적할 것.

코드의 재사용과 조립, 함수와 화살표 문법

• 함수의 목적: 반복되는 로직을 묶어 재사용하는 블록.
• 화살표 함수(Arrow Function): React 환경에서 주로 쓰이는 `=>` 문법 형태.
• 코드 분석 3요소: AI 생성 함수를 파악할 때는 다음 세 가지만 점검하세요.

1. 입력(매개변수): 무엇을 받는가?
2. 처리(내부 로직): 어떤 과정을 거치는가?
3. 출력(반환값): 최종적으로 무엇을 내보내는가?

파일 간의 협력, import와 export

• 모듈 시스템: 거대한 코드를 여러 파일로 나누어 필요한 곳에서 블록처럼 조립.
• `export`: 내 코드를 외부 파일에서 쓸 수 있도록 내보내기.
• `import`: 다른 파일의 코드를 현재 파일로 불러오기.

수많은 데이터를 한 번에 다루기: 배열과 객체

상품 목록, 게시판, 프로필 등 방대한 데이터를 담기 위해 필수적인 자료구조와 메서드입니다.

데이터의 집합체, 배열과 객체

• 배열 (Array, `[]`): 일정한 순서대로 나열한 데이터 목록 (예: 장바구니 리스트).
• 객체 (Object, `{}`): 순서 대신 특정 속성에 명확한 이름표(Key)를 붙여 구조화한 데이터 (예: 유저 프로필).

배열을 요리하는 강력한 마법, map과 filter

• `map`: 배열 데이터를 하나씩 꺼내 가공한 후, 동일한 길이의 새로운 배열 생성 (예: 데이터 목록을 UI 카드로 일괄 변환).
• `filter`: 배열 중 특정 조건을 만족하는 데이터만 체로 걸러내어 새로운 배열 생성 (예: 1만원 이하 상품 필터링).

const products = [{ name: '사과', price: 1000 }];
const productNames = products.map(function(item) { return item.name; });
const cheapProducts = products.filter(function(item) { return item.price <= 1500; });

원본 데이터를 훼손하지 않으면서(불변성 유지) 새로운 결과를 만들어내는 것이 map과 filter의 핵심 철학입니다.

기다림을 우아하게 처리하기: 비동기 통신

서버의 응답을 기다리는 동안 화면이 멈추지 않도록 처리하는 기술입니다.

비동기(Asynchronous)의 원리

• 멈춤 없는 실행: 데이터를 서버에 요청한 후 무작정 멈춰있지 않고, 스크롤·클릭 등 다른 화면 그리기 작업을 계속 진행.
• 응답 도착 시 처리: 서버 응답이 도착하면 그때 미뤄둔 데이터 표시 로직을 이어받아 화면에 렌더링.

async와 await, 그리고 직관적인 Promise

• `async/await`: 비동기 처리를 직관적인 동기 코드처럼 읽히게 만드는 현대 자바스크립트 문법.
• 동작 방식: 서버 응답 등 시간이 필요한 코드에 `await`를 붙여 대기시킴. (단, 화면의 다른 중요한 작업은 멈추지 않음)
• 규칙: `await`는 반드시 `async` 키워드가 붙은 함수 내부에서만 사용 가능.

async function fetchUserData() {
  // 1. 대기: 서버에 데이터 요청 후 응답이 올 때까지 대기
  const response = await fetch('/api/user');
  
  // 2. 파싱: 도착한 응답 데이터를 JSON으로 파싱하며 대기
  const data = await response.json();
  
  // 3. 반환: 최종적으로 가공된 데이터 반환
  return data;
}

AI의 치명적 실수를 막는 방패: 타입과 Null 방어

AI가 유발할 수 있는 데이터 구조 오류나 빈 값(Null) 예외 상황을 원천 차단하는 기법입니다.

완벽한 데이터 명세서, Interface (TypeScript)

• 목적: 다룰 데이터의 형태를 엄격히 미리 정의하여 버그 예방.
• `interface`: "사용자 데이터는 이름(문자열)과 나이(숫자)를 무조건 포함한다"와 같이 약속된 규칙 생성.
• 방어 효과: 룰을 어긴 코드가 작성되면 실행 전 컴파일 단계에서 빨간 줄로 경고 표시.

옵셔널 체이닝(?. )과 Nullable 방어

• 빈 데이터 문제: 실제 환경에서는 네트워크 지연 등으로 데이터가 없거나(Null), 속성이 빈 구멍인 경우가 비일비재.
• `?.` (옵셔널 체이닝): 텅 빈 객체 속성에 접근할 때 앱이 죽는(크래시) 것을 막는 안전장치.
• 동작: `user?.profile?.avatar` 처럼 쓰면 값이 없을 때 에러 대신 `undefined`를 조용히 반환.