웹 프로그래밍과 JSP
웹 프로그래밍 개요
웹 프로그래밍은 클라이언트(브라우저)와 서버 간의 통신을 통해 웹 페이지를 제공하는 기술이다.
┌─────────────────────────────────────────────────────────────────┐
│ 웹 프로그래밍 구성 요소 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Client (Browser) Server │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ │ │ │ │
│ │ ┌────────────┐ │ HTTP 요청 │ ┌────────────┐ │ │
│ │ │ HTML │ │ ─────────────────► │ │ Web Server │ │ │
│ │ │ CSS │ │ │ │ (Apache, │ │ │
│ │ │ JS │ │ ◄───────────────── │ │ Nginx) │ │ │
│ │ └────────────┘ │ HTTP 응답 │ └────────────┘ │ │
│ │ │ │ │ │
│ │ 브라우저 │ │ 웹 서버 │ │
│ │ (Chrome, etc.) │ │ │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘웹 핵심 용어
| 용어 | 설명 |
|---|---|
| 웹 서버 | 클라이언트에게 웹 서비스를 제공하는 컴퓨터 (Apache, Nginx 등) |
| 클라이언트 | 서버에 접속하여 서비스를 제공받는 컴퓨터 (브라우저) |
| HTTP | Hyper Text Transfer Protocol, 웹 통신 규약 |
| HTML | Hyper Text Markup Language, 웹 문서 구조 정의 언어 |
| CSS | Cascading Style Sheets, 웹 페이지 스타일 정의 |
| JavaScript | 웹 페이지에 동적 기능을 추가하는 스크립트 언어 |
HTTP 프로토콜
┌─────────────────────────────────────────────────────────────────┐
│ HTTP 요청/응답 구조 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ HTTP 요청 (Request) HTTP 응답 (Response) │
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
│ │ GET /index.html HTTP/1.1│ │ HTTP/1.1 200 OK │ │
│ │ Host: www.example.com │ │ Content-Type: text/html │ │
│ │ Accept: text/html │ │ Content-Length: 1234 │ │
│ │ │ │ │ │
│ │ (요청 본문) │ │ <html> │ │
│ │ │ │ <body>Hello</body> │ │
│ │ │ │ </html> │ │
│ └─────────────────────────┘ └─────────────────────────┘ │
│ │
│ 요청 메서드: GET, POST, PUT, DELETE 등 │
│ 응답 코드: 200 OK, 404 Not Found, 500 Internal Server Error │
│ │
└─────────────────────────────────────────────────────────────────┘정적 웹 프로그래밍
서버에 미리 저장된 HTML, CSS, JS, 이미지 파일을 그대로 클라이언트에게 전달하는 방식
┌─────────────────────────────────────────────────────────────────┐
│ 정적 웹 프로그래밍 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Client Web Server │
│ │ │ │
│ │──── GET /page.html ───────►│ │
│ │ │ │
│ │ ┌──────┴──────┐ │
│ │ │ 파일 시스템 │ │
│ │ │ ┌─────────┐ │ │
│ │ │ │page.html│ │ │
│ │ │ │style.css│ │ │
│ │ │ │script.js│ │ │
│ │ │ └─────────┘ │ │
│ │ └──────┬──────┘ │
│ │ │ │
│ │◄─── page.html (그대로) ────│ │
│ │ │ │
│ │
│ 특징: │
│ • 파일을 있는 그대로 전달 │
│ • 모든 사용자에게 동일한 페이지 제공 │
│ • 콘텐츠 변경 시 파일 직접 수정 필요 │
│ │
└─────────────────────────────────────────────────────────────────┘정적 웹의 특징
| 장점 | 단점 |
|---|---|
| 구현이 단순함 | 콘텐츠 변경 시 파일 직접 수정 필요 |
| 서버 부하가 적음 | 사용자별 맞춤 콘텐츠 제공 불가 |
| 빠른 응답 속도 | 데이터베이스 연동 불가 |
| CDN 캐싱에 유리 | 실시간 정보 제공 어려움 |
정적 웹의 한계
┌─────────────────────────────────────────────────────────────────┐
│ 정적 웹의 한계 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 시나리오: 쇼핑몰 상품 가격 변경 │
│ │
│ 1. 관리자가 HTML 파일을 직접 수정 │
│ ┌─────────────────────────────────────────┐ │
│ │ <p>가격: 10,000원</p> → <p>가격: 9,000원</p> │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 2. 서버에 파일 업로드 │
│ │
│ 3. 상품이 100개라면? 1000개라면? │
│ → 모든 페이지를 일일이 수정해야 함 │
│ → 현대 웹 환경에서는 비효율적 │
│ │
└─────────────────────────────────────────────────────────────────┘동적 웹 프로그래밍
서버가 요청에 따라 데이터베이스와 연동하여 동적으로 페이지를 생성하는 방식
┌─────────────────────────────────────────────────────────────────┐
│ 동적 웹 프로그래밍 구조 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Client Web Server WAS Database │
│ │ │ │ │ │
│ │── 요청 ──────►│ │ │ │
│ │ │── 전달 ─────►│ │ │
│ │ │ │── 쿼리 ───────►│ │
│ │ │ │◄─ 데이터 ──────│ │
│ │ │ │ │ │
│ │ │◄─ HTML 생성 ─│ │ │
│ │◄── 동적 페이지 │ │ │ │
│ │ │ │ │ │
│ │
│ Web Server: 정적 콘텐츠 처리 (Apache, Nginx) │
│ WAS: 동적 콘텐츠 처리 (Tomcat, WildFly, WebLogic) │
│ Database: 데이터 저장 (MySQL, Oracle, PostgreSQL) │
│ │
└─────────────────────────────────────────────────────────────────┘Web Server vs WAS
┌─────────────────────────────────────────────────────────────────┐
│ Web Server vs WAS │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Web Server WAS │
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
│ │ │ │ │ │
│ │ 정적 콘텐츠 처리 │ │ 동적 콘텐츠 처리 │ │
│ │ • HTML, CSS, JS │ │ • JSP/Servlet 실행 │ │
│ │ • 이미지, 동영상 │ │ • 비즈니스 로직 처리 │ │
│ │ │ │ • DB 연동 │ │
│ │ 예: Apache, Nginx │ │ 예: Tomcat, JBoss │ │
│ │ │ │ │ │
│ └─────────────────────────┘ └─────────────────────────┘ │
│ │
│ 일반적으로 Web Server 앞에 두고, WAS로 동적 요청 전달 │
│ (리버스 프록시 구조) │
│ │
└─────────────────────────────────────────────────────────────────┘| 구분 | Web Server | WAS |
|---|---|---|
| 역할 | 정적 콘텐츠 제공 | 동적 콘텐츠 생성 |
| 처리 대상 | HTML, CSS, JS, 이미지 | JSP, Servlet, 비즈니스 로직 |
| DB 연동 | X | O |
| 예시 | Apache, Nginx, IIS | Tomcat, JBoss, WebLogic |
CGI (Common Gateway Interface)
동적 웹 프로그래밍의 초기 기술로, 웹 서버가 외부 프로그램을 실행하여 동적 콘텐츠를 생성하는 방식
┌─────────────────────────────────────────────────────────────────┐
│ CGI 동작 방식 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Client Web Server CGI Program │
│ │ │ │ │
│ │─── 요청 1 ───────────►│ │ │
│ │ │── 프로세스 생성 (1) ──►│ Process 1│
│ │◄─── 응답 1 ───────────│◄── 결과 ──────────────│ (종료) │
│ │ │ │ │
│ │─── 요청 2 ───────────►│ │ │
│ │ │── 프로세스 생성 (2) ──►│ Process 2│
│ │◄─── 응답 2 ───────────│◄── 결과 ──────────────│ (종료) │
│ │ │ │ │
│ │─── 요청 3 ───────────►│ │ │
│ │ │── 프로세스 생성 (3) ──►│ Process 3│
│ │◄─── 응답 3 ───────────│◄── 결과 ──────────────│ (종료) │
│ │
│ 문제점: │
│ • 요청마다 새로운 프로세스 생성 │
│ • 프로세스 생성/종료 오버헤드 │
│ • 메모리 사용량 증가 │
│ • 서버 부하 심화 │
│ │
└─────────────────────────────────────────────────────────────────┘CGI의 특징
| 특징 | 설명 |
|---|---|
| 프로세스 방식 | 요청마다 새 프로세스 생성 |
| 언어 독립적 | Perl, C, Python 등 다양한 언어 사용 가능 |
| 메모리 비효율 | 매번 프로그램을 메모리에 로드 |
| 서버 부하 | 동시 접속자 증가 시 성능 급격히 저하 |
CGI의 문제점
┌─────────────────────────────────────────────────────────────────┐
│ CGI 성능 문제 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 동시 접속자 10명인 경우: │
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ P1 │ │ P2 │ │ P3 │ │ P4 │ │ P5 │ ... (10개 프로세스) │
│ │100MB│ │100MB│ │100MB│ │100MB│ │100MB│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ → 1GB 메모리 사용 │
│ → 프로세스 생성 시간 * 10 │
│ → Context Switching 오버헤드 │
│ │
│ 동시 접속자가 1000명이라면? │
│ → 서버 다운 위험 │
│ │
└─────────────────────────────────────────────────────────────────┘JSP/Servlet의 등장
CGI의 문제점을 해결하기 위해 스레드 기반의 JSP, ASP, PHP 등이 등장
┌─────────────────────────────────────────────────────────────────┐
│ CGI vs JSP/Servlet 비교 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ CGI (프로세스 방식) JSP/Servlet (스레드 방식) │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ │ │ JVM │ │
│ │ ┌───┐ ┌───┐ ┌───┐ │ │ ┌───────────────┐ │ │
│ │ │P1 │ │P2 │ │P3 │ │ │ │ Servlet │ │ │
│ │ │ │ │ │ │ │ │ │ │ (한 번 로드) │ │ │
│ │ └───┘ └───┘ └───┘ │ │ └───────────────┘ │ │
│ │ │ │ ↑ ↑ ↑ │ │
│ │ 각각 독립 프로세스 │ │ ┌┴┐ ┌┴┐ ┌┴┐ │ │
│ │ 메모리 개별 할당 │ │ │T│ │T│ │T│ │ │
│ │ │ │ │1│ │2│ │3│ │ │
│ │ │ │ └─┘ └─┘ └─┘ │ │
│ │ │ │ 스레드 공유 │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ │
│ • 요청마다 프로세스 생성 • 최초 1회만 로드 │
│ • 높은 메모리 사용 • 스레드로 요청 처리 │
│ • 느린 응답 속도 • 낮은 메모리 사용 │
│ • 빠른 응답 속도 │
│ │
└─────────────────────────────────────────────────────────────────┘JSP (JavaServer Pages)
JSP란?
HTML 내에 Java 코드를 삽입하여 동적 웹 페이지를 생성하는 서버 사이드 스크립트 언어
┌─────────────────────────────────────────────────────────────────┐
│ JSP 동작 원리 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. 최초 요청 시 │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ hello.jsp ──► hello_jsp.java ──► hello_jsp.class │ │
│ │ (JSP) (Servlet 소스) (컴파일된 클래스) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ 2. 이후 요청 시 │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 요청 ──► 메모리의 hello_jsp.class 재사용 ──► 응답 │ │
│ │ (변환/컴파일 과정 생략) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ 3. JSP 파일 수정 시 │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 수정 감지 ──► 재변환 ──► 재컴파일 ──► 새 클래스 로드 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘JSP의 특징
| 특징 | 설명 |
|---|---|
| 스레드 방식 | 요청마다 새 스레드 생성, 프로세스보다 가벼움 |
| 최초 1회 로드 | Servlet으로 변환 후 메모리에 로드 |
| 재사용 | 동일 요청은 메모리에 로드된 Servlet 재사용 |
| 자동 재컴파일 | JSP 파일 수정 시 자동으로 재컴파일 |
| Java 생태계 | Java의 모든 라이브러리 사용 가능 |
JSP 기본 문법
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>JSP 예제</title>
</head>
<body>
<%-- JSP 주석 --%>
<%-- 선언문: 멤버 변수, 메서드 선언 --%>
<%!
private int count = 0;
public int getCount() {
return ++count;
}
%>
<%-- 스크립틀릿: Java 코드 실행 --%>
<%
String name = request.getParameter("name");
if (name == null) {
name = "Guest";
}
%>
<%-- 표현식: 값 출력 --%>
<h1>안녕하세요, <%= name %>님!</h1>
<p>방문 횟수: <%= getCount() %></p>
<%-- 현재 시간 출력 --%>
<p>현재 시간: <%= new java.util.Date() %></p>
</body>
</html>JSP 구성 요소
| 요소 | 문법 | 설명 |
|---|---|---|
| 지시자 | <%@ ... %> | 페이지 속성 설정 (page, include, taglib) |
| 선언문 | <%! ... %> | 멤버 변수, 메서드 선언 |
| 스크립틀릿 | <% ... %> | Java 코드 실행 |
| 표현식 | <%= ... %> | 값을 문자열로 출력 |
| 주석 | <%-- ... --%> | JSP 주석 (클라이언트에 전송 안 됨) |
| 액션 태그 | <jsp:... /> | 표준 액션 수행 |
| EL | ${...} | Expression Language, 값 접근 |
| JSTL | <c:...> | JSP Standard Tag Library |
JSP와 Servlet의 관계
┌─────────────────────────────────────────────────────────────────┐
│ JSP와 Servlet 관계 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ JSP Servlet │
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
│ │ │ │ │ │
│ │ HTML 중심 │ │ Java 코드 중심 │ │
│ │ + Java 삽입 │ │ + HTML 출력 │ │
│ │ │ │ │ │
│ │ View 담당 │ ────► │ Controller 담당 │ │
│ │ (화면 표시) │ 변환 │ (로직 처리) │ │
│ │ │ │ │ │
│ │ 쉬운 작성 │ │ 더 많은 제어 │ │
│ │ 디자이너 친화적 │ │ 개발자 친화적 │ │
│ │ │ │ │ │
│ └─────────────────────────┘ └─────────────────────────┘ │
│ │
│ JSP는 내부적으로 Servlet으로 변환되어 실행됨 │
│ │
└─────────────────────────────────────────────────────────────────┘Servlet 예제
@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
// 요청 파라미터 읽기
String name = request.getParameter("name");
if (name == null) {
name = "Guest";
}
// 응답 설정
response.setContentType("text/html;charset=UTF-8");
// HTML 출력
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head><title>Hello Servlet</title></head>");
out.println("<body>");
out.println("<h1>안녕하세요, " + name + "님!</h1>");
out.println("</body>");
out.println("</html>");
}
}동적 웹 기술 비교
┌─────────────────────────────────────────────────────────────────┐
│ 서버 사이드 기술 비교 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 기술 언어 특징 │
│ ┌─────────┬─────────┬───────────────────────────────────────┐ │
│ │ JSP │ Java │ 스레드 기반, 대규모 엔터프라이즈 │ │
│ ├─────────┼─────────┼───────────────────────────────────────┤ │
│ │ ASP │ VB/C# │ Microsoft 기반, Windows 서버 │ │
│ ├─────────┼─────────┼───────────────────────────────────────┤ │
│ │ PHP │ PHP │ 쉬운 문법, 웹 호스팅 지원 많음 │ │
│ ├─────────┼─────────┼───────────────────────────────────────┤ │
│ │ Node.js │ JS │ 비동기 I/O, 실시간 애플리케이션 │ │
│ ├─────────┼─────────┼───────────────────────────────────────┤ │
│ │ Python │ Python │ Django/Flask, 빠른 개발 │ │
│ └─────────┴─────────┴───────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘| 기술 | 실행 방식 | 장점 | 사용 환경 |
|---|---|---|---|
| CGI | 프로세스 | 언어 독립적 | 레거시 시스템 |
| JSP/Servlet | 스레드 | Java 생태계, 대규모 시스템 | 엔터프라이즈 |
| PHP | 스레드 | 쉬운 배포, 저렴한 호스팅 | 중소규모 웹 |
| ASP.NET | 스레드 | Microsoft 통합, Visual Studio | Windows 환경 |
| Node.js | 이벤트 루프 | 비동기, 실시간 | 실시간 앱 |
정리
┌─────────────────────────────────────────────────────────────────┐
│ 핵심 요약 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 정적 웹 동적 웹 │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ • 고정된 HTML 파일 │ │ • 요청에 따라 생성 │ │
│ │ • 서버 부하 적음 │ │ • DB 연동 가능 │ │
│ │ • 개인화 불가 │ │ • 사용자별 맞춤 │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ │
│ CGI JSP/Servlet │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ • 프로세스 방식 │ │ • 스레드 방식 │ │
│ │ • 요청마다 로드 │ │ • 최초 1회 로드 │ │
│ │ • 서버 부하 높음 │ │ • 재사용으로 효율적 │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ │
│ JSP = HTML 중심 + Java │
│ Servlet = Java 중심 + HTML │
│ → JSP는 Servlet으로 변환되어 실행됨 │
│ │
└─────────────────────────────────────────────────────────────────┘핵심 용어 정리
| 용어 | 설명 |
|---|---|
| 정적 웹 | 미리 저장된 파일을 그대로 전달하는 방식 |
| 동적 웹 | 요청에 따라 콘텐츠를 동적으로 생성하는 방식 |
| Web Server | 정적 콘텐츠를 제공하는 서버 (Apache, Nginx) |
| WAS | Web Application Server, 동적 콘텐츠를 처리하는 서버 |
| CGI | Common Gateway Interface, 프로세스 기반 동적 웹 기술 |
| JSP | JavaServer Pages, HTML에 Java를 삽입하는 기술 |
| Servlet | Java로 작성된 서버 사이드 프로그램 |
| 프로세스 | 독립된 메모리 공간을 가진 실행 단위 |
| 스레드 | 프로세스 내에서 실행되는 경량 실행 단위 |