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

🔔 '회원가입 만들기'에 대해서 알아보자!

회원가입 :
1. 회원가입 기능(C)
2. 가입된 회원 목록 보여주는 기능(R)
3. 회원 정보 수정하는 기능(U)
4. 회원 정보 삭제하는 기능(D)

Member 자바 빈을 생성합니다.

@Data
public class Member {
    private Integer id;
    private String email;
    private String password;
    private String nickName;
    private LocalDateTime inserted;
}

💟 회원가입 기능(CREATE)

MemberController

@GetMapping("signup")
public void signup() {
}

@PostMapping("signup")
public String signup(Member member) {
    service.signup(member);
    return "redirect:/member/list";
}

• @GetMapping("signup") : /signup 경로로 요청이 들어오면 회원가입 페이지로 이동합니다.
• @PostMapping("signup") : member를 매개변수로 받아 서비스를 통해 회원가입을 처리하고 가입이 완료되면 member/list 경로로 가서 회원 목록 페이지(list.jsp)로 리다이렉트합니다.

MemberService

public void signup(Member member) {
    mapper.insert(member);
}

• mapper를 통해 전달된 member 객체를 데이터베이스에 추가합니다.

MemberMapper

@Insert("""
        INSERT INTO member (email, password, nick_name) VALUES (#{email}, #{password}, #{nickName})
        """)
void insert(Member member);

• 회원의 email, password, nick_name을 추가하기 위해 @Insert를 사용합니다.

💟 회원 목록 보여주는 기능(READ)

☑️ 모든 게시글을 보여주는 기능

MemberController

@GetMapping("list")
public String list(Member member, Model model) {
    model.addAttribute("memberList", service.list());
    return "member/list";
}

• service에서 모든 member의 객체를 조회하는 회원 목록을 가져와 memberList에 넣어 모델에 추가하여 member/list 경로인 회원 목록 페이지(list.jsp)로 이동합니다.

MemberService

public List<Member> list() {
    return mapper.selectAll();
}

• mapper를 통해 전달된 member의 리스트를 데이터베이스에서 조회합니다.

MemberMapper

@Select("SELECT * FROM member ORDER BY id DESC ")
List<Member> selectAll();

• 모든 회원을 가장 최근에 들어온 순으로 조회하기 위해 @Select 어노테이션을 사용합니다.

☑️ 특정 id를 받아 보여주는 기능

MemberController

@GetMapping("")
public String view(Integer id, Model model) {
    model.addAttribute("member", service.get(id));
    return "member/info";
}

• service에서 회원의 id를 받아와 회원 정보를 조회 목록을 가져와 모델에 추가하여 member/info 경로인 회원 정보를 보여주는 페이지(info.jsp)로 이동합니다.

MemberService

public Member get(Integer id) {
    return mapper.selectById(id);
}

• mapper를 통해 전달된 id에 해당하는 회원 정보를 데이터베이스에서 조회합니다.

MemberMapper

@Select("SELECT * FROM member WHERE id = #{id}")
Member selectById(Integer id);

• 회원의 id를 조회하여 해당 회원만 조회하기 위해서 @Select 어노테이션을 사용합니다.

💟 회원 정보 수정하는 기능(UPDATE)

MemberController

// 처음에 수정 클릭 시 member/modify?id=?로
@GetMapping("modify")
public String modify(Integer id, Model model) {
    model.addAttribute("member", service.get(id));
    return "member/modify";
}

// member/modify?id=?에서 수정 클릭 시 member/list로 리다이렉트
@PostMapping("modify")
public String modifyPost(Member member, RedirectAttributes rttr) {
    service.modify(member);
    rttr.addAttribute("id", member.getId());
    return "redirect:/member";
}

• @GetMapping("modify") : /modify 경로로 Get 요청이 들어와 service에서 id를 받아와 해당 회원의 정보를 모델에 추가하여 member/modify 경로로 가서 회원 정보 수정페이지(modify.jsp)로 이동합니다.

