국비/JSP

2023.03.29 44일차 JSP

춘핑이 2023. 3. 29. 16:45

44일차 JSP

html과 자바코드가 섞여잇고 결국 자바코드로 바뀐다.
request는 클라이언트가 보낸 요청들을 쪼개서 톰캣에 저장해놓는다.
이것을 쪼개서 보는게 서버에서 해야할일이다.
중요하게 볼것이 쿼리스트링이다.
&기준으로 파라미터들로 이루어져있다.

6.17 select-option

선택상자가 생긴다.
name 속성은 select에 value는 option에있다.
선택된 옵션의 value가 select name속성으로 넘어오게 된다.
multiple="multiple"이라는 속성을 넣어주면 여러개를 선택할 수 있다.
컨트롤버튼 눌러서 선택하고 체크박스와 유사하게 넘어가게 된다.

<h1>select option</h1>
<!-- form>select>option[value=value$]{value$}*5^input:s -->
<form action="">
    <select name="param1" id="" multiple="multiple">
        <option value="value1">value1</option>
        <option value="value2">value2</option>
        <option value="value3">value3</option>
        <option value="value4">value4</option>
        <option value="value5">value5</option>
    </select>
    <input type="submit" value="전송" />
</form>        

6.18 select 연습하기

<h1>select option</h1>
<!-- 코드작성 -->
<form action="">
    <select name="phone" id="">
        <option value="skt">skt</option>
        <option value="kt">kt</option>
        <option value="lg">lg</option>
    </select>

    <select name="movie" id="" multiple="multiple">
        <option value="슬램덩크">슬램덩크</option>
        <option value="스즈메의문단속">스즈메의문단속</option>
        <option value="던전앤드래곤">던전앤드래곤</option>
        <option value="아바타:물의길">아바타:물의길</option>
        <option value="서치2">서치2</option>
    </select>

    <input type="submit" value="전송" />
</form>        

<hr />

<%
    String phone = request.getParameter("phone");
    if (phone != null){
        out.println("<h1>");
        out.println("통신사: " + phone);
        out.println("</h1>");
    }

    String[] movies = request.getParameterValues("movie");
    if (movies != null){
        out.println("<h1>선택된 영화들</h1>");
        out.println("<ul>");
        for (String m : movies){
            out.println("<li>");
            out.println(m);
            out.println("</li>");
        }
        out.println("</ul>");
    }
%>

6.19 action

action속성은 다른 페이지로 이동하는 역할을 한다.
작성한 폼 요소들이 form요소들(input select)의 값이 action속성의 경로로 이동한다.
쿼리스트링 기준의 경로로 이동하게 된다.
action 경로에 ?쿼리스트링이 붙어서 가게 된다.
작성하지 않으면 현재 페이지를 로드한다.

<h1>action 속성</h1>
<h1>작성된 form요소들(input select)의 값이 어디로 전송되어야?</h1>
<h1>작성하지 않으면 현재 페이지</h1>
<form action="https://search.daum.net/search">
    <input type="text" name="q"/>
    <input type="submit" value="검색"/>
</form>

https://search.daum.net/search?q=검색내용으로 넘어가게 된다.

6.20 action연습

전송 버튼을 누르면 query파라미터와 값이 https://search.naver.com/search.naver로 넘어가도록해보자.
쿼리name은 query

<h1>action 속성</h1>
<form action="https://search.naver.com/search.naver">
    <input type="text" name="query"/>
    <input type="submit" value="검색"/>
</form>

6.21 action -2

보통 다른 사람의 사이트로 가는 경우는 없고 내가만든 사이트로 간다.
주소를 넣어서 가면된다.

<h1>action from</h1>
<form action="/JSP2023/ch03/lecture/06form/18actionto.jsp">
    <input type="text" name="query" />
    <input type="submit" value="검색" />
</form>

<h1>action to</h1>
<%
    String value = request.getParameter("query");
    if(value != null && !value.isEmpty()){
%>
        <h1><%= value %> 검색 결과 보여주기</h1>
<%        
    } else{ 
%>        
    <h1>검색어를 입력하세요</h1>
<%        
    }
%>

6.22 action -3

주소를 이동하려할때 전체페이지들 다적었다
그런데 앞의 경로가 현재 페이지의 경로와 같다면 앞은 생략할 수 있다.

<h1>19from.jsp</h1>
<form action="20to.jsp">
    <input type="text" name="param1" />
    <input type="submit" value="전송"/>
</form>

6.23 action 연습

이름과 나이를 다른페이지로 넘겨주는 폼을 만들어보자.

