작성 : 2024.08.05 

 

기획의도

강아지를 키우는 사람들은 의료 정보와 애견 동반 가능한 장소에 대한 정보 접근이 어려운 경우가 많습니다. 이러한 문제를 해결하기 위해 강아지 병원 정보, 애견 동반 가능한 휴가 장소 추천, 그리고 내 강아지를 자랑할 수 있는 커뮤니티 기능을 제공하는 웹사이트를 기획하게 되었습니다.

 

의의

지금은 586만 마리의 강아지와 함께 하는 시대!

국민은행 경영연구소가 발표한 2023 한국 반려동물 보고서에 따르면,

현재 대한민국에는 582만 마리 이상의 강아지가 살고 있습니다.

가족처럼 소중한 반려동물과 건강하고 오래 살고자 하는 반려가구가 늘어나면서,

다양한 건강 관리 정보에 대한 필요성도 증가하고 있습니다.

이 웹사이트는 이러한 반려가구가 보다 성숙한 반려견 양육 문화를 형성하는 데 기여하고자 합니다.

반려견의 건강과 행복을 지키기 위한 정보를 제공하여,

반려인들이 반려견과 함께하는 시간을 더욱 소중하게 만들어 드리겠습니다.

 

서비스 소개

  • 강아지 병원 정보: 지역별 강아지 병원 정보 제공
  • 애견 동반 장소 추천: 휴가 및 외출 시 애견 동반 가능한 장소 소개
  • 커뮤니티 기능: 반려견 자랑 및 정보 공유를 위한 커뮤니티 제공

 

 

 

 

0801 ~ 0802

내가 우선 css, html 을 부트스트랩을 이용해 디자인을 한 후 팀원에게 넘겨줬다.

구체적인 디자인 작업을 하는 팀원 1, 

파일정의서, 화면정의서 등 작업을 하는 팀원 2(나),

컨트롤러 구현을 하는 팀원 3. 이렇게 역할을 분담해 작업을 시작했다. 

 

0802 ~ 0803

다른 팀원이 컨트롤러 구현에서 어려움이 많아 내가 다시 파일 구조를 만들고 처음부터 컨트롤러 구현을 해나갔다. 

컨트롤러 구현을 하며 나 뿐만 아니라 모든 팀원이 스프링에 대한 이해도가 낮을 것을 확인할 수 있었다. 

이 기회에 열심히 공부했고 다른 팀원에게도 도움이 될까 싶어 노션에 컨트롤러 구현 과정을 적어 공유했다. 

 

 

팀 노션에서 공유한 부분 발췌 ) 


스프링 공부 _ 컨트롤러 구현과정

 

절대 이 영역 수정하지 말 것 !   

-> 노션을 공유해서 사용하면 내가 쓴 글이 수정되는 일들이 종종 있어 이렇게 적어두었다.

 

공부를 위해 이 과정을 처음부터 따라가주셔도 좋을 것 같습니다.

구현한 공룡게임 코드는 조 단톡방에 0802(금)에 올려드렸습니다.

 

  • 페이지 이동 구조
  1. 로그인 후 아이디와 비밀번호가 일치하면 게임페이지로 이동
  2. 로그인 후 아이디, 비밀번호 둘 중 하나라도 일치하지 않으면 로그인 페이지로 이동
  3. 회원가입 버튼을 누르면 회원가입 페이지로 이동
  4. 회원가입 정보 기입 후 가입하기 버튼을 누르면 자동로그인, 게임페이지로 이동
  5. 회원가입 후 로그인 페이지에서는 다시 1, 2번 참조
  6. 랭킹 버튼을 누르면 랭킹 페이지로 이동

 

  • 컨트롤러 구현

패지지와 폴더 구조가 중요한게 아님

패키지명은 작업 관리의 유지보수성 극대화를 위해 임의로 정한 것.

어떤 패키지에 어떤 클래스가 들어가야하는지에 너무 고민할 필요가 없었다

 

RootController 에서 페이지 이동 처리

회원 가입 화면 요청

회원 가입 요청 (가입시켜줘!)

로그인 화면 요청

로그인 정보 확인 요청 (아이디, 비밀번호 맞는지 폼값을 넘겨 확인)

로그인 정보 불일치 시 다시 로그인 화면으로 이동

 

이걸 코드로 옮기면

 

∨ homecontroller 로 실험해본 코드

더보기
package com.dino.root;

import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;

import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Handles requests for the application home page.
 */
@Controller
public class RootController {
	
	private static final Logger logger = LoggerFactory.getLogger(RootController.class);
	
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		logger.info("Welcome home! The client locale is {}.", locale);
		
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
		
		String formattedDate = dateFormat.format(date);
		
		model.addAttribute("serverTime", formattedDate );
		
		return "home";
	}
	
	@RequestMapping(value = "signup", method = RequestMethod.GET)
	public String signup() {
		System.out.println("signup");
		return "signup";
	}
	
	@RequestMapping(value = "signup", method = RequestMethod.POST)
	public String signup2(HttpServletRequest req) {
		System.out.println("signup 회원가입 정보를 저장");
		System.out.println(req.getParameter("aaa"));
		
		return "home";
	}
	
}

 

homecontroller 에서 수정된 RootController.java

package com.dino.root;

import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class RootController {
    
    private static final Logger logger = LoggerFactory.getLogger(RootController.class);

    // 메인 페이지 이동
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String home() {
        logger.info("Welcome to the home page!");
        return "home";
    }
    
    // 로그인 페이지 이동
    @RequestMapping(value = "/login", method = RequestMethod.GET)
    public String login() {
        return "login";
    }

    // 로그인 요청 처리
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public String loginPost(@RequestParam("userid") String userid,
                            @RequestParam("password") String password,
                            HttpServletRequest req) {
        // 아이디와 비밀번호 확인 (예제로 확인용)
        if ("user".equals(userid) && "password".equals(password)) {
        	return "redirect:/game";
        } else {
            return "login";
        }
    }

    // 회원가입 페이지 이동
    @RequestMapping(value = "/signup", method = RequestMethod.GET)
    public String signup() {
        return "signup";
    }

    // 회원가입 요청 처리
    @RequestMapping(value = "/signup", method = RequestMethod.POST)
    public String signupPost(HttpServletRequest req) {
        // 회원가입 처리 로직 (여기서는 예제로 간단하게 출력만 함)
        String userid = req.getParameter("userid");
        String password = req.getParameter("password");
        logger.info("회원가입한 회원 이름: {} 비밀번호: {}", userid, password);

        // 회원가입 후 바로 로그인 처리
        if ("user".equals(userid) && "password".equals(password)) {
            return "redirect:/game";
        } else {
            return "login";
        }
    }

    // 랭킹 페이지 이동
    @RequestMapping(value = "/ranking", method = RequestMethod.GET)
    public String ranking() {
        return "ranking";
    }

    // 게임 페이지 이동 (로그인 성공 후)
    @RequestMapping(value = "/game", method = RequestMethod.GET)
    public String game() {
        return "game";
    }
}

 

private static final Logger logger = LoggerFactory.getLogger(RootController.class);

logger.info → syso 는 단순 문자열출력으로 확인만 했다면 log 가 더 자세하게 오류 원인을 알려준다고 해서 사용해보았다. (프로젝트 만들면 기본으로 homecontroller에 샘플코드로 찍히는데 log 관련된 것 같길래 구글링해보니 이렇게 사용하면 된다고 해서 사용해본 것)

 

signup.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dinogame</title>
</head>
<body>
<h2>회원가입</h2>
    <form action="${pageContext.request.contextPath}/signup" method="post">
        <div>
            <label for="userid">ID:</label>
            <input type="text" id="userid" name="userid" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <button type="submit">Sign Up</button>
        </div>
    </form>
    <p>이미 회원이신가요? <a href="${pageContext.request.contextPath}/login">로그인</a></p>
</body>
</html>

required 속성 → html5 표준, 필드의 폼을 비워두고 제출하면 브라우저가 자동으로 해달 필드를 강조해 메세지를 표시한다 (유효성 검사와는 조금 다르고 빈 값이 없게 해주는 역할)

 

servlet-context

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

	<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
	
	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven />

	<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
	<resources mapping="/resources/**" location="/resources/" />

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
	
	<context:component-scan base-package="com.dino.root" />
	
	
	
</beans:beans>

두번째 수정)

전체 코드는 0803(토) 자정 쯤 조 단톡방에 보내드렸습니다.

 

  • 파일 구조

 

🛠 수정 사항

  • .do 로 매핑 → localhost:9999/login.do 이런 식으로 들어가야 한다.
  • home.jsp 파일의 이름을 명시성을 위해 game.jsp 파일로 이름 수정
  • 회원가입 기능 수행을 위해 MemberDAO, MemberVO, MemberService 클래스를 만들었다. (RootController에서 처리한 기능 분산)
  • MemberDAO에 DB 연결 코드 작성

 

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/spring/root-context.xml</param-value>
	</context-param>
	
	<!-- Creates the Spring Container shared by all Servlets and Filters -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<!-- Processes application requests -->
	<servlet>
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
		
	<servlet-mapping>
		<servlet-name>appServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>

</web-app>

 

☄️ 공룡게임 전체코드

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 100;

var dinoImg = new Image();
dinoImg.src = '../img/dino.png'; // 공룡 이미지 경로

var cactusImg = new Image();
cactusImg.src = '../img/cactus.png'; // 선인장 이미지 경로

let dino = {
    x: 10,
    y: 230,
    width: 60,
    height: 80,
    draw() {
        ctx.drawImage(dinoImg, this.x, this.y, this.width, this.height);
    }
};

class Cactus {
    constructor() {
        this.x = 500;
        this.y = 230;
        this.width = 20;
        this.height = 40;
    }
    draw() {
        ctx.drawImage(cactusImg, this.x, this.y, this.width, this.height);
    }
}

var timer = 0;
var cactusArr = [];
var jumpTimer = 0;
var animation;
var jumping = false;
var score = 0;

