[SpringBoot]SpringDataJPA를 활용한 회원가입 예제- View제작하기
[SpringBoot]SpringDataJPA를 활용하여 회원가입 만들기- Controller,Service,Repository의 역할에 대하여
안녕하세요!
오늘은 Spring Data Jpa기능을 이용하여 회원가입 예제를 만들어보려고 합니다ㅎㅎ
이번에는 Spring Data JPA에 대한 대략적인 기능들에 대한 설명도 같이 이루어질 예정이라
갑자기 많은 개념들이 나와 혼란스러우실 수 도 있지만 잘 이해가 안가시면
지금은 이런게 있구나 정도로만 보고 넘어가시는 것을 추천드립니다.
먼저 쓰면서 익히시다보면 나중에 하나하나 들어만 보고 넘어갔던 개념들을
파보면서 공부하면 그때 했던 것들이 이거였구나 하면서 훨씬 이해가 잘 되실거라 생각합니다ㅎㅎ.
참고로 이 포스팅은 분량상 두개로 나누어서 진행하도록 하겠습니다ㅎㅎ
그럼 시작하겠습니다.
1. User Entity 객체 만들기
먼저 유저정보를 담을 Entity(도메인) 객체를 만들어보겠습니다.
User계정 안에는 특별한 기능은 없고
[유저 고유번호, 아이디, 패스워드, 닉네임, 유저 권한]
정도로 넣어보고자 합니다.
이를 코드로 나타내면 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@Entity
public class UserVO {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long userSn;
private String userId;
private String password;
private String userName;
private String role;
}
|
cs |
UserVO 객체 클래스를 생성해 준 뒤 다음과 같이 작업합니다.
1) 먼저 클래스 위에 @Entity를 넣어 이 객체가 엔티티 클래스임을 명시해줍니다.
(엔티티로 명시된 클래스는 Repository를 통해 DB와 통신하는 주체가 되는데 각 객체 내 변수들 하나하나가 DB 내 칼럼이 된다고 생각하시면 될 것 같습니다.)
2) 다음은 해당 엔티티의 식별 값이 될 @Id를 명시해주어
같은 User 엔티티들끼리 구분할 값인 userSn(유저 시리얼넘버, 식별값)을 넣어줍니다.
(@Id를 명시해준 변수는 Spring이 엔티티들 끼리 구분하는 용도로 사용되며 DB에 들어갈 때 PK(Primary Key)로 들어가므로 테이블 내에서 유일한 값이여야 합니다.)
추가로 GeneratedValue는 자동으로 이 값을 생성해주는 옵션인데 어려우시면 넘어가셔도 지금은 무방할 것 같습니다.
3) 그 외에 유저 계정 아이디인 userId,패스워드 password, 유저 닉네임 userName, 권한 role 정도를 넣어줍니다.
2. 메인화면 View만들기
UI는 크게 신경쓰지않고 간단하게 아이디,패스워드를 적는 칸을 넣고
아이디가 없는사람은 회원가입하기 버튼을 만들어보겠습니다.
아래는 View 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>나만의 게시판 만들기!</title>
</head>
<body style="text-align: center">
안녕하세요 게시판 입니다 로그인을 해주세요:)
<div>
<label for="userId">아이디: </label>
<input id="userId" type="text">
</div>
<div>
<label for="password">패스워드: </label>
<input id="password" type="password">
</div>
<p>처음이신가요? 회원가입은 여기서 해주세요!</p>
<input type="button" onclick="location.href='/login';" value="회원가입하기"></body>
</body>
</html>
|
cs |
이번 포스팅에서 만들 기능은 회원가입이기 때문에
위의 로그인 양식은 형식상 만들어놓은 것이고
아래의 회원가입하기 버튼으로 onclick에 로그인 뷰로 연결될 수 있는 주소를 적어놓습니다.
이 때 서버의 도메인은 빼고 적으셔야 합니다.(저의 경우에는 localhost입니다ㅎㅎ)
아래 이미지는 코드를 실행한 뷰 화면입니다.
3. 회원가입 View 제작하기
3.1 Controller 제작
먼저 회원가입 뷰를 뿌려줄 Controller(컨트롤러) 코드를 만듭니다.
저의 경우에는 회원가입 뷰가 될 join.html파일을
tempates폴더 바로 아래에 만들었기 때문에 아래와 같이 적어주었습니다.
|
1
2
3
4
|
@GetMapping("/join")
public String login(){
return "join";
}
|
cs |
위의 코드는 localhost:8080/join이라는 요청을 Get방식으로 받으면
templates 아래에 있는 join.html이라는 View를 반환합니다.
3.2 회원가입 View 제작하기
다음으로 회원가입 View를 만들어보겠습니다.
때문에 데이터를 넣는 데 필요한 아이디, 패스워드, 닉네임 정도만 뷰에서 정보를 받도록 만들었습니다.
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
</head>
<body>
계정 정보를 입력해주세요!
<form action="/joinUs.do" method="post">
<div>
<label for="userId">아이디: </label>
<input id="userId" name="userId" type="text">
</div>
<div>
<label for="password">패스워드: </label>
<input id="password" name="password" type="password">
</div>
<div>
<label for="userName">닉네임: </label>
<input id="userName" name="userName" type="text">
</div>
<input type="submit" value="가입하기">
</form>
</body>
</html>
|
cs |
View에서는 각 정보를 받는 엘리먼트들을 form 태그로 감싸고
action으로 각 정보들을 보낼 URL을 적어줍니다.
(여기서 보내는 정보는 회원가입 정보이기 때문에 Get보다 Post를 적어주는 것이 좋습니다.)
그리고 각 정보가 담긴 input태그들에게 id와 name속성을 추가하고
1번에서 제작한 userVO클래스의 변수명과 동일하게 적어줍니다.
(이 작업을 안하면 서버로 각 값들이 전송되지 않습니다!)
아래 이미지는 위의 코드를 실행한 페이지 이미지입니다.
일단 분량상 이번 포스팅은 여기서 마치도록 하겠습니다ㅎㅎ
설명할 것들이 너무 많아서 뭔가 횡설수설한 것 같은데 잘 이해가 되셨을지 모르겠습니다ㅠㅠ
혹시 이해가 안가는 부분이나 잘못된 부분이 있다면 알려주시면 감사드리겠습니다!
2부에서 이어서 작성하도록 하겠습니다:)
감사합니다!
▶다음 글
[SpringBoot]4-2. SpringDataJPA를 활용하여 회원가입 예제- Controller,Service,Repository의 역할및 구현(feat.게시판을 만들어보자!)
https://chung-develop.tistory.com/23
[SpringBoot]4-2. SpringDataJPA를 활용하여 회원가입 예제- Controller,Service,Repository의 역할및 구현(feat.게��
[SpringBoot]4-2. SpringDataJPA를 활용하여 회원가입 예제- Controller,Service,Repository의 역할및 구현(feat.게시판을 만들어보자!) 안녕하세요 저번 포스팅에서 회원가입에 대한 포스팅을 이어서 하..
chung-develop.tistory.com
▶이전 글
[SpringBoot]3. DB구축을 위한 MySQL 및 Workbench 설치&SpringBoot 연동(feat.게시판을 만들어보자!)
https://chung-develop.tistory.com/18
[SpringBoot]3. DB구축을 위한 MySQL 및 Workbench 설치&SpringBoot 연동(feat.게시판을 만들어보자!)
[SpringBoot]3. DB구축을 위한 MySQL 및 Workbench 설치하기!(feat.게시판을 만들어보자!) 안녕하세요! 오늘은 백엔드 개발을 할 때 DB설치가 꼭 필요한데, 그 중에서 MySQL에 관해서 포스팅 해보려고 합�
chung-develop.tistory.com