동동이개발바닥

[토이 프로젝트] spring boot 회원가입 기능 -2

데부한 — Mon, 17 Mar 2025 23:41:24 +0900

이전 게시글

[토이 프로젝트] spring boot 스프링 시큐리티 토큰 적용하기 (Bearer Token)

이전 글 [토이 프로젝트] spring boot 로그인 기능 만들기-2 (스프링 시큐리티 적용)이전 프로젝트 [토이 프로젝트] 회원가입 기능 만들기-1사실 아직 만들고 싶은 프로젝트는 생각안해봤다.다만 프

devhan.tistory.com

이번에 HttpOnly Cookie + JWT 조합을 구현해보려고 했으나.. 회원가입 기능과 테스트 쪽을 먼저 구현해야 할 것 같아서 노선을 틀었다. 그래서 이번에 할 목록은 아래 4개다.

회원가입 기능 강화
로그아웃 기능
AuthController 리팩토링

사실 게시글 제목은 회원가입 기능-2지만 더 다양한 걸 한 번에 쭉 해볼 예정이다.

뭔가 제일 금방할 것 같은 로그아웃 기능을 먼저 만들어보자.

logout 기능

먼저 로그아웃 기능을 화면에서 만질 수 있게 바꿔보자.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>메인</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h2>메인입니다.</h2>
    <a href="member/login.html">로그인 이동</a>
    <a href="member/signup.html">회원가입 이동</a>
    <a href="test/test.html">인증 필요 화면</a>
    <button id="btnLogout">로그아웃</button>

    <script>
        window.onload = function() {
            const token = localStorage.getItem("token");
            if(!token) {
                document.getElementById("btnLogout").classList.add("hidden");
            }
        }

        document.getElementById("btnLogout").addEventListener("click", function(){
            logout();
        });

        async function logout() {
            const token = localStorage.getItem("token");

            try {
                const response = await fetch('api/auth/logout', {
                    method: 'POST',
                    headers: {
                        "Authorization" : `Bearer ${token}`,
                        "Content-Type" : "application/json"
                    }
                });

                if(!response.ok) throw new Error("로그아웃이 실패했습니다.");

                alert("로그아웃 성공");
				window.location.replace(window.location.href);
            } catch (error) {
                console.error(error);
                alert("로그아웃 실패");
            }
        }
    </script>
</body>
</html>

메인 진입 시 token 값이 있으면 로그아웃 버튼을 숨기도록 했다. 테스트해보자.

로그인하지 않았을 경우 로그아웃 버튼이 보이지 않고, 로그인하면 로그아웃 버튼이 보인다.

그리고 서버에 logout 로직을 만들어주자.

AuthController

@PostMapping("logout")
public ResponseEntity<?> logout(@RequestHeader("Authorization") String token) {
   if(token.startsWith("Bearer ")) {
       token = token.replace("Bearer ", "");
   }

   authService.logout(token);
   return ResponseEntity.ok().body("로그아웃 성공");
}

Token인지 확인하기 위해 Bearer 문자열 검사를 하고, 없애준다.

AuthService

public void logout(String token) {
    if(validateToken(token)) {
        tokenStore.remove(token);
    } else {
        throw new IllegalArgumentException("유효하지 않은 토큰입니다.");
    }
}

validationToken 메서드를 이용해서 토큰 저장소에 해당 토큰이 있나 검사하고 있으면 토큰 저장소에서 삭제하고 토큰 저장소가 없으면 에러를 뱉는다.

테스트 해보자! 로그아웃해도 메인에 여전히 로그아웃 버튼이 남아있다.

생각해보니까 로그아웃 버튼의 display 속성 값을 localStorage에 toekn이 있나 없나 검사하기 때문에 로그아웃 시 localStorage의 token 값도 삭제해줘야할 것 같다.

alert("로그아웃 성공");
localStorage.removeItem("token");
window.location.replace(window.location.href);

다시 로그인하고 로그아웃 해보자.

잘 되는 걸 확인할 수 있다.

Controller 리팩토링

이제 AuthController에 되~~~게 거슬렸던 Response 타입을 신경써서 바꿔보자. 지금 Response 타입은 아래와 같다.

public ResponseEntity<?> validateToken(...) {
	// ..
}

지금은 ResponseEntity<?>로 되어있다. 예전에 영한쓰 자바 강의를 들었을 때 ?라는 와일드 카드는 되도록 사용하지 않는 것이 좋다고 했다. 왜냐면 어떤 타입이든 다 들어갈 수 있어서 어떤 타입이 반환될지 예측하기 어렵고 유지보수가 복잡하기 떄문이다.

AuthController에서 반환 타입은 내가 만든 DTO 아니면 ResponseEntity 객체에 http status 코드나 메세지를 담은 객체이므로 ApiResponse용 DTO를 하나 더 만들어 ApiResponse에 응답 데이터와 http status 코드 등을 넣어 유지보수 하기 쉽도록 변경해보려한다.

ApiResponse

@Getter
@AllArgsConstructor
public class ApiResponse<T> {
    private int status;     // HTTP 상태 코드
    private String message; // 응답 메세지
    private T data;         // 데이터
}

일단 만들고 하나의 api..회원가입의 코드를 변경하고 테스트 해보자.

@PostMapping("signup")
    public ResponseEntity<ApiResponse<Boolean>> signup(@RequestBody SignupRequestDto signupRequestDto) {
        boolean isSuccess = authService.signup(signupRequestDto);
        HttpStatus status = isSuccess ? HttpStatus.OK : HttpStatus.BAD_REQUEST;
        String message = isSuccess ? "회원 가입 성공" : "회원 가입 실패";

        return ResponseEntity.status(status).body(new ApiResponse<>(status.value(), message, isSuccess));
    }

잘 나온다. 근데 컨트롤러에서 ResponseEntity를 반환하는 부분을 뭔가 더 편하게 바꿔줄 수 있을 거 같아 ApiResponse에 정적 메서드를 추가했다.

@Getter
@AllArgsConstructor
public class ApiResponse<T> {
    private final int status;     // HTTP 상태 코드
    private final String message; // 응답 메세지
    private final T data;         // 데이터

    public static <T> ApiResponse<T> success(T data) {
        return new ApiResponse<>(HttpStatus.OK.value(), "요청을 성공적으로 처리했습니다.", data);
    }

    public static <T> ApiResponse<T> success(String message, T data) {
        return new ApiResponse<>(HttpStatus.OK.value(), message, data);
    }

    public static <T> ApiResponse<T> error(HttpStatus status, String message) {
        return new ApiResponse<>(status.value(), message, null);
    }

    public static <T> ApiResponse<T> error(HttpStatus status, String message,T data) {
        return new ApiResponse<>(status.value(), message, data);
    }
}

이 정적 메서드를 이용해서 컨트롤러 반환 부분을 다시 바꿔 주자.

@PostMapping("signup")
public ResponseEntity<ApiResponse<Boolean>> signup(@RequestBody SignupRequestDto signupRequestDto) {
    boolean isSuccess = authService.signup(signupRequestDto);

    return isSuccess ?
            ResponseEntity.ok(ApiResponse.success(true)) :
            ResponseEntity.status(HttpStatus.BAD_REQUEST)
                    .body(ApiResponse.error(HttpStatus.BAD_REQUEST, "회원 가입 실패", false));
}

이렇게 컨트롤러의 모든 메서드들을 바꿔주었다.

@PostMapping("signup")
public ResponseEntity<ApiResponse<Boolean>> signup(@RequestBody SignupRequestDto signupRequestDto) {
    boolean isSuccess = authService.signup(signupRequestDto);

    return isSuccess ?
            ResponseEntity.ok(ApiResponse.success(true)) :
            ResponseEntity.status(HttpStatus.BAD_REQUEST)
                    .body(ApiResponse.error(HttpStatus.BAD_REQUEST, "회원 가입 실패", false));
}

@PostMapping("login")
public ResponseEntity<ApiResponse<LoginResponseDto>> login(@RequestBody LoginRequestDto loginRequestDto) {
    LoginResponseDto loginResponseDto = authService.login(loginRequestDto);

    return loginResponseDto.getToken() != null ?
            ResponseEntity.ok(ApiResponse.success("로그인 성공", loginResponseDto)) :
            ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(ApiResponse.error(HttpStatus.UNAUTHORIZED, "아이디와 비밀번호를 확인해주세요."));
}

