[Photogram] 회원가입 - 데이터베이스 저장

• 회원가입을 하기 위해서 우리는 아래와 같은 정보를 사용자에게 입력으로 받아오도록 하고 있습니다.

<!--회원가입 인풋-->
<form class="login__input" action="/auth/signup" method="POST">
    <input type="text" name="username" placeholder="유저네임" required="required" />
    <input type="password" name="password" placeholder="패스워드" required="required" />
    <input type="email" name="email" placeholder="이메일" required="required" />
    <input type="text" name="name" placeholder="이름" required="required" />
    <button>가입</button>
</form>
<!--회원가입 인풋end-->

---

📝 SignupDto

• 위 4개의 데이터를 사용자에게 전달 받기 위해 아래와 같이 DTO를 생성해주었습니다.

package com.cos.photogram.web.dto.auth;

...

@Data
public class SignupDto {
	
	private String username;
	private String password;
	private String email;
	private String name;
	
	public User toEntity() {
		return User.builder()
				.username(username)
				.password(password)
				.email(email)
				.name(name)
				.build();
	}
}

---

📝 Controller

• 이후 컨트롤러에서는 위 객체를 통해 사용자의 정보를 전달 받아 아래와 같이 회원가입을 진행할 것입니다.

	private final AuthService authService;
    
	...

	@PostMapping("/auth/signup")
	public String signup(SignupDto signupDto) {
		User user = signupDto.toEntity();
		authService.join(user);
		
		return "auth/signin";
	}

---

📝 Service

• 이를 위해 서비스 단에 아래와 같은 비즈니스 로직을 구현해주었습니다.

package com.cos.photogram.service;

...

@RequiredArgsConstructor
@Service
public class AuthService {
	
	private final UserRepository userRepository;
	private final BCryptPasswordEncoder bCryptPasswordEncoder;

	@Transactional
	public void join(User user) {
		user.setPassword(bCryptPasswordEncoder.encode(user.getPassword()));
		user.setRole("ROLE_USER");
		
		userRepository.save(user);
	}
}

package com.cos.photogram.config;

...

@EnableWebSecurity	//Security 활성화
@Configuration	//IoC
public class SecurityConfig extends WebSecurityConfigurerAdapter {
	
	@Bean
	public BCryptPasswordEncoder encode() {
		return new BCryptPasswordEncoder();
	}

	...
}

BCryptPasswordEncoder는 사용자에게 입력받은 비밀번호를 해시한 후 데이터베이스에 저장하기 위해 사용합니다.

---

📝 Repository

• 또한 데이터베이스에 해당 데이터를 저장하기 위해선 Repository가 필요하므로 인터페이스를 생성하여 아래와 같이 구현해주었습니다.

package com.cos.photogram.domain.user;

...

public interface UserRepository extends JpaRepository<User, Long>{

}

---

📝 User

• 마지막으로 User 엔티티의 속성을 아래와 같이 지정해주었습니다.

package com.cos.photogram.domain.user;

...

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
@Entity
public class User {

	@Id @GeneratedValue(strategy = GenerationType.IDENTITY)
	private Long id;
	
	@Column(unique = true)
	private String username;
	
	...
}

---

📝 Result

• 이후 회원가입을 진행해보면 데이터베이스에 사용자 정보가 잘 저장되는 것을 확인할 수 있으며, 만약 동일한 username으로 회원가입을 진행하려고 한다면 오류가 발생하며 에러 페이지가 보여질 것입니다.

• 허나 회원가입에 실패하였다고 위와 같은 오류 페이지가 사용자에게 보여지는 것은 웹 페이지를 서비스하는 입장에서 보았을 때 원치 않는 결과일 것입니다.

---

GitHub - Daegwon-Kim/SpringBoot-Photogram