23.07.10

심화주차에 대한 주가 시작되었다. 팀 이름은 남녀노소이고, 어진님과 희열님 같이 이미 같이 프로젝트를 진행해봤던 분들이 계서서 마음이 편하다. 이번주차 부터는 페어프로그래밍이라는 새로운 시스템을 도입해보려 하는데, 페어를 짜서 그날 각자의 코딩을 서로 점검해주는 방식이다. 오늘 페어는 어진님이여서 스터디로 대체할 생각이다.

이제 본격적으로 심화 주차 강의를 들어보자.

이번 주차에 배울것

회원가입을 편리하게 해주는 OAuth 에 대해서 학습하고 카카오 로그인을 적용해 봅니다.
테스트의 종류와 필요성에 대해 학습하고 단위 테스트와 통합 테스트를 적용하며 버그를 사전에 발견할 수 있는 방법을 체득합니다.
JUnit 으로 테스트 코드를 짜고 Mockito 를 통해 테스트용 객체를 만들며, 다양한 테스트 코드를 짜는 방법을 익힙니다.
Spring AOP 를 적용하여 핵심기능에 부가기능을 추가하는 방법을 파악하고 “가장 많이 기능을 사용하는 Top5 회원”을 선정할 수 있는 기능을 만들어 봅니다.
웹 애플리케이션에서 발생한 에러 들을 클라이언트에게 어떤 API 예외처리를 통해 전달하는지 방법을 익히고 Global 예외처리를 적용 해봅니다.

카카오 디벨로퍼스 사용

내 애플리케이션 > 생성 > 플랫폼 설정 > Web 플랫폼 > 사이트 도메인에는 개발중인 로컬환경의 서버 주소를 입력 > 카카오로 로그인 했을 때 인가토큰을 받게 될 Redirect URI (callback) 를 설정 (ex http://localhost:8080/api/user/kakao/callback) > 활성화 설정 > 동의 항목 설정 (닉네임 필수, 이메일 선택 등등)

위에서 만든 서비스를 사용하기 위해서는 앱 키 > REST API 키를 아래 코드에서 line 19에 {REST_API_KEY}에 넣어줄 필요가 있다. 아래 코드는 예시일 뿐이다.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
            integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
</head>
<body>
<div id="login-form">
    <div id="login-title">Log into Select Shop</div>
    <button id="login-kakao-btn" onclick="location.href='https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri=http://localhost:8080/api/user/kakao/callback&response_type=code'">
        카카오로 로그인하기
    </button>
    <button id="login-id-btn" onclick="location.href='/api/user/signup'">
        회원 가입하기
    </button>
    <div>
        <div class="login-id-label">아이디</div>
        <input type="text" name="username" id="username" class="login-input-box">

        <div class="login-id-label">비밀번호</div>
        <input type="password" name="password" id="password" class="login-input-box">

        <button id="login-id-submit" onclick="onLogin()">로그인</button>
    </div>
    <div id="login-failed" style="display:none" class="alert alert-danger" role="alert">로그인에 실패하였습니다.</div>
</div>
</body>
<script>
    $(document).ready(function () {
        // 토큰 삭제
        Cookies.remove('Authorization', {path: '/'});
    });

    const href = location.href;
    const queryString = href.substring(href.indexOf("?") + 1)
    if (queryString === 'error') {
        const errorDiv = document.getElementById('login-failed');
        errorDiv.style.display = 'block';
    }

    const host = 'http://' + window.location.host;

    function onLogin() {
        let username = $('#username').val();
        let password = $('#password').val();

        $.ajax({
            type: "POST",
            url: `/api/user/login`,
            contentType: "application/json",
            data: JSON.stringify({username: username, password: password}),
        })
            .done(function (res, status, xhr) {
                const token = xhr.getResponseHeader('Authorization');

                Cookies.set('Authorization', token, {path: '/'})

                $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
                    jqXHR.setRequestHeader('Authorization', token);
                });

                window.location.href = host;
            })
            .fail(function (jqXHR, textStatus) {
                alert("Login Fail");
                window.location.href = host + '/api/user/login-page?error'
            });
    }
</script>
</html>