본문 바로가기
Front-end (국비)/이론

23.06.27 수업 정리 (JSP / Java Server Pages)

by Hwanii_ 2023. 6. 28.
728x90

JSP 는 자바를 웹 서버에서 쉽게 쓰기 위한 기술이다.

 

그동안, 작업한 파일의 포맷은 .html 이였다.

이는, 자바를 인지하지도, 컴파일 하지도 못하는 포맷 이다.

 

자바 언어를 mark-up language 사이에 끼어 넣으려면,

.jsp 로 끝나는 파일을 사용해 주면 된다.

 

[ 참고 ]

.jsp 파일을 만들 때, 에러가 뜬다면,

해당 프로젝트 내부에 라이브러리를 넣어주면 해결 된다.

 

해당 프로젝트 우클릭 - 프로퍼티 - 자바 빌드 path -

라이브러리스 - 클래스 path - add 라이브러리 -

서버 런타임 - 아파치 톰캣 - 피니쉬 -

apply - apply and close

 

0.

<%@ ... %>

는 지시어 라고 명칭한다.

 

<%@ page ... %>

== 페이지 지시어.

 

 

해당 페이지 지시어 에는, 3가지 속성이 존재 하고 있다.

 

1.

<% ... %>

스크립트릿 이라고 한다.해당 스크립트릿 으로 둘러쌓인 스크립트 영역 내부에 자바 언어를 작성 한다.

 

2.

 

 

 

시간을 표현해보고 싶어서, java의 util 에서 Date() 클래스를 불러왔다.

 

위의 코드를 보면, 태그언어 사이에 자바 언어를 끼어 놓은 모습을 확인 할 수 있다.

 

위의 코드는 <%= ... %> 표현식 사이에 둘러 쌓여 있다.

 

근데, 위의 코드는 자바로 따지면, 임포트를 직접적으로 하고 있는 모습을 볼 수 있다.

 

그래서, 이것을 페이지 지시어에 속성으로 추가해 주는 방식으로 표현 할 수 있다.

 

 

이렇게 위에 import 속성으로 페이지 지시어 내부에 import를 하면,

 

아래는 다음과 같이 간단하게 표현이 가능 하다.

 

 

 

 

자바 언어를 사용하기 위해 꼭 <% ... %> 스크립트릿 으로 둘러 쌓인 스크립트 영역

내부에 자바 언어를 작성 한다.

 

자주 나오는 느낌이

<% ... %> 또는 <%= ... %> 인데, (이 밖에도 더 있다.)

 

<%= ... %> 표현식은 다음과 같다.

 

  • 변수 또는 메서드의 결과값을 출력.
  • 자바 코드를 삽입하는 것보다 더 간단하게 출력 가능.
  • 변수나 메드를 사용할 때 세미콜론(;)을 사용하지 않음.

 

자바의 system.out.println 과 동일한 느낌이다.

 

근데, <%= ... %> 는 결과값을 웹페이지에 출력하기 때문에,

out.println 으로 사용 한다.

 

여기 개념 추가 정리 하기.

 

 

 

<% ... %> 는 스크립트릿 라고 하며, 다음과 같다.

 

  • 자바 코드를 삽입하기 위한 태그.
  • 기존 자바 언어를 동일하게 사용할 수 있음.

 

3.

사용자가 전송한 데이터들은 request 객체에 저장 된다.

 

별도의 선언 없이 사용 가능한 객체들이 여러개 있다.

 

이것을 "내장 객체" 라고 한다.

JSP 에서 기본 제공 해주는 객체 이다.

 

request 객체 == "내장 객체"

 

4.

웹에서의 사용자가 전송한 데이터 + 모든 데이터들은

String 타입으로 반환 된다.

 

그래서, 만약에 코드를 구현할 때, 데이터의 타입을 int 타입으로 선언 했다면,

Integer.parseInt() 를 통해, 강제형변환을 해줘야 한다.

 

