Ch.7 코드가 돌아가는 원리
코드 실행의 흐름 — 소스코드→빌드→실행
우리가 쓴 코드는 컴퓨터가 바로 이해할 수 없습니다
TypeScript로 코드를 작성하고 저장했습니다. 그런데 브라우저는 TypeScript를 모릅니다. 코드를 실행하려면 '번역' 과정이 필요합니다.
소스코드를 작성하는 것과 실행하는 것 사이에는 보이지 않는 단계들이 있습니다. 이 과정을 모르면 빌드 에러 앞에서 막히게 됩니다.
소스코드→빌드→실행의 흐름을 이해하면 에러가 나도 당황하지 않고, AI에게 정확한 해결을 요청할 수 있습니다.
핵심 내용
인간의 언어와 컴퓨터의 언어는 다릅니다. 소스코드는 인간이 읽을 수 있는 '중간 언어'입니다.
비유: 한국어 소설을 영어 독자에게 전달하려면 번역이 필요합니다. 소스코드를 기계어로 변환하는 것도 마찬가지입니다. 우리가 쓰는 TypeScript나 JavaScript는 컴퓨터가 직접 이해하지 못하는 '인간 친화적 언어'이고, 이것을 컴퓨터가 실행할 수 있는 형태로 바꾸는 과정이 필요합니다.
이 번역 과정을 '빌드(build)'라고 부릅니다
소스코드: .ts / .js 파일 작성
빌드: 번역 + 최적화
번들: 여러 파일을 하나로 합치기
실행: 브라우저 또는 서버에서 구동
npm run dev = 개발 모드로 빌드 + 실행을 한번에 처리합니다. 코드를 수정하면 즉시 반영(Hot Reload)됩니다. npm run build = 프로덕션용 빌드입니다. 최적화가 적용되어 파일 크기가 줄어들고, 실행 속도가 빨라집니다.
바이브코더 팁 에러가 나면 에러 메시지 전체를 AI에게 복사해서 전달하세요. "에러 났어요"보다 "이 에러가 났어요: [메시지 전문]"이 100배 효과적입니다.
npm run dev는 무엇을 하는 명령인가?
TypeScript 코드는 브라우저가 직접 실행할 수 있다
코드 실행 흐름 이해 완료
핵심 용어
SyntaxError
문법 오류 — 오타, 괄호 누락, 세미콜론 빠짐 등. 가장 흔한 에러
ModuleNotFoundError
파일이나 패키지를 못 찾음 — import 경로 오류, 패키지 미설치
TypeError
데이터 타입이 맞지 않음 — 숫자에 문자열 메서드를 쓰는 등의 실수
시각 자료
핵심 정리
- 1소스코드는 인간이 읽는 '중간 언어' — 빌드를 거쳐야 실행 가능
- 2npm run dev = 개발용(즉시 반영), npm run build = 프로덕션용(최적화)
- 3에러 메시지 전체를 AI에게 전달하는 것이 가장 효과적인 디버깅 방법
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작