ReactScriptExample 관련 질문
안녕하세요 강의 잘 듣고 있습니다
강의에서 index.html 부분을 설명해주실 때 최신 문법의 js를 사용하고 있어 babel이 jsx를 구버전 js로 컨버팅하는 역할을 수행한다고 설명을 해주셨는데요
node js 로 서버를 호스팅하지 않더라도 로컬 경로의 html이 크롬에서 렌더 되서 보이더라구요
브라우저는 chrome을 사용하고 있는데, 이건 그냥 최신 브라우저들이 jsx를 지원하고 있다고 이해하면 될까요?
回答 1
0
안녕하세요 한건우 님, 문의 질문 주셔서 감사합니다.
크롬을 포함한 어떠한 최신 브라우저도 JSX를 자체적으로 지원하지는 않습니다. JSX는 공식적인 자바스크립트 표준 문법이 아니기 때문입니다. 그럼에도 불구하고 Node.js 서버 없이 로컬 환경의 크롬에서 화면이 성공적으로 렌더링될 수 있었던 이유는 작성하신 아래의 코드 내에 포함된 Babel 스크립트 덕분입니다.
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello React with Babel</title>
<!-- React와 ReactDOM 불러오기 -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Babel 불러오기 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!-- JSX 문법을 사용하기 위해 type="text/babel" 지정 -->
<script type="text/babel">
const element = <h1>Hello, React with Express and Babel!</h1>;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);
</script>
</body>
</html>
위 코드를 살펴보시면 <head> 태그 내에서 React와 함께 Babel 스크립트를 불러오고 있으며, <body> 하단의 <script> 태그에는 타입이 type="text/babel"로 명시되어 있는 것을 확인할 수 있습니다. 브라우저가 HTML 문서를 읽어 내려갈 때 이 Babel 스크립트가 실행되며, 선언된 블록 안의 JSX 코드를 브라우저가 이해할 수 있는 순수 자바스크립트 코드로 실시간 변환해 줍니다. 즉, 브라우저가 JSX를 직접 이해한 것이 아니라 브라우저 위에서 동작하는 Babel이 JSX를 번역하여 렌더링 엔진에 전달해 주었기 때문에 정상적으로 화면이 나타난 것입니다.
다만 엔진 설계자의 관점에서 보았을 때, 이처럼 HTML 파일에 직접 Babel을 불러와 사용하는 런타임 컴파일 방식은 로컬에서의 간단한 테스트 목적에만 적합합니다. 사용자가 웹 페이지에 접속할 때마다 브라우저에서 무거운 컴파일 과정을 거치게 되면 렌더링 성능에 치명적인 영향을 주기 때문입니다. 따라서 실제 프로덕션 환경에서는 빌드 도구를 활용해 개발 단계에서 미리 컴파일을 완료하고, 최적화된 순수 자바스크립트 결과물만을 브라우저로 전달하는 아키텍처를 채택하게 됩니다.
이번 답변이 렌더링의 본질을 이해하는 데 도움이 되셨기를 바라며, 앞으로도 강의를 들으시며 궁금한 점이 있으시다면 언제든 질문 남겨주시길 바랍니다.
추가로, 현재 수강생분들을 대상으로 최대 할인 쿠폰을 전달드리고 있습니다. 쿠폰 지급이 필요하시다면 jeony0535@naver.com으로 이메일 한 통 부탁드립니다!
Editor Component의 최적화 불가능 이슈
0
7
1
Cursor 창이 수업 내용과 달라요.
0
5
2
Git 버젼 상이
0
5
1
Supabase MCP 관련 질문입니다
0
6
1
에러핸들링- rootlayout에 관하여
0
5
1
뉴스페이퍼 테마 관련
0
10
1
useCallback ⊂ useMemo
0
11
2
지우지 말아야할걸 지운상태로 저장해버렸어요....
0
8
1
강의 내용 누락
0
7
0
24번 수업에 나온 창은 무슨 프로그램인가요
0
13
1
Desktop모드-header영역 제작에서 제공해드린 폰트와 이미지
0
8
1
클로드 로그인 후 승인창이 안떠요
0
11
1
깃허브 저장소를 어디에 첨부하셨나요?
1
14
1
61강 claude.local.md 변경사항 관련 질문
0
15
3
코드 줄바꿈
0
13
2
nestjs 강의는 없나요??
1
14
2
스타터 저장소
1
17
1
vs code 프로그램 동기화 가능여부
0
19
1
What is Rxjs
0
13
1
라이브러리 설치 질문
0
18
2
linter 질문
0
20
2
github
0
31
2
react-fetch -2 (loading) 에러
0
28
2
state 객체로 묶기
0
67
1