function frame() {
    animation = requestAnimationFrame(frame);
    timer++;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (Math.random() < 0.01) {
        var cactus = new Cactus();
        cactusArr.push(cactus);
    }

    cactusArr.forEach((a, i, o) => {
        a.x -= 1; // 선인장 이동 속도

        if (a.x < 0) {
            o.splice(i, 1);
            score++; // 선인장이 지나갈 때 점수 증가
        }

        collision(dino, a);
        a.draw();
    });

    if (jumping) {
        dino.y -= 4; // 점프 상승 속도
        jumpTimer++;
    }

    if (jumpTimer > 20) {
        jumping = false;
        jumpTimer = 0;
    }

    if (!jumping && dino.y < 230) {
        dino.y += 1; // 점프 하강 속도
    }

    dino.draw();
    drawScore(); // 점수판 그리기
}
frame();

function collision(dino, cactus) {
    var xSubtraction = cactus.x - (dino.x + dino.width);
    var ySubtraction = cactus.y - (dino.y + dino.height);
    if (xSubtraction < 0 && ySubtraction < 0) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        cancelAnimationFrame(animation);
        showGameOver();
    }
}

var jumpSwitch = false;
let lastSpacePressTime = 0;

document.addEventListener('keydown', function(e) {
    if (e.code === 'Space') {
        const currentTime = Date.now();
        const timeSinceLastPress = currentTime - lastSpacePressTime;

        if (timeSinceLastPress > 500) {
            jumping = true;
            lastSpacePressTime = currentTime;
        }
    }
});

function drawScore() {
    ctx.font = "20px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Score: " + score, 10, 20);
}

function showGameOver() {
    ctx.font = "40px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
    createRestartButton();
}

function createRestartButton() {
    var button = document.createElement("button");
    button.innerHTML = "Restart Game";
    button.style.position = "absolute";
    button.style.top = canvas.height / 2 + "px";
    button.style.left = canvas.width / 2 - 40 + "px";
    button.addEventListener("click", restartGame);
    document.body.appendChild(button);
}

function restartGame() {
    document.querySelector("button").remove();
    cactusArr = [];
    score = 0;
    dino.y = 230;
    frame();
}

 


0804 

이슈와 해결, 그리고 참고

  • 부트스트랩 라이브러리에 대한 이해 부족으로 생겼던 이슈

부트스트랩을 사용하면 클래스이름으로 부트스트랩 라이브러리에 값 인식을 하기 때문에 속성을 바꿀 때는 아이디값을 줘야하는데 임의로 클래스 이름을 바꿔 배열이 클어졌다. (왼)

클래스 이름을 원복하고 아이디 값을 줘 해결. (오른쪽)

 

그 밖에 팀원들과 참고한 블로그들)

 

스프링(Spring)에서 자바스크립트(JavaScript) 사용 방법

스프링에서 css, js, image 등의 자원은 파일이 존재하는 url 그 자체로 사용된다. 따라서 url 요청을 해야 하는데 이는 MVC의 DispatcherServlet에서 판단해 Controller에서 RequestMapping Annotation을 검색하게 된

minwoohi.tistory.com

 

 

 

[Spring] 컨트롤러와 프론트 사이에서 값 전달하는 방법의 종류

[1] 들어가며 Spring 프레임워크의 컨트롤러와 JSP사이에서 값을 주고 받는 것은 웹프로그래밍에서 가장 기본적인 작업입니다. 하지만 값을 전달하는 방법의 종류가 많고 프레임워크특성상 많은

admm.tistory.com


0805

우여곡절 끝에 커밋하고 깃에 올리고 발표까지 완료! 

                                              ☄️

                   🦖

         🦖                          🦖             

    🦖          🌋                     🦖                🌋      🦖


프로젝트 마감 후 회고

 

깃을 이용해보기위해 조를 짜 미니프로젝트를 진행해보았다.

미니프로젝트였지만 스프링을 다 이해하고 돌입하게 아니어서 파일구조부터 컨트롤러 구성까지 시행착오가 많았고, 시행착오가 많았던 만큼 스프링에 대해 공부도 많이 됐던 프로젝트다. 사실 여전히 깃은 잘 모르겠지만.. 모르는 만큼 본격적인 프로젝트에 들어가기 전 공부를 해야겠다고 다짐한다! ㅠ

또, 앞으로는 얼마 남지 않은 기간이지만 날마다 그날 작성한 코드들을 압축해 관리하는 습관을 들여야할것 같다. 

그렇게 해놓지 않으니 스프링 JDBC 방식이 뭐였는지 mybatis가 뭐였는지 구별이 안된다. 둘을 제대로 알고 넘어간게 아니라 하날 공부하는 와중에 다른 걸 또 배우니 머리 속에서 정리가 안되는 거다. 그래도 시험을 보며 잘 정리할 기회를 얻어서 다행.. 블로그에도 두 방식을 나눠 정리를 잘 해둬야겠다. 

 

이런저런 팀원들의 사정으로 내가 거의 다 해냈던 프로젝트인데 그래서인지 애정이 정말 크다. 

내가 만든 프로젝트라고 자신있게 말할 수 있을 것 같다. 아주 작은 규모라도 끝을 냈다는 것에 의의를 두고 자신감을 가져야겠다. 회고는 이쯤에서 끝내고 3~4일 가량이었지만 고생했던 프로젝트를 끝냄 기념으로 기록해보려 한다. 



 

프로젝트 주제 : 공룡게임을 할 수 있는 사이트

 

간단한 조작을 통해 누구나 공룡게임을 즐길 수 있고, 회원가입을 하면 본인의 랭킹을 확인할 수 있습니다.

 

기간 ) 0801 ~ 0804

팀원 ) 강유나, ____, ____

 

역할 )

강유나 : 컨트롤러 구현, 회원가입 DAO, VO, Service 기능 구현, jsp파일 css, html, javascript 공룡 게임 구현, 파일 정의서, 화면 정의서 작성

____ : jsp파일 css, html 디자인, 공룡 게임 수정, 팀원에게 깃 사용법 전파

____  : 랭킹 페이지 구현

 

 

☄️ 구현할 페이지 : 게임을 할 수 있는 메인화면, 로그인, 회원가입, 랭킹 확인

 

패키지/ 자바 파일 정의서

shoppingmall 폴더에서 작업 ) -> 초기에는 shoppingmall 이름으로 프로젝트를 모든 조가 일괄적으로 만들었기 때문에 이름이 이렇다.

 

src > main > wabapp 에는 화면을 띄울 jsp 파일이 들어갑니다.

index.jsp → 메인 화면으로 바로 공룡게임을 할 수 있는 화면이 보여집니다.

login.jsp → 로그인 화면입니다.

memberjoin.jsp → 회원가입 화면입니다.

ranking.jsp → 회원들의 게임 점수를 기반으로 랭킹이 매겨집니다.

 

 

자바 파일 및 JSP 파일 정의서 수정

각 기능은 동일하지만 보다 정리된 파일 구조입니다.

-> 컨트롤러를 이해하고 훨씬 더 간결해진 파일 구조다. 

 

 

sql deverloper 에서 작업 )

kit3 계정을 만들어 회원 정보를 담을 테이블과 회원의 점수를 담을 테이블 생성

reate table member(
    id varchar2(15) primary key,
    pass varchar2(20) not null,
    name varchar2(200) not null
    );

create table board(   
    id varchar2(200) primary key,
    score number not null,
    content varchar2(200),
    num number
    );

alter table board 
    add constraint board_mem_fk foreign key (id)
    references member (id);
    
create sequence seq_board_num2
    increment by 1
    start with 1
    minvalue 1;
    
select id,score,content
from (select * from board order by score desc)
where rownum <=20 ;

 

 

화면정의서

 

메인 화면 ( index.jsp )

 

로그인 화면 ( login.jsp )

 

회원가입 화면 ( memberJoin.jsp )

 

랭킹 화면 ( ranking.jsp )

 

 

 

☄️ 실제 구현 화면

 

함께 공유해요 

-> 프로젝트를 하며 새롭게 알게됐던 부분, 함께 나누고 싶은 부분을 '함께 공유해요'라는 이름으로 발표해보았다.

 

  • 스프링에서 정적자원 삽입하기

스프링에서 css, js, image 등의 자원은 파일이 존재하는 url 그 자체로 사용된다. 따라서 url 요청을 해야 하는데 이는 MVC의 DispatcherServlet에서 판단해 Controller에서 RequestMapping Annotation을 검색하게 된다. 이 때 404에러가 발생하게 된다.

따라서 CSS, JavaScript, Image 같은 정적 자원들에 대해 URL을 따로 주어야 하는데 이를 지원해주는 녀석이 mvc:resources이다. 이 태그를 DispatcherServlet에 등록해줘야 사용할 수 있다.

 

어떻게 game jsp에 자바스크립트를 넣었는지에 대한 자세한 설명 참조

 

스프링(Spring)에서 자바스크립트(JavaScript) 사용 방법

스프링에서 css, js, image 등의 자원은 파일이 존재하는 url 그 자체로 사용된다. 따라서 url 요청을 해야 하는데 이는 MVC의 DispatcherServlet에서 판단해 Controller에서 RequestMapping Annotation을 검색하게 된

minwoohi.tistory.com

 

 

  • 공룡게임 참고 - 코딩애플 유튜브영상

 

 

  • 공룡게임 수정

 

로그인을 실행하게 될 경우, 바로 게임 화면으로 이동하면서 게임이 시작되는 부분이 있었다. 이것은 유저의 순발력을 요구하는 플레이가 될 수 있지만, 실제로 게임을 즐기는 유저 입장에서는 굉장히 불쾌할 수 있는 요소중 하나이다. 적어도 게임에 입장하게 되면, 바로 조작할 수 있게 진행해주었어야했었다고 생각했다.

 

참고 문서 :

 

tabindex=1, tabindex=0, tabindex=-1

HTML, CSS(flex/grid), UI/UX, Accessibility, 정찬명

naradesign.github.io

 

 

HTML의 tabindex 속성과 키보드 포커스

Engineering Blog by Dale Seo

www.daleseo.com

 

 

• 이 속성은 문서의 탭 순서 안에서 현재 요소의 순번을 결정한다. 값은 0부터 32767 사이의 숫자여야 한다. 브라우저는 값 앞에 0이 붙어있으면 무시해야 한다.

canvas.tabIndex = 1;
canvas.style.outline = "none"; // 포커스 시 테두리 없애기

 

canvas 에 tabIndex = 1; 을 설정함으로서 로그인에 성공 후, 인게임에 진입하게 되면 가장 먼저 선택을 받을 수 있다.

하지만 이렇게 된다 해도 바로 게임에 진입할 수 있는 상태가 아니기 때문에 focus를 설정해 페이지 진입시, 클릭이 되어있는 상태로 만들어줘야한다. 

