브라우저에서 JSX 안전하게 실행하는 방법, Babel, CRA, Vite 환경

JSX는 왜 바로 실행이 안 되나요?

JSX = JavaScript가 아님
- JSX는 HTML + JS 섞어 쓴 듯한 문법일 뿐, 실제로는 브라우저가 이해 못하는 문법입니다.
- 예
```
const element = <h1>Hello JSX!</h1>;
```
- 브라우저는 위 코드를 그대로 실행할 수 없고, 다음처럼 변환된 JS만 이해합니다.
```
const element = React.createElement('h1', null, 'Hello JSX!');
```
그래서 필요한 것: 트랜스파일 과정
- Babel 같은 도구가 JSX → 순수 JavaScript로 변환합니다.
- React 개발 환경(CRA, Vite 등)은 이 과정을 “자동으로” 해주는 툴일 뿐입니다.
핵심 결론
- JSX 파일을 그대로 브라우저에서 더블클릭 → 실행 X
- 반드시
  - Babel 같은 트랜스파일러로 미리 변환
  - 또는 CRA/Vite 같은 개발 서버를 통해 변환된 결과를 브라우저에 제공해야 합니다.

JSX 실행/확인 방법 전체 지도

JSX를 “눈으로 확인하는 방법”을 난이도/용도별로 나눠보면

초간단 실험/테스트용
- Babel Standalone + HTML 한 장 (CDN 스크립트)
- 온라인 도구 (CodeSandbox, StackBlitz, babeljs.io REPL 등)
정식 개발 환경
- Create React App (CRA)
- Vite + React
직접 빌드 파이프라인 구성
- Babel CLI, Webpack, Rollup 등으로 직접 JSX → JS 빌드 후, 웹서버에서 js 파일 호스팅

아래에서 각각 상세히 보겠습니다.

300x250

가장 쉬운 정석: Create React App(CRA)으로 JSX 확인

“Node.js 설치된 상태에서, 가장 적은 생각으로 React/JSX를 돌려보고 싶다”
→ CRA가 제일 편합니다.

1. 프로젝트 생성

원하는 폴더(혹은 새 폴더)에서 터미널 열고

npx create-react-app .
# 또는
npx create-react-app my-react-app
cd my-react-app

위 명령으로
- src, public, package.json 등 프로젝트 구조가 자동 생성
- Webpack, Babel, 개발 서버 설정 등이 모두 자동 구성

2. JSX 파일 수정/추가

기본 진입점: src/App.js 또는 src/App.jsx

예: src/App.jsx 를 아래처럼 수정

export default function App() {
  const name = 'React + JSX';
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>JSX를 CRA로 실행 중입니다.</p>
    </div>
  );
}

필요하면 src/components/MyComponent.jsx 처럼 JSX 파일을 여러 개 만들어 import 해도 됩니다.

3. 개발 서버 실행

npm start

기본적으로 http://localhost:3000 에서 앱이 열림
저장할 때마다 자동 리로드(Hot Reload) → JSX 수정 결과 바로 확인 가능

더 가볍고 빠른 정석: Vite + React

“요즘 트렌디하고 빠른 개발 환경 + 최소 설정으로 JSX를 쓰고 싶다”
→ Vite + React

1. 최소 파일 구성 예시

package.json

{
  "name": "vite-react-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.0.0"
  }
}

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src/App.jsx

export default function App() {
  return <h1>Hello, Vite + React!</h1>;
}

2. 실행 방법

npm install
npm run dev

보통 http://localhost:5173 에서 실행
CRA보다 빌드/새로고침이 훨씬 빠르고, 설정이 심플해서 요즘 신규 프로젝트는 거의 Vite를 많이 선택합니다.

초간단 실험: Babel Standalone으로 HTML 한 장에서 JSX 실행

“설치하기 귀찮고, 그냥 파일 하나로 대충 JSX 돌아가는 것만 보고 싶다”
→ Babel Standalone + HTML 파일

1. 예시 HTML 파일

<!DOCTYPE html>
<html>
  <head>
    <!-- React/ReactDOM & Babel Standalone CDN -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <!-- JSX 코드 -->
    <script type="text/babel">
      function App() {
        return <h1>Hello JSX!</h1>;
      }

      ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</html>

2. 사용 방법

위 내용을 index.html 로 저장
브라우저에서 해당 파일 더블클릭 → 열기
“Hello JSX!” 출력 확인

3. 특징 및 한계

장점
- Node.js 설치 필요 없음
- HTML 한 장으로 바로 시험 가능
- 학습/데모/테스트 용도로 매우 좋음
단점
- 브라우저에서 Babel이 매번 변환 → 성능 안 좋음
- 번들링/최적화/코드 분할 등 안 됨
- 대형/실제 서비스용으로는 부적절

결론: “실험/학습/샘플용”에는 최고, “실 서비스/프로덕션”에는 CRA/Vite 같은 정식 개발 환경 필요

Babel로 직접 변환 후 웹서버에 올리는 방식

“React 프레임워크 말고, 기존 웹서버(Apache/Nginx)에 정적 JS 파일만 호스팅하고 싶다”
→ Babel CLI 사용

1. Babel 설치 (예시)

npm install --save-dev @babel/core @babel/cli @babel/preset-react

2. Babel 설정 파일 .babelrc

{
  "presets": ["@babel/preset-react"]
}

3. JSX 파일 예시 (src/App.jsx)

function App() {
  return <h1>Hello, Babel + JSX!</h1>;
}

export default App;

4. 빌드 명령

npx babel src --out-dir dist

