Spring & Springboot/올인원 스프링 프레임워크

웹 애플리케이션 생성 및 서버로 데이터 전송

YJ_ma 2023. 9. 22. 21:42

웹 애플리케이션 예제 준비

Service를 빈 객체로 등록하고 DAO 빈 객체와 연결하는 방법에 대해 알아본다.

1. ch07_pjt_01을 복사하여 ch08_pjt_01 프로젝트를 생성한다.

2. pom.xml 파일에서 프로젝트 이름을 변경한다.

<name>ch08_pjt_01</name>

3. 왼쪽 하단의 [Servers] 탭에 ch07_pjt_01 프로젝트가 있다면 hello 콘텍스트가 ch08_pjt_01의 콘텍스트와 중복되므로 삭제한다.

4. 변경된 내용을 서버에 적용하기 위해 아이콘(Publish to the server)를 클릭한다.

[Stopped, Republish] → [Stopped, Synchoronized]로 변경됨

적용 전 적용 후

5. ch08_pjt_01을 서버에서 실행하여 프로젝트가 정상적으로 실행되는지 확인한다.

실행 결과

6. ch07_pjt_01 예제는 필요 없으므로 마우스 오른쪽 버튼을 눌러 [Close Project]를 클릭하여 프로젝트를 닫는다.

서버로 회원가입 데이터 전송하기

회원가입 양식 만들기

sign_up.jsp 파일에 <form>을 이용해서 회원가입에 필요한 양식을 만든다.

회원가입 양식에는 계정ID, 비밀번호, 메일 주소, 연락처를 추가한다.

■ sign_up.jsp

· <form> action 속성의 /hello/signUpConfirm : <SIGN UP> 버튼을 클릭하면 사용자가 입력한 정보가 서버로 전송될 때 넘어가는 주소 값

· 서버의 컨트롤러는 이를 처리할 수 있는 메서드를 호출한다.

→ 이러한 과정을 '사용자의 요청에 대해서 이를 처리할 수 있는 메서드에 연결'한다고 한다.

<%@ 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>
	<h3>This page is SIGN_UP.</h3>
	
	<form action="/hello/signUpConfirm">
		ID : <input type="text" name="m_id"> <br/>
		PW : <input type="password" name="m_pw"> <br/>
		MAIL : <input type="text" name="m_mail"> <br/>
		PHONE : <input type="text" name="m_phone"> <br/>
		<input type="submit" value="SIGN UP">
		<input type="reset" value="CANCEL">
	</form>
</body>
</html>

 

클라이언트 요청을 서버에서 처리하기

· [src/main/java] > MemberController 클래스에 컨트롤러에 /signUpConfirm을 처리할 수 있는 메서드를 만들어본다.

@RequestMapping("/signUpConfirm")
public String signUpConfirm() {
    System.out.println("[MemberController] signUpConfirm()");

    return null;
}

· signUpConfirm() : 클라이언트에서 /hello/signUpConfirm 요청이 서버에 전송되면 호출되는 메서드

    - 사용자가 입력한 아이디, 비밀번호, 메일 주소, 연락처 정보를 받을 수 있다.

    - 사용자가 입력한 정보를 받기 위한 방법은 @RequestParam, VO객체를 이용하는 방법이 있다.

 

@RequestParam 애너테이션

· 사용자가 입력한 정보를 컨트롤러에서 하나씩 받을 수 있다.

· 형식 : @RequestParam String(데이터 타입) m_id(변수명)

· sign_up.jsp에서 사용자가 입력한 데이터 이름 : m_id, m_pw, m_mail, m_phone

@RequestMapping("/signUpConfirm")
public String signUpConfirm(@RequestParam String m_id,
        @RequestParam String m_pw,
        @RequestParam String m_mail,
        @RequestParam String m_phone) {
    System.out.println("[MemberController] signUpConfirm()");

    System.out.println("m_id: " + m_id);
    System.out.println("m_pw: " + m_pw);
    System.out.println("m_mail: " + m_mail);
    System.out.println("m_phone: " + m_phone);

    return null;
}

이제 브라우저에서 http://localhost8090/hello/signUp에 들어가 사용자 정보를 입력한 후 STS의 콘솔 창에 사용자가 입력한 정보가 제대로 출력되는지 확인해본다.

클라이언트
 서버
회원가입 양식 페이지 이동 사용자 정보 입력 후 <SIGN UP> 클릭 실행결과

· 데이터 타입은 스프링이 자동으로 형 변환을 한다.