5.

request.getParameter("값(변수명)")

 

위에서, 사용자가 전송한 데이터들은 request 객체에 저장된다고 했다.

 

request (주체). getParameter() 를 하면,

말그래도 () 안에 어떤 파라미터 (매개변수)의 값을 get 하겠다는 메서드 이다.

 

6.

 

계산기를 만들어 보기.

 

 

 

사용자로부터 전송된 값을 받으면, 그 값은 request 객체에 저장 된다고 했다.

 

데이터는 String 타입으로 반환된다고 했는데,

 

계산기 이기 때문에, 숫자를 더하고 빼고 하는 기능이 구현 되어야 하는 상황이고,

따라서, 데이터가 int 타입 이어야 한다.

 

그래서 int 타입으로 형변환을 해줘야 한다.

 

 

int 타입의 변수 num1 에 사용자로부터 전송받은 값을 저장 할거야.

 

사용자로부터 (웹 페이지로 부터) 전송받은 값은 request 객체에 저장 됬고,

 

해당 객체에서 get 할거야, "num1" 이라는 데이터값을 ~

 

그런데 그 값이 String 타입이니, 이미지와 같이 형변환을 해주는 모습을 확인 할 수 있다.

 

달랑 위의 이미지만 있으니 이해가 안될 수도 있으니, 아래의 이미지를 확인해보자.

 

 

form 태그 안에 input 태그가 있다.

 

현재, 웹페이지로부터 (사용자로부터) 데이터를 전송 받으려고 하는 상황이다.

 

즉, 에이잭스 메서드를 통해 JSON 에서 데이터를 받는 상황이 아니다.

 

그래서, form 태그를 사용한 것이다. == 웹페이지에서 데이터를 받기.

 

-----------------------------------------------------------------------

>> 개념 공부 하기.

select 태그와, option 태그

이 두 태그는 사용자 편의성을 증가시킨 요소들 이다.

UI / UX

-----------------------------------------------------------------------

 

num1 과 num2 를 사용자에게 입력받아서,

사용자가 submit을 하면 값이 String 타입으로 전송된다.

 

+와 - 를 나타내는, op 역시 String 타입이고,

얘는 단순 보여주는 역할이고, 계산이 필요 없기에,

 

위의 <% ... %> 는 스크립트릿 영역에서

형변환을 하지 않고,

그냥 String op = request.getParameter("op");

라고 작성한 모습을 볼 수 있다.

 

 

마지막으로, 계산 결과를 result 라는 변수명으로 줄것인데,

얘를 사용하려면, 스크립트릿 영역에 result 변수를 선언해 줘야 사용이 가능 하다.

 

 

끝으로, 

 

포스트 요청이 들어왔다면 ~

 

이렇게 큰 if문으로 감싸져야지만 null 에러가 뜨지 않게 되는데,

이 개념은 다음과 같다.

 

웹 페이지가 처음 열릴 때, GET 방식으로 열리는데,

(세상에 모든 웹페이지 화면을 로드 하는 요청은 GET 방식 이다.)

 

그러기 때문에 if문을 "POST" 방식으로 .equals() 를 해놓으면,

if문이 false 이기 때문에, 해당 if 문을 통과하게 된다.

 

이것이 의미하는 바가 뭐냐면,

만약에 통과를 하지 않고, 들어가게 된다면,

num1이랑 num2 의 값이 초기화 되어있지 않아서,

즉, null 이라서 오류가 뜨게 되는 것이다.

 

그래서 if 문을 통과하게 만들고, 아래의 form 태그에서

num1 과 num2 의 값을 전송받고,

form 태그의 전송방식이 POST 방식이기 때문에,

if문이 true가 되서, 해당 로직이 실행 하게 되는 것 이다.

 

7.

위에서 계산기를 만들어 보았다.