// 문서가 준비된 후 캔버스에 포커스 추가
window.onload = () => {
	canvas.focus();
};

window.onload 로 dom이 다 불러와진 경우 자동으로 canvas에 focus를 실행하도록 설정했다.

 

 

 

🌀 스프링 소켓이란?

Spring Socket는 Spring Framework에서 제공하는 WebSocket 프로토콜을 지원하는 기능이다. 실시간 양방향 통신을 위한 프로토콜로, 서버와 클라이언트 간에 지속적인 연결을 유지하고 데이터를 실시간으로 주고받을 수 있게 해준다.

 


 

스프링에서 소켓을 다루기 전 JSP 에서 소켓을 만들어본다.

JSP 에서 작업함.

 

지난 시간 서버 측 작성

 

ChatServer.java - 서버

package websocket;

import java.io.IOException;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/ChatingServer") // 서버명
public class ChatServer {
	
	private static Set<Session> clients = Collections.synchronizedSet(new HashSet<Session>());

	@OnOpen   // 클라이언트 접속 시 실행
	public void onOpen(Session session) {
		clients.add(session);
		System.out.println("웹소켓 연결 :" + session.getId());
	}
	
	@OnMessage // 메세지를 받으면 실행
	public void onOMessgae(String message,Session session) throws IOException {
		System.out.println("메시지 전송 : " + session.getId() + ":" + message);
		synchronized(clients) {  
			for(Session client : clients) {  //모든 클라이언트에게 메세지 전달
				if(!clients.equals(session)) {
					client.getBasicRemote().sendText(message);				}
			}
		}
	}
	
	@OnClose // 클라이언트와 연결의 끊기면 실행
	public void onClose(Session session) {
		clients.remove(session);
		System.out.println("웹소켓 종료 :" + session.getId());
	}
	
	@OnError // 에레 발생 시 실행
	public void onError(Throwable e) {
		System.out.println("에러 발생");
		e.printStackTrace();
	}
	
}

 

web.xml 에서 

<!-- 웹소켓 채팅 서버 -->
  <context-param>
    <param-name>CHAT_ADDR</param-name>
    <param-value>http://localhost:9999/WebSocketProject</param-value>
  </context-param>

위 정보를 추가해줘야 한다.

 

추가된 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>FristJsp</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.jsp</welcome-file>
    <welcome-file>default.htm</welcome-file>
  </welcome-file-list>
  
  <context-param>
    <param-name>INIT_PARAM</param-name>
    <param-value>web.xl에 저장한 초기화 매개 변수</param-value>
  </context-param>
  
<!-- 오라클 설정 정보 -->
<!-- 지금 우리는 드라이버 정보를 초기화 시켜놓았다. 코드에 노출 시키지 않았으며, 앞으로도 이 방법을 쓸 것이다. -->
  <context-param>
    <param-name>OracleDriver</param-name>
    <param-value>oracle.jdbc.driver.OracleDriver</param-value>
  </context-param>
  
    <context-param>
    <param-name>OracleURL</param-name>
    <param-value>jdbc:oracle:thin:@localhost:1522:orcl1</param-value>
  </context-param>
  
    <context-param>
    <param-name>OracleId</param-name>
    <param-value>musthave</param-value>
  </context-param>
  
    <context-param>
    <param-name>OraclePwd</param-name>
    <param-value>1234</param-value>
  </context-param>
  
  
  <!-- 머스트 해브 -->

<!--     <context-param>
    <param-name>OracleId2</param-name>
    <param-value>musthave</param-value>
  </context-param> -->
  
  <!-- 페이징 정보 -->
    <context-param>
    <param-name>POSTS_PER_PAGE</param-name>
    <param-value>10</param-value>
  </context-param>
  <!-- 한 페이지에 출력할 갯수 -->
  
    <context-param>
    <param-name>PAGES_PER_BLOCK</param-name>
    <param-value>5</param-value>
  </context-param>
  <!-- 페이지 목록의 수 -->
  
<!-- 첨부 파일 최대 용량 설정(예제 14-8) -->
  <context-param>
    <param-name>maxPostSize</param-name>
    <param-value>1024000</param-value>
  </context-param>
  
<!-- 웹소켓 채팅 서버 -->
  <context-param>
    <param-name>CHAT_ADDR</param-name>
    <param-value>http://localhost:9999/WebSocketProject</param-value>
  </context-param>
  
  
  
  <filter>
    <filter-name>SetCharEncoding</filter-name>
    <filter-class>org.apache.catalina.filters.SetCharacterEncodingFilter</filter-class>
      <init-param>
        <param-name>encoding</param-name>
        <param-value>utf-8</param-value>
      </init-param>
  </filter>
  <filter-mapping>
    <filter-name>SetCharEncoding</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  
  
  
</web-app>

 

 

 

 

웹소켓으로 채팅 구현 시 사용하는 5가지 어노테이션

 

@ServerEndpoint

@OnOpen

@OnMessage

@OnClose

@OnError

 

 💡 웹소켓 주소 구성 : ws://호스트명:포드번호/컨텍스트(프로젝트명)/서버명 ws://http://localhost:9999/WebSocketProject/WEB-INF/classes/websocket/ChatServer.java

 

MutiChatMain.jsp - 실행시킬 화면

<%@ 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>

<script>
	function chatWinOpen() {
		let id = document.getElementById("chatId");
		if (id.value == "") {
			alert("대화명을 입력 후 채팅창을 열어주세요");
			id.focus();
			return;
		}

		window.open("ChatWindow.jsp?chatId=" + id.value, "",
				"width=350, height=400");
		id.value = "";
	}
</script>
</head>
<body>
	<h2>웹소켓 채팅 - 대화명 적용해서 채팅창 띄워주기</h2>
	대화명 :
	<input type="text" id="chatId" />
	<button onclick="chatWinOpen();">채팅 참여</button>
</body>
</html>

 

ChatWindow.jsp - 채팅 화면이 보여지는 곳

<%@ 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>
<script>
// 서버에 접속
let webSocket = new WebSocket("<%=application.getInitParameter("CHAT_ADDR")%>/ChatingServer");

	// 필요한 값 가지고 오기
	window.onload = function() {
		chatWindow = document.getElementById("chatWindow");
		chatMessage = document.getElementById("chatMessage");
		chatId = document.getElementById("chatId").value;
	}
	
	// 소켓 끊기
	function disconnect(){
		webSocket.close();
	}
	
	//메세지 전송
	function sendMessage() {
		chatWindow.innerHTML += "<div class='myMsg'>" + chatMessage.value + "</div>";
		webSocket.send(chatId + '|' + chatMessage.value);
		chatMessage.value = "";
		// 메세지가 많아지면 스크롤처리
		chatWindow.scrollTop = chatWindow.scrollHeight;
	}
	
	function enterKey() {
		if (window.event.keyCode == 13){
			sendMessage();
		}
	}

	// 소켓이 서버로 가서 동작하는 메소드
	// 웹소켓이 서버에 연결되면 실행, 이 속성의 함수는 자동으로 실행
	webSocket.onopen = function(event) {
		chatWindow.innerHTML += "웹소켓 서버에 연결되었습니다.<br/>";
	}
	
	webSocket.onclose = function(event){
		 chatWindow.innerHTML += "웹소켓 서버가 종료되었습니다.<br/>";
	}

	webSocket.onmessage = function(event){
		// message를 배열 형식으로 받는다
		let message = event.data.split("|");
		let sender = message[0];
		let content = message[1];
		
		if (content != null) {
			chatWindow.innerHTML += "<div>" + sender + ":" + content + "</div>";
		}
		// 메세지가 많아지면 스크롤처리
		chatWindow.scrollTop = chatWindow.scrollHeight;
	}
	
</script>

<style type="text/css">
#chatWindow {
	border: 1px solid black;
	width: 270px;
	height: 310px;
	overflow: scroll;
	padding: 5px;
}

#chatMessage {
	width: 236px;
	height: 30px;
}

#sendBtn {
	height: 30px;
	position: relative;
	top: 2px;
	left: -2px;
}

#closeBtn {
	margin-bottom: 3px;
	position: relative;
	top: 2px;
	left: -2px;
}

#chatId {
	width: 158px;
	height: 24px;
	border: 1px solid #AAAAAA;
	background-color: #EEEEEE;
}

.myMsg {
	text-align: right;
}
</style>
</head>
<body>
	<!-- 나의 아이디를 묶어 보내야 한다 chatId,chatWindow,chatMessage 사용 -->
	대화명 :
	<input type="text" id="chatId" value="${param.chatId }" readonly>
	<button id="closeBtn" onclick="disconnect();">채팅 종료</button>

	<!-- 채팅이 표시되는 공간 -->
	<div id="chatWindow"></div>
	<div>
		<input type="text" id="chatMessage" onkeyup="enterKey();" />
		<button id="sendBtn" onclick="sendMessage()">전송</button>
	</div>
</body>
</html>

창을 여러 개 띄워 메세지를 주고 받을 수 있다.

 

윈도우는 터미널에서 ipconfig를 치면 본인의 ip 주소를 확인할 수 있다.

서버는 ip주소를 뿌리고 클라이언트는 서버의 ip 주소를 받으면 클라이언트끼리 채팅이 가능하다.

 

 

추가로 실험해본 채팅창의 색을 바꾸기(색 전송하기) 반 성공..

 

ChatWindow.jsp