ex, 비밀번호 : 문자열 → 정수형으로 변환하는 경우

■ Integer 클래스를 사용하는 경우

@RequestMapping("/signUpConfirm")
public String signUpConfirm(@RequestParam String m_id,
        @RequestParam Integer m_pw,
        @RequestParam String m_mail,
        @RequestParam String m_phone) {
    System.out.println("[MemberController] signUpConfirm()");

    System.out.println("m_id: " + m_id);
    System.out.println("m_pw: " + m_pw);
    System.out.println("m_pw type: " + m_pw.getClass().getName());
    System.out.println("m_mail: " + m_mail);
    System.out.println("m_phone: " + m_phone);

    return null;
}

Integer 실행 결과

■ Int 타입을 사용하는 경우

package com.company.hello.member;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class MemberController {

	@RequestMapping("/signUp")
	public String signUp() {
		return "sign_up";
	}

	@RequestMapping("/signIn")
	public String signIn() {
		return "sign_in";
	}

	@RequestMapping("/signUpConfirm")
	public String signUpConfirm(@RequestParam String m_id,
			@RequestParam int m_pw,
			@RequestParam String m_mail,
			@RequestParam String m_phone) {
		System.out.println("[MemberController] signUpConfirm()");

		System.out.println("m_id: " + m_id);
		System.out.println("m_pw: " + m_pw);
		System.out.println("m_pw type: " + ((Object)m_pw).getClass().getName());
		System.out.println("m_mail: " + m_mail);
		System.out.println("m_phone: " + m_phone);

		return null;
	}

}

int 타입 실행 결과

VO 객체

· 스프링에서는 데이터 이름을 이용해서 클라이언트에서 전송된 데이터를 VO객체의 멤버 필드에 자동으로 할당한다.

· com.company.hello.member 패키지 > MemberVo 클래스 생성하고 다음과 같이 입력한다.

package com.company.hello.member;

public class MemberVo {
	// 사용자 정보에 해당하는 멤버 필드
	String m_id;
	String m_pw;
	String m_mail;
	String m_phone;
	
	// 멤버 필드에 대한 getters, setters
	public String getM_id() {
		return m_id;
	}
	public void setM_id(String m_id) {
		this.m_id = m_id;
	}
	public String getM_pw() {
		return m_pw;
	}
	public void setM_pw(String m_pw) {
		this.m_pw = m_pw;
	}
	public String getM_mail() {
		return m_mail;
	}
	public void setM_mail(String m_mail) {
		this.m_mail = m_mail;
	}
	public String getM_phone() {
		return m_phone;
	}
	public void setM_phone(String m_phone) {
		this.m_phone = m_phone;
	}
}

이제 MemberController.java의 signUpConfirm()을 다음과 같이 수정한다.

@RequestMapping("/signUpConfirm")
public String signUpConfirm(MemberVo memberVo) {
    System.out.println("[MemberController] signUpConfirm()");
    
    System.out.println("m_id: " + memberVo.getM_id());
    System.out.println("m_pw: " + memberVo.getM_pw());
    System.out.println("m_mail: " + memberVo.getM_mail());
    System.out.println("m_phone: " + memberVo.getM_phone());

    return null;
}

실행 결과

setter 메서드

📣 스프링에서는 어떻게 사용자가 입력한 데이터를 MemberVo의 멤버 필드(m_id, m_pw, m_mail, m_phone)에 자동으로 할당할 수 있을까?

💡스프링은 MemberVo에서 사용자가 입력한 데이터의 이름과 동일한 멤버 필드를 찾고, 이에 해당하는 setter 메서드를 이용해서 멤버 필드에 데이터를 할당한다.

즉, setter 메서드가 없는 멤버 필드는 자동 할당이 안되고 멤버 필드는 초기화되지 않는다! (바꾼 값을 적용시킬 수 없다)

 

 

 

 

저작자표시 비영리 변경금지

'Spring & Springboot > 올인원 스프링 프레임워크' 카테고리의 다른 글

뷰와 로그인 기능 구현  (0) 2023.09.22
빈 객체 구현  (0) 2023.09.22
회원 관리 페이지 만들기  (0) 2023.09.21
STS를 이용한 웹 프로젝트  (0) 2023.09.21
스프링 MVC를 이용한 웹 서비스 프로젝트  (0) 2023.09.20

'Spring & Springboot/올인원 스프링 프레임워크'의 다른글

  • 현재글웹 애플리케이션 생성 및 서버로 데이터 전송

관련글

티스토리툴바