ReactScriptExample 관련 질문
안녕하세요 강의 잘 듣고 있습니다
강의에서 index.html 부분을 설명해주실 때 최신 문법의 js를 사용하고 있어 babel이 jsx를 구버전 js로 컨버팅하는 역할을 수행한다고 설명을 해주셨는데요
node js 로 서버를 호스팅하지 않더라도 로컬 경로의 html이 크롬에서 렌더 되서 보이더라구요
브라우저는 chrome을 사용하고 있는데, 이건 그냥 최신 브라우저들이 jsx를 지원하고 있다고 이해하면 될까요?
Câu trả lời 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으로 이메일 한 통 부탁드립니다!
슬라이드 오타
0
8
0
git 설치
0
18
1
강의 소스 코드는 어디서 볼수 있나여?
1
18
1
전체적인 개발에 대해 문의드립니다.
1
27
1
자료집 관련
0
11
2
13. (App 2) 기본기 훈련 에서
0
18
1
챌린지 시작일 문의
0
23
0
17강 강의에 목데이터 첨부파일이 없습니다.
2
24
2
2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중
0
21
1
링크 관리 기능 구현 실패
0
17
1
줄바꿈 시 \ 필수인가요?
0
31
2
11차시 Antigravity IDE 설치 후
0
21
1
2605 이후 최신 클로드코드 강의 추가 부탁드립니다.
0
26
2
처음 에이전트 설정을 잘못 했을 경우 수정 하는 방법
0
19
1
5,6,7,8 내용이 없어요
0
23
1
커리큘럼 문서 제공받을 수 있을까요?
0
24
1
ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
0
15
1
mission 09-01 을 수행할 수 없어요
0
26
1
문제점
0
22
2
outputStyle 설정하는데 어디서 문제일까요?
0
28
3
test.txt파일 삭제시 rm명령어이니 클로드의 질문이 있어야 한다고 하셨는데
0
22
2
검은화면
0
31
3
순수 함수 / 순수 컴포넌트
0
24
1
state 객체로 묶기
0
70
1