<%@ 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>
<script>
// 서버에 접속
let webSocket = new WebSocket("<%=application.getInitParameter("CHAT_ADDR")%>/ChatingServer");

	// 필요한 값 가지고 오기
	window.onload = function() {
		chatWindow = document.getElementById("chatWindow");
		chatMessage = document.getElementById("chatMessage");
		chatId = document.getElementById("chatId").value;
	}
	
	// 소켓 끊기
	function disconnect(){
		webSocket.close();
	}
	
	//메세지 전송
	function sendMessage() {
		chatWindow.innerHTML += "<div class='myMsg'>" + chatMessage.value + "</div>";
		webSocket.send(chatcolor + chatId + '|' + chatMessage.value);
		chatMessage.value = "";
		// 메세지가 많아지면 스크롤처리
		chatWindow.scrollTop = chatWindow.scrollHeight;
	}
	
	function enterKey() {
		if (window.event.keyCode == 13){
			sendMessage();
		}
	}
	
	function changeColor() {
		let color = "tomato";
		webSocket.send("colorChange|" + color);
	}

	// 소켓이 서버로 가서 동작하는 메소드
	// 웹소켓이 서버에 연결되면 실행, 이 속성의 함수는 자동으로 실행
	webSocket.onopen = function(event) {
		chatWindow.innerHTML += "웹소켓 서버에 연결되었습니다.<br/>";
	}
	
	webSocket.onclose = function(event){
		 chatWindow.innerHTML += "웹소켓 서버가 종료되었습니다.<br/>";
	}

	webSocket.onmessage = function(event){
		// message를 배열 형식으로 받는다
		let message = event.data.split("|");
		let sender = message[0];
		let content = message[1];
		
		if (messageType === "colorChange") {
			chatWindow.style.backgroundColor = content;
		} else if (content != null) {
			chatWindow.innerHTML += "<div>" + sender + ":" + content + "</div>";
		}
		// 메세지가 많아지면 스크롤처리
		chatWindow.scrollTop = chatWindow.scrollHeight;
	}
	
	
</script>

<style type="text/css">
#chatWindow {
	border: 1px solid black;
	width: 270px;
	height: 310px;
	overflow: scroll;
	padding: 5px;
}

#chatMessage {
	width: 236px;
	height: 30px;
}

#sendBtn {
	height: 30px;
	position: relative;
	top: 2px;
	left: -2px;
}

#closeBtn {
	margin-bottom: 3px;
	position: relative;
	top: 2px;
	left: -2px;
}

#chatId {
	width: 158px;
	height: 24px;
	border: 1px solid #AAAAAA;
	background-color: #EEEEEE;
}

.myMsg {
	text-align: right;
}
</style>
</head>
<body>
	<!-- 나의 아이디를 묶어 보내야 한다 chatId,chatWindow,chatMessage 사용 -->
	대화명 :
	<input type="text" id="chatId" value="${param.chatId }" readonly>
	<button id="closeBtn" onclick="disconnect();">채팅 종료</button>

	<!-- 채팅이 표시되는 공간 -->
	<div id="chatWindow"></div>
	<div>
		<input type="text" id="chatMessage" onkeyup="enterKey();" />
		<button id="sendBtn" onclick="sendMessage()">전송</button>
		<button id="colorBtn" onclick="changeColor();">토마토</button>
	</div>
</body>
</html>

문제는 내 채팅창에 색은 바뀌지 않는다..

 

 


 

다시 스프링으로 넘어온다.

본격적으로 스프링 프레임 워크 사용해보기

 

 

스프링에서 오류가 났을 때 이런 메세지를 볼 수 있는데

💡 java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/action-servlet.xml]

이건 action-servlet.xml 이라는 파일을 찾는다는 뜻이다.

 

action-servlet.xml는 핸들러, 컨트롤러, 뷰리저버 정보를 가지고 있는 파일이다.

 

 

property ⇒ 맵 구조

(모든 객체의 구조 알아보기)

 

최종적인 파일 구조

 

 

UIUX _국비과정 0718 [스프링 model1방식 웹만들기]

스프링 JDBC update()→ insert, update, deletequeryForInt()queryForObject() : 실행결과를 자바 객체(VO)로 매핑하여 리턴query() : 검색된 데이터의 row(레코드) 수 만큼 RowMapper객체의 MapRow()메소드가 실행된다. 그

100dumpling.tistory.com

 

지난 시간,

프론트 컨트롤러 (jsp)

DispatcherServlet를 만들었다.

 

▼ DispatcherServlet

더보기
package com.springbook.view.controller;

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

// @WebServlet("*.do") 라고 쓰는 매핑정보가  web.xml에 들어 있다.
// 프론트 컨트롤러의 역할
public class DispatcherServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		process(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		process(request, response);
	}

	private void process(HttpServletRequest request, HttpServletResponse response) {
		// request, response를 받아서 필요한 작업 처리
		// getRequestURI() 포트번호를 제외하고 뒤의 값을 반환
		String uri = request.getRequestURI();
		String path = uri.substring(uri.lastIndexOf("/")); // /login.do <- 이렇게 '/' 뒤의 주소를 가지고 온다

		System.out.println(path);

    // .do 뒤에 뭐가 오냐에 따라 판단
		if (path.equals("/login.do")) {
			System.out.println("로그인 처리");
		} else if (path.equals("/logout.do")) {
			System.out.println("로그아웃 처리");
		} else if (path.equals("/insertBoard.do")) {
			System.out.println("글 등록 처리");
		} else if (path.equals("/updataBoard.do")) {
			System.out.println("글 수정 처리");
		} else if (path.equals("/deleteBoard.do")) {
			System.out.println("글 삭제 처리");
		} else if (path.equals("/getBoard.do")) {
			System.out.println("글 상세 조회 처리");
		} else if (path.equals("/getBoardList.do")) {
			System.out.println("글 목록 검색 처리");
		}

	}
}

요청하는 주소값을 잘 처리하고 있다. 이걸 시작으로 model2방식의 게시판을 만들 수 있다.

 


 

 

로그인 처리가 된 주소를

http://localhost:9999/BoardWeb/login.do 이렇게 바꿔줘야 한다.

 

login.jsp

<%@ 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>
	<center>
		<form action="login.do" method="post">
			<table border="1" callpadding="0" cellspacing="0">
				<tr>
					<td bgcolor="orange">아이디</td>
					<td>
						<input type="text" name="id">
					</td>
				</tr>
				<tr>
					<td bgcolor="orange">비밀번호</td>
					<td>
						<input type="password" name="password">
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="로그인"></td>
				</tr>
			</table>
		</form>
	</center>
</body>
</html>

 

<form action="login.do" method="post"> 를 DispatcherServlet에 써 놓은 주소로 바꿔준다.

DispatcherServlet 에는 login.do로 페이지를 이동하면 어느 화면을 보여줄지 판단하기 위해 모델1방식에서 작성했던 login_proc 의 코드를 옮겨 넣어준다.

모델 1방식에서는 프론트컨트롤러 없이 login_proc가 바로 화면 이동을 할 수 있게 해줬다.

 

→ 글 목록 보기

http://localhost:9999/BoardWeb/getBoardList.jsp 이 주소로 직접 실행하면 안되고

http://localhost:9999/BoardWeb/getBoardList.do 로 직접 접근해야한다.

이렇게 접근해도 주소는 .jsp로 바뀌는데 리다이렉트 방식이기 때문

 

 

DispatcherServlet

package com.springbook.view.controller;

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

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

import com.springbook.biz.board.BoardVO;
import com.springbook.biz.board.impl.BoardDAO;
import com.springbook.biz.user.UserVO;
import com.springbook.biz.user.impl.UserDAO;

// @WebServlet("*.do") 라고 쓰는 매핑정보가  web.xml에 들어 있다.
// 프론트 컨트롤러의 역할
public class DispatcherServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		process(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		process(request, response);
	}

	private void process(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		// request, response를 받아서 필요한 작업 처리
		// getRequestURI() 포트번호를 제외하고 뒤의 값을 반환
		String uri = request.getRequestURI();
		String path = uri.substring(uri.lastIndexOf("/")); // /login.do <- 이렇게 '/' 뒤의 주소를 가지고 온다

		System.out.println(path);
		
		// .do 뒤에 뭐가 오냐에 따라 판단
		if (path.equals("/login.do")) {
			
			   System.out.println("로그인 처리");
			
			   // login_proc 의 코드. 모델 2에서는 프론트컨트롤러가 proc의 역할을 수행한다.
			   String id = request.getParameter("id");
			   String password = request.getParameter("password");
			   
			   UserVO vo = new UserVO();
			   vo.setId(id);
			   vo.setPassword(password);
			   
			   UserDAO dao = new UserDAO();
			   UserVO user = dao.getUser(vo);
			   
			   if(user != null) {
				  HttpSession session = request.getSession();
				  session.setAttribute("id", vo.getId());
			      response.sendRedirect("getBoardList.do");
			      
			   }else{
			      response.sendRedirect("login.jsp");
			   }
			
			   
		} else if (path.equals("/logout.do")) {
			
			System.out.println("로그아웃 처리");
			
			HttpSession session = request.getSession();
			session.invalidate();
			
			response.sendRedirect("login.jsp");
			
			
		} else if (path.equals("/insertBoard.do")) {
			
			System.out.println("글 등록 처리");
			
			request.setCharacterEncoding("UTF-8");
			
			String title = request.getParameter("title");
			String writer = request.getParameter("writer");
			String content = request.getParameter("content");
			
			BoardVO vo = new BoardVO();
			BoardDAO dao = new BoardDAO();
			
			vo.setTitle(title);
			vo.setWriter(writer);
			vo.setContent(content);
			
			dao.insertBoard(vo);
			
			response.sendRedirect("getBoardList.do");
			
			
		} else if (path.equals("/updataBoard.do")) {
			
			System.out.println("글 수정 처리");
			
			request.setCharacterEncoding("UTF-8");

			String seq = request.getParameter("seq");
			String title = request.getParameter("title");
			String content = request.getParameter("content");

			BoardVO vo = new BoardVO();
			BoardDAO dao = new BoardDAO();

			vo.setSeq(Integer.parseInt(seq));
			vo.setTitle(title);
			vo.setContent(content);

			dao.updateBoard(vo);

			response.sendRedirect("getBoardList.do");
			
			
		} else if (path.equals("/deleteBoard.do")) {
			
			System.out.println("글 삭제 처리");
			
			request.setCharacterEncoding("UTF-8");

			String seq = request.getParameter("seq");

			BoardVO vo = new BoardVO();
			BoardDAO dao = new BoardDAO();

			vo.setSeq(Integer.parseInt(seq));

			dao.deleteBoard(vo);

			response.sendRedirect("getBoardList.do");
			
			
		} else if (path.equals("/getBoard.do")) {
			
			System.out.println("글 상세 조회 처리");
			
			String seq = request.getParameter("seq");

			BoardVO vo = new BoardVO();
			BoardDAO dao = new BoardDAO();
			
			vo.setSeq(Integer.parseInt(seq));
			
			BoardVO board = dao.getBoard(vo);
			
			// 데이터를 session에 담아 최종적으로 "getBoard.jsp"로 페이지 이동
			HttpSession session = request.getSession();
			session.setAttribute("board", board);
			response.sendRedirect("getBoard.jsp");
			
			
		} else if (path.equals("/getBoardList.do")) {
			
			System.out.println("글 목록 검색 처리");
			
			BoardVO vo = new BoardVO();
			BoardDAO dao = new BoardDAO();
			
			List<BoardVO> boardList = dao.getBoardList(vo);
			
			// 목록을 session에 담아 최종적으로 "getBoardList.jsp"로 페이지 이동
			HttpSession session = request.getSession();
			session.setAttribute("boardList", boardList);
			// 실제 화면에 뿌려줄때는 jsp로 가야한다.
			response.sendRedirect("getBoardList.jsp");
			
		}

	}
}

 

