about. What I learned/about.Study by myself

복습을 위한 아주 좋은 기회를 얻었다.

Logan. 2021. 6. 6. 20:58

SPRING이 보기 좋게 망가졌다. 

 

수업에서 배운 것들을 이리저리 따라하다보니 JSP파일을 마음대로 이름짓게되었고 수업을 따라가는데 문제가 생겨 타이틀을 모두 변경하는 과정에서 실수가 생긴 것 같다. 이게 아니라면 깃헙과 연동하다가 큰 문제가 생긴 것 같다. 그래서 큰 결정을 내렸다.  7일의 과정을 모두 다시 시작하는 것이다. 선생님이 모두다 설정을 해놓으셨기때문에 그냥 새로 받아서 가져간다. 이름은 꼭 잘 붙이는 걸로해서 말이다. ㅋㅋㅋㅋ 오늘 고생 좀 하겠구나~~~ 👩‍🚒👨‍🚒

급하게 생각할 것 없다. 현재는 오류를 찾는 것도 중요하지만 혼자 찾아서 되지 않는다면 그냥 새로 만들면 된다. 얼마나 즐거운 일인가. 그럼 이제 다시 진행하는 것들에 대해 모두 상세히 기록하겠다.

 

우선 샘이 주셨던 파일 중 TestS는 엑스포트해서 가져가겠다. 생각해보니 그럴 필요가 없다. SampleSpirng파일만 그냥 가져가면된다.

 

여러가지 방법을 시도하는 중에 github과 연결 도중에 완료하지 않아 서버에 문제가 생겼다는 것을 발견했다. Team연결을 모두 끊고나서 다시 정상 작동하기 시작했다. 그래도 프로젝트 복사해서 사용하는 것은 다시 해봐야겠다.

 

프로젝트 명을 변경하여 새로운 파일을 만들려고했지만 .project 파일의 <name>을 변경했음에도 불구하고 임포트 되지 않았다. 시간이 부족한 관계로 Sample스프링 안에서 새로운 폴더안에 파일들을 생성하여 시작해보겠다.

 

TestS 부터 시작하겠다.

 

대략적인 스프링의 흐름도이다. web.xml과 servlet-context.xml(@annotation 명시는 여기있다.)은 받아온 데이터와 주소를 스프링에서 사용하기위해 설정해주는 파일이고 오른쪽에 세로로 몰려있는 쪽은 필요한 데이터를 받아오거나 필요한 값들을 반환해주는 java파일들이다. 모든 주소와 데이터는 Controller을 통해 들어가고 나오게된다.(마치 port와 같다)

 

 

#wb에서 controller로 값 넘기기

 

하나의 페이지html파일에서 spring 으로 변경하거나 계속 변경될 값들을 처리하기 위해서는 <form>태그가 필요하다.

<form action="practice2" id="sendForm" method="post">
	<input type="text" name="txt" />
	<input type="button" value="전송" id="sendBtn"/>
</form>

<form>이라는 태그는 태그 안에 있는 name에 지정된 ""를 key값으로 지정해서 받아온 값(value)를 보내는 hashmap의 형태이다.(key : value = name : value)

action : form 태그안에 있는 값을 보낼 주소를 지정하는 태그

method : 전송방식의 선택이다(get과 post 방식중 하나)

   👨 전송방식에 대한 설명

  • get방식 : 전송방식의 default 값이다. 주소창을 통하여 보내주며 형태는 => 주소? 키 = 값&키=값...
  • post 방식 : 주소창에 입력값이 나오는 형식이 아니라 header(ip,브라우저 처럼 접속자 정보)에 담겨 넘긴다.      

 

 

 

html과 css 만으로는 원하는 페이지에 name의 value를 보낼 수 없다. 이에 jQuery가 필요하다.

<script type="text/javascript"
		src="resources/jquery/jquery-1.12.4.js"></script>
<!-- 제이쿼리 사용을 위한 경로 지정을 해준다.-->
		<script type="text/javascript">
		$(document).ready(function () {
			$("#sendBtn").on("click", function () {
				$("#sendFrom").submit();
                <!--form태그의 값을 action 주소로 보내기 위한 명령어이다-->
			});
		});
</script>

모두 작성이 되면 현재 페이지가 열릴 수 있게 controller에서 받아 jsp로 보내주어야한다.

package com.test.spring.practice.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller //컴퓨터에게 이 클래스 파일은 컨트롤러 클래스야라고 명시해 주는 annotation이다.

public class practiceController {
	
	@RequestMapping(value="practice1") // viewResolver가 주소를 완성시켜준다.
                          // 받은 주소값에 따라 실행될 메서드를 찾아주는 pin 의 역할
                          // 단, 바로 아래 있는 메서드 하나만 실행시킨다.
	public ModelAndView practice1(ModelAndView mav) {
		
		mav.setViewName("/practice/practice1");
		//어느 파일을 열것인지 주소를 지정해주는 것
		return mav;
	}
}

이렇게 하고 나면 action에 지정해 놓은 주소가 논다. practice1에서 받은 데이터를 넘겨줄 곳이 practice2이다. 이제 practice2.jsp가 필요하다.

이 값을 practice2로 보내야한다.

넘겨온 값을 받는 것은 쉽다. 하지마 controller에서 추가해야할 사항이 더 있다.

 

왼쪽이 원래 오른쪽이 내꺼 내꺼는 안돌아간다. 원인 해결 form을 from으로 씀

pcontroller에서 직접 계산된 값을 리스트와 해쉬맵에 저장하여 practice2에서 직접 가져오는 방법을 실행해 보겠다.

@RequestMapping(value="practice2")
	
	public ModelAndView practice2(ModelAndView mav,@RequestParam String txt) {
		mav.addObject("practice","hello");
		
		List<HashMap<String,String>> data =
					new ArrayList<HashMap<String,String>>();
		
		for(int i=1; i<10;i++) { //해쉬맵에 값을 저장하기위한 for문이다.
			HashMap<String,String> temp
					= new HashMap<String,String>();
			
			temp.put("no", Integer.toString(i));
			temp.put("title","practice" + i);
			
			data.add(temp);
		}
		
		mav.addObject("data",data);
		
		mav.setViewName("practice/practice2");
		
		return mav;
	}
<%@ 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>
<script type="text/javascript"
	src="resources/jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
${param.txt} <!-- 화면에서 직접 넘어오는 것은 param.으로 받는다  -->
${practice} <!-- 자바에서 넘어오는 것을 받을때는 이렇게 받는다. practicecontroll에 존재한다.  -->

<table>
<thead>
	<tr>
		<th>번호</th>
		<th>제목</th>
	</tr>
</thead>
<tbody>
	<c:forEach var="d" items="${data}"> <!-- 코어 태그로 for each문 사용하기 var로 변수명 설정
											, item은리스트  -->
		<tr>
			<td>${d.no}</td>
			<td>${d.title}</td>
		</tr>
	</c:forEach>
</tbody>
</table>
</body>
</html>

 

컨트롤러만 사용한 흐름도이다.