#회원가입-4

1. 회원가입 인증 메일 리팩토링

2. 자동 로그인 TDD & 구현

3. 회원 가입 메인 네비게이션 메뉴

4. 프론트엔드 라이브러리 설정 이론

5. 프론트엔드 라이브러리 설정 처리

1. 회원가입 인증 메일 리팩토링

1-1) AccountController

리팩토링
- 두 개의 If문 통과 후 이메일 인증 확인(Verify)
- 가입일자

Untitled

1-2) Account

Untitled

1-3) AccountController

리팩토링
- 토큰 값이 없는 경우

Untitled

1-4) Account

Untitled

Console(Success)
- 200 OK
- HTML

2. 자동 로그인 TDD & 구현

2-1) AccountControllerTest

인증 메일 확인 - 입력값 오류

Untitled

2-2) AccountSevice

2-2)-1. void → Account Return

Untitled

2-2)-2. 로그인 메소드 생성

회원가입 후 자동 로그인 메소드

Untitled

2-3) AccountController

2-3)-1. 회원가입 Post Form HTML

자동 로그인

Untitled

2-3)-2. 회원가입 인증 메일

자동 로그인

Untitled

회원 가입 메인 네비게이션 메뉴

3-1) thymeleaf 확장팩

xmlns:sec="<http://www.thymeleaf.org/extras/spring-security>"
- 네비게이션 메뉴에 적용시켜 인증

<dependency>
	<groupId>org.thymeleaf.extras</groupId>
	<artifactId>thymeleaf-extras-springsecurity5</artifactId>
</dependency>

3-2) index.html

3-2)-1. 연습 HTML

<!doctype html>
<html lang="en" xmlns:th="<http://www.thymeleaf.org>"
            xmlns:sec="<http://www.thymeleaf.org/extras/spring-security>">
<head>
    <meta charset="UTF-8">
    <title>StudyOlle</title>
    <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>">
    <style>
        .container {
            max-width: 100%;
        }
    </style>
</head>
<body>
<!-- navgation bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" 문제1>
            <img src="/images/logo_sm.png" width="30" height="30">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <form 문제2 class="form-inline" method="get">
                        <input class="form-contorl mr-sm-2" name="keyword" type="search" placeholder="스터디명을 입력하세요.">
                    </form>
                </li>
            </ul>
            <ul class="navbar-nav justify-content-end">
                <!--인증 정보가 없는 경우(!isAuthenticated())-->
                <li class="nav-item" 문제3>
                    <a class="nav-link" 문제4>로그인</a>
                </li>
                <!--인증 정보가 없는 경우(!isAuthenticated())-->
                <li class="nav-item" 문제5>
                    <a class="nav-link" 문제6>가입</a>
                </li>
                <!--인증된 정보가 있는 경우-->
                <li class="nav-item" 문제7>
                    <a class="nav-link" 문제8>알림</a>
                </li>
                <!--인증된 정보가 있는 경우-->
                <li class="nav-item" 문제9>
                    <a class="nav-link btn btn-outline-primary" 문제10>스터디 개설</a>
                </li>
                <!--dropdown(인증된 정부가 있는 경우)-->
                <li class="nav-item dropdown" 문제11>
                    <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        프로필
                    </a>
                    <div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="userDropdown">
                        <h6 class="dropdown-header">
                            <!--name을 출력할 수도 있음-->
                            <span sec:authentication="name">Username</span>
                        </h6>
                        <!--참조할 수도 있음.-->
                        <a class="dropdown-item" th:href="@{'/profile/' + ${#authentication.name}}">프로필</a>
                        <a class="dropdown-item" >스터디</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#" th:href="@{'/settings/profile'}">설정</a>
                        <form class="form-inline my-2 my-lg-0" action="#" th:action="@{/logout}" method="post">
                            <button class="dropdown-item" type="submit">로그아웃</button>
                        </form>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 계정 만들기 -->
<div class="container">
    <div class="py-5 text-center">
        <h2>스터디 올레</h2>
    </div>
</div>
<!-- footer -->
<footer>
    <div class="row justify-content-center">
        <img class="mb-2" src="/images/logo_long_kr.jpg" alt="" width="100">
        <small class="d-block mb-3 text-muted">&copy; 2020</small>
    </div>
</footer>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="<https://code.jquery.com/jquery-3.4.1.slim.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js>" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="<https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js>"></script>
</body>
</html>

3-2)-2. 완료 HTML

<!doctype html>
<html lang="en" xmlns:th="<http://www.thymeleaf.org>"
            xmlns:sec="<http://www.thymeleaf.org/extras/spring-security>">