src 폴더에 있는 .jsx 파일들이
dist 폴더에 변환된 순수 .js 파일로 생성

5. 웹서버에서 호스팅

Nginx, Apache 등에서 dist 폴더의 JS 파일을 정적으로 서빙
index.html에서 변환된 JS 파일을 <script src="/dist/bundle.js"></script> 식으로 포함

이 방식은 “빌드 파이프라인을 직접 쥐고 싶은 경우”에 유용하지만, 요즘은 Vite/Webpack 기반 프레임워크를 쓰는 게 훨씬 효율적입니다.

각 방법 비교 & 선택 기준

목적/상황	추천 방법	설명
JSX 문법 맛보기, 간단 실험, 교육용	Babel Standalone + HTML	설치 없이 HTML 한 장으로 바로 테스트
온라인에서 간단한 데모/실험	CodeSandbox / StackBlitz	브라우저만 있으면 React+JSX 개발 가능
내부 PoC, 개발용, 표준 React 앱	Create React App	설정 자동화, React 초보에게 가장 친절
성능 중시, 가벼운 구조, 최신 트렌드	Vite + React	빠른 HMR, 단순한 설정, 프로덕션까지
기존 웹서버 + 커스텀 빌드 파이프라인	Babel CLI + Webpack 등	빌드 과정을 직접 제어하고 싶은 경우

보안/운영 간단 체크 포인트

실제 서비스 환경에서라면, 아래도 함께 고려해 주세요.

CDN 스크립트 사용 시
- Babel Standalone, React UMD를 외부 CDN에서 직접 불러올 경우:
  - 내부망/보안망에서는 외부 도메인 호출 허용 여부 확인
  - SRI(Subresource Integrity) 해시 사용 여부 검토
  - CSP(Content Security Policy) 정책에 따라 <script> 허용 도메인 설정
개발 서버 vs 운영 서버
- CRA, Vite의 npm start / npm run dev 는 개발용 서버
- 운영 배포 시에는 꼭:
  - npm run build 로 정적 파일 생성
  - Nginx 등 정적 웹서버 또는 전용 배포 환경에 업로드
소스 맵 / 디버그 정보
- 개발 환경에서는 소스 맵이 노출되어도 되지만
- 운영 환경에서는 필요 시만 제한적으로 노출 (코드 분석/역공학 리스크)

한 줄 요약

브라우저는 JSX를 직접 이해하지 못하므로, 반드시 JSX → JS 변환 과정이 필요합니다.
간단 실험은 Babel Standalone/온라인 툴, 실제 개발·서비스는 CRA 또는 Vite 를 사용하는 것이 가장 효율적입니다.
Babel CLI 등을 이용해 직접 빌드 파이프라인을 구성하는 것도 가능하지만, 요즘 기준에서는 Vite 같은 툴을 쓰는 것이 유지보수/생산성 면에서 유리합니다.

혹시 “지금 로컬에 있는 xxx.jsx 파일 하나를, 최소 작업으로 브라우저에서 보고 싶다” 같은 구체적인 상황이 있다면, 그 시나리오에 맞춰 파일 구조 + 명령어 + HTML 예시를 딱 맞게 정리해보세요.

728x90

그리드형(광고전용)

저작자표시 비영리 동일조건 (새창열림)

pages.kr 날으는물고기 <º)))><

브라우저에서 JSX 안전하게 실행하는 방법, Babel, CRA, Vite 환경

브라우저에서 JSX 안전하게 실행하는 방법, Babel, CRA, Vite 환경

JSX는 왜 바로 실행이 안 되나요?

JSX 실행/확인 방법 전체 지도

가장 쉬운 정석: Create React App(CRA)으로 JSX 확인

1. 프로젝트 생성

2. JSX 파일 수정/추가

3. 개발 서버 실행

더 가볍고 빠른 정석: Vite + React

1. 최소 파일 구성 예시

2. 실행 방법

초간단 실험: Babel Standalone으로 HTML 한 장에서 JSX 실행

1. 예시 HTML 파일

2. 사용 방법

3. 특징 및 한계

Babel로 직접 변환 후 웹서버에 올리는 방식

1. Babel 설치 (예시)

2. Babel 설정 파일 .babelrc

3. JSX 파일 예시 (src/App.jsx)

4. 빌드 명령

5. 웹서버에서 호스팅

각 방법 비교 & 선택 기준

보안/운영 간단 체크 포인트

한 줄 요약

댓글

티스토리툴바

브라우저에서 JSX 안전하게 실행하는 방법, Babel, CRA, Vite 환경

브라우저에서 JSX 안전하게 실행하는 방법, Babel, CRA, Vite 환경

JSX는 왜 바로 실행이 안 되나요?

JSX 실행/확인 방법 전체 지도

가장 쉬운 정석: Create React App(CRA)으로 JSX 확인

1. 프로젝트 생성

2. JSX 파일 수정/추가

3. 개발 서버 실행

더 가볍고 빠른 정석: Vite + React

1. 최소 파일 구성 예시

2. 실행 방법

초간단 실험: Babel Standalone으로 HTML 한 장에서 JSX 실행

1. 예시 HTML 파일

2. 사용 방법

3. 특징 및 한계

Babel로 직접 변환 후 웹서버에 올리는 방식

1. Babel 설치 (예시)

2. Babel 설정 파일 .babelrc

3. JSX 파일 예시 (src/App.jsx)

4. 빌드 명령

5. 웹서버에서 호스팅

각 방법 비교 & 선택 기준

보안/운영 간단 체크 포인트

한 줄 요약

관련글

댓글

티스토리툴바