Springboot 회원 프로젝트(3) 회원가입 페이지 요청하기

woohee·2024년 4월 6일

회원 프로젝트

목록 보기

3/9

🔖지난 포스트까지 개발환경 세팅, 기본 주소 요청까지 실습을 거쳤다. 이번 포스트에서는 회원가입을 수행하는 회원가입 페이지를 요청하는 과정을 수행해보자!

index.html 수정

첫 페이지에서 회원가입과 로그인 창을 구별해서 접속할 것이다.
다음과 같이 코드를 수정해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h2>Hello Spring Boot!!</h2>
    <a href="/member/save">회원가입</a>
    <a href="/member/login">로그인</a>
</body>
</html>

/member/save는 회원가입을 하는 주소
/member/login은 로그인을 하는 주소
이제 각 주소에서 띄울 페이지를 요청하고 생성해보자.

MemberController 생성

controller 패키지 안에 MemberController를 추가해보자.
MemberController에서는 회원가입페이지를 요청하는 메서드를 추가할 것이다.

@Controller
public class MemberController {
    //회원가입 페이지 출력 요청
    @GetMapping("/member/save")
    public String saveForm(){
        return "save";
    }
}

지난 포스트에서 기본 페이지를 요청하듯이 메서드를 실행시키면 save.html을 찾아간다.

/member/save 주소에 save 페이지를 띄우는 것이다.
save.html을 만들어보자.

save.html

/member/save페이지에 띄워질 save.html은 간단한 회원가입 형식을 가질 것이다.
이메일, 비밀번호, 이름 세 가지만 입력받는 창을 만들어보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>save</title>
</head>
<body>
<!--action 속성: form에 작성한 데이터를 어디로 보낼지 지정 -->
<form action="/member/save" method ="post">
    <!-- name 속성: 서버로 전송할 때 변수이름의 역할 -->
    이메일: <input type="text" name="memberEmail"><br>
    비밀번호:<input type="password" name="memberPassword"><br>
    이름:<input type="text" name="memberName"><br>
    <input type="submit" value="회원가입">
</form>
</body>
</html>

실행

처음 기본 페이지
회원가입 페이지

save.html에서 비밀번호 속성을 password로 설정했기 때문에 비밀번호가 가려진다.
회원가입 버튼 클릭

405 에러가 뜬다.
405 에러는 페이지는 있는데 방식이 잘못되었을 때 출력되는 에러이다.
초기 창에서 로그인 버튼 클릭

404 에러가 뜬다.
404 에러는 페이지가 없을 때 출력되는 에러이다.
에러 메세지를 잘 알아두면 에러를 해결하기 수월할 것이다.