📚 TIL 33일차

1. 본인이 구현한 기능

• 회원가입, 로그인, 이메일 인증
• 유저 인가 및 인증을 위한 기본적인 시큐리티 환경 설정
• 위쪽에 구현한 것들을 프론트와 연결

1-1. 구현 방식 (사용한 기술, 변수 타입 등등 하나라도 얻은 점)
1-2. 실행하는 방법 (url 주소, input 값 조건, output 값 조건 등등) - <프론트 기준>
1-3. 해당 기술을 사용한 이유가 뭔지 > 어떠한 목표로 해당 기술을 사용하게 됐는지!

...는 아래에 함께 작성하겠습니다.

0. 프론트엔드

• 백엔드에서 작업한 결과를 프론트엔드로 가져오기 위해 ajax와 thymeleaf를 사용했다.
• 예를 들면, username의 중복을 검사하는 api는 아래와 같이 호출했다.

// username 중복 체크
@PostMapping("/signup/confirm-username/{username}")
@ResponseBody
public void checkUsername(@PathVariable("username") String username) {
    userService.checkUsername(username);
}

$.ajax({
        type: 'POST',
        url: '/api/signup/confirm-username/' + encodeURIComponent(username),
        contentType: "application/json"
    }).done(function (data, textStatus, xhr) {
        if (data !== '') {
            alert('사용할 수 없는 아이디 입니다.');
            return;
        }
        alert('사용할 수 있는 아이디 입니다.');
    })
        .fail(function (xhr, textStatus, errorThrown) {
            alert(errorThrown);
        });

• 서비스 함수들은 백엔드에서 처리해야한다는 유의해서 작업하려고 노력했다.

1. 회원가입

1-1) 프론트 접근

url -> /api/signup-page

1-2) 백그라운드에서 작업을 진행

url -> /api/signup

• 프론트로부터 username(아이디), password(비밀번호), email(이메일), nickname(닉네임)을 <form>으로 받아온다.
• 아래는 SignupRequestDto 구현부

@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class SignupRequestDto {

    @Pattern(regexp = "^(?=.*[a-z\\d]).{4,10}$", message = "최소 4자 이상, 10자 이하이며 알파벳 소문자(a~z), 숫자(0~9) 사용.")
    @NotBlank
    private String username;

    @Pattern(regexp = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[!@#$%^*+=-]).{8,15}$", message = "최소 8자 이상, 15자 이하이며 알파벳 대소문자(a~z, A~Z), 숫자(0~9), 특수문자(!@#$%^*+=-)를 1개 이상 사용.")
    @NotBlank
    private String password;

    @Email
    @NotBlank
    private String email;

    @NotBlank
    private String nickname;
}

• SignupRequestDto에도 @Pattern 어노테이션과 정규표현식으로 값을 거르고 있지만, 프론트에서도 다시 한 번 더해주고 있다. (시각적인 편의성을 위해) 아래는 JS로 작성한 check_email()의 구현부.

function check_email() { // 이메일 정규식 체크
    var email = document.getElementById('email').value;

    // 이메일 정규식
    let regexp_email = new RegExp('^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$')

    if (!regexp_email.test(email)) {
        document.getElementById('check_regexp_email').innerHTML = '유효하지 않은 이메일 형식 입니다.';
        document.getElementById('check_regexp_email').style.color = 'red';
        return false;
    } else {
        document.getElementById('check_regexp_email').innerHTML = '유효한 이메일 형식 입니다.';
        document.getElementById('check_regexp_email').style.color = 'blue';
        return true;
    }
}

1-3) username 중복 확인

url -> /api/signup/confirm-username/{username}

• reqeust로 받을 {email} 값은 @PathVariable로 받아온다.
• 실제 프론트에서는 이메일 입력을 받는 <input> 칸에 값을 넣으면 된다.
• 이메일이 올바르게 넘어오는지 확인하려고 @PathVariable을 선택했다.

2. 로그인

2-1) 프론트에서 접근

url -> /api/login-page

2-2) 백그라운드에서 작업을 진행

url -> /api/login

• 프론트로부터 username(아이디)와 password(비밀번호)를 받아와 DB 내 유효한 값인지 확인하고, token을 생성 후 → 생성한 token을 Cookie 값으로 전달한다.
  

• Cookie로 전달된 token 값은 setRequestHeader() 메서드를 통해 다시 Header로 전달된다.
  

3. 이메일 인증

'어떻게 인증해야한다'는 절차를 명시한 것이 없어서,

1. 난수를 생성하고
2. 그 난수를 메일로 전송하고
3. 메일로 전송 받은 난수와 생성된 난수가 일치하는지 (값을 동일하게 입력했는지)

를 검사하는 방식으로 이메일 인증을 진행했습니다.

3-1) 이메일 중복 확인

url -> /api/signup/confirm-email/{email}

• reqeust로 받을 {email} 값은 @PathVariable로 받아온다.
• 실제 프론트에서는 이메일 입력을 받는 <input> 칸에 값을 넣으면 된다.
• 이메일이 올바르게 넘어오는지 확인하려고 @PathVariable을 선택했다.
• '중복 확인'은 기존에 존재하는 user 값들 사이에서 체크하는 것이라고 생각해서 /api/email/~ 대신 /api/signup/~ 으로 경로를 지정했다.

3-2) 이메일 전송

url -> /api/email/send-email

• request (=보낼 이메일) 값은 @RequestBody로 받아왔다.

• 실제 프론트에서는 이메일 입력을 받는 <input> 칸에 값을 넣으면 된다.
  

• 인증코드 생성은 6자리의 랜덤한 숫자의 조합이다.

• 인증코드(인증번호)를 전달할 때는 thymeleaf를 사용하여 값을 전달해주었다.

// context 설정
private String setContext(String authcode) {
    Context context = new Context();
    context.setVariable("authcode", authcode); // 전달할 변수 명은 {authcode}
    
    return templateEngine.process("mail", context); // mail.html
}

<div style="text-align:center; border:1px solid black; font-family:verdana;">
<div style="color:blue; margin:20px 0 20px 0;"
	th:text="${authcode}"><!--인증번호 {authcode}가 표시되는 자리--></div>
</div>

3-3) 이메일 인증 코드 확인

url -> api/email/confirm-authcode

• request (=설정된 인증코드) 값은 @RequestBody로 받아왔다.
• 실제 프론트에서는 이메일 인증코드를 작성하는 <input> 칸에 값을 넣으면 된다.

2 더 하고 싶었는데 못 구현한 기능

1. 네이버 API를 사용한 로그인 기능 구현
   • 해보고 싶었는데 프론트에 시간을 쓰느라 못해봐서 아쉽다 ㅠㅠ~
   • 하지만 프론트에 연결해보는 것도... 의미가 있긴 했다

3. 협업 시 좋았던 점 / 아쉬웠던 점 (깃허브 사용이라던가, 팀 내의 규칙)

좋았던 점

1. GitHub PullRequest를 적극 활용한 점
   • 통합 테스트 브랜치와 메인 브랜치에 내 작업이나 실수가 영향이 가지 않아서 좋았다 (ㅎㅎ)
2. 커밋 규칙을 정하여서 커밋한 점
   • 특히 가독성에 좋았다
3. 매일 정해진 시간에 각자 근황을 전하고, 코드리뷰를 진행한 점

아쉬웠던 점

1. 일 분배가 어려웠던 점
   • 아직 부족하다보니 기능의 난이도를 가늠하기도 어려워서 분배가 적절했는지 가늠이 잘 가지 않았다