<h1>21.from.jsp</h1>
<form action="22example-to.jsp">
    이름 : <input type="text" name="name"/> <br />
    나이 : <input type="text" name="age"/> <br />
    <input type="submit" value="전송" />
</form>

<h1>22exaxmple-to.jsp</h1>
<h1>name : <%= request.getParameter("name") %></h1>
<h1>age : <%= request.getParameter("age") %></h1>

6.24 action 연습

<form action="viewParameter.jsp" method="post">
    이름 : <input type="text" name="name" size="10" /> <br />
    주소 : <input type="text" name="address" size="30" /> <br />
    좋아하는 동물 :
    <input type="checkbox" name="pet" value="dog" />강아지
    <input type="checkbox" name="pet" value="cat" />고양이
    <input type="checkbox"name="pet" value="pig" />돼지
<br />
<input type="submit" value="전송" />
</form>

<%
    request.setCharacterEncoding("UTF-8");
%>
<b> request.getParameter() 메소드사용 </b> <br />
name 파라미터 = <%= request.getParameter("name") %>
address 파라미터 = <%= request.getParameter("address") %>
<p>
<b> request.getParameterValues() 메소드 사용</b> <br />
<% 
    String[] values = request.getParameterValues("pet");
    if (values!=null){
        for (int i = 0; i < values.length; i++){
%>        
            <%=values[i] %>
<%            
        }
    }
%>
</p>
<p>
<b>request.getParameterNames() 메소드 사용 </b> <br />
<%
    Iterator paramEnum = request.getParameterNames().asIterator();
    while (paramEnum.hasNext()){
        String name = (String) paramEnum.next();
%>        
        <%= name %>    
<%        
    }
%>
</p>
<p>
<b> request.getParmeterMap() 메소드 사용</b> <br />
<%
    Map parameterMap = request.getParameterMap();
    String[] nameParam = (String[]) parameterMap.get("name");
    if(nameParam != null){
%>    
        name = <%= nameParam[0] %>
<%    
    }
%>
</p>

6.25 post

쿼리스트링이 주소로 넘어갈때 노출이 되지 않고자 하면
form에 method속성을 post로 해주면된다.
주소에 쿼리스트링으로 붙어서 가는것은 get전송방식이라고 하고
header가 끝나고 본문에 붙어서가는 것을 post 전송방식이라고 한다.
안쓰면 get방식으로 요청된다.
개발자도구에서 payload를 보면 form data로오면 post parameter로오면 get요청이다.

즉 get 요청 주소에 쿼리스트링으로 붙어서 주소창에 노출되고 길이에 제한이 있을 수 있다.
post 요청 메시지의 본문(body)에 붙어서 주소에 노출 안되고 길이에 제한이 없다.
노출될 필요가 있다면 get방식 만약 로그인과 같은 것을 한다면 post로 보내야한다.

어떻게 보내든 파라미터로 꺼내서 읽으면 된다.

6.26 post - 2

get 방식과 post방식은 인코딩 방식이 다르다.
매번 request.setCharacterEncoding("UTF-8");을 설정해주면된다.

이것 말고 전체 JSP파일 전체에 적용 하고싶다면 Listener를 만들면된다.
contextDestroyed()메소드와 contextInitialized()메소드가 있는데
contextInitialized()메소드를 작성하면된다.

public void contextInitialized(ServletContextEvent sce)  { 
    ServletContext application = sce.getServletContext();
    application.setRequestCharacterEncoding("utf-8");
}

Listener는 이벤트가 발생할때 실행할수 있는 자바 코드이다.
구현하고자하는 Listener의 종류를 고르고 구현하면된다.

어플리케이션이 처음 실행될때 실행하는 코드이다.
모든 jsp가 받는 request파라미터의 인코딩을 utf-8로 해주는 것이다.
설정되면 서버를 restart해줘야한다.

-> 따로 공부할때 본것은 서버 그 자체를 설정해주거나. 필터를 걸어주는 등의 행위를 햇었는데 새로운것을 배우게 되었다.
서버 자체를 설정하는 것은 본디 좋지 않으니 필터와 Listner등의 방식을 설정해야한다.

6.27 post 연습

post전송방식을 출력해보자.

<!-- 전송 방식 : post -->
<h1>27to.jsp</h1>
<h1> 전송방식 : <%= request.getMethod() %></h1>
<h1> address : <%= request.getParameter("address") %></h1>
<h1> movies : <%= Arrays.toString(request.getParameterValues("movie")) %></h1>

