📌 JSP(.jsp) vs JSX(.jsx) 비교 정리 (초급 개발자용)
JSP와 JSX는 모두 웹 개발에서 사용되는 파일 확장자지만, 용도와 실행 방식이 완전히 다름.
아래에서 기본 개념과 차이점을 쉽게 설명해줄게! 🚀
1️⃣ JSP(.jsp)란?
JSP(Java Server Pages)는 서버에서 실행되는 웹 페이지를 만들 때 사용하는 기술.
JSP 파일 안에는 HTML, Java 코드, 서버 스크립트가 함께 들어갈 수 있음.
📌 JSP 기본 문법
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>JSP 예제</title>
</head>
<body>
<h1>안녕하세요, JSP입니다!</h1>
<p>현재 시간: <%= new java.util.Date() %></p>
</body>
</html>✅ HTML과 Java 코드를 함께 사용 가능
✅ 서버에서 실행되며, 결과 HTML을 브라우저에 전송함
2️⃣ JSX(.jsx)란?
JSX(JavaScript XML)는 React에서 사용되는 확장 문법.
JavaScript + XML을 결합하여 React 컴포넌트를 쉽게 작성할 수 있도록 함.
📌 JSX 기본 문법
import React from 'react';
function App() {
return (
<div>
<h1>안녕하세요, JSX입니다!</h1>
<p>현재 시간: {new Date().toLocaleTimeString()}</p>
</div>
);
}
export default App;✅ JavaScript 안에서 HTML처럼 태그를 사용 가능
✅ 브라우저가 직접 실행하지 않고, Babel이 JavaScript 코드로 변환한 후 실행됨
3️⃣ JSP vs JSX 비교 (표 정리)
| 비교 항목 | JSP (.jsp) |
JSX (.jsx) |
|---|---|---|
| 언어 | Java 기반 | JavaScript 기반 |
| 실행 방식 | 서버에서 실행 후 HTML로 변환되어 클라이언트에 전송 | 클라이언트에서 JavaScript로 변환 후 실행 (CSR 방식) |
| HTML 사용 방식 | <% %> 안에 Java 코드 작성 가능 |
{} 안에 JavaScript 표현식 작성 가능 |
| 변수 사용법 | <%= 변수명 %> (JSP 표현식 사용) |
{ 변수명 } (JSX 표현식 사용) |
| 출력 예제 | <%= new java.util.Date() %> |
{ new Date().toLocaleTimeString() } |
| 파일 실행 환경 | 서버(Tomcat, Spring 등) | 브라우저에서 실행 (React 환경) |
| 사용 목적 | 동적 웹 페이지 개발 (서버 렌더링) | 프론트엔드 UI 개발 (클라이언트 렌더링) |
✅ JSP는 서버에서 실행되고, JSX는 클라이언트(React)에서 실행됨!
✅ JSP는 HTML을 동적으로 생성하고, JSX는 React 컴포넌트를 렌더링함!
4️⃣ JSP와 JSX 코드 비교 예제
📌 JSP에서 "Hello, World!" 출력
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>JSP 예제</title>
</head>
<body>
<h1>안녕하세요, JSP입니다!</h1>
<p>현재 시간: <%= new java.util.Date() %></p>
</body>
</html>- JSP는 서버에서 실행된 후, 최종적으로 HTML을 클라이언트에 전달함.
<%= %>를 사용하여 Java 코드를 HTML 내부에서 실행 가능.
📌 JSX에서 "Hello, World!" 출력
import React from 'react';
function App() {
return (
<div>
<h1>안녕하세요, JSX입니다!</h1>
<p>현재 시간: {new Date().toLocaleTimeString()}</p>
</div>
);
}
export default App;- JSX는 JavaScript 안에서 HTML을 작성하는 것처럼 보이지만, Babel이 변환한 후 실행됨.
{}안에서 JavaScript 표현식을 사용할 수 있음.
5️⃣ JSP vs JSX 주요 차이점 다시 정리
| 차이점 | JSP (.jsp) |
JSX (.jsx) |
|---|---|---|
| 실행 환경 | 서버에서 실행 (Spring, Tomcat 필요) | 클라이언트에서 실행 (React, 브라우저에서 동작) |
| 사용 목적 | 백엔드 웹 페이지 생성 | 프론트엔드 UI 구성 |
| 언어 기반 | Java | JavaScript (React) |
| HTML 삽입 방식 | <%= %> 안에서 Java 코드 실행 |
{} 안에서 JavaScript 코드 실행 |
| 렌더링 방식 | SSR (서버 사이드 렌더링) | CSR (클라이언트 사이드 렌더링) |
🎯 최종 결론
1️⃣ JSP는 백엔드(서버)에서 실행되고, JSX는 프론트엔드(클라이언트)에서 실행됨!
2️⃣ JSP는 Java 기반, JSX는 JavaScript(React) 기반임!
3️⃣ JSP는 서버에서 HTML을 생성하고 JSX는 브라우저에서 화면을 동적으로 렌더링함!
4️⃣ JSP에서는 <%= %>로 Java 코드를 사용하지만, JSX에서는 {}로 JavaScript 표현식을 사용함!
🚀 이제 JSP와 JSX의 차이점을 확실히 이해했어!
추가 질문 있으면 언제든 물어봐! 😊
'복습 > 프론트엔드' 카테고리의 다른 글
| JavaScript - `===` 연산자란? (0) | 2025.02.10 |
|---|---|
| React - useState 사용법 (0) | 2025.02.10 |
| 250205 오전복습 (0) | 2025.02.05 |
| 250204 오전 복습 (1) | 2025.02.04 |
| 250203 복습5 (0) | 2025.02.03 |