MVC(2)

vencott·2021년 5월 19일
MVCweb
0
데이터 공유
Request - Response 이후 data lose
Java에서 데이터를 공유할 수 있는 4가지
Session
Request
JSP
Java 코드를 싣기 위한 태그들
EL
${}
JSTL
JSTL에서 가능한 것들
<c:if>
<c:foreach>
<c:choose>
비동기 통신
AJAX
JSON
Script
jQuery

sinc 인턴교육

목록 보기
12/18

데이터 공유

Request - Response 이후 data lose

http 프로토콜은 request - response의 과정이 끝나면 connection lost -> 데이터를 잃는다

Java에서 데이터를 공유할 수 있는 4가지

  • Context(X)
  • Page(X)
  • Session(O)
  • Request(O)

Container 내의 Session과 Request라는 공간에 Controller가 데이터를 심어놓는다

Session

사용자의 last action 이후 30분의 유효시간

사용자의 상태 정보를 지속적으로 유지

Server side에 저장

Cookie

  • 객체정보를 심을 수 없고 문자열만 사용

  • Client side에 저장

Request

request에 대한 response JSP 페이지에서만 그 데이터를 쓰고 버리면 될 때

// LoginCtrl.java
    
    @Override
	public ModelAndView execute(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("LoginCtrl execute");

		String id = request.getParameter("id");
		String pwd = request.getParameter("pwd");
		UserDTO dto = new UserDTO(id, pwd);
		Object user = service.select(dto); // 하나 이상의 parameter가 있으면 무조건 객체(VO나 DTO)에 담는다
		System.out.println("Ctrl result user: " + user); // User가 있을수도 있고 null일수도 있으므로 유효성 체크를 해서 분기

		ModelAndView mv = new ModelAndView();
		if (user != null) {
			mv.setSend(true);
			mv.setPath("ok.jsp");

			HttpSession session = request.getSession();
			session.setAttribute("loginSession", user);
		} else {
			mv.setSend(false);
			mv.setPath("error.jsp");
		}
		return mv;
	}

JSP

HTML + Java

하나의 Class로 취급

Java 코드를 싣기 위한 태그들

  • <%@
    • Directive Tag(지시자)
    • import, 다양한 전처리
  • <%!
    • Delcaration Tag(선언)
    • 변수, 메서드 선언
  • <%
    • Scriptlet Tag(스크립트릿)
    • service() 메서드의 역할
  • <%=
    • Expression Tag(표현식)
    • 태그 자체가 메서드기 때문에 메소드 선언 등은 불가 --> Declaration Tag에서 수행
    • 문장 마지막에 세미콜론 쓰면 안 된다

JSP는 이미 변수 이름을 선점하고 있는 내장 객체를 가지고 있다(session 등)

// ok.jsp

<%@page import="com.sinc.intern.insa.model.vo.UserVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<%
	// scriptlet tag
	UserVO user = (UserVO) (session.getAttribute("loginSession"));
	%>

	<font color='red'> 
	<%=
	// expression tag
	user.getName()
	%>
	</font>
	님 환영합니다~~~!

</body>
</html>

EL

${}

다양한 위치에 있는 데이터에 접근하기 위한 언어

내장으로 세션 객체를 가지고 있어서 세션의 이름으로 바로 접근 가능

// LoginCtrl
HttpSession session = request.getSession();
session.setAttribute("loginSession", user);

// ok.jsp
<font color='red'>
${loginSession.name}
</font> 님 환영합니다~~~!

JSTL

JSP 표준 태그 라이브러리

여러 프로그램이 공통으로 사용하는 코드를 모아놓은 코드의 집합

JSTL에서 가능한 것들

  • 자바 변수 선언
  • if문이나 for문과 같은 간단한 화면 로직
  • 다른 JSP페이지 호출

<c:if>

JSTL과 EL을 혼합해서 쓸 수 있다

// ok.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:if test="${loginSession != null}">
${loginSession.name}님 환영합니다~~~!
</c:if>

<c:foreach>

<c:forEach var="" items="${}">

// UserDaoImpl.java

@Override
	public List<Object> selectRow() {
		System.out.println("UserDao selectRow");

		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rset = null;
		String loginSQL = "SELECT * FROM INTERN_USER_TBL";
		UserVO user = null;
		List<Object> list = new Vector<Object>();

		try {
			conn = DriverManager.getConnection(URL, USER, PASSWD);
			pstmt = conn.prepareStatement(loginSQL);
			rset = pstmt.executeQuery();
			while (rset.next()) {
				user = new UserVO(rset.getString(1), rset.getString(2), rset.getString(3), rset.getDouble(4),
						rset.getString(5));
				list.add(user);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (conn != null) {
					conn.close();
				}
			} catch (Exception e2) {
				// TODO: handle exception
			}
		}

		return list;
	}
// list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<c:forEach var="row" items="${lists}">
${row}<br/>
</c:forEach>

</body>
</html>
// ListCtrl.java

package com.sinc.intern.insa.ctrl;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sinc.intern.insa.service.UserService;
import com.sinc.intern.insa.service.UserServiceImpl;
import com.sinc.intern.util.Controller;
import com.sinc.intern.view.util.ModelAndView;

public class ListCtrl implements Controller {

	private UserService service;

