1. Project 환경설정

2. 회원가입 TDD(SpringSecurity)

3. 회원가입 도메인(Account&View)

4. 회원가입 폼&TDD(입력값 제한하기)

5**. 회원가입 처리(TDD&회원가입 처리)**

1. Project 환경설정

1-1) Java & Spring Boot Version

spring boot : 2.2.5.RELEASE

java : 11

1-2) Dependency List

1-3) Property 세팅

• h2 scope ‘test’로 변경하기

# db
spring.datasource.url=jdbc:postgresql://localhost:5432/springweb
spring.datasource.username=ssu
spring.datasource.data-password=1234
# db initialization
spring.jpa.hibernate.ddl-auto=create-drop
spring.jpa.generate-ddl=false
# sql log
spring.jpa.show-sql=true
# sql query formatting
spring.jpa.properties.hibernate.format_sql=true
# sql value log
logging.level.org.hibernate.type.descriptor=trace
# spring security
logging.level.org.springframework.security=DeBug

2. 회원가입 TDD

2-1) AccountControllerTest

• 회원가입 뷰 TDD 작성

• Console(error)

  • 401 에러
    • (Unauthorized)는 클라이언트가 인증되지 않거나 유효한 인증 정보가 부족

  

  • Request

    

  • Response

    

2-1)-1. BaseTest

2-2) AccountController

• TDD에 맞게 AccountController 추가하기

• Console(error)

  • SpringSecurity 때문에 Controller를 만들었음에도 에러나는 거임.

  

  

  • Request

    • Spring_Security_Saved~ 사라진 걸 확인할 수 있음.

    

  • Response

    • 200 OK Error Message 없음.

    

2-3) SecurityConfig

• Spring Security 설정하기

  • Authorization(권한)
  • Authentication(인증)

  

• Console(Success)

  

3. 회원가입 도메인(Account&View)

3-1) Account

• 계정 도메인

3-2) View(제일 마지막에 만들기)

• 회원 가입 Viewer
  • Viewer만들기
    • thymeleaf 적용
    • HTML Form 데이터 방식
  • Controller 만들기
  • Security 권한과 인증 / Favicon 처리

3-2)-1. sign-up.html

