JSP
JSP를 사용함으로써 HTML과 Servlet을 동시에 쓸 수 있고 작업의 효율이 더욱 좋아진다.
예전에는 Servlet으로 out.메서드를 사용하여 HTML을 만들어줬다는데 실제로 직접 해보니 굉장한 타이핑 노가다라는 것을 몸소 체감했다.
JSP를 사용하기 위해서는 일단 설치할 항목이 3개가 필요하다.
- JAVA
- Eclipse Enterprise (웹 작업 전용) - 컴파일러
- Tomcat - version 9
일단 JSP를 공부한다는 것은 Java의 기본 문법을 다 배우고 온 것이라 가정을 하기 때문에 Java와 컴파일러인 Eclipse는 설치가 되어있을테고 Tomcat이라는 Eclipse를 서버와 연결시켜주는 프로그램만 따로 설치하면 된다.
Tomcat은 우리가 JSP로 작업한 코드를 웹으로 응답을 보내고 요청을 받을 때 사용하는 서버이다. 여러가지 버전이 있지만 최신버전보다는 호환이 잘되는 version 9으로 서버를 연결하라고 배웠다.
이클립스에서 File > New > Dynamic Web Project를 누르고 아래의 New Runtime에 설치된 Tomcat의 버전을 맞춰 입력하면 된다.
생성을 하고 폴더를 확장시켜보면 여러가지 파일이 나오는데, 거기서 src > webapp에서 jsp파일을 생성해주면 된다.
처음 Tomcat을 설치하면 하단의 서버가 연결이 아직 안되어있는데, 서버 창 아래의 연결버튼을 눌러서 설치한 Tomcat -version 9을 연결시켜준 후 Ctrl + F11을 눌러서 파일을 실행시켜주면 JSP가 자동으로 웹으로 출력을 해준다.
JSP 작성하기
Dynamic Web Project, 즉 정적이 아닌 동적인 웹사이트를 만들어야 사용자 편의성이 증대된다. 각각의 사용자마다 원하는 페이지가 다르므로, 그 사용자의 선택에 따른 적절한 페이지가 출력되어야 한다.
따라서 JSP는 HTML 코드 뿐만 아니라 자바 자체의 문법도 작성이 가능하기 때문에 정적인 웹사이트를 만들기 적절하다.
아래는 정말 제목만 들어간 HTML코드이다. 복잡해 보이지만 실상 알고나면 정말 별 거 아니니까 하나씩 뜯어보자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 구구단 페이지</title>
</head>
<body>
<h2>자동 <span>구구단</span></h2>
<h4>재밌고 직관적이고 시각적인 <span>JSP</span></h4>
</body>
</html>
HTML은 태그<>로 이루어져있고 몇가지 법칙이 존재한다.
- 태그의 틀이 존재하며 반드시 열린 태그는 같은 태그로 닫아주어야 한다.
- <html> </html>
- HTML로 시작하여 HTML로 닫아야한다.
- 머리<head> 몸통<body>로 이루어져 있다.
- 머리 안에 들어갈 수 있는 태그가 존재하고 몸통에만 들어갈 수 있는 태그가 존재한다.
위의 기본적인 법칙을 알면 반은 다 배운 것! 나머지 기본 필요 태그들은 필요할 때 검색하여 사용하자.
JSP를 통해 정적인 웹사이트 만들기
위에 설명했듯이 모든 사용자가 같은 페이지만 봐야한다면 정말 불편할 것이다.
따라서 원하는 정보를 얻기위한 적절한 페이지를 사용자마다 각각 할당해줘야 사용자 편의성이 증대된다.
구구단 페이지를 예시로 가져왔다.
<%@ page contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String sDan = request.getParameter("dan");
// dan이라는 걸 요청을 받으면 일단 2를 찾아오자
if(sDan == null || sDan.equals("")){
sDan = "2";
}
int Idan = Integer.valueOf(sDan);
%>
<!DOCTYPE html>
<html>
<head>
<style>
span {color : red; font-style: italic;}
</style>
<meta charset="utf-8">
<title> 구구단 페이지</title>
</head>
<body>
<h2>자동 <span>구구단</span></h2>
<h4>재밌고 직관적이고 시각적인 <span>JSP</span></h4>
<%
for(int i = 1; i<10; i++){
out.println(String.format("%d * %d = %d<br>", Idan, i, Idan*i));
}
%>
<p>
<a href = GuGu.jsp?dan=2> 2단 </a>
<a href = GuGu.jsp?dan=3> 3단 </a>
<a href = GuGu.jsp?dan=4> 4단 </a>
<a href = GuGu.jsp?dan=5> 5단 </a>
<a href = GuGu.jsp?dan=6> 6단 </a>
<a href = GuGu.jsp?dan=7> 7단 </a>
<a href = GuGu.jsp?dan=8> 8단 </a>
<a href = GuGu.jsp?dan=9> 9단 </a>
</p>
</body>
</html>엄청 복잡해 보이지만 정말 간단한 예제이다.
집중해서 보아야 할 점들!
- 위의 <% %>안에는 자바의 문법을 사용 가능하며 주석도 사용이 가능하다.
- 자바의 문법을 사용하여 값을 가져올 때 request.getParameter("dan")이라는 메서드를 사용했는데, 이 말의 의미는 request, 즉 사용자가 요청했을 때 dan이라는 매개변수(Parameter)의 값을 sDan 이라는 String 변수에 저장한 것.
- 그리고 그 저장된 값을 int 값으로 변환하여 사용자에게 출력해준 것이다. 이 때 각각의 사용자에게 줄 수 있었던 방법은 request안에는 사용자의 모든 정보, 즉 IP주소도 포함되어 있기 때문에 값을 출력하여 그 특정 사용자의 IP를 통해 원하는 값을 웹 브라우저에 출력(out.println)해줄 수 있다.
- <!DOCTYPE html> 상단에서 계산된 int 값을 <body>안에서 사용하여 for문을 이용해 구구단을 출력했다.
- printf문이 PrintWriter 클래스에서 제공되지 않아 String.format 메서드를 직접 구현했다. printf의 f는 실은 String.format의 f에서 따온 것이라 동일한 문장이라 볼 수 있다.
- printf의 특성으로 인해 줄바꿈이 되지 않는데, 자바의 /n과 다르게 JSP의 띄어쓰기는 <br>태그이다
- 상단의 자바 문법은 body 태그 안의 출력문에 사용하기 위한 값만 받아올 목적으로 생성한 것이고 따로 print를 해주면 안된다. 만약 해주게 된다면 제목 위에서 값이 출력이 됨
- 구구단 출력 시 dan의 값을 받아와서 새로운 페이지를 보여주기 때문에 dan의 값에 따라 페이지가 바뀌어야 한다.
- request.getParameter의 의미는 http://URL 주소/GuGu.jsp?dan=2 에 해당되는 값.
- URL 주소 뒤에 ?을 붙이고 dan=(숫자 값)을 넣어주면 그 값이 바로 request.getParameter("dan")의 값이다.
- 구구단의 값을 얻기위해 수작업으로 dan의 값을 바꿔줄 수 없으므로 새로운 태그 <p>를 사용하여 각각의 구구단 주소값을 배정하여 출력해주었다.
- <p> 태그의 의미: 줄 바꾸고 빈 공백 생성
- <a> 태그의 의미: 지정한 URL을 클릭하여 사용 가능
- 주소값 배정을 하려면 a href = URL만 사용 가능 (모든 주소 제외하고 JSP 파일명부터 매개변수 값까지만 가능)
- a href = GuGu.jsp?dan=2
- 주소값 배정을 하려면 a href = URL만 사용 가능 (모든 주소 제외하고 JSP 파일명부터 매개변수 값까지만 가능)
'국비과정 > 자바스크립트 (JSP & Servlet 포함)' 카테고리의 다른 글
| Json function, ajax 사용하는 법 (0) | 2022.03.05 |
|---|---|
| MVC *S 모델을 사용하여 로그인을 구현 (0) | 2022.03.04 |
| JSP request & response & out & ServletContext & Session 메서드들 - 내장객체 (0) | 2022.03.02 |
| JSP & HTML input 입력값 받아서 출력하기 (0) | 2022.03.01 |
| JSP와 Servlet을 혼용하여 사용해야 하는 이유 (0) | 2022.03.01 |