ReactScriptExample 관련 질문
안녕하세요 강의 잘 듣고 있습니다
강의에서 index.html 부분을 설명해주실 때 최신 문법의 js를 사용하고 있어 babel이 jsx를 구버전 js로 컨버팅하는 역할을 수행한다고 설명을 해주셨는데요
node js 로 서버를 호스팅하지 않더라도 로컬 경로의 html이 크롬에서 렌더 되서 보이더라구요
브라우저는 chrome을 사용하고 있는데, 이건 그냥 최신 브라우저들이 jsx를 지원하고 있다고 이해하면 될까요?
Answer 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으로 이메일 한 통 부탁드립니다!
install cursor command 관련
0
6
2
섹션 18 PRD generator sub agent 관련 질문입니다.
0
8
1
소스코드즘 부탁드립니다.
0
9
1
소리가 안 나네요. (이 질문은 인프런에서 하는것이 맞죠 하하)
0
15
1
MVP PRD를 Sonet5.0에서 AUTO모드로 만들었어요 결과가 맞는건지 모르겠습니다 조언부탁드립니다..
0
21
2
몽고디비 접속의 건
0
13
2
mcp 서버 설치
0
21
2
알려주세요.
0
8
1
Context engineering?
0
29
2
class 이름을 section__title이라고 짓는 것에 대해서
0
14
2
36~37강
0
22
1
해당 강의 영상이 안나옵니다.
0
31
2
vercel 등록 후 한입링크 페이지 접속 문제
0
21
1
cursor mcp 사용
0
37
2
og 관련 질문
0
22
1
타입 에러 관련 질문입니다.
1
20
1
클로드 구글 크롬 확장 프로그램 등록 문의
0
28
2
Starter kit 작업 중 질문
0
44
2
수업자료와 노션 공유 문제
0
34
3
프롬프즈 줄바꿈 문의
1
34
2
설치 후 터미널 명령어 입력 시 실행 안됌
0
49
4
문의드려요
0
41
1
안녕하세요 한번 더 문의드립니다.
0
48
4
state 객체로 묶기
0
62
1