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으로 이메일 한 통 부탁드립니다!
/permission > workspace 등록 내용 settings.local.json에 누락
0
6
1
npm run dev 에러
0
6
1
오랜만에 다시 공부하려고하는데 401오류가 떠요
0
6
1
자료실
1
11
2
Sort 메서드 관련 아티클
0
9
1
저는 일단 워드프레스로 블로그를 만들어 보려고
0
7
1
이미 기존에 데스크탑을 설치해서 이용하는 상황일때
0
13
0
이번강의에서 "필요한 정보만 정확하게" 부분에서요
0
9
1
Zustand의 Store 타입은 어떤 기준으로 작성하는 건가요?
0
15
2
4.1) React.js를 소개합니다 강의를 듣고 궁금한 점이 생겼습니다.
0
14
2
Cursor에서 Bash로 claude 사용하기
0
18
1
claude cli 외에 cursor에서 claude 바로 켜는 법 등..
0
20
1
cafe24에서 했다가 fastcomet으로 변경하려 하는데요 문제가 생겼습니다
0
11
2
Claude가 일부 서브에이전트를 잘 인식하지 못함
0
21
1
bash에 경고 표시가 떠요
0
15
2
문의드립니다.
0
36
2
Claude Code API키 받으려는데 무료는 안되나요?
0
32
2
WSL Ubuntu 이용 시 md 파일 생성 위치 질문
0
24
2
.claude 파일
0
28
2
html, body에 적용하는 css 스타일 질문입니다.
0
16
2
자바스크립트 입문 강의
0
16
1
playwrite 와 agent.md ?
0
26
1
Git 설치 문의
0
30
2
state 객체로 묶기
0
64
1