수코딩의 조언
main.tsx 파일을 보면 import 문 뒤이 세미콜론(;)이 없습니다. 이처럼 자바스크립트나 타입스크립트로 작성한 코드에서 import 문 뒤에 세미콜론을 붙이지 않아도 오류가 발생하지 않습니다. 자바스크립트의 Automatic Semicolon Insertion(ASI) 기능 덕분에 세미콜론을 안 써도 웹 브라우저나 Node.js가 코드를 해석할 때 자동으로 보완해주기 때문입니다. 하지만 ECMAScript 표준(ES6)에서는 import 문 뒤에 세미콜론을 붙이는 것이 문법적으로 권장됩니다. 즉, 기술적으로는 세미콜론을 생략해도 해석되지만, 가독성과 일관성을 위해 붙이는 것을 권장합니다. 이 책에서도 세미콜론을 붙이는 것으로 통일합니다.
리액트 애플리케이션의 전체 실행 과정을 정리하면 다음과 같습니다.
1. npm run dev로 개발 서버를 실행합니다.
2. 개발 서버는 index.html 파일을 엽니다.
3. index.html 파일은 main.tsx 파일을 불러옵니다.
4. main.tsx 파일에서 App 컴포넌트를 읽어 실행합니다.
5. App 컴포넌트가 웹 브라우저 화면에 표시됩니다.
그림 1-34 리액트 애플리케이션의 실행 과정(요약)