하지만 이렇게 프론트컨트롤러에 모든 정보를 담아두는 것은 좋은 방법이 아니다.

핸들러의 역할만 하는 것이 적절.

 

getBoard

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="com.springbook.biz.board.*"%>
<%@page import="com.springbook.biz.board.impl.*"%>
<%
	//String seq = request.getParameter("seq");

	//BoardVO vo = new BoardVO();
	//BoardDAO dao = new BoardDAO();
	
	//vo.setSeq(Integer.parseInt(seq));
	
	//BoardVO board = dao.getBoard(vo);
	// 모델 2방식에서는 위 코드 사용 X 
	
	BoardVO board = (BoardVO)session.getAttribute("board");
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<center>
		<h1>글 상세</h1>
		<a href="logout.do">Log-out</a>
		<hr>
		<form action="updateBoard.do" method="post">
		
		<input name="seq" type="hidden" value="<%=board.getSeq() %>">
		
			<table border="1" cellpadding="0" cellspacing="0">
				<tr>
					<td bgcolor="orange" width="70">제목</td>
					<td align="left">
					<input name="title" type="text" value="<%=board.getTitle() %> ">
					</td>
				</tr>
				
				<tr>
					<td bgcolor="orange" width="70">작성자</td>
					<td align="left">
					<%=board.getWriter() %>
					</td>
				</tr>
				
			    <tr>
					<td bgcolor="orange" width="70">내용</td>
					<td align="left">
					<textarea name="content" cols="40" rows="10" ><%=board.getContent() %></textarea>
					</td>
				</tr>
				
				<tr>
					<td bgcolor="orange" width="70">등록일</td>
					<td align="left">
					<%=board.getRegDate() %>
					</td>
				</tr>
				
				<tr>
					<td bgcolor="orange" width="70">조회수</td>
					<td align="left">
					<%=board.getCnt() %>
					</td>
				</tr>
				
				<tr>
					<td colspan="2" align="center">
					<input type="submit" value="글 수정"/> 
					</td>
				</tr>
			</table>
		</form>
		<hr>
		<a href="insertBoard.jsp">글 등록</a> <!-- 글 등록은 .jsp -->
		<a href="deleteBoard.do?seq=<%=board.getSeq() %>">글 삭제</a>
		<a href="getBoardList.do">글 목록</a>
		
	</center>
</body>
</html>

 

getBoardList

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="com.springbook.biz.board.*"%>
<%@page import="com.springbook.biz.board.impl.*"%>
<%@page import="java.util.*"%>
<%
  
	//BoardVO vo = new BoardVO();
	//BoardDAO dao = new BoardDAO();
	
	//List<BoardVO> boardList = dao.getBoardList(vo);
	// 모델 2방식에서는 위 코드를 사용하지 않는다.
	
	// DispatcherServlet에서 만들어 둔 session에서 데이터를 가지고 온다
	List<BoardVO> boardList = (List<BoardVO>)session.getAttribute("boardList");
    
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<center>
		<h1>글 목록</h1>
		<h3>
			테스트님! 게시판에 오신 걸 환영합니다! <a href="logout.do">log-out</a>
		</h3>

		<form action="getBoardList.jsp" method="post">
			<table border="1" cellpadding="0" cellspacing="0" width="700">
				<tr>
					<td align="right">
					<select name="searchCondition">
							<option value="TITLE">제목</option>
							<option value="CONTENT">내용</option>
					</select>
					<input name="searchKeyword" type="text" /> 
					<input type="submit" value="검색" /> 
					</td>
				</tr>
			</table>
		</form>

		<table border="1" cellpadding="0" cellspacing="0" width="700">
			<tr>
				<th bgcolor="orange" width="100">번호</th>
				<th bgcolor="orange" width="200">제목</th>
				<th bgcolor="orange" width="150">작성자</th>
				<th bgcolor="orange" width="150">등록일</th>
				<th bgcolor="orange" width="100">조회수</th>
			</tr>

			<% 
				for (BoardVO board : boardList) {
					
				%>

			<tr>
				<td>
					<%=board.getSeq() %>
				</td>
				<td>
				<a href="getBoard.do?seq=<%=board.getSeq() %>">
					<%=board.getTitle() %></a>
				</td>
				<td>
					<%=board.getWriter() %>
				</td>
				<td>
					<%=board.getRegDate() %>
				</td>
				<td>
					<%=board.getCnt() %>
				</td>
			</tr>

			<%
				}
				%>
		</table>

		<br> <a href="insertBoard.jsp">새글 등록</a>
	</center>
</body>
</html>

 

insertBoard

<%@ 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>
	<center>
		<h1>글 등록</h1>
		<a href="logout.do">Log-out</a>
		<hr>
		<form action="insertBoard.do" method="post">
			<table border="1" callpadding="0" cellspacing="0">
				<tr>
					<td bgcolor="orange" width="70">제목</td>
					<td align="left"><input type="text" name="title" /></td>
				</tr>

				<tr>
					<td bgcolor="orange">작성자</td>
					<td align="left"><input type="text" name="writer" size="10" /></td>
				</tr>

				<tr>
					<td bgcolor="orange">내용</td>
					<td align="left"><textarea name="content" cols="40" rows="10"></textarea></td>
				</tr>

				<tr>
					<td colspan="2" align="center">
					<input type="submit" value="새 글 등록" />
					</td>
				</tr>
			</table>
		</form>
		<hr>
		<a href="getBoardList.do">글 목록 가기</a>
	</center>
</body>
</html>

글이 잘 들어오는 것을 확인할 수 있다.

 

 


 

MVC 구조의 프로그래밍

 

 

  • DispatcherServlet(f.c)

 

  • HandlerMapping

: 매핑정보를 관리해주는 핸들러

 

  • Controller(a.c)

: 인터페이스 상속하는 구조로 작성, 역할은 다르지만 하나의 표준화된 메소드를 가지고 실행

(비즈니스 계층과 비슷하다)

 

  • ViewResolver(jsp)

스프링 JDBC

 

  • update()

→ insert, update, delete

  • queryForInt()
  • queryForObject() : 실행결과를 자바 객체(VO)로 매핑하여 리턴
  • query() : 검색된 데이터의 row(레코드) 수 만큼 RowMapper객체의 MapRow()메소드가 실행된다. 그리고 매핑된 VO객체 여러개를 List컬렉션에 저장하여 리턴한다.

-> select

 

▼ applicationContext.xml

더보기
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd">

    <!-- 패키지를 스캔해준다. 다 해주는 것은 아니고 표시되어진 클래스만 스캔해준다 -> 이것이 어노테이션 -->
	<!-- <context:component-scan base-package="polymorphism"></context:component-scan> -->
	<context:component-scan base-package="com.springbook.biz"></context:component-scan>
	
	<!-- database.properties 의 파일을 읽어올 수 있게 해준다 -->
	<context:property-placeholder location="classpath:config/database.properties"/>
	
	<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
	<property name="driverClassName" value="${jdbc.driver}"></property>
	<property name="url" value="${jdbc.url}"></property>
	<property name="username" value="${jdbc.username}"></property>
	<property name="password" value="${jdbc.password}"></property>

	</bean>
	
	<!--JdbcTemplate 클래스를 통해 DB에 접근 (crud) -->
	<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
		<property name="dataSource" ref="dataSource"></property>
	</bean>
	

</beans>

 

BoardDAOSpring

package com.springbook.biz.board.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

import com.springbook.biz.board.BoardVO;

// 비즈니스 계층에서 사용할 수 있도록 빈에 등록
@Repository
public class BoardDAOSpring {

	@Autowired
	private JdbcTemplate jdbcTemplate;
	
	// 상수형태로 만들어 두었다.
	private final String BOARD_INSERT = " insert into board(seq, title, writer, content) values "
			+ " ((select nvl(max(seq),0) + 1 from board), ?, ?, ?)";

	private final String BOARD_UPDATE = "update board set title=?, content=? where seq=?";
	private final String BOARD_DELETE = "delete board where seq=?";
	private final String BOARD_GET = "select * from board where seq=?";
	private final String BOARD_LIST = "select * from board order by seq desc";
	
	// ---------- update() 구문 사용 ----------
	
	// 글 등록
	public void insertBoard(BoardVO vo) {
		System.out.println("===> springJDBC로 insertBoard() 기능 처리");
		// insert를 springJDBC에서는 update가 처리, try catch문 사용 안해도 됨.
		// 기존 jdbc 에서 사용한 '?' 대신 순서대로 객체를 가지고 와 적어준다.
		jdbcTemplate.update(BOARD_INSERT, vo.getTitle(), vo.getWriter(), vo.getContent());
	}
	
	// 글 수정
	public void updateBoard(BoardVO vo) {
		System.out.println("===> springJDBC로 updateBoard() 기능 처리");
		jdbcTemplate.update(BOARD_UPDATE, vo.getTitle(), vo.getContent(), vo.getSeq());
	}
	
	// 글 삭제
	public void deleteBoard(BoardVO vo) {
		System.out.println("===> springJDBC로 deleteBoard() 기능 처리");
		jdbcTemplate.update(BOARD_DELETE, vo.getSeq());
	}
	
	// ---------- queryForObject(), query() 구문 사용 ----------
	
	// 글 상세 조회
	public BoardVO getBoard(BoardVO vo) {
		System.out.println("===> springJDBC로 getBoard() 상세 보기  처리");
		
		// 배열로 값을 받기 때문에 배열에 넣어준다
		Object[] args= {vo.getSeq()};
		
		// return jdbcTemplate.queryForObject(sql, args, rowMapper);
		return jdbcTemplate.queryForObject(BOARD_GET, args, new BoardRowMapper());
	}
	
