IT 배움터

   액션 태그를 활용하여 jsp파일 사이의 데이터 교환이나, java파일에서 jsp로 데이터를 보내는 것을 배웠다. 이를 통해서 클라이언트가 웹 페이지에 요청을 보내면 컨트롤러에서 모델을 통해 데이터를 주고받아 다시 그 데이터를 필요한 웹에 보내는 작업을 거치며 클라이언트가 요청에 맞는 화면이 나타나는 기능을 MVC라고 부른다. 그래서 오늘은 이러한 구조 방식을 이해하고 활용한 코드를 확인하고 풀어보겠다.

   < 만들어 볼 페이지의 완성본 >   

   < Book-Market 사이트 만들어보기 ③ >   

   먼저 도서 목록을 누르면 제품의 정보들을 출력할 수 있도록 제품을 위한 양식을 작성해야 한다. 객체 생성을 위한 클래스에 Serializable 인터페이스를 상속 받았는데, 이 기능은 데이터가 직렬로 전송될 수 있도록 해주는 것이라고 한다. 필요한 정보들을 모두 변수로 만든 뒤, 객체 생성에 필요한 생성자를 작성해주는데 매개변수가 필요한 생성자가 있을 경우 [Source]탭을 통해 필요한 항목만 체크하면 알아서 생성자를 만들어 준다. 같은 방식으로 다른 변수들의 get/set 함수를 만들어 주면 책 한 권당 여러 데이터를 담을 수 있는 묶음 하나가 완성된다.

   이렇게 복잡한 메서드나 로직 하나 없이  단순 변수와 생성자 메서드로 이루어져 있는 양식 클래스를 DTO 라고 부른다.

   Book 클래스를 통해 만들어질 객체를 담을 저장소가 필요하다. 그리고 이 저장소는 MVC에서 모델을 담당하여 컨트롤러에게 데이터를 전해 줄 공간이 되기도 한다. 따라서 데이터가 담기기 위한 이 장소는 무조건 존재해야만 하기 때문에 static을 붙여 별도의 객체 생성과정을 없애주기로 했다. 기본 생성자 안에는 Book 클래스를 이용하여 총 3개의 도서목록을 만들어 add를 추가해 ArrayList 객체에 담기게 해두었다. 저장소는 미리 static으로 생성자를 만들어 저장소 안에 제품이 있는 상태로 만들어 두었는데, priveate 접근 제어자 때문에 외부에서 해당 변수에 접근할 방법이 없으니 get() 함수를 만들어 사용자가 호출하면 하나의 주소값을 반환하는 싱글턴 패턴을 사용하게 된다. 이로써 유일무이한 저장소가 완성되었다. 이제 이 저장소에 담긴 데이터를 사용자가 호출(전체 상품 보기)하면 사용자 화면에 데이터를 보내는 것을 해보도록 하자.

   HTML에서 사용자가 a태그, 혹은 form태그를 작성하여 submit을 하게 되는 것을 우리는 요청이 발생했다고 부른다. 사용자와 HTML 사이에서 일어난 요청은 곧바로 컨트롤러로 들어와 필요한 데이터를 모두 저장한 후, 저장소인 모델로 들어가 데이터를 가공하여 다시 요청이 발생한 곳으로 데이터를 돌려보내야 한다. 따라서 지정된 주소로 들어오게 되면(webServlet이 주소가 된다) 먼저 저장소를 만들어 request객체에 해당 저장소를 담아 forward를 통해 이동한 장소로 보내게 하였다.

   여기서 주의할 점은 setAttribute로 객체를 담게 되면 다양한 종류를 담아내기 위해 최상위 부모, 즉 조상 요소인 Object타입으로 저장되는데, 옮겨담은 객체를 사용하기 위해서는 아래와 같이 강제 형변환을 통하여 사용해야 한다.

   컨트롤러를 통해 이동된 페이지에서 request에 담긴  객체를 사용하기 위해 형변환을 통하여 새로운 변수에 저장하였다. 이제 Book 클래스를 담아둔 List에서 하나씩 꺼내어 진열하기 위해 반복문을 사용하여 작성하게 되는데, 여기서 함수의 종결어미를 HTML 뒤에 작성하게 되면 그 안에 담긴 HTML내용도 같이 반복되게 된다. 따라서 for문 시작할 때 Book 객체를 하나 꺼내고 필요한 데이터는 get()함수를 통해 해당 객체의 내용을 가져와 반영한다.

   이렇게 for문이 List의 크기만큼 돌며 알아서 내용물을 가져와 반복하게 되니 상단의 이미지처럼 세 개의 책 설명이 나타나는 것을 확인할 수 있다. 이 부분이 V(사용자의 요청, View) → C(컨트롤러) → M(모델, 저장소) → C(컨트롤러를 통해 페이지 이동) → V(사용자의 요청에 따른 View를 반영) 의 순서를 따른 MVC의 기초라고 볼 수 있겠다. 다만 모델은 서버를 통해 다른 데이터 베이스에 접근하는 것을 말하는데, 아직 연결을 배우지 않았기 때문에 임의로 만든 저장소를 모델이라고 가칭했을 뿐임을 참고하자.

   디렉티브 태그와 함께 JSP 페이지를 구성하는 태그 중 하나인 액션태그는 JSP에서 페이지와 페이지 사이를 제어하는데 쓰이거나 자바빈즈(객체 생성)와 같은 다양한 기능을 제공하고 있다. 오늘은 JSP기능을 좀 더 확장 할 수 있는 액션태그를 사용하여 페이지를 제어하거나 변수값을 이용하여 좀 더 동적인 JSP를 작성하는 법을 알아보겠다.

   디렉티브 태그는 <%>로 작성되었지만 액션태그는 사용자 정의 태그처럼 작성하여 사용하게 된다. 이 외에도 다양한 태그가 존재하나 지금은 가장 많이 쓰이는 것 위주로 정리해보았다. 디렉티브는 해당 페이지 내에서 속성이나 환경을 설정하는 데 사용한다면, 액션 태그는 문자 그대로 좀 더 동적인 것에 초점이 맞춰져 있다.

   forward 액션 태그   

   forward 액션 태그는 해당 페이지에서 태그가 실행되면 page에 입력된 다른 파일의 화면을 출력한다. 여기서 주의해야 할 점은 출력버퍼에 송출할 내용을 담는 중 해당 액션이 실행되면 버퍼에 쌓인 내용물을 모두 버리게 되는데, 만약 출력 버퍼를 모두 채울만큼의 내용물이 있다면 클라이언트 화면에 송출하는 상황이 발생하여 예기치 못한 화면이 사용자에게 노출 될 수도 있으니 용량이 큰 웹을 다룰땐 forward 사용에 주의해야 한다.

   그래서 출력된 화면을 살펴보면 forward를 실행한 페이지의 내용물은 하나도 출력되지 않고, 바로 다음 페이지로 넘어가며 해당 jsp 파일에 있는 내용이 출려된 것을 확인할 수 있다.

   include 액션 태그   

   디렉티브 태그에서도 사용되었던 include는 액션 태그에 오면서 그 용도가 살짝 다르다. 먼저 해당 페이지에 다른 페이지의 내용을 삽입하는 것 까진 동일하나, 디렉티브 태그에서는 그저 코드 소스를 복사하여 붙여넣는 방식이었다면 액션 태그는 해당 페이지의 내용을 번역하여 나온 값을 들고와 해당 페이지에 출력하여 붙여넣는다. 즉, forward처럼 아예 이동을 하기 때문에 데이터 처리를 다른 페이지에서 처리할 수 있다. 즉, 이후 작성할 param 액션 태그를 활용하여 파라미터를 다른 페이지에 넘길 수 있는 것이 가능한데, 이렇게 되면 좀 더 동적인 웹페이지를 제작할 수 있게 된다.

   앞서 디렉티브 태그의 include는 어떤 문서의 구조적인 부분이 계속 반복되거나 똑같은 부분을 작성하여 붙여넣는데 용이하다면 액션 태그의 include는 다양한 변수의 값을 규칙에 맞게 처리하는 기능적인 부분을 반영하는데 사용된다.

   param 액션 태그   

   param 태그는 현재 페이지에서 발생된 값들을 다른 페이지에 전송하고자 할 때 사용되는 액션태그다. 앞서 forward와 include 태그는 지정된 파일경로로 이동한다고 했는데, 그들의 종결어미 사이에 param 태그를 사용하게 되면 이동할 때 지정된 값을 가지고 해당 페이지로 넘어갈 수 있다. 즉, 파라미터 전송이 가능한 형태가 된다. 실습에서 forward를 사용하여 넘어갈 페이지에 param 태그를 사용하여 값을 지정해보았다. name은 쉽게 말해서 변수, value는 값인데 키 : 밸류로 저장되는 맵과 유사한 방식으로 저장된다. 여기서 id는 admin, name은 함수를 사용하여 관리자라는 값을 할당했는데 여기서 바로 문자열을 쓰지 않고 URLEncoder를 쓴 이유는 JSP간에 값을 가지고 이동하다 보면 문자 같은 경우는 원 데이터가 손실 날 가능성이 크기 때문이다. 따라서 인코딩과 디코딩을 통해 해당 값을 보호처리 하는 것이 안전하다.

   이렇게 param으로 지정된 값들은 모두 request라는 객체에 담기게 되는데 다른 페이지에서 꺼내어 사용할 경우에는 request가 가지고 있는 get() 함수를 사용하여 꺼낼 수 있다. 값을 꺼낼 때는 맵을 이용한 것 처럼 name(key)명을 입력하면 이어진 값이 출력되게 된다. 여기서 인코딩으로 한번 감쌌던 name의 값을 다시 불러오기 위해서는 디코드 과정을 거치면 문제없이 출력되는것을 확인할 수 있다.

   useBean 액션 태그   

   자바빈즈란, 쉽게 말해서 생성된 객체를 의미한다. jsp 페이지에서 객체를 생성하는 방법은 디렉티브 태그를 통해 패키지를 import시키고 함수 부분에서 객체를 선언하듯 만들면 되지만 이는 함수 내에서 작성하기 때문에 언제든 해당 페이지를 벗어나면 사용할 수 없게 된다. 이를 보완하기 위해 생성된 객체가 언제까지 유지될 지 정하고 조금 더 쉽게 객체를 생성하기 위해 useBean액션 태그를 사용하는 것이다.