@GetMapping("validate")
public ResponseEntity<ApiResponse<String>> validateToken(@RequestHeader("Authorization") String authorizationHeader) {

    // Authorization 헤더가 없으면 401 반환
    if(authorizationHeader == null || !authorizationHeader.startsWith("Bearer ")) {
        return ResponseEntity.status(HttpStatus.UNAUTHORIZED)
                .body(ApiResponse.error(HttpStatus.UNAUTHORIZED, "인증 필요"));
    }

    String token = authorizationHeader.replace("Bearer ", "");
    boolean isValid = authService.validateToken(token);

    return isValid ?
            ResponseEntity.ok(ApiResponse.success("유효한 토큰")) :
            ResponseEntity.status(HttpStatus.UNAUTHORIZED)
                    .body(ApiResponse.error(HttpStatus.UNAUTHORIZED, "인증 필요"));
}

@PostMapping("logout")
public ResponseEntity<ApiResponse<String>> logout(@RequestHeader("Authorization") String token) {
   if(token.startsWith("Bearer ")) {
       token = token.replace("Bearer ", "");
   }

   authService.logout(token);
   return ResponseEntity.ok(ApiResponse.success("로그아웃 성공"));
}

뭔가 좀 더 길어보이지만 그래도 "일관성"이 생겼다.

회원가입 기능 강화

앞의 테스트를 하면서 몇 가지 발견한 결함들이 있다.

아이디 중복 검사 필요( 중복된 아이디가 저장되면 에러 발생함 )
필수 입력인 필드 표시
회원가입 버튼 & 엔터 누를 시 확인 창 하나 띄우기

일단~! 제일 먼저 Member의 Entity를 확인해보자.

@Entity
@Getter
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Member {

    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String userId;
    private String password;
    private String nickname;
    private String email;
    private String job;
    private int age;
}

정말 날 것의 Membe이다. 프론트 쪽에서는 간단하게나마 유효성 검사를 해놨기 때문에 프론트와 설정을 맞춰주고자 html을 열어봤다.

signup.html

근데 정규식 같은 유효성 검사는 적혀있는데 글자수 이런 건 안적혀 있길래 또 추가해줬다.

<div class="signup-container">
    <h1>회원가입</h1>
    <form id="signupForm">
        <div>
            <label for="userId">아이디:</label>
            <input type="text" id="userId" name="userId" placeholder="아이디 입력"
                   pattern="^[A-Za-z][A-Za-z0-9]*$"
                   minlength="2" maxlength="30"
                   title="영문+숫자. 숫자로 시작하면 안되며 2~30자여야 합니다." required/>
        </div>
        <div>
            <label for="password">비밀번호:</label>
            <input type="password" id="password" name="password" placeholder="비밀번호 입력"
                   pattern="^(?=.*[A-Za-z])(?=.*\\d)(?=.*[!@#$%^&*()_+=-])[A-Za-z\\d!@#$%^&*()_+=-]{8,}$"
                   minlength="8" maxlength="30"
                   title="비밀번호는 8~30자이며, 영어, 숫자, 특수문자(!@#$%^&*)가 모두 포함되어야 합니다."
                   required/>
        </div>
        <div>
            <label for="confirmPassword">비밀번호 확인:</label>
            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인" required/>
        </div>
        <div>
            <label for="nickname">닉네임:</label>
            <input type="text" id="nickname" name="nickname" placeholder="닉네임은 2~20자로 입력해주세요."
                   minlength="2" maxlength="20" required/>
        </div>
        <div>
            <label for="email">이메일:</label>
            <input type="email" id="email" name="email" placeholder="이메일 입력" required/>
        </div>
        <div>
            <label for="job">직업:</label>
            <input type="text" id="job" name="job" placeholder="직업 입력"/>
        </div>
        <div>
            <label for="age">나이:</label>
            <input type="number" id="age" name="age" placeholder="나이 입력"/>
        </div>
        <div>
            <button type="submit">회원가입</button>
        </div>
    </form>
    <!-- 결과 메시지를 보여줄 영역 -->
    <div id="message"></div>
</div>

이를 기반으로 Member Entity에 유효성 어노테이션들을 추가하자.

SignupRequestDto.java

@NotBlank
@Size(min = 2, max = 30)
@Pattern(regexp = "^[A-Za-z][A-Za-z0-9]*$", message = "아이디는 영문자로 시작하고, 영문자와 숫자만 포함해야합니다.")
private String userId;

@NotBlank
@Size(min = 8)
@Pattern(regexp = "^(?=.*[A-Za-z])(?=.*\\d)(?=.*[@!#$%^&*()_+=-])[A-Za-z\\d@!#$%^&*()_+=-]{8,}$\n"
        , message = "비밀번호는 8자 이상이며, 대문자 혹은 소문자, 숫자, 특수문자를 포함해야 합니다.")
private String password;

@NotBlank
@Size(min = 2, max = 20)
private String nickname;

@Email
private String email;

private String job;

@Min(0)
@Max(150)
private int age;

필드에 @Pattern을 꼭 걸어야하나 싶어 ChatGPT한테 물어보니 서버쪽에도 당연히 유효성 정보를 세팅하는게 좋다고 한다. 클라이언트의 요청이 꼭 페이지만을 통해서 오지 않기 때문이다.

예를 들면 포스트맨이나, cURL 등으로 API 요청을 보내면 서버쪽에서는 입력 값에 대해 검증할 방도가 없기 때문! 그래서 Pattern도 만들고 메세지도 적었다.

이 어노테이션에 대한 검증들은 테스트 코드를 짜면서 해보겠다! 일단 스킵!

그리고 이제 회원가입 화면에 필수인 필드들을 사용자가 쉽게 확인할 수 있게 해보자.

signup.html

<!-- CSS -->
.required {
    color: red;
    font-weight: bold;
    margin-left: 5px;
}

<div>
    <label for="userId"><span class="required">*</span> 아이디:</label>
    <input type="text" id="userId" name="userId" placeholder="아이디 입력"
           pattern="^[A-Za-z][A-Za-z0-9]*$"
           minlength="2" maxlength="30"
           title="영문+숫자. 숫자로 시작하면 안되며 2~30자여야 합니다." required/>
</div>

일단 간단하게 아이디에만 추가해봤다.

음 괜찮은 거 같아서 중복을 최대한 제거하기 위해 CSS 코드로 추가해주었다.

<!-- CSS -->
.required-label::before {
    content : "* ";
    color : red;
    font-weight : bold;
}
        
<!-- body -->
<div>
    <label for="userId" class="required-label"> 아이디:</label>
    <input type="text" id="userId" name="userId" placeholder="아이디 입력"
           pattern="^[A-Za-z][A-Za-z0-9]*$"
           minlength="2" maxlength="30"
           title="영문+숫자. 숫자로 시작하면 안되며 2~30자여야 합니다." required/>
</div>

이렇게 필수 컴포넌트의 label에 클래스를 추가해주었다.

이제 아이디 중복 체크 기능을 만들어보자. 화면 쪽에 중복 체크 버튼을 만들까하다가 네이버 회원가입에는 그냥 회원가입 버튼 누르면 중복 체크 결과를 알려주길래 나도 똑같이하려고 화면 쪽에 버튼을 추가하지 않았다.

먼저 컨트롤러를 바꿔주자. 이전 컨트롤러는 authService에 있는 signup() 메서드의 결과값을 받아와서 삼항연산자를 통해 응답이 ok일 경우와 error 일 경우 두 가지 방법으로 나눠서 보냈었는데 CustomException을 적용하면서 예외처리 하는 방식도 좀 바꿀거라 더 간단하게 만들어놨다.

AuthController

@PostMapping("signup")
public ResponseEntity<ApiResponse<Boolean>> signup(@RequestBody SignupRequestDto signupRequestDto) {
    authService.signup(signupRequestDto);
    return ResponseEntity.ok(ApiResponse.success(true));
}

AuthService

/**
 * 회원가입
 * @param signupRequestDto
 * @return
 */
@Transactional
public void signup(SignupRequestDto signupRequestDto) {
    String encodedPassword = passwordEncoder.encode(signupRequestDto.getPassword());
    checkUserIdDuplicate(signupRequestDto.getUserId());
    authRepository.save(signupRequestDto.toEntity(encodedPassword));
}

