회원가입 및 회원조회 기능 만들기 - <form>, GET/POST, 리다이렉션

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

회원가입 및 회원조회 기능 만들기 - <form>, GET/POST, 리다이렉션 본문

🖥 BE 백엔드/Spring 스프링

회원가입 및 회원조회 기능 만들기 - <form>, GET/POST, 리다이렉션

비비 bibi 2021. 3. 9. 18:31

회원가입 기능 구현

회원가입 페이지에서 회원가입을 하면, 사용자의 입력 데이터를 서버에서 받아 출력한다.

`<form>`

서버로 데이터를 전달할 때 <form>태그를 사용한다.

속성 action : 서버에 요청을 보낼 때 어떤 URL로 보낼지를 지정할 수 있음.

<form action="/create"> : 해당 form으로부터 /create로 서버에 요청을 보냄

URL이 추가되면 항상 상응하는 Controller 및 메서드가 있어야 한다.

form태그에 아무 속성을 입력하지 않으면 기본적으로 GET방식으로 통신한다.

`index.mustache`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
<form action="/create">
    <div>
        <label for="userid">아이디</label>
        <input type="text" name="userid" placeholder="아이디">
    </div>
    <div>
        <label for="password">비밀번호</label>
        <input type="password" name="password" placeholder="비밀번호">
    </div>
    <div>
        <label for="username">이름</label>
        <input type="text" name="username" placeholder="이름">
    </div>
    <div>
        <label for="useremail">이메일</label>
        <input type="email" name="useremail" placeholder="이메일">
    </div>
    <button type="submit">제출</button>
</form>
</body>
</html>

아무것도 입력하지 않고 제출했을 때의 URL

: http://localhost:8080/create?userid=&password=&username=&useremail=

`UserController.java`

package com.codessquad.qna.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

    @GetMapping("/create")
    public String create(String userid, String password, String username, String useremail) {
        System.out.println("아이디 : " + userid);
        System.out.println("비밀번호 : " + password);
        System.out.println("이름 : " + username);
        System.out.println("이메일 : " + useremail);
        return "index";
    }
}

출력 결과 : 아이디 : a 비밀번호 : b 이름 : c 이메일 : d@e

즉, html에서 name에 해당했던 값들 (userid, password, username, useremail)을 파라미터로 받아와 사용할 수 있다.

단점 : GET방식은 URL로 값이 전달되어 비밀번호 등 노출위험이 있다. 이럴 때는
해결 : form태그에 method="post"속성을 추가하고, 컨트롤러 어노테이션을 @PostMapping()으로 변경해 POST방식으로 전달하면 된다.

POST방식은 데이터를 URL로 전달하지 않아 정보가 노출되지 않는다.

GET방식과 POST방식

GET 방식 : 데이터 요청 및 조회할 때.

POST 방식 : 서버에 데이터를 전송해 추가 및 수정할 때.

우선은 이 정도만 알고 사용하자.

@GetMapping("/create")
public String create(String userid, String password, String username, String useremail)

사용자로부터 이보다 더 많은 값을 입력받으면 메소드 선언부가 점점 길어진다.

별도의 클래스로 분리해 이 문제를 해결할 수 있다.

`User.java`

package com.codessquad.qna.user;

public class User {
    private String userId;
    private String password;
    private String userName;
    private String userEmail;

