1교시 10-11/ 주제 : Spring Controller데이터 전송방식
_ HttpServletRequest, Model model, Model model, ${} : JSP EL 식
코드 파일:/
HttpServletRequest
1. Http프로토콜의 request 정보를 서블릿에게 전달하기 위한 목적으로 사용
2. Header정보 , Parameter , Cookie, URI, URL 등의 정보를 읽어 들이는 메서드를 가진 클래스
3. Body의 Stream을 읽어들이는 메소드를 가지고 있음
인자 값으로 HttpServletRequest를 지정하고 변수를 정의하여 값을 전달할 수도 있다.
@RequestParam과 동일하게 값을 받고 값을 받을 때는 getParameter()를 통해 변수를 지정하고 값을 저장한다.
@RequestMapping("/t5")
public String func05( HttpServletRequest request) {
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println( "call 5 : "+ name + age );
return "TigerView";
}
https://zester7.tistory.com/33
HttpServletRequest, HttpServletResponse에 대한 이해
WAS가 웹브라우져로부터 Servlet요청을 받으면 요청을 받을 때 전달 받은 정보를 HttpServletRequest객체를 생성하여 저장 웹브라우져에게 응답을 돌려줄 HttpServletResponse객체를 생성(빈 객체) 생성된 Http
zester7.tistory.com
Model model 활용
Controller에서 view로 보낼 때 Model 이라는 타입의 객체를 파라미터로 받을 수 있다.
Spring framework에 포함되어 있으며 , request객체와 유사한 역할을 수행한다.
https://velog.io/@msriver/Spring-Model-%EA%B0%9D%EC%B2%B4
[Spring] Model 객체
Controller의 메서드는 Model이라는 타입의 객체를 파라미터로 받을 수 있다.순수하게 JSP Servlet으로 웹 어플리케이션을 만들 때 보통 request나 session 내장객체에 정보를 담아 jsp에 넘겨주곤 했는데 Spr
velog.io
@RequestMapping("/t6")
public String func06(Model model) {
System.out.println( "f6 call : " );
// model 에 보내고자 하는 값을 설정한다.
model.addAttribute("name" , "호랑이");
model.addAttribute("age" , 100);
return "TigerView";
}addAttribute()
https://devlogofchris.tistory.com/53
[Spring] model.addAttribute() 메소드
Model에 데이터를 담을 때 addAttribute( ) 메소드를 사용하는데, 2가지 사용 방법이 있다. Model addAttribute(String name, Object value) - value 객체를 name 이름으로 추가한다. 뷰 코드에서는 name으로 지..
devlogofchris.tistory.com
Model을 통해 보내진 데이터들은
뷰단에서 jsp EL 식을 통해 받아 화면에 표시할 수 있다.
<h1> ${ name } </h1>
<h1> ${ age } </h1>
${} : JSP EL식
-- 추가로 더 조사해보기!!
JSP - EL 표현식 문법과 사용 방법
JSP - EL 표현식 문법과 사용 방법 EL(Expression Language)은 자바 빈의 프로퍼티, 값을 JSP의 표현식 <%= %>이나 액션 태그 를 사용하는것 보다 쉽고 간결하게 꺼낼수 있게 하는 기술이다. 또한 static
atoz-develop.tistory.com
인덱스(클라이언트) -> 컨트롤러 -> 뷰로 이어지는 화면 구성을 만들어보자
1.index.jsp
화면단으로 페이지를 이동하는 (Controller로 이동하는) 링크를 걸어준다
어제 배웠던, url의 ? 표기 이후에는
키= 값 형태로 값을 지정하여 보내는 형태이다.
<a href="t7?name= squat&reps=50">링크7</a><br/>2.Tiger.java (Controller) > index를 통해 받은 매핑 값과 값을 토대로 view단에 내용을 보낸다
@RequestMapping( "/t7" )
public String func07(
Model model,
@RequestParam(value ="name" ) String name,
@RequestParam(value ="reps" ) String reps
) {
System.out.println( " f7 call " + reps + "회의" + name );
model.addAttribute("name" , name);
model.addAttribute("reps" , reps);
// TigerView.jsp 로 이동해라
// Controller명 + View 명으로 하는것이 관례이다
return "TigerView";
}
3. TigerView.jsp
화면단으로 Tiger.java(Controller)를 통해 받은 데이터 값을 화면에 출력한다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>TigerView.jsp</h1>
<h1> ${ name } </h1>
<h1> ${ age } </h1>
<h1> ${ reps } </h1>
</body>
</html>
view단은 jsp파일 이므로 표현식(<%= >)으로도 데이터를 호출할 수 있다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>TigerView.jsp</h1>
<%
/* String n = request.getParameter(name);*/
/* object로 리턴되기때문에 받는값으로 형변환 해줘야 한다 */
String n = (String)request.getAttribute("name");
String a = (String)request.getAttribute("reps");
%>
<h1> ${ name } </h1>
<h1> ${ age } </h1>
<%= n %>
<%= a %>
<h1> ${ reps } </h1>
</body>
</html>
결론
View단에서 화면에 표기하는 방법은 두 가지다,
- jsp EL 식( $ { }),
- request.getAttribute() 이후 <%= 변수명 > 표현식
위의 index.jsp에서? 표기로 값을 지정해 전송했을 때의 경우이다.
<a href="t7?name= squat&reps=50">링크7</a><br/>
해당 코드는 name의 값이 squat & reps의 값을 50으로 지정하여 전송하였다.
하지만, 별도의 값을 지정하지 않거나, 하나만 보냈지만, 기본값이 필요한 경우 Controller에서 이러한 값을 지정할 수 있다.
위의 형태로 값을 지정하여 Controller에 전송될 경우, @RequestParam()를 이용하여 값을 받게 되는데...
required
해당 값을 반드시 사용해야 할 경우(필수)로 지정할 수 있다. required로 지정되면 해당 값이 반드시 표기되며 view단에서 이러한 값을 받아주는 값이 없다면 404 에러를 표기하게 된다.
기본값은 true이며, false로, 해당 값이 사용되지 않더라도, 에러를 표시하지 않게끔 조치할 수도 있다
@RequestMapping( "/t15" )
public String func15(
// required = true : 반드시 사용해야한다 false -> 사용하지 않아도 된다
@RequestParam(value="name", required = false )
String name ) {
System.out.println( " f15 call " + name );
return "TigerView";
}
defaultValue
별도의 값을 지정하지 않거나, 하나만 보냈지만, 기본값이 필요한 경우 defaultValue에 별도의 값을 지정하여 기본값을 지정할 수 있다.
<a href="t16">링크16_1</a><br/>
<a href="t16?name=강아지">링크16_2</a><br/>링크 16_1은 별도의 값이 없고 16_2는 강아지라는name값을 지정하여 전송하였는데,
@RequestMapping( "/t16" )
public String func16(
// defaultValue = 값 : name값을 별도로 지정하지 않았을때, defaultValue로 값이 전달된다.
@RequestParam(value="name", defaultValue = "고양이" )
String name ) {
System.out.println( " f16 call " + name );
return "TigerView";
}위 태그로 값을 전송될 때, 별도의 값이 없는 16_1의 경우, 고양이라는 값이 지정되어 뷰단으로 값이 전달된다.
2교시 11-12/ 주제 : Controller_ModelAndView / React와 jsp의 연결
코드 파일:/
ModelAndView
ModelAndView 객체를 생성,
생성 시, 데이터를 넘겨줄 페이지명을 인자 값으로 지정한다.
ModelAndView mv = new ModelAndView("TigerView");생성된 객체로
addObject()를 호출하고
넘겨줄 데이터를 (키, 값)의 형태로 지정하여
객체명으로 리턴하여 값을 넘겨준다.
//ModelAndView
@RequestMapping( "/t8" )
public ModelAndView func08() {
//인자를 데이터를 가지고 갈 페이지(jsp)로 지정해준다.
ModelAndView mv = new ModelAndView("TigerView");
mv.addObject("name", "latpull down");
mv.addObject("reps", "200");
return mv;
}이때, 삼항 연산자를 통해 조건문으로 페이지를 나누어 설정할 수도 있다.
ModelAndView mv = new ModelAndView( tf? "TigerView" : "LionView");@RequestParam을 통해 클라이언트에서 선택하여 넘겨준 값을 토대로 T/F을 지정,
각각의 조건에 맞는 뷰단을 호출할 수 있다.
// 클라이언트에서 값을 지정하여 선택
<a href="t9?tf=true">링크9_T</a><br/>
<a href="t9?tf=false">링크9_F</a><br/>
//ModelAndView
@RequestMapping( "/t9" )
public ModelAndView func09(
//@RequestParam 을 통해, index에서 받은값으로 삼항연산을 할 수도 있다.
@RequestParam(value="tf") Boolean tf
) {
// 인자에 삼항연산자를 넣어 조건문으로 페이지를 나누어 지정할 수 있다. T/F 와 무관하게 데이터는 넘어간다.
ModelAndView mv = new ModelAndView( tf? "TigerView" : "LionView");
mv.addObject("name", "latpull down");
mv.addObject("reps", "200");
return mv;
}
클라이언트에서 ( 컨트롤러를 거치지 않고 ) jsp로 이동하기
dispatcher-servlet.xml에 컨트롤러를 거치지 않고 view로 이동할 수 있는 설정 코드를 넣어주고, 서버를 재시작한다
<!-- 추가 설정 코드 -->
<mvc:view-controller path="/t10" view-name="LionView"/>
// path="페이지url", // view-name="jsp파일 명"
React와 jsp의 연결
리액트에서 axios를 통해 Controller로 접근할 수 있다.
1) 리액트 코드
import axios from 'axios';
import React, { Component } from 'react';
// axios 는 npm install --save axios 를 통해 받아 사용하는 외부라이브러리로
// 보다 개선된 비동기 통신을 지원한다.
class App extends Component {
f1 = () => {
axios.get("http://localhost:8080/Spring03/t11")
// axios.get("http://date.jsontest.com/")
.then( ( res )=> {
console.log(res);
} )
}
render() {
return (
<div>
<h1>App</h1>
<button onClick={ this.f1 }>함수1axiosGet</button>
</div>
);
}
}
export default App;
2) Controller
@RequestMapping( "/t11" )
public String func11() {
System.out.println( " f11 call " );
// TigerView.jsp 로 이동해라
// null 지정하면, 페이지를 지정하지 않으므로 404에러가 뜬다
return "리턴값";
}
Console 창에 f11 call 이 찍히며 Controller로 접근할 수 있는 것을 확인할 수 있다.`
참고만!)
Failed to load resource: the server responded with a status of 404() 오류 발생 시
[Spring]Failed to load resource: the server responded with a status of 404 () 오류 해결 방법
Failed to load resource: the server responded with a status of 404 () 에러 오류 해결 방법에 대해 보자 기본적으로 프론트와 백엔드가 서로 연동이 안되어 있을 때 에러가 발생한다. 대부분 저 에러와 아래..
san-tiger.tistory.com
3교시 12-13/ 주제 : React와 jsp의 연결_데이터 전송
코드 파일:/
react에서 Controller로 접근하여 데이터를 가져오는 법
1) react Proxy설정
리액트 src폴더의 package.json 파일의 하단에 proxy를 설정하고 server를 재시작한다.
리액트 App에서 proxy 형태로 접근 url 수정하기
axios.get( "프로젝트명/지정action" )
2) Controller 파일 설정 변경
Controller 파일의 지정 어노테이션을 @RestController로 변경, =>
@RequestMapping( "클라이언트action값" )로 컨트롤러에서 view페이지의 url을 지정해준 뒤,
@RestController
class Lion{
@RequestMapping( "/t12" )
public String func12() {
return "test";
}Controller에서 return 된 "test"라는 문자열을 react에서 가공하여 log로 확인해본다.
f1 = () => {
// axios.get('/Spring03/t11')
axios.get("Spring03/t12")
// axios.get("http://date.jsontest.com/")
.then( ( response )=> {
console.log(response);
} )
}. then()를 통해 response에 담긴 데이터는 console창에서 확인할 수 있다.
위의 프록시 주소로 설정하지 않고, 전체 url로 설정할 경우,
axios.get("http://localhost:8080/Spring03/t12")@CrossOrigin를 설정하는 방법도 있다.
@CrossOrigin("http://localhost:3001") 로 react서버를 지정하여 데이터를 넘겨준다.
@RestController
class Lion{
@CrossOrigin("http://localhost:3001")
@GetMapping( "/t12" )
public String func12() {
System.out.println( " f12 call " );
return "test";
}
리액트의 앞단에서 axios.get() 호출하여, 해당 데이터를 요청할 수 있다.
동일하게 Controller의 return값인 "test"가 확인된다.
4교시 14-15/ 주제 :
코드 파일:/
form태그를 이용한 데이터 전송
@RequestMapping( "/t13" )
public String func13(Person person ) {
System.out.println( " f13 call " );
System.out.println( person.getId() + person.getPw() );
// TigerView.jsp 로 이동해라
// null 지정하면, 페이지를 지정하지 않으므로 404에러가 뜬다
return "TigerView";
}form태그로 값을 지정하여 전송한다.
데이터의 입출력이 가능케 하는 DTO클래스에 보낸다
https://youngjinmo.github.io/2021/04/dto-vo-entity/
DTO와 VO 그리고 Entity의 차이
본 포스팅은 우아한Tech에 올라온 라흐님의 발표영상 DTO vs VO 영상을 보고 정리한 포스팅이다. 넥스트 스텝에서 클린코드 과정을 이수하면서 DTO와 VO의 차이를 제대로 이해못하고 미션을 수행하
youngjinmo.github.io
일종의 DTO의 역할을 수행하게 하는 별도의 클래스를 생성한다.
DTO는 별도의 로직없이 데이터 교환을 위한 getter/setter메서드만 갖는다
클래스 변수, 생성자, index의 값을 받는 생성자, getter, setter를 이용해 값을 전달할 수 있다.
package Pack01;
//DTO
public class Person {
String id;
int pw;
public Person() {
}
public Person(String id, int pw) {
System.out.println( "생성자 호출성공" );
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public int getPw() {
return pw;
}
public void setPw(int pw) {
this.pw = pw;
}
}
5교시 15-16/ 주제 :
코드 파일:/
자료형에 따른 값의 전달
// =========================================================
@RequestMapping( "/t14" )
public String func14(Model model) {
System.out.println( " f14 call " );
// 1. 정수 전달
int num = 100;
model.addAttribute("num", num);
// 2. 믄자열 전달
String str = "문자열";
model.addAttribute("str", str);
// 3. 배열 전달
int[] ar = {10, 11, 12};
model.addAttribute("ar", ar);
// 4. 컬렉션(Integer)
LinkedList<Integer> li = new LinkedList<Integer>();
li.add(13);
li.add(14);
li.add(15);
model.addAttribute("li", li);
// 5. 컬렉션(String)
LinkedList<String> st = new LinkedList<String>();
st.add("똘기");
st.add("떵이");
st.add("호치");
st.add("새초미");
model.addAttribute("st", st);
// 6. Person
Person person = new Person("홍길동", 99);
model.addAttribute("Person", person);
// 7. 컬렉션(Person)
LinkedList<Person> plist = new LinkedList<Person>();
plist.add(new Person("소나무", 10));
plist.add(new Person("중나무", 20));
plist.add(new Person("대나무", 30));
model.addAttribute("plist", plist);
return "MonkeyView";
}
뷰단에서 데이터를 받는다.
<%@page import="Pack01.Person"%>
<%@page import="java.util.LinkedList"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>MonkeyView</h1>
<%
int num = (Integer)request.getAttribute("num");
String str = (String)request.getAttribute("str");
int[] ar = (int[])request.getAttribute("ar");
@SuppressWarnings("unchecked")
LinkedList<Integer> li = (LinkedList<Integer>)request.getAttribute("li");
out.println(li.get(0) + " " );
out.println(li.get(1) + " " );
out.println(li.get(2) + " " );
out.print("<br/>");
@SuppressWarnings("unchecked")
LinkedList<String> st = (LinkedList<String>)request.getAttribute("st");
out.println(st.get(0) + " " );
out.println(st.get(1) + " " );
out.println(st.get(2) + " " );
out.print("<br/>");
for(int value: ar){
out.println(value + " ");
}out.print("<br/>");
Person person = (Person)request.getAttribute("Person");
out.println(person.getId() + " " );
out.println(person.getPw() + " " );
@SuppressWarnings("unchecked")
LinkedList<Person> plist = (LinkedList<Person>)request.getAttribute("plist");
out.println(plist.get(0).getId() + plist.get(0).getPw());
out.println(plist.get(1).getId() + plist.get(1).getPw());
out.println(plist.get(2).getId() + plist.get(2).getPw());
%>
<c:forEach var="a" items="${plist }" varStatus="b">
${b.index } : ${a.getId() } ${a.getPw() }<br>
</c:forEach>
</body>
</html>
@SuppressWarnings() - 경고문구를 생략하는 어노테이션
https://solbel.tistory.com/209
[java & spring] @SuppressWarnings 설명 및 종류
[java & spring] @SuppressWarnings 설명 및 종류 자바를 이용해 프로젝트를 진행할떄, 꼭 헤깔려서 검색하곤 하는 부분이 있어서 참고용으로 퍼왔습니다! 출처는 아래 명시 했습니다! Java의 @SuppressWar
solbel.tistory.com
다양한 케이스의 경고표기를 삭제한다.
이클립스의 컴파일러에서 사용을 권장하지 않는 경고문구를 노란색 밑줄로 표기하는 경우가 있다.
이러한 경고를 표기하고 싶지 않다면 @SuppressWarnings 어노테이션을 아래처럼 써주면 된다,
@SuppressWarnings("rawtypes")=> 하나만 적용할 경우
@SuppressWarnings({"rawtypes", "unchecked"})=> 두 개 이상 적용할 경우
all : 모든 경고
cast : 캐스트 연산자 관련 경고
dep-ann : 사용하지 말아야 할 주석 관련 경고
deprecation : 사용하지 말아야 할 메서드 관련 경고
fallthrough : switch문에서 break 누락 관련 경고
finally : 반환하지 않는 finally 블럭 관련 경고
null : null 분석 관련 경고
rawtypes : 제너릭을 사용하는 클래스 매개 변수가 불특정일 때의 경고
unchecked : 검증되지 않은 연산자 관련 경고
unused : 사용하지 않는 코드 관련 경고
6교시 16-17/ 주제 :
코드 파일:/
JSTL 문법 참고하기
https://web-inf.tistory.com/14
JSTL <c:forEach> 사용법
JSTL : JSTL의 반복문인 foreach에 대해 사용방법을 포스팅하고자 합니다. foreach는 우선 일반적 프로그래밍언어에서 사용하는 for문과 동일 합니다. 반복문으로 사용이되고 주로 목록을 반복해서 출
web-inf.tistory.com
전송방식에 따른 값 처리
RequestMapping()은 GET, POST 요청을 모두 처리할 수 있다
필요에 따라 이러한 전송방식을 구분하여 처리하고자 할 때
- 어노테이션 변경 방식
- 전송방식 지정방식
1) 어노테이션 변경 방식
RequestMapping() 대신 @GetMapping @PostMapping을 이용하여 요청을 처리할 수 있다.
명칭에서 유추할 수 있듯
@GetMapping : GET 방식을 처리
@PostMapping : POST방식을 처리
요청을 처리하는 Controller에서 메서드에 위의 어노테이션을 지정하면 각각의 방식에 맞는 요청에 따라 구별되어 처리된다.
클라이언트단에서 별도의 전송방식을 지정하지 않으면 GET 방식으로 전송된다.
// 같은 action값으로 컨트롤러를 지정해주더라도 @GetMapping, @PostMapping
// 에따라서 전송방법에 구분되어진다. 디폴트는 GET
@GetMapping( "/t17" )
public String func17_1() {
System.out.println( " f17_1 @GET방식처리 " );
return "TigerView";
}
@PostMapping( "/t17" )
public String func17_2() {
System.out.println( " f17_2 @POST방식 처리 " );
return "TigerView";
}
2) 전송방식 지정방식
이 방식은 @RequestMapping만을 사용하고 사용하고, 인자 값에 method에 전송방식을 지정하는 형태로 처리할 수 있다.
//@RequestMapping만 사용하던 과거의 전송처리 방식이다
@RequestMapping( value = "/t18", method=RequestMethod.POST )
public String func18() {
System.out.println( "POST 방식으로 처리 " + name );
return "TigerView";
}
@RequestMapping( value = "/t18", method=RequestMethod.GET )
public String func18() {
System.out.println( "GET방식 처리 " + name );
return "TigerView";
}
'업무 일지' 카테고리의 다른 글
| day3 - 월말 업무, Spring boot 초기 환경 문제해결 (0) | 2022.11.30 |
|---|---|
| day2 - 개발환경 세팅 (0) | 2022.11.29 |
| day1- 총무관리 페이지 내용관련 정리 (0) | 2022.11.28 |
| 9월20일 (화) 강의노트 (0) | 2022.09.20 |
| 9월2일(금) 강의노트 리액트 기초, 리눅스 (0) | 2022.09.02 |