/**
 * 사용자 아이디 중복 체크
 * @param userId
 */
public void checkUserIdDuplicate(String userId) {
    boolean result = authRepository.existsByUserId(userId);
    if(result) {
        throw new DuplicateUserIdException("이미 사용 중인 아이디입니다.");
    }
}

사용자 아이디 중복 체크를 하는 checkUserIdDuplicate() 메서드를 만들고 중복일 경우 DuplicateUserIdException()을 던진다.

DuplicateUserIdException

@ResponseStatus(HttpStatus.CONFLICT)
public class DuplicateUserIdException extends RuntimeException{
    public DuplicateUserIdException(String message) {
        super(message);
    }
}

간단하게 customException을 만들어준다. 그리고 전역 예외처리를 해준다.

GlobalExceptionHandler

@RestControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(DuplicateUserIdException.class)
    public ResponseEntity<ApiResponse<String>> handelDuplicateUserIdException(DuplicateUserIdException ex) {
        return ResponseEntity.status(HttpStatus.CONFLICT)
                .body(ApiResponse.error(HttpStatus.CONFLICT, ex.getMessage()));
    }
}

에러의 경우도 Response<ApiResponse<?>>의 형식으로 응답이 반환되게 했다.

그리고 회원가입 화면 쪽에 async와 await이 적용안되어있길래 적용해주고 에러 message를 화면에 보여줄 수 있도록 전체적으로 바꿨다.

signup.html

<script>
    async function signup(event) {
        const password = document.getElementById('password').value;
        const password2 = document.getElementById('confirmPassword').value;
        if(password !== password2) {
            alert("비밀번호가 일치하지 않습니다.");
            return;
        }

        const formData = {
            userId: document.getElementById('userId').value
            , password: document.getElementById('password').value
            , nickname: document.getElementById('nickname').value
            , email: document.getElementById('email').value
            , job: document.getElementById('job').value
            , age: document.getElementById('age').value
        };

        try {
            // API 엔드포인트로  JSON 데이터 전송
            const response = await fetch('/api/auth/signup', {
                method: 'POST',
                headers: {
                    'Content-Type' : 'application/json'
                },
                body: JSON.stringify(formData)
            })

            const data = await response.json();
            console.log("서버 응답 데이터  : " + data);

            if(!response.ok) {
                throw new Error(data.message);
            }

            // API 응답에 따라 메세지 출력
            alert("회원가입에 성공했습니다.");

            window.location.replace("login.html");
        } catch(error) {
            console.error('Error: ', error);
            document.getElementById('message').innerText = error.message;
        }
    }

    document.getElementById('signupForm').addEventListener('submit', function(event) {
        event.preventDefault(); // 기본 폼 제출 동작 차단
        signup(event);
    })
</script>

테스트를 해보자! Member 테이블에는 이미 'test1'이라는 userId가 있다.

화면에서 'test1'로 또 가입을 해보자.

409 에러가 발생하면서 서버에서 던진 error message가 화면에 출력된다. 참고로 응답 데이터는 아래와 같다.

아이디 중복 같은 경우는 따로 조금 더 리팩토링 해봐야겠다. Member 엔티티에 유효성 어노테이션이랑... customException 처리 쪽을 좀 손봐야할 듯.

아무튼 아이디 중복 검사 기능 완료!!

이제 제일 간단한 회원가입 버튼을 눌렀을 때 confirm창을 띄워 사용자에게 한 번 더 확인받는 로직으로 변경하자.

signup.html

const result = window.confirm("회원가입을 진행하시겠습니까?");
if(!result) return;
signup(event);

signup()를 호출하기 전에 confirm의 결과가 "취소"면 회원가입 api를 요청할 수 없게 해놨다.

오늘도 즐거운 코딩!!

[토이 프로젝트] spring boot 스프링 시큐리티 토큰 적용하기 (Bearer Token)

데부한 — Mon, 10 Mar 2025 23:40:01 +0900

이전 글

[토이 프로젝트] spring boot 로그인 기능 만들기-2 (스프링 시큐리티 적용)

이전 프로젝트 [토이 프로젝트] 회원가입 기능 만들기-1사실 아직 만들고 싶은 프로젝트는 생각안해봤다.다만 프로젝트를 해봐야 실력이 정말 늘 것 같아서 일단 대중적이고 레퍼런스 자료가

devhan.tistory.com

이전 게시글에서 스프링 시큐리티를 통과하는 단순한 로그인 기능을 구현했다. 문제점은 DB를 조회해서 유효성 검사하는 기능까지는 다 됐지만 로그인 이후에 인증이 필요한 페이지에 접속하면 접속이 안되는 문제가 있었다.

왜냐면 스프링 시큐리티에 이 사용자는 인증된 사용자임을 모르기 때문이다. 즉, 인증 상태가 유지되지 않는다.

이번에는 http header에 Authorization 인증 정보를 추가해서 인증 유지를 시켜보려한다. http header에 인증 정보를 추가하는 방식에는 아래 세 가지 기술들이 있다.

Bearer Token
JWT
OAuth 2.0

이 세 개 중에 제일 쉽고 간편한 1번 API Key 방식을 사용해서 토큰 인증 방식을 구현하겠다. 아, 그리고 비밀번호를 언제까지나 평문으로 저장할 수 없으니 비밀번호도 암호화해서 저장하는 방식을 추가로 또 적용해주자.

API Key

구현 난이도가 쉬움
서버에서 임의의 토큰을 생성후 클라이언트가 요청 시 헤더에 추가하는 방식

제일 먼저 해줄 작업은 PasswordEncoder를 AuthService에 의존성을 주입해준다. 그래서 SecurityConfig에서 PasswordEncode의 Bean을 추가해주고 AuthSerivce에서 불러오면 된다.

PasswordEncoder

@Configuration
@EnableWebSecurity
public class SecurityConfig {
	
	// ... 생략
    
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

Bean 등록을 해줬으니 이제 AuthService에서 주입해주면 된다. 그리고 token을 저장할 저장소도 같이 만들어준다.

@Service
@RequiredArgsConstructor
public class AuthService {

    private final PasswordEncoder passwordEncoder;
    private final Map<String, String> tokenStore = new HashMap<>(); // 토큰 저장소
    //...
    
}

그리고 기존에 있던 AuthService에 있던 login()을 수정해주고 토큰을 발급하는 함수와 비밀번호를 체크하는 함수를 따로 만들어줬다.

아, 그전에 LoginResponseDto에서 token 필드를 추가해준다.

로그인 시 토큰 발급

LoginResponseDto

@Getter
@AllArgsConstructor
@Builder
public class LoginResponseDto {

