react, js

자바스크립트 실행 환경

자바스크립트는 원래 브라우저에서 동작하는 언어로 시작했습니다.
1990년대 웹페이지를 더 동적으로 만들기 위해 탄생했죠.

하지만 지금은 Node.js, Deno 같은 런타임 덕분에 브라우저 밖에서도 실행할 수 있습니다.
심지어 리액트 네이티브, Capacitor 같은 기술을 활용하면 자바스크립트로 모바일 앱도 만들 수 있습니다.

이 강의에서는 브라우저 기반 리액트에 집중하지만,
자바스크립트가 다양한 환경에서 실행되는 범용 언어라는 점은 꼭 알아두면 좋습니다.

---

브라우저에서 자바스크립트 추가 방법

웹사이트에 자바스크립트를 추가하는 방법은 크게 두 가지입니다:

1. 인라인 방식
   • script 태그 안에 직접 작성
   • 관리가 어려워서 작은 테스트 코드에만 사용
2.  
   <script> console.log("Hello JS"); </script>
3. 외부 파일 불러오기 (권장)
   • 별도의 .js 파일에 코드 작성 후 import
   • 유지보수와 확장이 훨씬 쉽습니다
4.  
   <script src="assets/scripts/app.js"></script>

추가 속성:

• defer : HTML 파싱이 끝난 후 스크립트를 실행 (DOM 요소 보장)
• type="module" : 모듈 시스템 활성화 → import/export 문법 사용 가능

---

리액트 프로젝트에서 script 태그는?

일반 자바스크립트 프로젝트에서는 직접 script 태그를 추가했지만,
리액트 프로젝트에서는 빌드 프로세스가 자동으로 처리합니다.

👉 그래서 index.html을 열어봐도 script 태그가 보이지 않습니다.
대신 개발 서버가 코드 변환 후 script 태그를 HTML에 삽입합니다.

---

빌드 프로세스가 필요한 이유

1. JSX 변환
   • 리액트 코드는 HTML 같은 문법(JSX)을 사용합니다.
   • JSX는 브라우저가 직접 이해할 수 없으므로 빌드 과정에서 일반 자바스크립트로 변환해야 합니다.
2. 최적화 (Production Ready)
   • 불필요한 공백, 긴 변수명을 압축/축소(minify) → 더 빠른 로딩 속도
   • 코드 분할, 의존성 관리 등을 자동으로 처리

이 과정은 react-scripts, vite, webpack 같은 툴이 담당하며,
Node.js가 설치되어 있어야 작동합니다.

---

정리

• 자바스크립트는 브라우저 안팎에서 실행할 수 있는 유연한 언어다.
• 브라우저에서 사용할 때는 script 태그로 추가한다.
• 리액트 프로젝트는 빌드 프로세스를 통해 JSX 변환 및 코드 최적화를 한다.
• 따라서 직접 script 태그를 관리하지 않아도 된다.