• method =”post”

  • th:object = “${signUpForm}”
    • th:field=”*{nickname}”
      • th:if=”${#fileds.hasErrors(’nickname’)}”
      • th:errors=”*{nickname}”
    • th:filed=”*{email}”
      • th:if=”${#fileds.hasErrors(’email’)}”
      • th:errors=”*{email}”
    • th:field=”*{password}”
      • th:if=”${#fileds.hasErrors(’password’)}”
        • th:errors=”*{password}”

• 연습 sign-up.html

  <div class="row justify-content-center">
  	<!-- SignUpForm -->
  	<form class="needs-validation col-sm-6"
  	문제1, 문제2, method="post" novalidate>
  
  		<!-- nickname -->
  		<div class="form-group">
  			<label 문제3>닉네임</label>
  			<input 문제3 type="text" 문제4 class="form-control"
  			   placeholder="whiteship" 문제5 required minlength="3" maxlength="20">
  			<small 문제5 class="form-text text-muted">
  			공백없이 문자와 숫자로만 3자 이상 20자 이내로 입력하세요. 가입후에 변경할 수 있습니다.
  			</small>
  			<small class="invalid-feedback">닉네임을 입력하세요.</small>
  			<small class="form-text text-danger" 
  					문제6, 
  					문제7,>Nickname
  			Error</small>
  		</div>
  
  		<!-- email -->
      <div class="form-group">
          <label 문제8>이메일</label>
          <input 문제8 type="email" 문제9 class="form-control"
                 placeholder="[email protected]" 문제10 required>
          <small 문제10 class="form-text text-muted">
              스터디올래는 사용자의 이메일을 공개하지 않습니다.
          </small>
          <small class="invalid-feedback">이메일을 입력하세요.</small>
          <small class="form-text text-danger" 
  							문제11
  							문제12>Email Error</small>
      </div>
  
  		<!-- password -->
      <div class="form-group">
          <label 문제13>패스워드</label>
          <input 문제13 type="password" 문제14 class="form-control"
                 문제15 required minlength="8" maxlength="50">
          <small 문제15 class="form-text text-muted">
              8자 이상 50자 이내로 입력하세요. 영문자, 숫자, 특수기호를 사용할 수 있으며 공백은 사용할 수 없습니다.
          </small>
          <small class="invalid-feedback">패스워드를 입력하세요.</small>
          <small class="form-text text-danger" 
  						문제13
  						문제14>Password Error</small>
      </div>
  
  		<!-- submit -->
      <div class="form-group">
          <button class="btn btn-primary btn-block" type="submit"
                  문제15>가입하기
          </button>
          <small 문제15 class="form-text text-muted">
              <a href="#">약관</a>에 동의하시면 가입하기 버튼을 클릭하세요.
          </small>
      </div>
  	</form>
  </div>
  

• 완료 sign-up.html

  <div class="row justify-content-center">
  	<!-- SignUpForm -->
  	<form class="needs-validation col-sm-6" action="#"
  	th:action="@{/sign-up}" th:object="${signUpForm}" method="post" novalidate>
  
  		<!-- nickname -->
  		<div class="form-group">
  			<label for="nickname">닉네임</label>
  			<input id="nickname" type="text" th:field="*{nickname}" class="form-control"
  			   placeholder="whiteship" aria-describedby="nicknameHelp" required minlength="3" maxlength="20">
  			<small id="nicknameHelp" class="form-text text-muted">
  			공백없이 문자와 숫자로만 3자 이상 20자 이내로 입력하세요. 가입후에 변경할 수 있습니다.
  			</small>
  			<small class="invalid-feedback">닉네임을 입력하세요.</small>
  			<small class="form-text text-danger" th:if="${#fields.hasErrors('nickname')}" 
  					th:errors="*{nickname}">Nickname
  			Error</small>
  		</div>
  
  		<!-- email -->
      <div class="form-group">
          <label for="email">이메일</label>
          <input id="email" type="email" th:field="*{email}" class="form-control"
                 placeholder="[email protected]" aria-describedby="emailHelp" required>
          <small id="emailHelp" class="form-text text-muted">
              스터디올래는 사용자의 이메일을 공개하지 않습니다.
          </small>
          <small class="invalid-feedback">이메일을 입력하세요.</small>
          <small class="form-text text-danger" 
  							th:if="${#fields.hasErrors('email')}" 
  							th:errors="*{email}">Email Error</small>
      </div>
  
  		<!-- password -->
      <div class="form-group">
          <label for="password">패스워드</label>
          <input id="password" type="password" th:field="*{password}" class="form-control"
                 aria-describedby="passwordHelp" required minlength="8" maxlength="50">
          <small id="passwordHelp" class="form-text text-muted">
              8자 이상 50자 이내로 입력하세요. 영문자, 숫자, 특수기호를 사용할 수 있으며 공백은 사용할 수 없습니다.
          </small>
          <small class="invalid-feedback">패스워드를 입력하세요.</small>
          <small class="form-text text-danger" 
  						th:if="${#fields.hasErrors('password')}" 
  						th:errors="*{password}">Password Error</small>
      </div>
  
  		<!-- submit -->
      <div class="form-group">
          <button class="btn btn-primary btn-block" type="submit"
                  aria-describedby="submitHelp">가입하기
          </button>
          <small id="submitHelp" class="form-text text-muted">
              <a href="#">약관</a>에 동의하시면 가입하기 버튼을 클릭하세요.
          </small>
      </div>
  	</form>
  </div>
  

4. 회원가입 폼(입력값 제한하기)

4-1) AccountControllerTest

• 입력값 제한하기 TDD 작성하기

4-1)-1. 입력값제한하기 Test

• Console(error)

4-2) SignUpForm

4-3) AccountController

5**. 회원가입 처리(TDD&회원가입 처리)**