    private Long id;
    private String userId;
    private String nickname;
    private String email;
    private String job;
    private int age;
    private String token;

}

그리고 AuthService를 수정한다.

AuthService

/**
 * 로그인
 * @param loginRequestDto
 * @return
 */
public LoginResponseDto login(LoginRequestDto loginRequestDto) {
    Member findMember = authRepository.findByUserId(loginRequestDto.getUserId())
                    .orElseThrow(() -> new IllegalArgumentException("회원 정보가 없습니다."));

    boolean passwordFlag = validatePassword(loginRequestDto.getPassword(), findMember.getPassword());

    String token = null;
    if(passwordFlag) {
        token = generateToken(findMember);
    } else {
        throw new IllegalArgumentException("비밀번호를 확인하세요.");
    }

    return LoginResponseDto.builder()
            .id(findMember.getId())
            .userId(findMember.getUserId())
            .email(findMember.getEmail())
            .job(findMember.getJob())
            .age(findMember.getAge())
            .nickname(findMember.getNickname())
            .token(token)
            .build();
}

/**
 * token 생성 후 반환
 * @param member
 * @return token
 */
public String generateToken(Member member) {
    String token = UUID.randomUUID().toString(); // 간단한 토큰 생성
    tokenStore.put(token, member.getUserId());
    return token;
}

/**
 * 비밀번호 검사
 * @param inputPassword
 * @param memberPassword
 * @return boolean
 */
public boolean validatePassword(String inputPassword, String memberPassword) {
    return passwordEncoder.matches(inputPassword, memberPassword);
}

로직은 간단하다.

DB에 사용자 이름으로 member를 검색한다.
사용자가 없으면 Exception을 던진다.
사용자가 있으면 입력된 패스워드와 DB에 저장된 패스워드가 같은지 유효성 검사를 한다.
패스워드가 맞으면 토큰을 UUID로 발급하고 틀리면 예외를 발생시킨다.

그리고 AuthController도 수정해준다.

AuthController

@PostMapping("login")
public ResponseEntity<?> login(@RequestBody LoginRequestDto loginRequestDto) {
    LoginResponseDto loginResponseDto = authService.login(loginRequestDto);
    if(loginResponseDto.getToken() == null) {
        ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("아이디와 비밀번호를 확인해주세요.");
    }
    return ResponseEntity.ok(loginResponseDto);
}

token 값이 null이면 예외를 터트리고, 아니면 loginResponseDto를 반환한다.

그리고 추가적인 작업! 비밀번호를 로그인 시 비밀번호 암호화 작업을해서 회원가입할 때도 이 부분을 추가해줘야한다.

회원가입 시 패스워드 암호화

@Transactional
public boolean signup(SignupRequestDto signupRequestDto) {
    String encodedPassword = passwordEncoder.encode(signupRequestDto.getPassword());
    authRepository.save(signupRequestDto.toEntity(encodedPassword));
    return true;
}

signupRequestDto에서 toEntity() 메서드를 하나 더 만들어준다.

public Member toEntity(String encodedPassword) {
    return Member.builder()
            .userId(this.userId)
            .password(encodedPassword)
            .nickname(this.nickname)
            .email(this.email)
            .job(this.job)
            .age(this.age)
            .build();
}

이러면 완성! 일단 회원가입 시 비밀번호가 제대로 암호화되는지 확인해보자.

그런데 일단 회원가입 페이지가 인증이 필요한 페이지라 제외해줬다. 그리고 테스트를 위해 인증이 필요한 화면 테스트용으로 하나 만들었다.

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http.csrf(csrf -> csrf.disable())
            .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .authorizeHttpRequests((authorize) -> authorize
                    .requestMatchers("/", "/index.html", "/member/*", "/api/auth/*").permitAll()
                    .anyRequest().authenticated())
            .exceptionHandling(exceptions -> exceptions.authenticationEntryPoint(((request, response, authException)
                    -> response.sendError(HttpServletResponse.SC_UNAUTHORIZED)))); // 401 응답 반환
    return http.build();
}

진짜 테스트용

그리고 index.html에 테스트용 화면으로 이동할 수 있는 a 태그를 추가한다.

<body>
    <h2>메인입니다.</h2>
    <a href="member/login.html">로그인 이동</a>
    <a href="member/signup.html">회원가입 이동</a>
    <a href="test/test.html">인증 필요 화면</a>
</body>

이러고 서버를 재시작하면 회원가입 페이지도 인증없이 접근할 수 있다.

그리고 회원가입 후 DB를 조회해보면 평문이 아닌 암호문으로 저장된 패스워드를 확인할 수 있다.

$느좋$

인증이 필요한 request 요청 시 Authorization 헤더 확인

인증이 필요한 request 요청 시 토큰을 검사하기 위해 토큰 관련 필터를 만들어준다.

TokenAuthenticationFilter

@Component
@RequiredArgsConstructor
public class TokenAuthenticationFilter extends OncePerRequestFilter {

    private final AuthService authService;

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        String token = getTokenFromRequest(request);

        if(token != null && authService.validateToken(token)) {
            Authentication authentication 
                    = new UsernamePasswordAuthenticationToken(token, null, null);
            SecurityContextHolder.getContext().setAuthentication(authentication);
        }
        
        filterChain.doFilter(request, response);
    }

    private String getTokenFromRequest(HttpServletRequest request) {
        String bearerToken = request.getHeader("Authorization");
        if(bearerToken != null && bearerToken.startsWith("Bearer ")) {
            return bearerToken.replace("Bearer ", "");
        }
        return null;
    }
}

OncePerRequestFilter

스프링 시큐리티에서 제공하는 추상 클래스
특정 요청이 들어올 때 한 번만 필터링 로직을 수행하도록 함

getTokenFromRequest

요청 http header에서 Authorization 속성을 가져옴
Bearer로 시작하는 문자열이면서 null이 아니면 Bearer를 제거한 나머지 문자열을 반환

doFilterInternal

요청 http header에서 토큰 값을 가져옴
토큰 값이 null이 아니면서 유효한 토큰이면 인증 정보를 스프링 시큐리티에 세팅

Spring Security 필터 추가

// SecurityConfig

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http, TokenAuthenticationFilter tokenAuthenticationFilter) throws Exception {
    http.csrf(csrf -> csrf.disable())
            .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .authorizeHttpRequests((authorize) -> authorize
                    .requestMatchers("/**", "/", "/index.html","/api/auth/*").permitAll()
                    .requestMatchers("/api/**").authenticated()
                    .anyRequest().authenticated())
            .addFilterBefore(tokenAuthenticationFilter, UsernamePasswordAuthenticationFilter.class) // 필터 추가
            .exceptionHandling(exceptions -> exceptions.authenticationEntryPoint(((request, response, authException)
                    -> response.sendError(HttpServletResponse.SC_UNAUTHORIZED)))); // 401 응답 반환
    return http.build();
}

addFilterBefore()로 아까 만들었던 필터를 추가해주면 이제 API 요청마다 Authorization 헤더를 검사하게 된다.

이제 거의 다 한 것 같지만 제일 중요한게 하나 남았다.

바로 프론트에서 로그인 api 요청의 응답 데이터를 받고 token 값을 세팅해줘야한다.

localStorage 세팅

login.html

async function login(event) {
    event.preventDefault();

    const formData = {
          userId : document.getElementById('userId').value
        , password : document.getElementById('password').value
    };

    try {
        const token = localStorage.getItem("token");

        const response = await fetch('/api/auth/login', {
            method : 'POST',
            headers : {
                'Content-Type' : 'application/json'
            },
            body: JSON.stringify(formData)
        });

        if(!response.ok) {
            throw new Error('아이디와 비밀번호를 확인하세요.');
        }

        const data = await response.json();
        localStorage.setItem("token", data.token); // token 값 추가
        alert("로그인 성공");

        window.location.href = "../index.html";
    } catch(error) {
        console.error('Error :', error);
        alert("로그인 실패: " + error.message);
    }
}

그리고 인증이 필요한 페이지에서 /api/auth/validate api를 사용해 token의 유효 여부를 체크한다.

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>인증이 필요한 페이지</h2>
<script>

    window.onload = async function() {
        const token = localStorage.getItem("token");
        if(!token) {
            redirectToLogin();
            return;
        }

        try {
            const response = await fetch("/api/auth/validate", {
                method : "GET",
                headers: {
                    "Authorization":"Bearer " + token
                }
            });

            if(!response.ok) {
                throw new Error("유효하지 않은 토큰");
            }
        }catch(error) {
            redirectToLogin();
        }
    };

    function redirectToLogin() {
        alert("로그인이 필요합니다.");
        localStorage.removeItem("token"); // 유효하지 않은 토큰 삭제
        window.location.href = "/member/login.html";
    }
</script>
</body>
</html>

이러면 로그인이 필요한 페이지에 token 유효성 검사 후 token이 유효하면 접근 가능하게하고 유효하지 않으면 login 페이지로 리다이렉트 시켜버리면 Bearer 토큰을 이용한 방식은 끝이 났다.

아 마지막으로 테스트 해야지.

로그인 없이 일단 인증이 필요한 페이지로 접속해보자. Local Storage는 당연히 비어있다. 이 화면에서 alert의 확인 버튼을 누르면 로그인 페이지로 리다이렉트 된다.

뒤로가기 후 회원가입하고 로그인을 해보자.

로그인이 성공하면 localStorage에 token이 저장된다.

그리고 인증 필요 화면으로 이동!

로그인 화면으로 리다이렉트 되지 않고 정상적으로 페이지가 로드된것을 볼 수 있다.

Bearer 토큰은 이렇게 프론트에서 토큰을 localStorage 또는 sessionStorage에 저장 후 API 요청 시마다 Authorization 헤더에 포함시키는 방식이다.

