JSP 독학 (1) 개발환경 구성하기

productuidev·2023년 2월 13일

Java WAS jsp oracle servlet tomcat

BE Study

목록 보기

6/9

JSP 독학 (1) 개발환경 구성하기

조금 늦게 정리하는.. 회사업무 협업이해 기초 자바웹개발 을 위해
Velog 검색 + Youtube IT핥기!를 통해 JSP를 공부했다.

Intro) JSP 개발 환경 구성 이해

JSP (Java Server Pages)

JSP : HTML 코드에 Java 코드를 넣어 동적인 웹페이지를 보다 쉽게 구축할 수 있도록 만들어주는 서버 사이드 스크립트 언어로 자바에서 제공하는 API나 DB와 연동이 가능하도록 만들어주는 JDBC 이용 가능
서블릿(Servlet) : Java 코드를 작성하고 그 코드를 컴파일해서 Class 파일을 만들어서 동적 페이지를 처리하는 실행코드 방식을 사용

실행코드 방식 : 웹서버에서 직접 프로그램을 호출하는 방식

스크립트 방식 : 웹 브라우저 요청 전송 -> 웹 서버 요청 받음 -> 스크립트 코드 번역 -> 프로그램 실행

JSP는 서블릿처럼 코드를 수정하고 다시 컴파일 하는 과정 없이 그냥 수정하면 톰캣이 알아서 해준다. (하지만 JSP도 결국 컴파일 후에 서블릿 코드로 변환되어 작동한다)

JSP에서의 협업

“JAVA 소스와 복잡한 HTML 소스가 무지막지하게 뒤섞이게 됩니다. 문제는 그 다음에 발생합니다.
고객의 디자인 수정 요구사항이 들어오게 되는데 웹 디자이너는 요구사항에 따라 HTML 소스를 변경하려 합니다.
그러나 Servlet은 자바 클래스이며 .class 파일임을 의미합니다. HTML 태그 몇 개만 바꾸더라도 다시 컴파일 해야 했으며, 만약 JAVA에 대해 모르는 웹 디자이너가 소스를 한글자라도 잘못 건드렸다면 엄청난 에러가 나게 됩니다.
이로 인해 웹 디자이너가 수정한 디자인을 개발자에 적용해줄 것을 요청하는데 서로 협업을 하는데에 있어서 서로 의견충돌이 일어날 때가 많고 HTML과 JAVA소스가 뒤섞이면서 발생하는 소스의 복잡함 때문에 무엇하나 수정하기가 어려웠습니다. 이러한 문제들이 발생하면서 JSP라는 기술이 등장합니다.
JSP는 웹 디자이너에게 친화적일 수 있도록 마크업 기반의 스크립트로 개발되어지기 때문에 디자이너가 평소 HTML을 다루듯 사용할 수 있습니다. 또한 표현식과 스크립트릿 등 개발자가 소스를 작성할 수 있는 구문도 제공하며 .class 파일이 아니기 때문에 수정이 용이하다는 장점이 있습니다.“

(과거 웹디자인부터 현재 퍼블리싱까지… 모던프론트엔드개발이 아닌 환경의 이야기)

출처 - JSP란?, JSP 개념 및 탄생 배경

요약 : 환경설정 복습

1) Eclipse : jdk, 환경변수, UTF-8 인코딩
2) Apache Tomcat : 톰캣은 자바 실행환경이 필요하므로 JRE가 설치되어 있어야 함 (JDK 설치 시 JRE도 같이 설치됨)
3) Oracle 설치

1. Tomcat의 역할 이해

Apache : Web Server (정적 파일 HTML, CSS, JS, Img)
Apache Tomcat : Web Application Server (동적 처리 Server + Process)

톰캣은 일반적으로 WAS(Web)라고 불리며, 톰캣은 아파치와 합쳐서 아파치톰캣 이라 부른다.

아파치만 사용하면 정적인 웹페이지만 처리 가능

톰캣만 사용하면 동적인 웹페이지 처리가 가능하지만 아파치에서 필요한 기능을 못 가져 옴. 또한 여러 사용자가 요청할 시에 톰캣에 과부하가 걸림.

아파치와 톰캣을 같이 쓰면 아파치는 정적인 데이터만 처리하고, JSP 처리는 Web Container(톰캣의 일부)로 보내주어 분산처리 할 수 있다.

아파치 : 80포트

톰캣 : 8080포트

(하지만 실제로는 80포트로 다 처리하므로, 8080포트는 아파치가 알아서 보내줌. 8080포트를 다루거나 보려면 리눅스단에서 처리하거나 수동적으로 포트 처리할때 빼고는 보기힘듬)

출처 - Apache Tomcat란? 개념 정리 및 설치 방법, 아파치 톰캣이란 ?

1) jdk 설치 - JAVA_HOME 환경변수 설정
2) Tomcat 설치 - CATALINA_HOME 환경변수 설정
3) bin/startup.bat 실행 - Oracle(11g) 웹 접속 포트 변경
4) localhost:8080 - Tomcat 서버 메인페이지 확인

