JSP 내장객체를 활용한 간단한 twitter 구현하기

안녕하세요. 이번 포스팅은 jsp 내장객체(request, session, application, out 등)를 활용해 간단한 twitter를 구현해보겠습니다.

내장 객체가 무엇인지부터 알아보겠습니다.

JSP내장객체란 'JSP 내에서 선언하지 않고 사용할 수 있는 객체'라는 의미에서 붙여진 이름이다.
- request, response, pageContext, session, application, out, config, exception 등이 있다.
구조적으로는 JSP가 서블릿 형태로 자동 변환된 코드 내에 포함되어 있는 멤버변수, 메서드 매개변수 등의 각종 참조 변수를 말한다.
각각의 내장객체는 모두 getAttribute(), setAttribute() 메서드를 통해 속성을 저장하거나 가져올 수 있다.
- 저장 방식은 key와 value이다.

간단한 트위터이기 때문에 사용자 이름만을 통해 로그인을 진행해보겠습니다.

// twitter_login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>ch06 : twitter_login.jsp</title>
</head>
<body>
	<div align="center">
		<h1>트위터 로그인</h1>
		<hr>
		<form name="form1" method="POST" action="twitter_list.jsp">
			<input type="text" name="username" />
			<input type="submit" value="로그인" />
		</form>
	</div>
</body>
</html>

로그인 버튼을 누르면 twitter_list.jsp로 화면이 전환되게끔 한다.
twitter_list.jsp에 화면이 전환될때 request 객체에 username이라는 key가 포함되도록 한다.
- username은 사용자 이름을 뜻한다.

우선 다음으로 만들 twitter_list.jsp를 먼저 보여드리겠습니다.

twitter_list.jsp에는 이전화면에서 입력했던 '김철수'의 값이 전달돼서 출력을 한 상태이다.

JSP에서는 request 내장 객체를 통해 이전 화면에서 폼태그로 보낸 값을 request.getParameter() 를 통해 가져올 수 있다.

// twitter_list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>

<%
	request.setCharacterEncoding("UTF-8");
	String userName = request.getParameter("username");
	
	if (userName != null) {
		session.setAttribute("user", userName);
	}
%>

<body>
	<div align="center">
		<h3>My Simple Twitter!!</h3>
		<hr>
		<form action="tweet.jsp" method="POST">
			<%=session.getAttribute("user") %><input type="text" name="msg">
			<input type="submit" value="Tweet">
		</form>
	</div>	
</body>
</html>

자바 api를 사용하기 때문에 page 지시어에 import="java.util.*"을 해준다.
스크립트릿 내부의 request.setCharacterEncoding("UTF-8");을 작성한 이유는 이전 화면으로부터 받아진 값인 '김철수'는 한글이기 때문에 한글을 처리하기 위함이다.
request.getParameter("username");을 통해 이전 화면에서 보낸 username의 값을 받아온다.
- userName에는 "김철수"가 저장된 상태이다.
userName을 null 처리를 해준 이유는 다음과 같다.
- 만약 twitter_login.jsp에서 "김철수"로 로그인을 한다. (twitter_list.jsp로 화면이 이동된다.) -> twitter_list.jsp에서 갑자기 네이버를 들어가고 싶어서 네이버로 화면을 전환한다. 그리고 다시 twitter_list.jsp로 전환한다. 그럼 "김철수"가 쓰여져 있을 공간에 "null"이 되어있다. 왜냐하면 twitter_list.jsp에서 네이버로 전환하는 동시에 twitter_login.jsp에서 request에 담아 보냈던 값인 "김철수"가 사라지기 때문이다.(request 내장 객체는 다음화면까지만 유지되는 생명주기를 갖고 있다.)
- 따라서 null이 아닌 경우에는 session 내장 객체에 저장을 해준다.
  - session은 웹 브라우저가 종료될 때까지 유지되는 생명주기를 갖고 있다.
폼 태그에서는 session에 저장된 user를 불러와야하므로 session.getAttribute("user")를 표현식으로 꺼내온다.
사용자가 작성한 글을 msg라는 key에 담아 전송한다.
폼 태그를 전송하면 tweet.jsp로 전송된다.
- tweet.jsp는 화면을 표시해주지 않고 사용자가 작성한 글들을 처리해주는 컨트롤러 역할만 한다.

다음은 tweet.jsp를 구현해보겠습니다. tweet.jsp는 화면이 없고 컨트롤러 역할을 하기 때문에 tweet.jsp가 적용된 후의 twitter_list.jsp 화면부터 보여드리겠습니다.