이런 경우 공통화가 필수이다. api 인증을 보낼 때마다 각 화면 스크립트에서 /api/auth/validate api를 호출하는 소스를 작성하면 유지보수도 어렵다.

js 파일을 따로 빼서 공통화를 추천한다.

나는 임시로 거쳐갈 테스트 뿐이라 공통화는 하지 않았다. Bearer 토큰 인증 방식에 대한 간단한 구현과 이해만 하고 이제 다음에는 JWT 토큰을 사용한 방식을 구현해볼까한다.

아니면 로그인 기능을 조금 더 강화할 수도 있겠다.

아무튼 오늘도 즐거운 코딩..

[토이 프로젝트] spring boot 로그인 기능 만들기-2 (스프링 시큐리티 적용)

데부한 — Mon, 3 Mar 2025 22:41:52 +0900

이전 프로젝트

[토이 프로젝트] 회원가입 기능 만들기-1

사실 아직 만들고 싶은 프로젝트는 생각안해봤다.다만 프로젝트를 해봐야 실력이 정말 늘 것 같아서 일단 대중적이고 레퍼런스 자료가 제일 많은커뮤니티 사이트를 만들어보려한다. 환경은 일

devhan.tistory.com

이번엔 로그인 기능에 스프링 시큐리티를 적용해서 보안을 강화해보자.

먼저, build.gradle에 스프링 시큐리티를 추가해준다.

dependencies {
	implementation "org.springframework.boot:spring-boot-starter-security"
}

다양한 기능(ex.OAuth 2.0 등)을 동시에 적용할 수 있겠지만 일단 차근차근 적용해보는 거로 하자.

그래서 일단 제일 기본적인 아이디/비밀번호 로그인 기반 spring security 기능을 적용해서 인증 기능을 구현하자.

일단 공식 페이지에서 가이드를 확인했다.

Username/Password Authentication :: Spring Security

Normally, Spring Security builds an AuthenticationManager internally composed of a DaoAuthenticationProvider for username/password authentication. In certain cases, it may still be desired to customize the instance of AuthenticationManager used by Spring S

docs.spring.io

일단 이렇게 알려준 코드를 config 패키지를 만들어 똑같이 파일을 만들어주고 소스를 붙여넣었다.

근데 코드에 대한 자세한 설명이 없고, 구글 번역기를 사용해서 문장이 불완전했다.

그래서 챗GPT한테 물어보고 이것 저것 건드려본 결과를 정리하면..

어노테이션

Configuration : 설정 클래스임을 스프링 부트에게 알려줌.
EnableWebSecurity : spring securtiy 활성화

securityFilterChain()

스프링 시큐리티에서 사용하는 SecurityFilterChain을 반환. securityFilterChain()이 없으면 기본적으로 위 코드의 내용으로 디폴트 세팅이 된다.

SecurityFilterChain() 호출 흐름

Spring Boot를 실행하면 @EnableWebSecurity 활성화
Spring security가 @Bean을 가진 클래스 스캔
securityFilterChain()을 찾아 자동으로 실행하여 보안 설정 적용
SecurityFilterChain이 Spring Security의 FilterChainProxy에 등록됨
요청이 들어올 때 FilterChainProxy가 이를 가로채 보안 검사 수행

결론은 스프링 시큐리티가 자동으로 securityFilterChain()을 호출하니 보안 규칙을 정해 해당 메서드 안에 기재하면 된다.

authorizeHttpRequests

http.authorizeHttpRequests((authorize) -> authorize
        .anyRequest().authenticated()) // 모든 요청에 대해 인증 필요

이 코드는 모든 요청에 대해 인증을 요구하는 코드다.

즉, 로그인하지 않으면 그 어떠한 페이지에도 접근할 수가 없다.

테스트를 위해 해당 코드만 남기고 나머지는 주석처리하고 서버를 돌려봤다.

서버를 실행하고 localhost:8080으로 접속하면 권한이 없다는 페이지가 보인다. HTTP error 코드는 403.

그러면 메인 화면은 누구나 접근하게 하고 싶으면 어떻게할까

바로 permitAll()을 사용하면 된다. 그래서 바로 permitAll()을 추가하고 서버를 돌려봤다.

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http.authorizeHttpRequests((authorize) -> authorize
            .requestMatchers("/").permitAll() // 메인 화면은 로그인 없이 접근 가능
            .anyRequest().authenticated()); // 모든 요청에 대해 인증 필요 -> 로그인하지 않으면 어떠한 페이지도 접근 X
//                .httpBasic(Customizer.withDefaults()) // HTTP Basic 인증 활성화
//               .formLogin(Customizer.withDefaults()); // 폼 로그인 활성화
    return http.build();
}

근데 여전히 403 에러가 발생했다. 뭐가 문젠지하고 찾아보다가 permitAll()로 로그인 없이 접근 가능한 경로를 설정해도 스프링 시큐리티에서 로그인 기능 formLogin(), httpBasic()이 없으면 아예 403 에러를 터트려버린다고 한다.

그래서 임시로 formLogin()까지 설정해주고 서버를 돌려봤다.

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http.authorizeHttpRequests((authorize) -> authorize
            .requestMatchers("/").permitAll() // 메인 화면은 로그인 없이 접근 가능
            .anyRequest().authenticated()) // 모든 요청에 대해 인증 필요 -> 로그인하지 않으면 어떠한 페이지도 접근 X
//                .httpBasic(Customizer.withDefaults()) // HTTP Basic 인증 활성화
            .formLogin(Customizer.withDefaults()); // 폼 로그인 활성화
    return http.build();
}

localhost:8080으로 접속했는데 기대와는 달리 /login 페이지로 리다이렉트 된다. 이것저것 다양하게 경로를 추가해봤는데 결론적으로는 "/index.html"도 추가해주면 된다.

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http.authorizeHttpRequests((authorize) -> authorize
            .requestMatchers("/", "/index.html").permitAll()
            .anyRequest().authenticated())
//                .httpBasic(Customizer.withDefaults()) // HTTP Basic 인증 활성화
            .formLogin(Customizer.withDefaults()); // 폼 로그인 활성화
    return http.build();
}

"/"만 추가했을때 안되는 이유는 spring boot에서는 정적 리소스를 자동으로 서빙해준다. /static/index.html 파일을 만들면 브라우저에서 "localhost:8080/"만 입력해도 index.html 화면을 띄워준다.

근데 spring security 입장에서는 "/" != "/index.html"이다. 제일 처음 GET 요청인 "/" 경로는 permitAll()로 통과시킨다. 그래서 spring boot가 "/index.html"을 서빙하려고 하니까 spring security 입장에서는 "/"가 아니기 때문에 /login 경로로 리다이렉트 시켜버린다.

서버를 재시작하고 localhost:8080으로 접속하면 이제 메인이 잘 뜬다.

formLogin()

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http.authorizeHttpRequests((authorize) -> authorize
            .requestMatchers("/", "/index.html").permitAll()
            .anyRequest().authenticated())
//                .httpBasic(Customizer.withDefaults()) // HTTP Basic 인증 활성화
            .formLogin(Customizer.withDefaults()); // 폼 로그인 활성화
    return http.build();
}

위 코드에서 .formLogin()은 어떤 역할을 하는 소스일까. 말 그대로 폼 로그인 기능을 활성화 해준다.

매개변수로 Customizer.withDefaults()를 입력하면 기본적으로 제공하는 로그인 페이지로 리다이렉트 해준다.

그래서 위에서 /login으로 리다이렉트 됐을 때 초면인 화면이 보여졌던 것이다.

좌측 : 스프링 시큐리티 기본 제공 로그인 화면 / 우측 : 내가 만들었던 로그인 화면

내가 만들었던 로그인 화면을 "/login"으로 접속했을 때 띄우려면 loginPage() 설정과 requesetMatchers() 설정을 해주면 된다.

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http.authorizeHttpRequests((authorize) -> authorize
            .requestMatchers("/", "/index.html", "/member/login.html").permitAll() // 수정
            .anyRequest().authenticated())
//                .httpBasic(Customizer.withDefaults()) // HTTP Basic 인증 활성화
            .formLogin(form -> form.loginPage("/member/login.html")); // 수정
    return http.build();
}

설정 후 서버를 재시작해보면 짠~