• @PostMapping("modify") : Post 요청이 들어왔을 때 service에서 member를 매개변수로 받아 회원 정보를 수정하여 수정된 회원의 id를 getId()로 반환하여 리다이렉트 시 파라미터로 추가됩니다. 마지막으로 /member 경로로 해당 회원의 수정된 정보 페이지로 리다이렉트합니다.

MemberService

public Member get(Integer id) {
    return mapper.selectById(id);
}
public void modify(Member member) {
    mapper.update(member);
}

• get(Integer id) : mapper를 통해 전달된 id에 해당하는 회원 정보를 데이터베이스에서 조회합니다.
• modify(Member member) : mapper를 통해 전달된 member 객체의 회원 정보를 데이터베이스에서 수정합니다.
  
  

MemberMapper

@Select("SELECT * FROM member WHERE id = #{id}")
Member selectById(Integer id);

@Update("""
        UPDATE member SET password = #{password}, nick_name = #{nickName} WHERE id = #{id}
        """)
int update(Member member);

• selectById(Integer id) : 회원의 id를 조회하여 해당 회원만 조회하기 위해서 @Select 어노테이션을 사용합니다.
• update(Member member) : 회원의 password, nick_name만 변경하기 위해서 @Update 어노테이션을 사용합니다.

💟 회원 정보 삭제하는 기능(Delete)

MemberController

@PostMapping("remove")
public String remove(Integer id) {
    service.delete(id);
    return "redirect:/member/list";
}

• id를 매개변수로 받아 서비스를 통해 해당 id의 회원을 삭제하고 member/list 경로로 가서 회원 목록 페이지(list.jsp)로 리다이렉트합니다.

MemberService

public void delete(Integer id) {
    mapper.delete(id);
}

• mapper를 통해 해당 id의 회원을 데이터베이스에서 삭제합니다.

MemberMapper

@Delete("DELETE FROM member WHERE id = #{id}")
int delete(Integer id);

• 해당 id의 회원을 삭제하기 위해서 @Delete 어노테이션을 사용합니다.

💟 전체 코드

MemberController

@Controller
@RequiredArgsConstructor
@RequestMapping("member") // /member + (/view or /signup/delete)
public class MemberController {

    private final MemberService service;

    @GetMapping("signup")
    public void signup() {
    }

    @PostMapping("signup")
    public String signup(Member member) {
        service.signup(member);
        return "redirect:/member/list";
    }

    @GetMapping("list")
    public String list(Member member, Model model) {
        model.addAttribute("memberList", service.list());
        return "member/list";
    }

    @GetMapping("")
    public String view(Integer id, Model model) {
        model.addAttribute("member", service.get(id));
        return "member/info";
    }

    @PostMapping("remove")
    public String remove(Integer id) {
        service.delete(id);
        return "redirect:/member/list";
    }

    // 처음에 수정 클릭 시 member/modify?id=?로
    @GetMapping("modify")
    public String modify(Integer id, Model model) {
        model.addAttribute("member", service.get(id));
        return "member/modify";
    }

    // member/modify?id=?에서 수정 클릭 시 member/list로 리다이렉트
    @PostMapping("modify")
    public String modifyPost(Member member, RedirectAttributes rttr) {
        service.modify(member);
        rttr.addAttribute("id", member.getId());
        return "redirect:/member";
    }

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

MemberService

@Service
@RequiredArgsConstructor
@Transactional(rollbackFor = Exception.class)
public class MemberService {

    private final MemberMapper mapper;

    public void signup(Member member) {
        mapper.insert(member);
    }

    public List<Member> list() {
        return mapper.selectAll();
    }

    public Member get(Integer id) {
        return mapper.selectById(id);
    }

    public void delete(Integer id) {
        mapper.delete(id);
    }

    public void modify(Member member) {
        mapper.update(member);
    }

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

MemberMapper

@Mapper
public interface MemberMapper {

    @Insert("""
            INSERT INTO member (email, password, nick_name) VALUES (#{email}, #{password}, #{nickName})
            """)
    void insert(Member member);

    @Select("SELECT * FROM member WHERE id = #{id}")
    Member selectById(Integer id);