<h1>26from.jsp</h1>
<form action="27to.jsp" method="post">
    주소 : <input type="text" name="address" /> <br />

    영화 :
    <input type="checkbox" name="movie" value="아바타"/>아바타
    <input type="checkbox" name="movie" value="슬램덩크"/> 슬램덩크
    <input type="checkbox" name="movie" value="스즈메의문단속"/>스즈메의문단속
    <input type="checkbox" name="movie" value="던전앤드래곤"/>던전앤드래곤
    <input type="checkbox" name="movie" value="집으로"/>집으로
    <br />
    <input type="submit" value="전송" />
</form>

request객체는 종종 등장한다

7.페이지 모듈화와 요청흐름제어

실제는 매우 긴 jsp파일을 작성하게 된다.
그런데 이 jsp를 짧게 끊어서 나눠서 작성할 수 있다.
include 디렉티브가 이 역할 을 한다.

7.1 include 디렉티브

어떤 파일이 어떤 파일안에 포함되어야할때 사용할 수 있다.
전체페이지 내용이 아니라 일부 내용만 소속되어서 들어가야할때 사용된다.
전체 내용이 필요한게 아니라 div태그 안의 내용만 필요하다고 가정해보자.

페이지 디렉티브 <%@ include file =""%> 하면 파일의 내용이 복사되어 들어가는 느낌이 된다.
자바파일을 열어보면 실제로 복붙이 되어 있다.

<div>
    <!-- h1>lorem1^p>lorem -->
    <h1>Lorem.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur voluptatum aspernatur a quasi alias expedita quibusdam perspiciatis quae reprehenderit est natus ipsa excepturi provident tempora molestiae facilis explicabo aut delectus!</p>
</div>

<body>
    <h1>1번 파일 상단</h1>
    <%@ include file="02sub.jsp" %>
    <h1>1번 파일 하단</h1>
</body>

include디렉티브를 사용하면
중간에 삽입된후 서블릿 클래스로 컴파일된다.
main.jsp
코드1 <%@ include file="sub.jsp"%> 코드2
sub.jsp
코드 sub1
-> 코드1 코드sub1 코드2의 자바코드로 작성한다.
그리고 서블릿클래스로 컴파일한다.

7.2 include 액션태그

중간에 삽입하기 위해 include액션태그를 사용할 수 있다.
<jsp:include page="페이지 이름">
include디렉티브 거의 유사한 일을 한다.
include디렉티브는 복붙한 일을 하는데
include액션태그는 호출한 결과를 넣어준다.

디렉티브는 내용이 그냥 out.write에 포함되어서 보내진다.
action태그는 복붙란게 아니라 중간에 실행결과를 가지고 작성한 메소드를 호출한다.
이 결과를 보낸다.
자바코드는 순서대로 실행되니 위에서부터 실행되다가 include부분이 실행되고 다음이 실행된다.
따라서 action태그는 사용한 request객체를 include를 호출할때 파라미터로 넘길 수 있다.
같은 request를 사용한다는 것이 중요하다.

<div>
    <h1>Lorem.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae numquam laudantium quos possimus illo dignissimos doloribus eum eius exercitationem aliquam. Reiciendis aliquam earum magni voluptas autem est corporis illo quidem.</p>
</div>

<h1> 1번 파일 상단 </h1>
    <!-- include action tag -->
    <jsp:include page="02sub.jsp"></jsp:include>
<h1> 1번 파일 하단 </h1>

7.3 include 액션태그 연습

top left bottom은 잘바뀌지 않으니 여러곳에서 재사용될 수 있다는 것을 보여주는 것이다.
필요로 한다면 가져다 사용하면된다.

7.3.1 top

상단메뉴 : 
<span style="text-decoration: underline">
홈
</span>
<span style="text-decoration: underline">
정보
</span>

7.3.2 left

좌측 메뉴 : 

7.3.3 bottom

하단메뉴 : 소개 | 도움말 | 약관 | 사이트맵

7.3.4 Main

<table border="1" cellpadding="0" cellspacing="0">
    <tr>    
        <td colspan="2">
            <jsp:include page="module/top.jsp" flush="false"/>
        </td>
    </tr>

    <tr>    
        <td width="100" valign="top">
            <jsp:include page="module/left.jsp" flush="false"/>
        </td>
        <td width="300" valign="top">
            <!-- 내용 부분: 시작 -->
            레이아웃1
            <br /><br /><br />
            <!-- 내용 부분 : 끝 -->
        </td>
    </tr>

    <tr>    
        <td colspan="2">
            <jsp:include page="module/bottom.jsp" flush="false"/>
        </td>
    </tr>
</table>

7.4 include