내가 만들었던 로그인 화면이 잘 나온다. 근데 사실 RESTful API로 개발할 때는 .formLogin()과 .httpBasic()이 필요하지가 않다고 한다. 그래서 필요없는 저 메서드 두 개를 사용하지 않아도 된다.

소스를 전반적으로 RESTful API에 맞춰보면 아래와 같다.

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http.csrf(csrf -> csrf.disable())
            .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .authorizeHttpRequests((authorize) -> authorize
                    .requestMatchers("/", "/index.html", "/member/login.html", "/api/auth/login").permitAll()
                    .anyRequest().authenticated())
            .exceptionHandling(exceptions -> exceptions.authenticationEntryPoint(((request, response, authException)
                    -> response.sendError(HttpServletResponse.SC_UNAUTHORIZED)))); // 401 응답 반환
    return http.build();
}

세션 관련 설정은 꼭 STATELESS로 설정해줘야 한다. 현재로써는 세션 관련 기능이 없기 때문에 세션 기능을 사용 안함으로 설정해주지 않으면 스프링 시큐리티는 세션 기반이 디폴트라 계속 세션을 체크해서 어떤짓을 해도 401 에러를 뱉을 수 있기 때문이다.

일단 원활한 테스트를 위해 메인 화면에 a 태그로 login 화면을 이동할 수 있도록 하나 만들어준다.

로그인 이동 글씨를 클릭하면 해당 화면으로 잘 이동한다.

그리고 DB를 확인하고 member 테이블에 데이터가 없으면 insert문으로 데이터 넣어주고 로그인을 진행해보자.

로그인 실패가 떨어진다. 개발자 도구로 네트워크 요청 메세지를 확인해보면 401 에러 코드를 볼 수 있다.

왜 그러는지 생각해보다가 /api/auth/login 요청 주소도 스프링 시큐리티의 거미줄에 걸리지 않게 제외해줘야겠다는 생각이 들었다.

.requestMatchers("/", "/index.html", "/member/login.html", "/api/auth/login").permitAll()

그리고 서버 재실행 후 테스트해보면! 로그인이 성공하는 걸 볼 수 있다.

근데 문제는 로그인 후에.. 현재 인증된 회원만 접근할 수 있는 '회원가입' 페이지에 접근할 수가 없다.

사실 당연하다. 진짜 단순한 로그인 기능을 구현했기 때문에 구현 소스 안에 스프링 시큐리티가 인증된 사용자 정보를 유지하지 못하기 때문이다.

원래 스프링 시큐리티는 로그인 후에 인증 정보를 세션에 저장하고 이 세션을 기반으로 사용자의 인증 여부를 체크한다.

근데 위에서 세션 기능을 꺼버려서 이 상태에서는 인증 정보 유지가 안 된 것이다.

그래서 세션 기능을 끌거면 매 api 요청마다 인증된 사용자임을 표현(?)해줘야하는데 대부분 http header에 Authorization을 추가해서 인증 정보를 전달하는 방식으로 구현한다.

이 부분은 다음에.. 알아보자!

[토이 프로젝트] spring boot 로그인 기능 만들기-1

데부한 — Thu, 27 Feb 2025 16:13:15 +0900

이전 게시글

[토이 프로젝트] 회원가입 기능 만들기-1

devhan.tistory.com

제일 처음으로 회원가입 기능을 만들었다. 회원가입 기능을 고도화할까 하다가 로그인 기능을 먼저 만들고 하는 게 나을 거 같아서 오늘은 로그인 기능을 만들어보겠다.

먼저 로그인 화면을 만들어주자. CSS는 일단 회원가입 화면에서 썼던 거 가져왔다.

<body>
<div class="signup-container">
    <form id="loginForm">
        <div>
            <label for="userId">아이디:</label>
            <input type="text" id="userId" name="userId" placeholder="아이디 입력"
                   pattern="^[A-Za-z][A-Za-z0-9]{1,}$"
                   title="영문+숫자. 숫자로 시작하면 안되며 최소 두 글자 이상이어야 합니다." required/>
        </div>
        <div>
            <label for="password">비밀번호:</label>
            <input type="password" id="password" name="password" placeholder="비밀번호 입력" required/>
        </div>
        <div>
            <button type="submit">로그인</button>
        </div>
    </form>
</div>
</body>

그리고 스크립트를 작성해준다.

로그인 기능은 사용자의 정보를 전송하기 때문에 GET으로 요청하기보다는 POST로 요청하는 게 맞다.

<script>
    async function login(event) {
        event.preventDefault();

        const formData = {
              userId : document.getElementById('userId').value
            , password : document.getElementById('password').value
        };

        try {
            const response = await fetch('/api/auth/login', {
                method : 'POST',
                headers : {
                    'Content-Type' : 'application/json'
                },
                body: JSON.stringify(formData)
            });

            if(!response.ok) {
                throw new Error('아이디와 비밀번호를 확인하세요.');
            }

            const data = await response.json();

            alert("로그인 성공");

            window.location.href = "../index.html";
        } catch(error) {
            console.error('Error :', error);
            alert("로그인 실패: " + error.message);
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('loginForm').addEventListener('submit', login);
    });

</script>

POST method를 사용하는 이유

비밀번호와 같은 민감한 데이터를 Body에 담아 전송
GET은 브라우저나 프록시 서버에 캐싱될 수 있지만, POST는 캐싱되지 않음
GET을 사용하면 url 뒤로 쿼리스트링이 붙음
로그인을 하면 백엔드 쪽에서는 JWT 토큰을 발급하는 등의 상태 변화가 일어남으로 POST가 더 적절

이제 백엔드 소스를 만들자.

회원가입 기능 만들때 별 생각없이 패키지를 member로 했는데 auth로 변경하고 파일 이름도 다 변경해줬다.

AuthController에 login()추가

@PostMapping("login")
public ResponseEntity<LoginResponseDto> login(@RequestBody LoginRequestDto loginRequestDto) {
    LoginResponseDto loginResponseDto = authService.login(loginRequestDto);
    return ResponseEntity.ok(loginResponseDto);
}

LoginRequestDto, LoginResponseDto 추가

@Getter
public class LoginRequestDto {
    private String userId;
    private String password;
}


// ==============================

@Getter
@AllArgsConstructor
@Builder
public class LoginResponseDto {

    private Long id;
    private String userId;
    private String nickname;
    private String email;
    private String job;
    private int age;

}

AuthService에 login() 추가

/**
 * 로그인
 * @param loginRequestDto
 * @return
 */
public LoginResponseDto login(LoginRequestDto loginRequestDto) {
    Member findMember = authRepository.findByUserIdAndPassword(loginRequestDto.getUserId()
            , loginRequestDto.getPassword()).orElseThrow(() -> new IllegalArgumentException("아이디와 비밀번호를 다시 확인하세요."));

    return LoginResponseDto.builder()
            .id(findMember.getId())
            .userId(findMember.getUserId())
            .email(findMember.getEmail())
            .job(findMember.getJob())
            .age(findMember.getAge())
            .nickname(findMember.getNickname())
            .build();
}

AuthRepository에 findByUserIdAndPassword() 추가

public interface AuthRepository extends JpaRepository<Member, Long> {
    Optional<Member> findByUserIdAndPassword(String id, String password);
}

그럼 이제 서버 돌려서 테스트!

메인 접속

회원가입 이동

내용 채우고 회원가입 버튼 클릭

성공!

성공하면 로그인 화면으로 이동한다.

아이디, 비밀번호 틀리게 입력해보기

실패!

올바른 아이디, 비밀번호 입력하기

로그인 성공 시 메인 페이지로 이동한다.

여기까지 로그인 기능 완벽 적용!!

토대를 만들었으니 메인에 로그인 버튼도 만들고....
로그인하면 회원가입도 없애는 등... 작업도 해주고 스프링 시큐리티 도입이나 암호화 적용을 이제 해야겠다.

[토이 프로젝트] spring boot 회원가입 기능 만들기-1

데부한 — Mon, 24 Feb 2025 22:49:55 +0900

사실 아직 만들고 싶은 프로젝트는 생각안해봤다.

다만 프로젝트를 해봐야 실력이 정말 늘 것 같아서 일단 대중적이고 레퍼런스 자료가 제일 많은

커뮤니티 사이트를 만들어보려한다.

