[Spring]과제 : 회원가입페이지 성별 추가

SolChan Kim·2023년 11월 21일

📝요구사항

회원가입 페이지에 성별을 선택할 수 있게 한다.
성별정보가 서버로 전달되고 처리되는 과정을 이해하고 정리한다.
성별데이터가 db에 정상적으로 저장되는지 확인한다.

1. 회원가입 페이지에서 성별을 추가하는 버튼을 추가한다.(sing-up.html)

성별은 남/여 중 하나만 선택되야 하므로 <input>태그에 type 속성 중
radio를 사용한다.

...생략
<div class="form-group col-md-4">
  <label>성별:</label><br>
  	<label>
      <input type="radio">남성
  </label>
  <label>
    <input type="radio">여성
  </label>
</div>
...생략

❗문제발생

성별을 선택하는 과정에서 중복체크(남/여 모두 체크)가 허용되는 문제가 발생했다.

❕해결

radio속성은 중복체크가 허용되지 않는데 위와 같은 문제가 생긴 이유를 알기 위해
구글링했다.(출처 : https://coding-factory.tistory.com/931)

name속성을 사용하지 않아서 문제가 발생하는 것이었다.
- 추가로 서버로 넘길 값을 선택하는 value도 사용하지 않았으므로 사용해야 한다.

... 생략
<div class="form-group col-md-4">
  <label>성별:</label><br>
  	<label>
      <input type="radio" name="gender" value="남성">남성
  </label>
  <label>
    <input type="radio" name="gender" value="여성">여성
  </label>
</div>
... 생략

중복체크가 허용되는 문제가 해결됐다.

2. 사용자에 대한 데이터베이스 테이블 역할을 하는 User.java에서 성별에 대한 value값이 저장될 변수를 선언한다.

// 생략
String gender;
// 생략

사용자에 대한 데이터를 jpa를 기준으로 다루고 응용할수 있는 메서드들이 집합되어 있는
UserRepository.java는 이미 완성되어있다.

3. 사용자의 값들에 대한 요청작업을 하는 UserAddRequest.java에서 웹페이지의 form의 하위 input태그중 name속성의 키(gender)와 값(value(남자or여자))에 대한 변수를 저장할 변수를 선언한다.

// 생략
private String ...gender; // 변수는 name속성의 키와 동일한 명으로 지정한다.

4. 웹페이지에서 사용자가 요청하는 모든 기능을 담당하는 UserServic에서 User에 대한 생성자를 호출하므로 User.java를 수정한다.

현재 User.java에 생성한 생성자는 위에서 선언한 gender에 대한 변수 초기화가 되어있지 않다.

// 생략
  public User(UserAddRequest req){
    username = req.getUsername();
    password = req.getPassword();
    phoneNumber = req.getPhoneNumber();
    email = req.getEmail();
    address1 = req.getAddress1();
    address2 = req.getAddress2();
    postcode = req.getPostcode();
    // gender에 대한 변수 초기화 추가
    gender = req.getGender();
  }

이제 User.java에서 gender에 대한 변수 초기화가 가능하다.

❗UserService.java에 있는 add메서드 살펴보기

add 메서드에서는 사용자가 입력받은 내용들을 클래스 변수(req)에 저장된 상태로 전달 받는다.

public void add(UserAddRequest req){
	userRepository.save(new User(req));
}

new User(req)를 통해 User에 대한 생성자를 호출하여 User 객체에 대한 인스턴스를 생성한다.

여기서 UserAddRequest 클래스 타입을 매개변수로 받아올 수 있는 생성자는
Custom 생성자이다.

  public User(UserAddRequest req){
  username = req.getUsername();
  password = req.getPassword();
  phoneNumber = req.getPhoneNumber();
  email = req.getEmail();
  address1 = req.getAddress1();
  address2 = req.getAddress2();
  postcode = req.getPostcode();
  gender = req.getGender();
}

생성된 인스턴스(User 객체)를 JPARepository를 상속받고 있는 userRepository의 save 메서드에 넣어주면, 실제 데이터베이스에 반영이 된다.
갑자기 위 과정을 다시한번 살펴보는 이유는 PublicController.java에서 post방식으로 데이터를 처리하는데 이곳에서 UserService에 있는 add메서드를 호출하기 때문이다.
- @@ModelAttribute : 요청값들을 하나의 묶음으로 가져오겠다.(post형태로 받아온 값들을 UserAddRequest 있는 변수 값들에 맞춰서 가져온다.)
- userService.add(req); : 사용자가 html 화면에서 입력 받고 전송한 값들이 req 라는 UserAddRequest 클래스 타입의 변수 안에 묶음으로 들어온다. 이것을 userService의 add 메소드의 매개변수로 전달 한다.
- return "redirect:/index"; : 링크, get매핑방식으로 결과값 도출, 데이터를 처리하고 화면을 index.html로 되돌려준다.

// 생략
  @PostMapping(value = "/sign-up")
  public String signup(Model model, @ModelAttribute UserAddRequest req){
    userService.add(req);
    return "redirect:/index";
  }