<jsp:useBean id="자바빈즈 식별 이름(참조변수)" class="자바빈즈 원본(패키지)" scope="유지 될 범위" />

   여기서 주의할 점은, 생성할 때 파라미터를 받지않는 기본 생성자가 있어야 useBean으로 객체 생성이 가능하다. scope는 해당 객체가 언제까지 사용될 지 예상하여 유통기한을 부여하는 것과 같은데, 사용되는 속성으로는 page(해당 페이지 내에서만 사용), request(1회 이동까지 사용), session(세션이 만료될 때까지 사용), application(서버가 닫힐 때까지 사용) 가 있다.

   jsp에서 객체 생성을 한 뒤 변수의 값을 불러오기 위해 미리 person이라는 클래스를 만들고, useBean을 통해 person이라는 변수에 해당 클래스의 주소를 저장하였다. 사용 범위를 request로 지정하여 한 번의 이동 후에도 사용할 수 있게 하였고, 당장은 이동 없이 해당 페이지에서 person.get()함수를 통해 private로 접근이 제어된 상태인 변수의 값을 호출하는 것을 확인할 수 있었다.

   위와 같이 생성된 객체를 이용하여 내용을 출력하는데, 처음은 원래 저장되어 있던 내용을. 두번째는 set()함수를 이용해 내용을 바꾸고, 다른 페이지의 결과 값을 붙여 넣었더니 set() 함수로 바뀐 값이 출력되어 나온 것을 확인할 수 있었다. 여기서 중요한 것은 scope인데, request(1회 이동)를 사용했기 때문에 해당 페이지에서 바꾼 값이 다른 페이지에도 적용되어 출력되었다. 여기서 범위를 page(해당 페이지)로 바꾸게 되면 exam4-7.jsp에서 생성한 자바빈즈와는 다른 객체가 되기 때문에 아무런 영향을 주지 않는 것을 알아볼 수 있다.

   즉, 자바빈즈를 socpe까지 동일하게 만들어야만 같은 객체로 생성이 된다는 의미이다.