<head>
    <meta charset="UTF-8">
    <title>StudyOlle</title>
    <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>">
    <style>
        .container {
            max-width: 100%;
        }
    </style>
</head>
<body>
<!-- navgation bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" th:href="@{/}">
            <img src="/images/logo_sm.png" width="30" height="30">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <form th:action="@{/search/study}" class="form-inline" method="get">
                        <input class="form-contorl mr-sm-2" name="keyword" type="search" placeholder="스터디명을 입력하세요.">
                    </form>
                </li>
            </ul>
            <ul class="navbar-nav justify-content-end">
                <!--인증 정보가 없는 경우(!isAuthenticated())-->
                <li class="nav-item" sec:authorize="!isAuthenticated()">
                    <a class="nav-link" href="#" th:href="@{/login}">로그인</a>
                </li>
                <!--인증 정보가 없는 경우(!isAuthenticated())-->
                <li class="nav-item" sec:authorize="!isAuthenticated()">
                    <a class="nav-link" href="#" th:href="@{/sign-up}">가입</a>
                </li>
                <!--인증된 정보가 있는 경우-->
                <li class="nav-item" sec:authorize="isAuthenticated()">
                    <a class="nav-link" href="#" th:href="@{/notifications}">알림</a>
                </li>
                <!--인증된 정보가 있는 경우-->
                <li class="nav-item" sec:authorize="isAuthenticated()">
                    <a class="nav-link btn btn-outline-primary" href="#" th:href="@{/new-study}">스터디 개설</a>
                </li>
                <!--dropdown(인증된 정부가 있는 경우)-->
                <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
                    <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        프로필
                    </a>
                    <div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="userDropdown">
                        <h6 class="dropdown-header">
                            <!--name을 출력할 수도 있음-->
                            <span sec:authentication="name">Username</span>
                        </h6>
                        <!--참조할 수도 있음.-->
                        <a class="dropdown-item" th:href="@{'/profile/' + ${#authentication.name}}">프로필</a>
                        <a class="dropdown-item" >스터디</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#" th:href="@{'/settings/profile'}">설정</a>
                        <form class="form-inline my-2 my-lg-0" action="#" th:action="@{/logout}" method="post">
                            <button class="dropdown-item" type="submit">로그아웃</button>
                        </form>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 계정 만들기 -->
<div class="container">
    <div class="py-5 text-center">
        <h2>스터디 올레</h2>
    </div>
</div>
<!-- footer -->
<footer>
    <div class="row justify-content-center">
        <img class="mb-2" src="/images/logo_long_kr.jpg" alt="" width="100">
        <small class="d-block mb-3 text-muted">&copy; 2020</small>
    </div>
</footer>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="<https://code.jquery.com/jquery-3.4.1.slim.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js>" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="<https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js>"></script>
</body>
</html>

4. 프론트엔드 라이브러리 설정 이론

4-1) WebJar vs NPM

WebJar보다 NPM을 선호.
WebJar는 라이브러리 업데이트가 느리다.

4-2) 스프링 부트와 NPM

src/main/resource/static 디렉토리 이하는 정적 리소스로 제공함.(스프링 부트)
package.json에 프론트엔드 라이브러리를 제공한다.
이 둘을 응용하면
- 즉 static 디렉토리 아래에 package.json을 사용해서 라이브러리를 받아오면
  
  정적 리소스로 프론트엔드 라이브러리를 사용할 수 있다.

4-3) 빌드

메이븐 pom.xml을 빌드할 때 static 디렉토리 아래에 있는 package.json도 빌드하도록 설정함.
빌드를 안하면 프론트엔드 라이브러리를 받아오지 않아 뷰에서 필요한 참조가 끊어지고

화면이 제대로 보이지 않음.
부트스트랩을 스프링부트에 npm에 설정하기

5. 프론트엔드 라이브러리 설정 처리

5-1) Node JS 설치

Node JS 설치 이유는?
- NPM을 쓰기 위해서. NPM은 각종 웹 개발 라이브러리 설치 도우미임.

# first step
brew install node

Vue로 예시 들기

# NPM Install(@vue/cli은 vue 프로젝트 라이브러리
npm install -g @vue/[email protected]

# vue Project 생성
vue create zzanggoon(프로젝트명)

# vuew Project 실행(project Directory로 이동 후)
npm run serve

5-2) NPM Init

src/main/resources/static

Untitled

5-3) package.json 확인하기

Untitled

NPM Directory
package.json

5-4) bootstrap & jquery

5-5) templates

5-6) maven plugin

5-6) ./mvnw test