	// 글 목록 조회
	public List<BoardVO> getBoardList(BoardVO vo) {
		System.out.println("==> springJDBC로 getBoardList() 기능 처리");
		// '?' 가 없다. 글 목록 전체 조회이기 때문에 모든 글들을 다 불러오면 된다.
		return jdbcTemplate.query(BOARD_LIST, new BoardRowMapper());
		
	}
	

}

 

BoardRowMapper

package com.springbook.biz.board.impl;

import java.sql.ResultSet;
import java.sql.SQLException;

import org.springframework.jdbc.core.RowMapper;

import com.springbook.biz.board.BoardVO;

public class BoardRowMapper implements RowMapper<BoardVO> {
// BoardDAO 의 resultSet의 역할을 수행한다.
	
	@Override
	public BoardVO mapRow(ResultSet rs, int rowNum) throws SQLException {
		
		BoardVO board = new BoardVO();
		
		board.setSeq(rs.getInt("SEQ"));
		board.setTitle(rs.getString("TITLE"));
		board.setWriter(rs.getString("WRITER"));
		board.setContent(rs.getString("CONTENT"));
		board.setRegDate(rs.getDate("REGDATE"));
		board.setCnt(rs.getInt("CNT"));
		
		return board;
	}
	
	
	
}

 

BoardServiceImpl 에서 BoardDAOSpring 의존 주입

private BoardDAOSpring boardDAO;

 

 

▼ BoardServiceImpl

더보기
package com.springbook.biz.board.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.springbook.biz.board.BoardService;
import com.springbook.biz.board.BoardVO;
import com.springbook.biz.common.Log4jAdvice;
import com.springbook.biz.common.LogAdvice;


@Service("boardService")
public class BoardServiceImpl implements BoardService {

	// boardDAO를 의존 주입해야 한다.
	@Autowired
	private BoardDAOSpring boardDAO;
	
	
	public BoardServiceImpl() {
	}

	@Override
	public void insertBoard(BoardVO vo) {
		// @Autowired를 했기 때문에 사용가능, @Autowired로 객체를 생성한거다.
		boardDAO.insertBoard(vo);

	}

	@Override
	public void updateBoard(BoardVO vo) {
		boardDAO.updateBoard(vo);
	}

	@Override
	public void deleteBoard(BoardVO vo) {
		boardDAO.deleteBoard(vo);
	}

	@Override
	public BoardVO getBoard(BoardVO vo) {
		return boardDAO.getBoard(vo);
	}

	@Override
	public List<BoardVO> getBoardList(BoardVO vo) {
		return boardDAO.getBoardList(vo);
	}

}

 

BoardServiceClient에서 실행하면 ‘===> springJDBC로 insertBoard() 기능 처리’ 라고 뜨며 springJDBC가 실행되는 것을 볼 수 있다.

 

 

 

Spring 트랜잭션

데이터 수정 삭제, 등 일련의 작업들이 연결되어 있다.

실제 데이터 베이스에 반영하는 것. 잘 처리가 되면 커밋, 롤백 등 작업처리.

어떤 메소드의 동작에 의해서 그 메소드가 실행하는 동작 처리에 트랜잭션이 일어나야 한다. 이 트랜잭션은 공통관심사 (AOP) → DAO

 

트랜잭션을 위한 라이브러리 사용

tx 선택하기

 


트랜잭션(Transaction) : 더 이상 쪼갤 수 없는 최소 작업 단위

 

트랜잭션 마무리 작업

  • 커밋 : 작업이 마무리 됨
  • 롤백 : 작업을 취소하고 이전의 상태로 되돌림

 

스프링에서 제공하는 트랜잭션 기술

  1. 트랜잭션 동기화
  2. 트랜잭션 추상화
  3. AOP를 이용한 트랜잭션 분리 ← 우리가 사용해본 것.

 

 

스프링으로 웹 만들기 model1 방식

 

login.jsp

<%@ 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>
	<center>
		<form action="login_proc.jsp" method="post">
			<table border="1" callpadding="0" cellspacing="0">
				<tr>
					<td bgcolor="orange">아이디</td>
					<td>
						<input type="text" name="id">
					</td>
				</tr>
				<tr>
					<td bgcolor="orange">비밀번호</td>
					<td>
						<input type="password" name="password">
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="로그인"></td>
				</tr>
			</table>
		</form>
	</center>
</body>
</html>

실행해보면 이렇게 나온다.

 

주소를 의미있게 설정하기 위해 server.xml 파일의 Context부분을 수정해준다.

그 후 톰캣 서버를 다시 리스타트해 실행하면

 

주소가 이렇게 바뀐 것을 확인할 수 있다.

 

 

 

login_proc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.springbook.biz.user.*" %>
<%@page import="com.springbook.biz.user.impl.*" %>
<%
   String id = request.getParameter("id");
   String password = request.getParameter("password");
   
   UserVO vo = new UserVO();
   vo.setId(id);
   vo.setPassword(password);
   
   UserDAO dao = new UserDAO();
   UserVO user = dao.getUser(vo);
   
   if(user != null) {
      response.sendRedirect("getBoardList.jsp");
      
   }else{
      response.sendRedirect("login.jsp");
   }
   
%>

 

아이디와 비밀번호가 일치하면 사이트 이동이 일어나게 만들어준다.

 

getBoardList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="com.springbook.biz.board.*"%>
<%@page import="com.springbook.biz.board.impl.*"%>
<%@page import="java.util.*"%>
<%
  
	BoardVO vo = new BoardVO();
	BoardDAO dao = new BoardDAO();
	
	List<BoardVO> boardList = dao.getBoardList(vo);
    
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<center>
		<h1>글 목록</h1>
		<h3>
			테스트님! 게시판에 오신 걸 환영합니다! <a href="logout_proc.jsp">log-out</a>
		</h3>

		<form action="getBoardList.jsp" method="post">
			<table border="1" callpadding="0" cellspacing="0" width="700">
				<tr>
					<td align="right">
					<select name="searchCondition">
							<option value="TITLE">제목</option>
							<option value="CONTENT">내용</option>
					</select>
					<input name="searchKeyword" type="text" /> 
					<input type="submit" value="검색" /> 
					</td>
				</tr>
			</table>
		</form>

		<table border="1" callpadding="0" cellspacing="0" width="700">
			<tr>
				<th bgcolor="orange" width="100">번호</th>
				<th bgcolor="orange" width="200">제목</th>
				<th bgcolor="orange" width="150">작성자</th>
				<th bgcolor="orange" width="150">등록일</th>
				<th bgcolor="orange" width="100">조회수</th>
			</tr>

			<% 
				for (BoardVO board : boardList) {
					
				%>

			<tr>
				<td>
					<%=board.getSeq() %>
				</td>
				<td>
				<a href="getBoard.jsp?seq=<%=board.getSeq() %>">
					<%=board.getTitle() %>
				</a>
				</td>
				<td>
					<%=board.getWriter() %>
				</td>
				<td>
					<%=board.getRegDate() %>
				</td>
				<td>
					<%=board.getCnt() %>
				</td>
			</tr>

			<%
				}
				%>
		</table>

		<br> <a href="insertBoard.jsp">새글 등록</a>
	</center>
</body>
</html>

 

상세보기 - getBoard.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="com.springbook.biz.board.*"%>
<%@page import="com.springbook.biz.board.impl.*"%>
<%
	String seq = request.getParameter("seq");

	BoardVO vo = new BoardVO();
	BoardDAO dao = new BoardDAO();
	
	vo.setSeq(Integer.parseInt(seq));
	
	BoardVO board = dao.getBoard(vo);
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<center>
		<h1>글 상세</h1>
		<a href="logout_proc.jsp">Log-out</a>
		<hr>
		<form action="">
			<table border="1" callpadding="0" cellspacing="0">
				<tr>
					<td bgcolor="orange" width="70">제목</td>
					<td align="left">
					<input name="title" type="text" value="<%=board.getTitle() %> ">
					</td>
				</tr>
				
				<tr>
					<td bgcolor="orange" width="70">작성자</td>
					<td align="left">
					<%=board.getWriter() %>
					</td>
				</tr>
				
			    <tr>
					<td bgcolor="orange" width="70">내용</td>
					<td align="left">
					<textarea name="content" cols="40" rows="10" ><%=board.getContent() %></textarea>
					</td>
				</tr>
				
				<tr>
					<td bgcolor="orange" width="70">등록일</td>
					<td align="left">
					<%=board.getRegDate() %>
					</td>
				</tr>
				
				<tr>
					<td bgcolor="orange" width="70">조회수</td>
					<td align="left">
					<%=board.getCnt() %>
					</td>
				</tr>
				
				<tr>
					<td colspan="2" align="center">
					<input type="submit" value="글 수정"/> 
					</td>
				</tr>
			</table>
		</form>
		<hr>
		<a href="insertBoard.jsp">글 등록</a>
		<a href="deleteBoard.jsp">글 삭제</a>
		<a href="getBoardList.jsp">글 목록</a>
		
	</center>
</body>
</html>

 

글 등록 - insertBoard.jsp

<%@ 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>
	<center>
		<h1>글 등록</h1>
		<a href="logout_proc.jsp">Log-out</a>
		<hr>
		<form action="insertBoard_proc.jsp" method="post">
			<table border="1" callpadding="0" cellspacing="0">
				<tr>
					<td bgcolor="orange" width="70">제목</td>
					<td align="left"><input type="text" name="title" /></td>
				</tr>

				<tr>
					<td bgcolor="orange">작성자</td>
					<td align="left"><input type="text" name="writer" size="10" /></td>
				</tr>

				<tr>
					<td bgcolor="orange">내용</td>
					<td align="left"><textarea name="content" cols="40" rows="10"></textarea></td>
				</tr>

				<tr>
					<td colspan="2" align="center">
					<input type="submit" value="새 글 등록" />
					</td>
				</tr>
			</table>
		</form>
		<hr>
		<a href="getBoardList.jsp">글 목록 가기</a>
	</center>
</body>
</html>

 

insertBoard_proc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.springbook.biz.board.*"%>
<%@page import="com.springbook.biz.board.impl.*"%>
<%
	request.setCharacterEncoding("UTF-8");
	
	String title = request.getParameter("title");
	String writer = request.getParameter("writer");
	String content = request.getParameter("content");
	
	BoardVO vo = new BoardVO();
	BoardDAO dao = new BoardDAO();
	
	vo.setTitle(title);
	vo.setWriter(writer);
	vo.setContent(content);
	
	dao.insertBoard(vo);
	
	response.sendRedirect("getBoardList.jsp");