환경은 일단 간단하게만 생각해봤다.

spring boot 3.4.2
JPA
MySQL
Thymeleaf -> react(욕심)

리액트를 예~전에 한 번 쓰윽 봤었으나 전혀 기억이 안나서 백지랑 똑같다.

일단 빨리 끝내는게 목표니 서버쪽을 Thymeleaf로 후다닥 만들고 리액트와 Next.js를 좀 배워서

화면쪽을 바꿔 볼 생각이다. 뭐 생각은 일단 그렇다.

아무튼.. 얼른 시작!

스프링 프로젝트는 아래와 같이 만들었다.

프로젝트를 여러 번 만들어봤지만 제일 떨리는 순간은 Generate 버튼을 누를 때!

깃 레포도 하나 만들어줬다.

클론 후 git ignore 설정을 위해 아래 사이트의 도움을 받는다.

gitignore.io

Create useful .gitignore files for your project

www.toptal.com

.gitignore 파일에 내용을 붙여넣고 커밋한다.

그리고 프로젝트 파일의 압축을 풀고 또 깃에 올린다.

브랜치까지 따줬다.

mysql DB까지 만들어주고

application.yml 설정도 해줬다.

spring:
  application:
    name: justComm

  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/justComm?useSSL=false&serverTimezone=Asia/Seoul&characterEncoding=UTF-8
    username: root
    password:
  jpa:
    open-in-view: true
    hibernate:
      ddl-auto: create
      naming:
        physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
    show-sql: true
    properties:
      hibernate.format_sql: true
      dialect: org.hibernate.dialect.MySQL8InnoDBDialect


logging:
  level:
    org.hibernate.sql : debug

그러고 메인 화면을 만드려고했는데 잘 생각해보니 Next.js 전환 계획을 갖고 있기 때문에 RESTful api로 개발할 거라 타임리프보다는 그냥 HTML + javascript 조합이 더 좋을 거 같아 타임리프를 뒤로 미뤄두고 HTML로 열심히 꾸미기로 했다.

그래서 메인의 경로는..!

resources/static 경로에 index.html 파일을 만들어주면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>메인</title>
</head>
<body>
    <h2>메인입니다.</h2>

</body>
</html>

그리고 서버 실행 후 localhost:8080으로 접속하면 메인이 딱 뜬다.

그럼 이제 회원가입 화면을 만들어보자. resources/static/member/signup.html로 만든다.

그리고 index.html에 a 링크를 하나 만들어 회원가입 화면으로 이동할 수 있게 한다.

<a href="member/signup.html">회원가입 이동</a>

그리고 빠른 개발 속도를 위해 챗GPT한테 일정 틀을 주고 CSS 꾸며달라고했다.

나름 예쁘게 꾸며줌 ㅎ

이제 자바스크립트를 작성하면 된다. 너무 오랜만이라 기억이 안나 챗GPT의 도움을 좀 받았다.

<body>
<div class="signup-container">
    <h1>회원가입</h1>
    <form id="signupForm">
        <div>
            <label for="userId">아이디:</label>
            <input type="text" id="userId" name="userId" placeholder="아이디 입력"
                   pattern="^[A-Za-z][A-Za-z0-9]{1,}$"
                   title="영문+숫자. 숫자로 시작하면 안되며 최소 두 글자 이상이어야 합니다." required/>
        </div>
        <div>
            <label for="password">비밀번호:</label>
            <input type="password" id="password" name="password" placeholder="비밀번호 입력"
                   pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$"
                   title="비밀번호는 최소 8자 이상이며, 영어, 숫자, 특수문자(!@#$%^&*)가 모두 포함되어야 합니다."
                   required/>
        </div>
        <div>
            <label for="confirmPassword">비밀번호 확인:</label>
            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인" required/>
        </div>
        <div>
            <label for="nickname">닉네임:</label>
            <input type="text" id="nickname" name="nickname" placeholder="닉네임 입력" minlength="2" required/>
        </div>
        <div>
            <label for="email">이메일:</label>
            <input type="email" id="email" name="email" placeholder="이메일 입력" required/>
        </div>
        <div>
            <label for="job">직업:</label>
            <input type="text" id="job" name="job" placeholder="직업 입력"/>
        </div>
        <div>
            <label for="age">나이:</label>
            <input type="number" id="age" name="age" placeholder="나이 입력"/>
        </div>
        <div>
            <button type="submit">회원가입</button>
        </div>
    </form>
    <!-- 결과 메시지를 보여줄 영역 -->
    <div id="message"></div>
</div>

<script>
    document.getElementById('signupForm').addEventListener('submit', function(event) {
        event.preventDefault(); // 기본 폼 제출 동작 차단

        const password = document.getElementById('password').value;
        const password2 = document.getElementById('confirmPassword').value;
        if(password !== password2) {
            alert("비밀번호가 일치하지 않습니다.");
            return;
        }

        const formData = {
              userId: document.getElementById('userId').value
            , password: document.getElementById('password').value
            , nickname: document.getElementById('nickname').value
            , email: document.getElementById('email').value
            , job: document.getElementById('job').value
            , age: document.getElementById('age').value
        };

        // API 엔드포인트로  JSON 데이터 전송
        fetch('/api/member', {
            method: 'POST',
            headers: {
                'Content-Type' : 'application/json'
            },
            body: JSON.stringify(formData)
        })
            .then(response => response.json())
            .then(data => {
                // API 응답에 따라 메세지 출력
                alert("회원가입에 성공했습니다.");
                setTimeout(() => {
                    window.location.href = "login.html";
                }, 1000);
            })
            .catch(error => {
                console.error('Error: ', error);
                document.getElementById('message').innerText = '회원가입 중 오류 발생';
            });
    })

</script>
</body>

submit 이벤트를 가로채서 기본 폼 제출 동작을 차단하고 비밀번호와 비밀번호 확인을 검증 후 통과하면

폼에 작성된 모든 데이터를 JSON 객체로 만들어 api로 쏴버린다.

그리고 응답이 잘 오면 회원가입 완료라는 alert 창과 함께 login 페이지로 이동한다.

그리고 이제 서버쪽 기능을 만들어야한다.

먼저 Member 엔티티를 만들어준다.

@Entity
@Getter
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Member {

    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String userId;
    private String password;
    private String nickname;
    private String email;
    private String job;
    private int age;
}

일단 간단하게 저렇게만 만들어보자.

그리고 MemberRequestDto도 만들어보자.

@Getter
public class MemberRequest {

    private String userId;
    private String password;
    private String nickname;
    private String email;
    private String job;
    private int age;


    public Member toEntity() {
        return Member.builder()
                .userId(this.userId)
                .password(this.password)
                .nickname(this.nickname)
                .email(this.email)
                .job(this.job)
                .age(this.age)
                .build();
    }
}

이제 Controller를 만들어보자.

@RestController
@RequestMapping("/api/member")
@RequiredArgsConstructor
public class MemberController {

    private final MemberService memberService;

    @PostMapping()
    public boolean signup(@RequestBody MemberRequest memberRequest) {

    }
}

휴 Service랑 repository를 먼저 만들고 오자.

@Service
@RequiredArgsConstructor
public class MemberService {

    private final MemberRepository memberRepository;


}


//================================

public interface MemberRepository extends JpaRepository<Member, Long> {
}

그리고 다시 Controller 작성

@PostMapping()
public ResponseEntity signup(@RequestBody MemberRequest memberRequest) {
    boolean result = memberService.signup(memberRequest);
    return ResponseEntity.ok(result);
}

service의 signup 메서드도 작성한다.

/**
 * 회원가입
 * @param memberRequest
 * @return
 */
@Transactional
public boolean signup(MemberRequest memberRequest) {
    memberRepository.save(memberRequest.toEntity());
    return true;
}

뭔가 매우 부자연스러운 로직이지만 일단 이렇게하고 넘어가자.

나중에.. 시간이 되면 고쳐! 얼른 하고 자야된다.

자 이제 테스트를 해볼시간!

이렇게 입력하다가 엔터를 눌러서;; 갑자기 회원가입이 진행되어버렸다.

저장..된다.

DB에서도 .. 확인

20살이 되고 싶었던 나는 0살이 되어버렸다.

다음에는 회원가입 기능을 다듬어보는 시간을 가져야겠다.