    @Select("SELECT * FROM member ORDER BY id DESC ")
    List<Member> selectAll();

    @Delete("DELETE FROM member WHERE id = #{id}")
    int delete(Integer id);

    @Update("""
            UPDATE member SET password = #{password}, nick_name = #{nickName} WHERE id = #{id}
            """)
    int update(Member member);

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

---

JSP

회원가입 화면(signup.jsp)

<c:import url="/WEB-INF/fragment/navbar.jsp"/>

<%--div.container>div.row.justify-content-center>div.col-6--%>
<div class="container" style="font-family: 'TTHakgyoansimUndongjangL'">
    <div class="row justify-content-center">
        <div class="col-8">
            <h3 class="mb-4">회원 가입</h3>
            <form action="/member/signup" method="post" onsubmit="return checkValues()">
                <%--                div*3>label.form-label+input.form-control--%>
                <div class="mb-3">
                    <label for="emailInput" class="form-label">이메일</label>
                    <div class="input-group">
                        <input name="email" id="emailInput" required type="email" class="form-control"
                               placeholder="E-mail">
                        <button onclick="emailCheck();" type="button" id="btnEmailCheck"
                                class="btn btn-outline-secondary">중복 확인
                        </button>
                    </div>
                    <small class="form-text text-muted">이메일 양식에 맞춰 작성해주세요</small>
                </div>
                <div class="mb-3">
                    <label for="pwdInput" class="form-label">패스워드</label>
                    <input oninput="passwordCheck()" name="password" id="pwdInput" required type="password"
                           class="form-control"
                           placeholder="password">
                </div>
                <div class="mb-3">
                    <label for="pwdCheckInput" class="form-label">패스워드 확인</label>
                    <input oninput="passwordCheck()" id="pwdCheckInput" required type="password" class="form-control"
                           placeholder="password">
                    <div class="form-text" id="passwordMessage"></div>
                </div>
                <div class="mb-3">
                    <label for="nickInput" class="form-label">별명</label>
                    <input name="nickName" id="nickInput" required type="text" class="form-control"
                           placeholder="nick name">
                </div>
                <div>
                    <button class="btn btn-primary">가입</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    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())
    }

    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 = "";
        }
    }

    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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"
        integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</body>
</html>

회원 정보 목록 화면(list.jsp)

<body>

<c:import url="/WEB-INF/fragment/navbar.jsp"/>

<%--div.container>div.row.justify-content-center>div.col-6--%>
<div class="container" style="font-family: 'TTHakgyoansimUndongjangL'">
    <div class="row justify-content-center">
        <div class="col-12 col-xl-6">
            <h3 class="mb-4">회원 목록</h3>
            <%--            table.table.table-striped>thead>tr>th*5--%>
            <table class="table">
                <thead>
                <tr>
                    <th>NO</th>
                    <th>이메일</th>
                    <th>비밀번호</th>
                    <th>닉네임</th>
                    <th>가입일자</th>
                </tr>
                </thead>
                <tbody class="table-group-divider">
                <c:forEach items="${memberList}" var="member" varStatus="status">
                    <c:url value="/member" var="viewMember">
                        <c:param name="id" value="${member.id}"/>
                    </c:url>
                    <tr onclick="location.href='${viewMember}'">
                        <td style="color: blue">
                                ${fn:length(memberList)-status.index}
                        </td>
                        <td>
                                ${member.email}
                        </td>
                            <%--<a href="/member?id=${member.id}}">${member.id}</a>--%>
                        <td>${member.password}</td>
                        <td>${member.nickName}</td>
                        <td>${member.inserted}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>

        </div>
    </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"
        integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

회원 정보 화면 (info.jsp)

<body>

<c:import url="/WEB-INF/fragment/navbar.jsp"/>