그런데, JSP 포맷에서 자바 (백엔드) 부분과, 프론트 영역의 코드를 모두 작성했었다.

 

실제로는, 이렇게 작성하지 않기 때문에, 이 둘을 분리하는 작업을 해보려고 한다.

 

이렇게 분리 하는 작업이 결국 자바에서 계속 했던 MVC 패턴으로 작성하는 것이고,

이는 결국 유지보수가 용이해짐을 의미 한다.

 

여기서 궁금한점이 생길 수 밖에 없다.

 

그렇다는 것은 M 부분을 따로 분리 시켜야 한다는 것인데,

분리 시키고 나서, 그 파일을 어떻게 JSP와 연결 시키지 ?

 

>>

 

자바에서 클래스 간의 연결을 위해서 하는 방법은 서로를 포함관계로 만드는 것이였다.

즉, 객체를 선언하고 초기화 했다.

 

JSP 에서 객체를 선언하고 초기화 하는 방법은 아래와 같다.

 

액션태그

 

<jsp:useBean id = "참조변수" class = "폴더명.클래스명" /> 이다.

 

 

참조변수는 위의 이미지의 cb를 의미 한다.

 

폴더명은, M의 클래스가 있는 폴더를 의미 한다.

src - main - java - test

 

 

위에서 액션 태그를 사용해서 객체화를 했다면,

 

꼭 해줘야 하는 것이 VO 클래스의 멤버변수 (프로퍼티 / 속성) 을

JSP 에서 초기화 해주기 위해서 setter을 불러내 줘야 한다.

 

 

setter

 

<jsp:setProperty property = "*" name = "참조변수" />

 

*은 속성의 모든것을 가져오겠다는 의미.

 

name은 위에서 객체를 선언했을 때 사용한 참조변수명과 같은것으로 해주면 될듯 하다.

 

추가로,

setter를 불러오는 액션태그가 있으니,

 

반대로,

getter를 불러오는 액션태그도 있다.

 

 

name 부의 참조변수명은 동일한데,

 

property의 값이 다른것을 볼 수 있다.

 

얘는 이제, get할 속성 (멤버변수 / 프로퍼티) 를 지정해준것이다.

 

아래의 이미지 처럼 간결하게 get 할 수 있다.

 

 

참조변수명.getter() 이다.

 

이것은 자바의 문법이기 때문에, 

 

<%= ... %> 내부에 작성해주면 된다. (표현식)

 

결과값을 출력하면 되는 상황이니, 스크립트릿이 아닌,

표현식을 사용한 모습이다.

 

 

 

아래는 자바 (백엔드) 클래스 이다.

 

 

 

num1은 연산하기 위한 첫번째 숫자.

num2는 연산하기 위한 두번째 숫자.

 

op는 +, - 등의 연산자를 뜻하는 변수명.

 

result는 연산 결과를 의미하는 변수명.

 

 

멤버변수 (속성 / 프로퍼티) 를 private 처리 해줬으니,

getter와 setter 가 필요하다.

 

null 오류 방지를 위한 if 문 체크 하기.

 

첫번째 숫자와 두번재 숫자의 연산을 하게 해주는 로직 이다.

 

 

Bean 클래스에서 만들어 놓은 함수를, JSP 에서 사용하는 모습을 볼 수 있다.

 

cb .calculate()는 output이 void 이기 때문에, <% ... %> 즉 , 스크립트릿 으로 사용 했다.

 

 

 

이렇게 클래스를 나눠서 작성 하는데,

이것도 사실 완벽하지 않은 설계 이다.

 

이 클래스의 이름은 어쩌구저쩌구Bean 클래스인데,

기능을 구현한 클래스를 의미 한다.

 

기존 자바에서 VO 클래스와 DAO 클래스를 분할 해서 만들었던것 처럼,

 

이것 또한 VO 클래스와 DAO 클래스로 분할 해서 만들어 줘야 한다.

 

반응형