액션태그는 같은 request객체를 사용하게 되니 request를 담아주면 같은 값을 사용할 수 있을 것이다.
여기에 담는 것은 여러가지이다.
그 중 하나는 jsp:param이라는 액션태그이다.
쿼리스트링의 name과 value를 담아서 보내주는 것이다.

<%
    String color = request.getParameter("color");
    String bgColor = request.getParameter("bg");
%>
<h1 style="color:<%=color %>; background-color: <%=bgColor %>">
    Lorem ipsum.
</h1>

<h1>05번</h1>
<jsp:include page="06sub.jsp">
    <jsp:param value="green" name="color"/>
    <jsp:param value="pink" name="bg"/>
</jsp:include>

<jsp:include page="06sub.jsp">
    <jsp:param value="white" name="color"/>
    <jsp:param value="black" name="bg"/>
</jsp:include>

7.5 include 특징

엄밀히 말하면 같은 객체는 아니다.
request에 request라는 파라미터를 껍질에 wrapper를 붙여서 보내게 된다.
그래서 이렇게 보내는 파라미터를 사용할 수 있는 것은 아니다.
'껍질'에 붙여서 보낸다고 생각하면 된다.

<h1> 7번 파일 </h1>

<jsp:include page="08sub.jsp">
    <jsp:param value="value1" name="param1"/>
</jsp:include>

<jsp:include page="08sub.jsp">
    <jsp:param value="value2" name="param1"/>
</jsp:include>

<h1><%= request.getParameter("param1") %></h1> <!-- null -->

7.6 attribute

여기부터 !!중요!!
request 파라미터를 꺼내면 무조건 리턴타입이 스트링이다.
스트링 대신 객체를 넣어주고 싶다.

request의 대부분 내용이 getXXX이었는데 setAttribute라는 메소드가 있다.
setAttribute은 두개의 파라미터를 받는다. String, object를 보낸다.
request에다가 String이라는 라벨을 달고 object를 붙여서 보낸다.
어디선가 이름으로 꺼내면 객체를 꺼낼 수 있게 된다.

그래서 request.getAttribute하면 Object타입이 리턴된다.

<%
    Object o = request.getAttribute("myAttr");
%>
<h1><%= System.identityHashCode(o) %></h1>

<h1>9번 파일</h1>

<%
    Object o1 = new Object();
    request.setAttribute("myAttr", o1);
%>
<h1><%= System.identityHashCode(o1) %></h1>

<jsp:include page="10sub.jsp"/>

같은 객체 주소가 출력되게 된다.
11장 표현언어(EL), MVC패턴까지 이어지게 된다. 그래서 매우 중요하다.

7.7 attribute연습

꺼낸 o가 null이 아니게 출력해보자.
request.setAttribute()메소드를 사용해서 abc라는 이름으로 String객체를 보내고
12sub.jsp에선 getAttribute메소드를 사용해서 abc라는 키값을주고 객체를 꺼냈다.
두번째 파라미터가 모든타입의 상위타입인 Object라서 어떤 것이든 담을 수 있다.
getparameter는 String으로 제한되어 있는데 아무거나 넣을 수 있다.
실제 활용할때는 컬렉션이 주로 들어가게 된다.

<%
    Object o = request.getAttribute("abc");
%>
<h1><%=o %></h1>    

<h1>11번 파일</h1>

<!-- 코드 작성 -->
<%
    String str = "안녕하세요 집에 가고 싶어요 살려주세요";
    request.setAttribute("abc", str);
%>

<jsp:include page="12sub.jsp"></jsp:include>

7.8 attribute 연습 2

map에 담아서 출력해보자.

<%
    Map<String, String> map = (Map<String, String>) request.getAttribute("sports");
%>

<h1><%=map.get("basketball") %></h1>
<h1><%=map.get("scoccer") %></h1>

<!-- 코드 작성 -->
<%
    Map<String, String> map  = new HashMap<>();
    map.put("basketball", "마이클조던");
    map.put("soccer", "리오넬메시");

    request.setAttribute("sports", map);
%>
<jsp:include page="16sub.jsp"></jsp:include>

2023.03.29 후기

서블릿은 중요하다. jsp가 곧 서블릿이다.
Jsp는 HTTPJspBase를 상속받는데 HTTPJspBase는 HTTPServlet을 상속받는다.
그래서 Jsp는 서블릿의 메소드를 사용할 수 있다.
서블릿은 톰캣이 활용한다.
Jsp를 언젠간 잘 안쓰겟지만 서블릿으로 배우고 있다. 서블릿을 알고 있으면 스프링때 수월해진다.