%>

글이 잘 올라가는 것을 확인 할 수 있다. 

 

글 등록 - insertBoard.jsp

<%@ 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>
	<center>
		<h1>글 등록</h1>
		<a href="logout_proc.jsp">Log-out</a>
		<hr>
		<form action="insertBoard_proc.jsp" method="post">
			<table border="1" callpadding="0" cellspacing="0">
				<tr>
					<td bgcolor="orange" width="70">제목</td>
					<td align="left"><input type="text" name="title" /></td>
				</tr>

				<tr>
					<td bgcolor="orange">작성자</td>
					<td align="left"><input type="text" name="writer" size="10" /></td>
				</tr>

				<tr>
					<td bgcolor="orange">내용</td>
					<td align="left"><textarea name="content" cols="40" rows="10"></textarea></td>
				</tr>

				<tr>
					<td colspan="2" align="center">
					<input type="submit" value="새 글 등록" />
					</td>
				</tr>
			</table>
		</form>
		<hr>
		<a href="getBoardList.jsp">글 목록 가기</a>
	</center>
</body>
</html>

 

insertBoard_proc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.springbook.biz.board.*"%>
<%@page import="com.springbook.biz.board.impl.*"%>
<%
	request.setCharacterEncoding("UTF-8");
	
	String title = request.getParameter("title");
	String writer = request.getParameter("writer");
	String content = request.getParameter("content");
	
	BoardVO vo = new BoardVO();
	BoardDAO dao = new BoardDAO();
	
	vo.setTitle(title);
	vo.setWriter(writer);
	vo.setContent(content);
	
	dao.insertBoard(vo);
	
	response.sendRedirect("getBoardList.jsp");
%>

 

 

따로 수정하는 페이지가 있는것이 아니라 글 상세보기 안에서 바로 수정하기 가능

updateBoard_proc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.springbook.biz.board.*"%>
<%@page import="com.springbook.biz.board.impl.*"%>
<%

request.setCharacterEncoding("UTF-8");

String seq = request.getParameter("seq");
String title = request.getParameter("title");
String content = request.getParameter("content");

BoardVO vo = new BoardVO();
BoardDAO dao = new BoardDAO();

vo.setSeq(Integer.parseInt(seq));
vo.setTitle(title);
vo.setContent(content);

dao.updateBoard(vo);

response.sendRedirect("getBoardList.jsp");

%>

 

로그아웃 - logout_proc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	session.invalidate();

	response.sendRedirect("login.jsp");
	
%>

 

 

 

스프링으로 웹 만들기 model2 방식

중간에 경비역할의 컨트롤러

 

프론트 컨트롤러 (jsp)

DispatcherServlet

package com.springbook.view.controller;

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

// @WebServlet("*.do") 라고 쓰는 매핑정보가  web.xml에 들어 있다.
public class DispatcherServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		process(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		process(request, response);
	}

	private void process(HttpServletRequest request, HttpServletResponse response) {
		// request, response를 받아서 필요한 작업 처리
		// getRequestURI() 포트번호를 제외하고 뒤의 값을 반환
		String uri = request.getRequestURI();
		String path = uri.substring(uri.lastIndexOf("/")); // /login.do <- 이렇게 '/' 뒤의 주소를 가지고 온다

		System.out.println(path);

		if (path.equals("/login.do")) {
			System.out.println("로그인 처리");
		} else if (path.equals("/logout.do")) {
			System.out.println("로그아웃 처리");
		} else if (path.equals("/insertBoard.do")) {
			System.out.println("글 등록 처리");
		} else if (path.equals("/updataBoard.do")) {
			System.out.println("글 수정 처리");
		} else if (path.equals("/deleteBoard.do")) {
			System.out.println("글 삭제 처리");
		} else if (path.equals("/getBoard.do")) {
			System.out.println("글 상세 조회 처리");
		} else if (path.equals("/getBoardList.do")) {
			System.out.println("글 목록 검색 처리");
		}

	}
}

 

▼ applicationContext

이전까지 작업했던 내용 )

더보기
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd">

    <!-- 패키지를 스캔해준다. 다 해주는 것은 아니고 표시되어진 클래스만 스캔해준다 -> 이것이 어노테이션 -->
	<!-- <context:component-scan base-package="polymorphism"></context:component-scan> -->
	<context:component-scan base-package="com.springbook.biz"></context:component-scan>
	
	<!-- <bean id="log" class="com.springbook.biz.common.LogAdvice" ></bean> -->
	<bean id="log" class="com.springbook.biz.common.Log4jAdvice" ></bean>
	
	
	<bean id="around" class="com.springbook.biz.common.AroundAdvice" ></bean>
	
	<aop:config>
	<aop:pointcut expression="execution(* com.springbook.biz..*Impl.*(..))" id="allPointcut"/>
	
	<aop:aspect ref="around"> <!-- 동작시점 -->
	<!-- 대상, 적용할 기능 -->
		<aop:around pointcut-ref="allPointcut" method="aroundLog"/>
	</aop:aspect>
	</aop:config>
	
	<!-- = SamsungTV tv = new SamsungTV(); -->
	<!-- <bean id="" class=""></bean> -->
	
	<!-- <bean id="tv" class="polymorphism.SamsungTV"></bean> 싱글톤 패턴 사용  -->
	<!-- scope="prototype"을 추가하면 싱글톤 패턴 사용을 하지 않을 수 있다. -->
	
	<!-- 생성자 의존 주입 -->
	<!--<bean id="tv" class="polymorphism.SamsungTV" scope="prototype"> -->
		<!-- 괸계설정 -->
		<!-- <constructor-arg ref="apple"></constructor-arg> -->
		<!-- 기본형 관계설정 시 value를 쓴다 -->
		<!-- <constructor-arg value="10000"></constructor-arg> -->
	<!-- </bean> -->
	
	<!-- Setter 메소드 의존 주입 -->
	<!-- <bean id="tv" class="polymorphism.SamsungTV" scope="prototype">
	<property name="speaker" ref="sony"></property>
	<property name="price" value="10000"></property>
	</bean>
	
	<bean id="sony" class="polymorphism.SonySpeaker"></bean>
	<bean id="apple" class="polymorphism.AppleSpeaker"></bean> -->
	

</beans>

 

 

스프링의 3대 요소

 

AOP (Aspect Oriented Programmig)

: 관심지향 (공통 관심사)

로깅, 보안, 트랜잭션 관리 등과 같은 공통적인 관심사를 모듈화 해 코드 중복을 줄이고 유지 보수성을 형성하는데 도움을 준다.

공통관심사는 대상기능의 실행 전, 후로 나뉜다.

 

 

로그에 대해 이해하기

 

LogAdvice.java를 수행할 땐 Log4jAdvice.java 메소드를 주석 처리,

Log4jAdvice.java를 실행할 땐 LogAdvice.java 메소드를 주석 처리해야한다.

 

LogAdvice.java

package com.springbook.biz.common;

// --------------- 공통관심사 ---------------
public class LogAdvice {
	public void printLog() {
		System.out.println("[공통로그] 비즈니스 로직 수행 전");
	}
}
// --------------------------------------

 

Log4jAdvice.java 심화된 공통 관심사

package com.springbook.biz.common;

public class Log4jAdvice {
	public void printLogging() {
		System.out.println("[공통로그 - Log4j] 비즈니스 로직 수행 전 동작");
	}
}

 

BoardServiceImpl.java

package com.springbook.biz.board.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.springbook.biz.board.BoardService;
import com.springbook.biz.board.BoardVO;
import com.springbook.biz.common.Log4jAdvice;
import com.springbook.biz.common.LogAdvice;


@Service("boardService")
public class BoardServiceImpl implements BoardService {

	// boardDAO를 의존 주입해야 한다.
	@Autowired
	private BoardDAO boardDAO;
	
	private Log4jAdvice log;
	
	public BoardServiceImpl() {
		log = new Log4jAdvice();
	}
	
	
//	private LogAdvice log;
//	
//	public BoardServiceImpl() {
//		log = new LogAdvice();
//	}

	@Override
	public void insertBoard(BoardVO vo) {
		// @Autowired를 했기 때문에 사용가능, @Autowired로 객체를 생성한거다.
		//log.printLog();
		log.printLogging();
		boardDAO.insertBoard(vo);

	}

	@Override
	public void updateBoard(BoardVO vo) {
		//log.printLog();
		log.printLogging();
		boardDAO.updateBoard(vo);
	}

	@Override
	public void deleteBoard(BoardVO vo) {
		//log.printLog();
		log.printLogging();
		boardDAO.deleteBoard(vo);
	}

	@Override
	public BoardVO getBoard(BoardVO vo) {
		//log.printLog();
		log.printLogging();
		return boardDAO.getBoard(vo);
	}

	@Override
	public List<BoardVO> getBoardList(BoardVO vo) {
		//log.printLog();
		log.printLogging();
		return boardDAO.getBoardList(vo);
	}

}

 

BoardServiceClient 를 실행하면 아래와 같은 화면을 볼 수 있다.

 

실행 화면 )

 

 

업그레이드 된 로그 → Log4j

 

여기까지는 하나하나 다 바꿔줘야 했음 → AOP가 이를 해결

로그의 기능을 이해하기 위해 예시 코드를 짜 본 것이다.

위와 같은 공통 로그를 통해 어느 부분에서 오류가 난 건지 알 수 있다.

 


 

AOP 적용하기

 

 

AOP를 사용하기 위해 라이브러리 추가가 필요하다.

		<!-- AspectJ -->
		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjrt</artifactId>
			// ${org.aspectj-version} 버전에 맞춰 받아준다 
			<version>${org.aspectj-version}</version>
		</dependency>

 

pom.wml에 AspectJ 와 AspectJ Weaver를 추가한다.

		<!-- AspectJ -->
		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjrt</artifactId>
			<version>${org.aspectj-version}</version>
		</dependency>	
		
		<!-- https://mvnrepository.com/artifact/org.aspectj/aspectjweaver -->
		<dependency>
		    <groupId>org.aspectj</groupId>
		    <artifactId>aspectjweaver</artifactId>
		    <version>1.8.8</version>
		    <scope>runtime</scope>
		</dependency>

 