2,3을 해야 Eclipse에서 연동해야 실행이 됨

2. 8080 포트 충돌 시

서버 실행 Tip! 서버 포트 관련 문제인 경우
netstat -ano -p tcp
현재 열려있는 포트와 프로세스 ID를 확인

3. WAS 개념 및 톰캣 사용

apache-tomcat-9.0.71\webapps\ROOT\index.jsp로 확인

localhost:8080을 열고 브라우저 개발자도구 - Network 탭에서 새로고침 시 Request URL, Requset Method(GET), Status code(200) 확인
Response : JSP 코드는 톰캣이 처리해서 브라우저에서 컴파일된다

JSP 파일은 누가 갖고 있지?
톰캣이 갖고 있다

JSP에 작성된 % 등 낯선 코드들은 모두 톰캣에서 처리되어 브라우저에는 HTML 마크업으로 보여짐

<%@ page session="false" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%
java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat("yyyy");
request.setAttribute("year", sdf.format(new java.util.Date()));
request.setAttribute("tomcatUrl", "https://tomcat.apache.org/");
request.setAttribute("tomcatDocUrl", "/docs/");
request.setAttribute("tomcatExamplesUrl", "/examples");
%>
<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8" />
        <title><%=request.getServletContext().getServerInfo () %></title>
        <link href="favicon.ico" rel="icon" type="image/x-icon" />
        <link href="tomcat.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    	HELLO JSP! Now Date is <%= new java.util.Date() %>!
    </body>
</html>

컴파일 결과 (새로고침 시 서버(WAS)에서 받아온 정보로 시간이 갱신됨 --> 동적 페이지 제공)

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8" />
        <title>Apache Tomact/9.0</title>
        <link href="favicon.ico" rel="icon" type="image/x-icon" />
        <link href="tomcat.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    	HELLO JSP! Now Date is Wed Jan 06 16:58:54 KST 2021!
    </body>
</html>

결과값 더하기
브라우저에서 localhost:8080/index.jsp?n1=10&n2=20 입력 후 실행 시 결과값이 더해진 상태로 나옴 (30)
전달한 값이 어떤 것이냐에 따라 서버에서 처리되어 보여짐

<%
	...
    
	int n1 = Integer.parseInt(request.getParameter("n1"));
    int n2 = Integer.parseInt(request.getParameter("n2"));
%>

...

<body>
	<%= n1 + n2 =%>
</body>

4. JSP 개발환경 구성 - 이클립스에서 톰캣 연동

이클립스 설정 변경 : Preferences에서 CSS, HTML, JSP의 기본 인코딩을 UTF-8로 변경
신규 프로젝트 실행하기 : New - Dynamic Web Project 선택
Java와 비교할 때 Java는 프로그램을 실행시키면 JRE을 통해서 main 메소드부터 실행하는 반면, JSP는 어떤 시작점이라는 개념이 없음
JSP는 우리가 만든 프로젝트 자원들을 가지고 가서 서버가 서비스할 수 있게 그냥 대기하는 것으로, 클라이언트가 브라우저를 통해서 Request(요청)했을 때 그 요청에 맞춰서 무언가 처리하고 Response(응답)하는 것이 전부임.
어떤 시작점부터 끝까지 프로그램이 흘러가는 것이 아니라 여러 기능들을 가지고, 그런 기능들을 처리할 수 있게끔 준비가 되는 것이 웹프로젝트인데, 웹서버가 하는 일이 그런 서비스를 하는 것임. 정리하자면, 특정파일 하나만 딱 실행하는 그런 개념이 아니라는 것이다. 서버를 통해서 서비스를 실행시키는 개념
이 프로젝트가 어떤 서비스로 시작할 것인지 Target Runtime을 설정해야 하는데, 해당 프로젝트를 실행할 때 어떤 서버를 가지고 동작시킬 것인지를 연결시켜줄 수 있는데, 실습에서는 하나의 서버만 사용할 것이기 때문에 톰캣 설치한 버전으로 설정.
Preferences - Server - Runtime Environments에서 서버를 추가할 수 있는 메뉴에서 서버 설정 가능. 톰캣 설치한 버전과 로컬에 설치한 톰캣 경로, JRE를 설정하면 등록됨

프로젝트 생성 결과

SRC에 들어가는 소스는 모두 Java 코드
WebContent 하위는 HTML, CSS, Images, JavaScript, JSP, ... 등등 Web Resources(웹 자원)들이 위치함
META-INF, WEB-INF는 건들지 말 것 (나중에 외부 라이브러리를 연동할 때 사용하는 용도로 서버에서만 접근이 가능함)
무언가 추가할 때는 WebContent 하위에 바로바로 만들어서 넣으면 됨

설치부터 뭔가 클래시컬... (이제부터 본질+기능에만 촛점을 두겠다...)