	public ListCtrl() {
		service = new UserServiceImpl();
	}

	@Override
	public ModelAndView execute(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("ListCtrl execute");
		List<Object> list = service.select();
		
		request.setAttribute("lists", list);
		return new ModelAndView(true, "list.jsp");
	}

}

<c:choose>

<c:when> : if

<c:otherwise> : else

// main.jsp

	<c:choose>
		<c:when test="${loginSession == null}">
			Login ::
			<br />
			<form action="login.inc" method="post">
				<input type="text" name="id" id="id">
				<input type="text" name="pwd" id="pwd">
				<input type="submit" value="로그인">
			</form>
		</c:when>
		<c:otherwise>
	${loginSession.name} 님 환영합니다~~~&nbsp;&nbsp;&nbsp;
	<a href="logout.inc">로그아웃</a>
		</c:otherwise>
	</c:choose>
// logout.java

package com.sinc.intern.insa.ctrl;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.sinc.intern.util.Controller;
import com.sinc.intern.view.util.ModelAndView;

public class LogoutCtrl implements Controller {

	@Override
	public ModelAndView execute(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		HttpSession session = request.getSession(false); // 세션 삭제
		session.invalidate();
		return new ModelAndView(false, "index.jsp");
	}

}

비동기 통신

페이지 Reloading 없이 데이터 통신

AJAX

JSON

현업과 프로젝트에서 서버와 주고받을 건 VO, Collection, Map이 대부분

// JSON으로 다루는 세가지 데이터 타입
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.json.JSONArray;
import org.json.JSONObject;

import com.sinc.intern.insa.model.vo.UserVO;

public class JsonMain {

	public static void main(String[] args) {
//		obj();
//		list();
		map();
	}

	public static void obj() {
		UserVO user = new UserVO("jslim", "jslim", "임정섭", 1000, "EMART");
		JSONObject jObj = new JSONObject(user);
		System.out.println(jObj.toString());
	}

	public static void list() {
		UserVO user = new UserVO("jslim", "jslim", "임정섭", 1000, "EMART");
		List<Object> list = new ArrayList<Object>();
		list.add(user);
		list.add(user);
		list.add(user);
		JSONArray ary = new JSONArray(list);
		System.out.println(ary.toString());
	}

	public static void map() {
		Map<String, Collection> map = new HashMap<String, Collection>();

		UserVO user = new UserVO("jslim", "jslim", "임정섭", 1000, "EMART");
		List<Object> list01 = new ArrayList<Object>();
		list01.add(user);
		list01.add(user);
		list01.add(user);

		List<Object> list02 = new ArrayList<Object>();
		list02.add(user);
		list02.add(user);
		list02.add(user);

		map.put("list01", list01);
		map.put("list02", list02);

		JSONObject jObj = new JSONObject(map);
		System.out.println(jObj.toString());
	}

}

Script

jQuery

script에서 Document에 쉽게 접근할 수 있는 라이브러리

https://www.w3schools.com/

jQuery 라이브러리 import

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

페이지가 다 로드되면 ready 함수 콜백

<script type="text/javascript">
		$(document).ready(function() {
			
		});
</script>

ready 함수 내에 선택자로 document에 접근

// 선택자로 Document에 접근
    <script type="text/javascript">
		var obj = {id: 'jslim', pwd: 'jslim'};
		
		$(document).ready(function() {
			$('#btn').click(function() {
				// window.alert("이벤트 확인");
				// text(), append(), html()
				$('#result').html("<font color='red'>" + obj.id + "</font>" + " , " + obj.pwd);
			})
		});
	</script>

3가지 JSON 객체 종류에 따른 데이터 처리

// obj, list, map
	<button id="btn">script event</button>
	<button id="clearBtn">script clear</button>
	<div id="result"></div>

	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		var obj = {id: 'jslim', pwd: 'jslim'};
		var ary = [{id: 'jslim', pwd: 'jslim'}, {id: 'jslim', pwd: 'jslim'}, {id: 'jslim', pwd: 'jslim'}];
		var map = {
				"list01" : [{id: 'jslim', pwd: 'jslim'}, {id: 'jslim', pwd: 'jslim'}, {id: 'jslim', pwd: 'jslim'}], 
				"list02" : [{id: 'jslim', pwd: 'jslim'}, {id: 'jslim', pwd: 'jslim'}, {id: 'jslim', pwd: 'jslim'}]
		}
		
		function printAry(aryData) {
			$.each(aryData, function(idx, data) {
				$('#result').append("<font color='red'>" + data.id + "</font>" + " , " + data.pwd + "<br/>");
			});			
		}
		
		$(document).ready(function() {
			$('#btn').click(function() {
				// window.alert("이벤트 확인");
				
				// JSON Object
				$('#result').html("<font color='red'>" + obj.id + "</font>" + " , " + obj.pwd);
				
				// List
				printAry(ary);
				
				// Map
				printAry(map.list01);
				printAry(map.list02);
			});
			
			$('#clearBtn').bind('click', function() {
				$('#result').empty();
			});
		});
	</script>

출처: SHINSEGAE I&C 인턴십

profile
vencott
Backend Developer
이전 포스트

MVC(1)

다음 포스트

AJAX

0개의 댓글

관련 채용 정보

Powered by GraphCDN, the GraphQL CDN