💡 스프링은 공통관심사의 대상이 메소드

 

 

applicationContext.xml 에서 )

	<aop:config>
	<!-- 실행 범위 -->
	<aop:pointcut expression="execution(* com.springbook.biz..*Impl.*(..))" id="allPointcut"/>
	
	<!-- 레퍼런스 log -->
	<aop:aspect ref="log">
	<!-- 대상, 적용할 기능 -->
		<aop:before pointcut-ref="allPointcut" method="printLog"/>
	</aop:aspect>
	</aop:config>
	

	
	
	"execution(* com.springbook.biz..*Impl.*(..))"
	= 패키지 하위의 범위를 표현하는 정규식
	= 패키지 안에 Impl 이 들어간 파일이 있다면 공통관심사 코드 실행

 

최종 applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd">

	<context:component-scan base-package="com.springbook.biz"></context:component-scan>
	
	<!-- <bean id="log" class="com.springbook.biz.common.LogAdvice" ></bean> -->
	<bean id="log" class="com.springbook.biz.common.Log4jAdvice" ></bean>
	
	<aop:config>
	<aop:pointcut expression="execution(* com.springbook.biz..*Impl.*(..))" id="allPointcut"/>
	
	<aop:aspect ref="log">
	<!-- 대상, 적용할 기능 -->
		<aop:before pointcut-ref="allPointcut" method="printLogging"/>
	</aop:aspect>
	</aop:config>
	


</beans>

 

로그를 찍는 구문이 없지만 클라이언트 파일로 실행해보면 로그가 나온다.

BoardServiceImpl.java

package com.springbook.biz.board.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.springbook.biz.board.BoardService;
import com.springbook.biz.board.BoardVO;
import com.springbook.biz.common.Log4jAdvice;
import com.springbook.biz.common.LogAdvice;


@Service("boardService")
public class BoardServiceImpl implements BoardService {

	// boardDAO를 의존 주입해야 한다.
	@Autowired
	private BoardDAO boardDAO;
	
	private Log4jAdvice log;
	
	public BoardServiceImpl() {
	}
	

	@Override
	public void insertBoard(BoardVO vo) {
		boardDAO.insertBoard(vo);

	}

	@Override
	public void updateBoard(BoardVO vo) {
		boardDAO.updateBoard(vo);
	}

	@Override
	public void deleteBoard(BoardVO vo) {
		boardDAO.deleteBoard(vo);
	}

	@Override
	public BoardVO getBoard(BoardVO vo) {
		return boardDAO.getBoard(vo);
	}

	@Override
	public List<BoardVO> getBoardList(BoardVO vo) {
		return boardDAO.getBoardList(vo);
	}

}

 

 

 

AOP의 용어들

 

● 조인포인트 (Joinpoint) : 공통 관심사가 적용 될 수 있는 모든 메소드들

  포인트컷 (pointcut) : 실제 관심사가 적용되는 메소드들

  어드바이스 (Advice) : 실제 공통 관심사

  에스펙트 (Aspect) or 어드바이져(Adviser) : 포인트컷 + 어드바이스

- Aspect  aop 적용

aop:aspect : 공통관심사 메소드가 명확할 때 사용

aop:advisor : 공통관심사 메소드가 명확하지 않을 때 (외부에서 가져다 쓰는 경우)

  위빙 (Weaving) : 핵심관심(비즈니스 로직) 메소드에 횡단(공통) 관심사(어드바이스)가 적용되는 것.

 

 

리턴 타입 지정

리턴 타입 지정에서 가장 기본적인 방법은 ‘ * ’ 캐릭터 사용하는 것

* : 모든 리턴 타입 허용

void : 리턴 타입이 void인 메소드 선택

!void : 리턴 타입이 void가 아닌 메소드 선택

 

패키지 지정

페이지 경로를 지정할 때는 ‘ * ’, ‘ .. ’ 를 사용


com.springbook.biz : 정확하게 com.springbook.biz만 선택

com.springbook.biz.. : com.springbook.biz 로 시작되는 모든 패키지 선택

com.springbook..impl : impl로 끝나는 패키지 선택

 

어드바이스가 동작하는 시점

before : 포인트컷 실행 이전

after : 포인트컷 실행 이후

around : 포인트컷 실행 전 후

 

▼ around : 포인트컷 실행 전 후

더보기

코드 )

 

AroundAdvice.java

package com.springbook.biz.common;

import org.aspectj.lang.ProceedingJoinPoint;

public class AroundAdvice {
	// 매개변수를 반드시 ProceedingJoinPoint로 써줘야 한다
	public Object aroundLog(ProceedingJoinPoint pjp) throws Throwable {
		
		System.out.println("[Before] 비즈니스 로직 수행 전");
		
		// 비즈니스 로직 메소드의 동작을 감지
		Object returnObj = pjp.proceed();
		
		System.out.println("[After] 비즈니스 로직 수행 후");
		
		return returnObj;
	}
}

 

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd">

    <!-- 패키지를 스캔해준다. 다 해주는 것은 아니고 표시되어진 클래스만 스캔해준다 -> 이것이 어노테이션 -->
	<!-- <context:component-scan base-package="polymorphism"></context:component-scan> -->
	<context:component-scan base-package="com.springbook.biz"></context:component-scan>
	
	<!-- <bean id="log" class="com.springbook.biz.common.LogAdvice" ></bean> -->
	<bean id="log" class="com.springbook.biz.common.Log4jAdvice" ></bean>
	
	
	<bean id="around" class="com.springbook.biz.common.AroundAdvice" ></bean>
	
	<aop:config>
	<aop:pointcut expression="execution(* com.springbook.biz..*Impl.*(..))" id="allPointcut"/>
	
	<aop:aspect ref="around"> <!-- 동작시점 -->
	<!-- 대상, 적용할 기능 -->
		<aop:around pointcut-ref="allPointcut" method="aroundLog"/>
	</aop:aspect>
	</aop:config>
	
</beans>

 

클라이언트 파일을 실행 시키면 이렇게 나온 것을 확인 할 수 있다.

 

 

 

스프링 JDBC

 

라이브러리 다운받기

spring-jdbc

commons-dbcp

 

pom.xml 에 추가

	<!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
	<dependency>
		 <groupId>org.springframework</groupId>
		 <artifactId>spring-jdbc</artifactId>
		 <version>${org.springframework-version}</version>
	</dependency>
	
	<!-- https://mvnrepository.com/artifact/commons-dbcp/commons-dbcp -->
	<dependency>
	    <groupId>commons-dbcp</groupId>
	    <artifactId>commons-dbcp</artifactId>
	    <version>1.4</version>
	</dependency>

 

 

JdbcTemplate 객체 기능

 

  • update()

→ insert, update, delete

  • queryForInt()
  • queryForObject()
  • query()

-> select

 

사용자 로그인 여부 알리기

 

💡 테이블 만든 후 vo만들기 → UserDAO.java → UserService(인터페이스) → 인터페이스를 상속 받는 서비스 계층 만들기 → 테스트 클래스 만들기

 

SQL, scott 계정에서 )

create TABLE users(
id varchar2(8) primary key,
password varchar2(8),
name varchar2(20),
role varchar2(5)
);

 

 

 

스프링에서 

 

UserVO.java - 직접 생성, Bean으로 관리하지 않는다

package com.springbook.biz.user;

public class UserVO {
	private String id;
	private String password;
	private String name;
	private String role;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getRole() {
		return role;
	}
	public void setRole(String role) {
		this.role = role;
	}
	
	@Override
	public String toString() {
		return "UserVO [id=" + id + ", password=" + password + ", name=" + name + ", role=" + role + "]";
	}
	
	
}

 

UserDAO.java

package com.springbook.biz.user.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import org.springframework.stereotype.Repository;

import com.springbook.biz.board.BoardVO;
import com.springbook.biz.common.JDBCUtil;
import com.springbook.biz.user.UserVO;

// 빈으로 등록하기 위해선 @Repository("userDAO")를 빼먹으면 안된다.
@Repository("userDAO")
public class UserDAO {
	private Connection conn = null;
	private PreparedStatement stmt = null;
	private ResultSet rs = null;
	
	private final String USER_GET = " select * from users where id=? and password=? ";
	
	// 사용자 정보 조회
	public UserVO getUser(UserVO vo) {
			System.out.println("===> JDBC로 getUser() 기능 처리");
			UserVO user = null;
			
			try {
				
				conn = JDBCUtil.getConnection();
				stmt = conn.prepareStatement(USER_GET);
				stmt.setString(1, vo.getId());
				stmt.setString(2, vo.getPassword());
				rs = stmt.executeQuery();
				
				if (rs.next()) {
					user = new UserVO();
					user.setId(rs.getString("ID"));
					user.setPassword(rs.getString("PASSWORD"));
					user.setName(rs.getString("NAME"));
					user.setRole(rs.getString("ROLE"));
				}
				
			} catch (Exception e){
				e.printStackTrace();
			} finally {
				JDBCUtil.close(stmt, conn);
			}

		
		return user;
	}
}

 

UserService.java (인터페이스)

package com.springbook.biz.user;

public interface UserService {
	public UserVO getUser(UserVO vo);
}

 

UserServiceImpl.java

package com.springbook.biz.user.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.springbook.biz.user.UserService;
import com.springbook.biz.user.UserVO;

@Service("userService")
public class UserServiceImpl implements UserService {

	@Autowired
	private UserDAO UserDAO;
	
	@Override
	public UserVO getUser(UserVO vo) {
		
		return UserDAO.getUser(vo);
	}

}

 

UserServiceClient.java

package com.springbook.biz.user;

import org.springframework.context.support.AbstractApplicationContext;
import org.springframework.context.support.GenericXmlApplicationContext;

public class UserServiceClient {

	public static void main(String[] args) {
		AbstractApplicationContext container = new GenericXmlApplicationContext("applicationContext.xml");

		UserService userService = (UserService) container.getBean("userService");

		UserVO vo = new UserVO();
		vo.setId("test");
		vo.setPassword("test1234");

		UserVO user = userService.getUser(vo);

		if (user != null) {
			System.out.println(user.getName() + " 님 환영합니다.");
		} else {
			System.out.println("로그인 실패");
		}
	}

}

 

 

결과 화면 )

 

 

오늘만든 파일들과 파일의 구조

 

 

게시판 만들었던 걸 비즈니스 계층 넣어서 연습해보기

+ Recent posts