💻 코딩 일기 : [Spring] '회원가입 만들기- 부가기능' 편

🔔 '회원가입 시 필요한 부가기능'에 대해서 알아보자!

💟 목록 번호 역순

1. JSTL 함수 라이브러리를 선언합니다.

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

2. <c:forEach> 태그에서 varStatus를 사용합니다. varStatus의 속성은 index, count, first, last 등이 있습니다.

<c:forEach items="${memberList}" var="member" varStatus="status">

3. fn:length() 함수를 사용하여 memberList의 길이를 구하고, 이를 이용하여 번호를 역순으로 만듭니다. 번호를 역순으로 만드는 방법은 리스트의 전체 길이에서 인덱스 0부터 빼주면 번호가 역순으로 나옵니다.

<%-- 인덱스를 이용하여 번호를 역순으로 만듭니다 --%>
<c:set var="reverseIndex" value="${fn:length(memberList) - status.index}" />

4. 페이지 처리 하기 전까지의 코드는 다음과 같습니다.

<c:forEach items="${memberList}" var="member" varStatus="status">
	~~~~
        <td style="color: blue">
                ${fn:length(memberList)-status.index}
        </td>
	~~
</c:forEach>

5. 페이지 처리 하기 후에는 JSTL 함수 라이브러리 선언없이 공식을 이용하면 됩니다.

   ${전체 게시글 수 - (현재 페이지-1) * 페이지당 보여지는 게시물수(10) - status.index}

   • 전체 게시글 수 , 현재 페이지는 모두 컨트롤러에서 model에 추가하여 가져와야 합니다.

<c:forEach items="${memberList}" var="member" varStatus="status">
	~~~~
        <td style="color:blue;">
          	${(pageInfo.numberOfBoard)- (pageInfo.currentPageNumber-1) * 10 - status.index}
  		</td>
	~~
</c:forEach>

• 중간에 게시글이 삭제되어도 중간 번호가 생략되지 않고 역순으로 정렬됩니다.

💟 테이블 행 클릭 시 해당 회원 정보 보여주기

tr 태그의 onclick 속성을 사용하여 해당 회원 정보 링크를 입력해줍니다.

<tr onclick="location.href='회원 정보 링크'">

행 클릭 시 /member/id=?로 이동합니다.

<c:url value="/member" var="viewMember">
    <c:param name="id" value="${member.id}"/>
</c:url>
<tr onclick="location.href='${viewMember}'">

💟 비밀번호 체크

- submit 버튼 클릭 시 비밀번호 체크

<form ~token tag"><script>
    function checkValues() {
        const password = document.getElementById("pwdInput").value;
        const passwordCheck = document.getElementById("pwdCheckInput").value;

        if (password != "" && password == passwordCheck) {
            return true;
        } else {
            alert("패스워드가 일치하지 않습니다.");
            return false;
        }
    }
</script>

• onsubmit 속성을 사용하여 비밀번호와 비밀번호 확인 입력란의 값을 비교하는 함수를 호출합니다.

- submit 버튼 클릭 전에 미리 비밀번호 체크하기

<input oninput="passwordCheck()" id="pwdInput" >
<input oninput="passwordCheck()" id="pwdCheckInput" >
function passwordCheck() {
    const password = document.querySelector("#pwdInput").value;
    const passwordCheck = document.querySelector("#pwdCheckInput").value;

    if (password != passwordCheck) {
        //메시지 보여주기
        document.querySelector("#passwordMessage").textContent = "패스워드가 일치하지 않습니다.";
    } else {
        document.querySelector("#passwordMessage").textContent = "";
    }
}

• oninput 이벤트를 사용하여 passwordCheck 함수를 호출합니다.

💟 회원 가입 시 이메일 중복 확인하기

회원 가일 할 때 이메일 중복을 확인하기 위해서는 화면을 이동하지 않고 이메일 중복 확인만 해주어야 합니다. 이렇게 하기 위해 ajax를 사용합니다.

ajax는 페이지를 다시 로드하지 않고 서버 통신을 위해 클라이언트를 시작하는 메소드를 정의합니다. 부분적으로 페이지를 업데이트할 수 있는 방법을 제공합니다.

ajax를 사용하기 위해 자바스트립트의 fetch 메서드를 사용합니다. ajax를 사용하기 위한 여러 라이브러리가 존재
페이지를 다시 로드하지 않고 , 모델에 담지 않고 view를 거치지 않고 일한 결과를 바로 응답됩니다.

1. 이메일 중복 확인 버튼 만들기

<button onclick="emailCheck();" type="button" id="btnEmailCheck" ~>

• 버튼이 submit 하지 않도록 type을 button으로 정해줍니다.
• 버튼 클릭 시, emailCheck() 함수를 호출합니다.

2. 컨트롤러

//이메일 check
@GetMapping("email")
@ResponseBody
public String emailCheck(String email) {
    String message = service.emailCheck(email);
    return message;
}

• 서비스에서 이메일 중복 확인을 하고 메시지를 반환받아 반환합니다.
• return을 view로 받는 것이 아니기 때문에 @ResponseBody를 사용합니다.

3. 서비스

public String emailCheck(String email) {
    Member member = mapper.selectByEmail(email);
    if (member == null) {
        //사용 가능한 이메일
        return "사용 가능한 이메일입니다.";
    } else {
        // 이미 존재하는 이메일
        return "이미 존재하는 이메일입니다.";
    }
}

• mapper에서 받은 이메일 존재 유무에 따라 메세지를 전달합니다.

4. mapper

@Select("SELECT * FROM member WHERE email = #{email}")
Member selectByEmail(String email);

• 해당 email이 DB에 존재하는지 조회합니다.

5. emailCheck() 함수

async function emailCheck() {
    const emailValue = document.querySelector("#emailInput").value;
    const url = "/member/email?email=" + emailValue;

    //ajax 요청
    const response = await fetch(encodeURI(url));

    // 응답처리
    // console.log(response.text());
    alert(await response.text())
}

• 이메일 입력란의 id가 emailInput 요소의 값을 가져와 /member/email?email=?로 요청을 보내고 이메일 값은 쿼리 문자열로 전달합니다.
• fetch() 함수는 await 키워드를 사용하여 비동기적으로 기다리며 서버로부터의 응답은 reponse 변수에 저장합니다.
• response.text() 메서드를 사용하여 텍스트 형식으로 응답을 가져와 await 키워드를 사용하여 비동기적으로 기다린 후, alert() 함수를 사용하여 응답 내용을 알림창으로 표시합니다.
• async 함수 안에서 await 키워드를 사용하면 비동기 작업이 완료될 때까지 함수가 일시 중지되며, 그 결과를 기다린 후 다음 코드를 실행합니다. 이를 통해 비동기 코드를 동기식처럼 작성할 수 있습니다.
  • async : 함수를 비동기 함수로 선언하는 키워드입니다. 이 키워드를 사용하면 함수 내에서 await 키워드를 사용할 수 있습니다.
  • await : 비동기 함수 내에서 사용되며, Promise가 이행될 때까지 함수의 실행을 일시 중지합니다. 이행된 값이나 이행된 Promise의 값을 반환합니다.

emailCheck() 함수는 비동기 함수로 선언되어 있고, fetch() 함수의 결과를 기다리기 위해 await 키워드를 사용하고 있습니다. 이렇게 함으로써 AJAX 요청이 완료될 때까지 함수가 멈추며, 응답을 받은 후에야 다음 코드를 실행합니다.