넥사크로에서 지원하지 않는 CSS 적용하기

데부한 — Thu, 20 Feb 2025 16:13:52 +0900

넥사크로에서는 지원하지 않는 CSS를 테마 파일에 넣으면 테마 파일을 저장할 때 아예 에러가 나버린다.

이걸 어떻게 하면 사용할 수 있지 하다가 자바스크립트니까 스크립트에서 객체에 접근해서 설정할 수도 있을 거란 생각이 들어서 바로 테스트해봤다.

일단 화면에 돌려버릴 버튼 하나를 만든다.

그리고 버튼에 onmouseenter(), onmouseleave() 이벤트를 걸어주고

폼에도 onload() 이벤트를 걸어준다.

그리고 스크립트에서 document로 객체를 불러와 style을 직접 준다.

this.fvButton;

this.Form_Work_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.fvButton = document.getElementById(this.Button00._unique_id);
	this.fvButton.style.setProperty("transition", "transform 0.3s ease");
};


this.Button00_onmouseenter = function(obj:nexacro.Button,e:nexacro.MouseEventInfo)
{
	this.fvButton.style.setProperty("transform", "rotate(10deg)");
};

this.Button00_onmouseleave = function(obj:nexacro.Button,e:nexacro.MouseEventInfo)
{
	this.fvButton.style.setProperty("transform", "rotate(0deg)");
};

이렇게하면 잘 동작하는 걸 확인할 수 있다.

근데 이런 특별한 CSS를 넣을 수 있는 화면이 많다면.. 차라리 그냥 안하는게 더 좋을 것 같다.

역시 무조건 안된다는 말보다는 일단 생각해보고 테스트 해보는게 중요한 것 같다.

문제해결능력을 더 쑥쑥 키우자.

프로그래머스_문자열 나누기 JAVA

데부한 — Thu, 13 Feb 2025 22:22:54 +0900

프로그래머스

SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

이번 문제는 2주차 마지막 문제.. '문자열 나누기'다.

그래도 마지막 문젠데.. 생각보다 쉬워서 놀라버리기

챗GPT.... 커리큘럼 잘 못짜는구나?

어찌됐든 푼다!

코드

class Solution {
    public int solution(String s) {
        int answer = 0;
        int same = 1;
        int notSame = 0;
        char targetChar = s.charAt(0);
        
        if(s.length() == 1) return 1;
        
        for(int i = 1; i < s.length(); i++) {
            char curChar = s.charAt(i);
            if(targetChar == curChar) same++;
            else notSame++;
            
            if(i+1 == s.length()) return answer+1;
            if(same == notSame) {
                answer++;
                
                targetChar = s.charAt(i+1);
                same = 0;
                notSame = 0;
            }
        }
        
        return answer;
    }
}

사실 이번 문제는 약속 시간이 한시간 좀 넘게 붕 떠서

밖에서 급하게 작성한거라,, 정말 지문에 있는 그대로를 코드로 옮겼다.

쉬운문제라 따로 설명은 안하겠다!

오늘도 즐거운 코딩!

그나저나 내일 아주 짧은 프로젝트,,,

불 끄러 간 프로젝트 철수날이다.

혼자 거의 오픈이 가까운 프로젝트에 투입돼서 공통적인 결함들을 수정하는거라 좀,,,,,, 쫄? 했는데

어려워 보이는 문제들은 투입 전에 미리 생각해놓은 덕분에 거의 200%를 고치고 와서 다행이다.

아니,,? 300% 일지도

대-견

프로그래머스_최빈값 구하기 JAVA

데부한 — Thu, 13 Feb 2025 22:18:21 +0900

프로그래머스

SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

이번에 풀 문제는 '최빈값'이다.

새롭게 푸는 문제라 과거 코드는 없다.

이번 문제는 짧고 요구사항이 정확해서 마음에 들었다.

코드

import java.util.*;

class Solution {
    public int solution(int[] array) {
        int answer = -1;
        Map<Integer, Integer> map = new HashMap<>();
        
        for(int i = 0; i < array.length; i++) {
            map.put(array[i], map.getOrDefault(array[i], 0)+1);
        }
        
        int max = Collections.max(map.values());
        for(Map.Entry<Integer, Integer> entry : map.entrySet()) {
            Integer key = entry.getKey();
            Integer value = entry.getValue();
            
            if(value == max) {
                if(answer > -1) return -1;
                answer = key;
            }
        }
        return answer;
    }
}

자료구조는 Map을 사용하였다.

map에 데이터를 넣을 때 중복 체크를하려고 한 순간

영한쓰의 자바 강의에서 getOrDefault()를 사용했던게 떠올라 이 메서드를 사용했다.

뭔가 모를 흡족함.

돈을 허투루 쓴게 아니구만!

이번 문제도 사무실 보안때문에 캡처본이 안올라가;;

점수를 캡처 못했다.

점수는 +3점을 받았다.

오늘도 즐거운 코딩!!!

프로그래머스_예산 JAVA

데부한 — Thu, 13 Feb 2025 22:17:10 +0900

프로그래머스

SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

이번에 풀 문제는 '예산'이다.

과거에 풀었던 문제라 과거 코드가 남아있었다.

과거 코드

import java.util.*;

class Solution {
    public int solution(int[] d, int budget) {
        int answer = 0;
        
        Arrays.sort(d);
        
        if(d[0] > budget) return 0;
        
        for(int i = 0; i < d.length; i++) {
            if(budget >= d[i]) {
                budget -= d[i];
                answer++;
            }
        }
        return answer;
    }
}

별로 고칠 것이 없어보여서,,,

간단한 리팩토링만 했다.

현재 코드

import java.util.*;

class Solution {
    public int solution(int[] d, int budget) {
        int answer = 0;
        
        Arrays.sort(d);
        
        if(d[0] > budget) return answer;
    
        for(int cost : d) {
            if(budget < cost) return answer;
            budget -= cost;
            answer++;
        }
    
        return answer;
    }
}

오늘도 즐거운 코딩..!

프로그래머스_기능개발 JAVA

데부한 — Thu, 6 Feb 2025 20:50:41 +0900

프로그래머스

SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

원래 3차원 어쩌구 문제가 있었는데 프로그래머스 안에서 검색해보니 나오질 않아서 최신 문제들로 다시 추천해달라고 했다.

그래서 오늘 풀 문제는 '기능개발'이다.

이번 문제는 처음 풀어보는 문제였다. 그래서 과거 코드는 없다.

문제를 읽었을 땐 문제에서 뭔가 강조하는 것 같았던 '작업 일수'는 별로 신경 안 써도 될 거 같았는데..

아니 문제를 풀다보니깐 '작업 일수'가 되게 중요한 거였다..!

역시 문제에 나오는 내용은 허튼 것이 없다.

코드

import java.util.*;

class Solution {
    public List<Integer> solution(int[] progresses, int[] speeds) {
        List<Integer> answer = new ArrayList<>();
        int success = 100;
        Deque<Integer> deque = new ArrayDeque<>();
        
        // 작업 종료일 구해서 deque에 넣기
        for(int i = 0; i < progresses.length; i++) {
            int progress = progresses[i];
            int speed = speeds[i];
            
            int endDate = (int)Math.ceil((double)(success - progress) / (double)speed);
            deque.offer(endDate);
        }
        
        int prevEndDate = deque.poll();
        int doneTaskCnt = 1;
        while(!deque.isEmpty())
        {
            if(prevEndDate >= deque.peek()) {
                deque.poll();
                doneTaskCnt++;
            } else {
                answer.add(doneTaskCnt);
                prevEndDate = deque.poll();
                doneTaskCnt = 1;
            }
            
            if(deque.isEmpty()) {
                answer.add(doneTaskCnt);
            }
        }
        return answer;
    }
}

짧게 설명해보자면 작업일수를 먼저 구해서 deque에 넣고 (기준 일수가 됨)

현재 작업일수보다 다음 작업 일수가 같거나 작으면 같이 배포되니까 ++ 해주고 아니면

배포 된 기능 수를 answer 리스트에 넣고 작업일수 기준을 업데이트해줬다.

근무지 점심시간에 풀은거라 보안 상 캡처가 안돼서;;

3점을 맞았는데 캡쳐본이 안올라간다.

오늘도 즐거운 코딩!!!