우선, tweet.jsp 코드입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>트위터 구현하기</title>
</head>
<body>
<%
	request.setCharacterEncoding("UTF-8");
	String msg = request.getParameter("msg");
	String userName = session.getAttribute("user");
	
	ArrayList<String> msgs = (ArrayList<String>)application.getAttribute("msgs");
	
	if (msgs == null) {
		
		msgs = new ArrayList<String>();
		
		application.setAttribute("msgs", msgs);
	} 
		
	msgs.add(userName + " :: " + msg + new java.util.Date());
	
	application.log(msg + "추가됨");
	
	response.sendRedirect("twitter_list.jsp");
%>
</body>
</html>

twitter_list.jsp처럼 한글을 처리해줘야하기 때문에 request.setCharacterEncoding("UTF-8");을 작성한다.
twitter_list.jsp에서 전송한 key인 msg를 request 내장 객체에서 꺼내와 msg 변수에 담는다.
userName을 활용하기 위해 session에서 사용자 이름을 꺼내온다.
ArrayList를 사용하는 이유는 사용자들이 작성한 글들을 차례대로 담을 공간이 필요한데, 가장 적합한 것이 ArrayList이기 때문이다.
- msgs라는 인스턴스 변수를 하나 생성하고 여기에 application 내장 객체에서 key인 "msgs"와 매핑되는 value를 찾아 넣는다.
- (ArrayList<String>)으로 형 변환을 해주는 이유는 key를 통해 꺼내오는 value는 String, int 등 여러가지가 올 수 있으므로 반환값이 Object이다. 그래서 다시 강제로 형 변환을 해줘야 소스코드가 정상 작동한다.
msgs 객체를 null 처리 해준 이유는 사용자가 작성한 글이 없다면 ArrayList가 생성되지 않았음을 뜻하므로 new 키워드를 통해 새로운 ArrayList를 만들어주고 application 내장 객체에 setAttribute 메서드를 사용해 만들어준 msgs 객체를 저장한다. application에 저장하는 이유는 다시 twitter_list.jsp에서 사용하기 위함이다!!
add 메서드를 통해 ArrayList인 msgs에 문자열 형식으로 대입을 해준다.
진행상황을 알기 위해 application 로고를 찍어준다.
tweet.jsp는 컨트롤러이므로 response 내장 객체의 메서드인 sendRedirect를 사용하여 twitter_list.jsp로 다시 화면을 전환시킨다.

여기서 끝난 것이 아니다. ArrayList에 사용자가 작성한 글을 넣어줬으니 이제 twitter_list.jsp에서 ArrayList에 담겨있는 글을 빼서 렌더링을 해줘야 한다. 렌더링 해주는 소스코드를 작성해보자.(twitter_list.jsp에 추가)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<%
    request.setCharacterEncoding("UTF-8");
    String userName = request.getParameter("username");
	
    if (userName != null) {
        session.setAttribute("user", userName);
    }
%>

<body>
    <div align="center">
        <h3>My Simple Twitter!!</h3>
        <hr>
        <form action="tweet.jsp" method="POST">
            <%=session.getAttribute("user") %><input type="text" name="msg">
            <input type="submit" value="Tweet">
        </form>
        <hr>
        <div align="center">
            <ul>
            <%
                // application 내장객체를 통해 msgs 이름으로 저장된 ArrayList를 가지고 옴
                ArrayList<String> msgs = (ArrayList<String>)application.getAttribute("msgs");
			
                // msgs가 null이 아닌 경우에만 목록 출력
                if (msgs != null) {
					
                    for (String msg : msgs) {
                        out.println("<li>" + msg + "</li>");
                    }
                } 
            %>
            </ul>
        </div>
    </div>	
</body>
</html>

application 내장 객체를 통해 ArrayList인 msgs를 꺼내온다.
사실 null 처리를 안해도 되긴 하지만(이미 tweet.jsp에서 했기 때문에), null 처리를 해주고 향상된 for문을 통해서 out.println을 사용하여 화면에 렌더링을 해준다.

application 내장 객체를 사용했기 때문에 twitter_list.jsp에서 네이버를 갔다가 구글을 갔다가 다른 웹서핑을 했다가 다시 twiiter_list.jsp로 이동해도 사용자 이름과 작성한 글들이 살아있는 것을 알 수 있다.

저작자표시

'Programming > Servlet' 카테고리의 다른 글

서블릿(Servlet) url 매핑기법 2가지(web.xml 방식, 어노테이션 방식) (0)	2020.07.30
[JSP] JSTL(Jsp Standard Tag Library) 정리 - <c:set>,<c:out>,<c:remove>,<c:if>,<c:choose>,<c:when>,<c:otherwise>,<c:forEach>,<c:forTokens> 등 (1)	2019.10.27
[JSP] JSP Beans(빈즈)에 대해 알아보자 (0)	2019.10.09
[JSP] 표현언어(Expression Language)란? (0)	2019.10.09
(Servlet/JSP) setCharacterEncoding, setContentType 정리 (4)	2019.10.02

'Programming > Servlet' 카테고리의 다른 글

티스토리툴바