<%--div.container>div.row.justify-content-center>div.col-6--%>
<div class="container" style="font-family: 'TTHakgyoansimUndongjangL'">
    <div class="row justify-content-center">
        <div class="col-8">
            <h3 class="mb-4">회원 정보 조회</h3>
            <%--                div*3>label.form-label+input.form-control--%>
            <div class="mb-3">
                <label for="emailInput" class="form-label">이메일</label>
                <input readonly name="email" id="emailInput" type="email" class="form-control"
                       placeholder="E-mail" value="${member.email}">
            </div>
            <div class="mb-3">
                <label for="pwdInput" class="form-label">패스워드</label>
                <input readonly name="password" id="pwdInput" required type="text"
                       class="form-control" value="${member.password}">
            </div>
            <div class="mb-3">
                <label for="nickInput" class="form-label">별명</label>
                <input readonly name="nickName" id="nickInput" required type="text"
                       class="form-control" value="${member.nickName}">
            </div>
            <div class="mb-3">
                <label for="insertedInput" class="form-label">가입일자</label>
                <input readonly name="inserted" id="insertedInput" required type="text"
                       class="form-control" value="${member.inserted}">
            </div>
            <div>
                <button class="btn btn-danger" form="formDelete">삭제</button>
                <a href="/member/modify?id=${member.id}" class="btn btn-primary">수정</a>
            </div>

        </div>
    </div>
</div>


<%--div.d-none>form>input:h[name=id]--%>
<div class="d-none">
    <form action="/member/remove" id="formDelete" method="post" onsubmit="return confirm('탈퇴 하시겠습니까?')">
        <input type="hidden" name="id" value="${member.id}">
    </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"
        integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>

회원 정보 수정 화면(modify.jsp)

<body>
<c:import url="/WEB-INF/fragment/navbar.jsp"/>

<div class="container" style="font-family: 'TTHakgyoansimUndongjangL'">
    <div class="row justify-content-center">
        <div class="col-8">
            <h3 class="mb-4">${member.id}번 회원 정보</h3>
            <form action="/member/modify" method="post"
            ">
            <input type="hidden" name="id" value="${member.id}">
            <div class="mb-4">
                <small style="background-color: beige; color: gray">❌ 이메일과 가입일자는 수정할 수 없습니다.</small>
            </div>

            <div class="mb-3">
                <label for="emailInput" class="form-label">이메일</label>
                <input id="emailInput" class="form-control" value="${member.email}" type="text"
                       aria-label="Disabled input example"
                       disabled>
            </div>
            <div class="mb-3">
                <label for="pwdInput" class="form-label">패스워드</label>
                <input name="password" id="pwdInput" required type="text"
                       class="form-control" value="${member.password}">
            </div>
            <div class="mb-3">
                <label for="pwdCheckInput" class="form-label">패스워드 확인</label>
                <input oninput="pwdCheck()" id="pwdCheckInput" required type="text"
                       class="form-control" value="${member.password}">
                <div class="form-text" id="checkMessage"></div>
            </div>
            <div class="mb-3">
                <label for="nickInput" class="form-label">별명</label>
                <input oninput="pwdCheck()" name="nickName" id="nickInput" required type="text"
                       class="form-control" value="${member.nickName}">
            </div>
            <div class="mb-3">
                <label for="insertedInput" class="form-label">가입일자</label>
                <input readonly name="inserted" id="insertedInput" required type="text"
                       class="form-control" value="${member.inserted}" aria-label="Disabled input example"
                       disabled>
            </div>
            <div class="mb-3">
                <button class="btn btn-secondary">수정</button>
            </div>
            </form>
        </div>
    </div>
</div>

<script>
    function pwdCheck() {
        const pw = document.querySelector("#pwdInput").value;
        const pwCheck = document.querySelector("#pwdCheckInput").value;

        if (pw != pwCheck) {
            document.querySelector("#checkMessage").textContent = "패스워드가 일치하지 않습니다."
        } else {
            document.querySelector("#checkMessage").textContent = ""
        }
    }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"
        integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>

---

화면(view)

회원 가입 화면

• 이메일 중복 확인
  
  

회원 정보 목록 화면

• 목록 번호 처리하는 방법
  
  

회원 정보 화면

회원 정보 수정 화면