    public void setUserId(String userId) {
        this.userId = userId;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public void setUserEmail(String userEmail) {
        this.userEmail = userEmail;
    }

    @Override
    public String toString() {
        return "User{" +
                "userId='" + userId + '\'' +
                ", password='" + password + '\'' +
                ", userName='" + userName + '\'' +
                ", userEmail='" + userEmail + '\'' +
                '}';
    }
}

<form>태그에 부여된 name 값과 같은 이름으로 setter 및 인스턴스변수를 설정하면 이렇게 별도의 클래스로 분리할 수 있다.

❗ 이름이 같아야 스프링이 자동으로 setter를 통해 private변수에 setter로 값을 넣어 줄 수 있다!

private로 선언하고 setter로 값을 넣는다.
출력 편의성을 위해 toString()을 오버라이딩한다.

사용자 목록 기능 구현

회원가입을 완료한 사용자 목록을 조회하는 기능을 구현한다.

`UserController.java`

package com.codessquad.qna.controller;

import com.codessquad.qna.user.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class UserController {
    private List<User> users = new ArrayList<>();

    @GetMapping("/create")
    public String create() {
        return "index";
    }

    @PostMapping("/create")
    public String register(User user) {
        System.out.println("user : " + user);
        users.add(user);
        return "redirect:/list";
    }

    @GetMapping("/list")
    public String list(Model model) {
        model.addAttribute("users", users);
        return "list";
    }
}

private List<User> users = new ArrayList<>();

사용자 목록을 저장할 컬렉션 추가

public String list(Model model)

list.html에 데이터를 전달하기 위해 Model 사용

`list.mustache`

<!DOCTYPE HTML>
<html>
<head>
    <title>List</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>회원 목록</h1>
<div>
    <table>
        <caption>사용자 목록</caption>
        <thead>
        <tr>
            <th>사용자 아이디</th>
            <th>이름</th>
            <th>이메일</th>
        </tr>
        </thead>
        <tbody>
        {{#users}}
        <tr>
            <td>{{userId}}</td>
            <td>{{name}}</td>
            <td>{{email}}</td>
        </tr>
        {{/users}}
        </tbody>
    </table>
</div>
</body>
</html>

{{#users}}, {{/users}}

: mustache의 for문 문법. users라는 반복대상객체를 두 태그 사이에서 반복한다

{{userId}}, {{userName}}, {{userEmail}}

: 반복대상객체의 내부 요소 (User의 인스턴스변수)를 지정해 그 값을 출력할 수 있다

리다이렉션

해당 URL로 이동하도록 만들기.

return "redirect:/list" : 메서드가 종료될 때 /list 로 페이지를 이동시킨다.

현재 저장한 컬렉션(ArrayList)은 서버가 재시작했을 때 그 데이터가 모두 사라진다.

왜? 데이터가 RAM 메모리에 저장되기 때문에. (전원 종료시 데이터 사라짐)

이제 하드디스크를 사용하는 파일이나 데이터베이스를 사용해야 하는 시점이다.

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

'🖥 BE 백엔드 > Spring 스프링' 카테고리의 다른 글

Heroku로 스프링 앱 배포하기 (0)	2021.03.15
[Spring] @RequestParam, @PathVariable 차이 (0)	2021.03.11
mustache(템플릿엔진), 동적HTML, MVC의 개념, form태그, GET/POST 차이 (0)	2021.03.09
[Spring] 인프런 스프링 입문(김영한 님) - 순수JDBC, 통합테스트, 스프링JdbcTemplate, JPA, 스프링 데이터 JPA (0)	2021.03.06
[Spring] 인프런 스프링 입문(김영한 님) - 스프링 DB 접근기술 : H2 데이터베이스 설치 (0)	2021.03.05

'🖥 BE 백엔드/Spring 스프링' Related Articles

Bibi's DevLog 🤓🍎

회원가입 및 회원조회 기능 만들기 - <form>, GET/POST, 리다이렉션 본문

회원가입 및 회원조회 기능 만들기 - <form>, GET/POST, 리다이렉션

회원가입 기능 구현

<form>

index.mustache

UserController.java

GET방식과 POST방식

User.java

사용자 목록 기능 구현

UserController.java

list.mustache

리다이렉션

'🖥 BE 백엔드 > Spring 스프링' 카테고리의 다른 글

티스토리툴바

`<form>`

`index.mustache`

`UserController.java`

`User.java`

`UserController.java`

`list.mustache`