justBoard7 member 마무리, board 준비

organize/프로젝트

justBoard7 member 마무리, board 준비

001cloudid 2024. 9. 26. 10:42

728x90

남은 작업은

member
회원수정
회원탈퇴
board
글 목록
페이지처리
검색
글 생성
글 삭제
글 수정
글 조회

작업을 시작하기 전

원래 내가 이 프로젝트를 혼자서 하는 이유에 대해서 정리하고자 함.

데이터
데이터의 흐림 이해
원하는 데이터를 어떻게 DB에서 들고 올 것인가/어떻게 DB에 넣을 것인가
데이터를 어떻게 처리할 것인가
객체, 어노테이션
교육받을 때 팀 프로젝트 때는 여유 없이 객체, 어노테이션이 어떻게 쓰이는지 자세히 알고 지나가지 않아 여유롭게 잘 알고 지나가기 위함

크게 2가지로 나눌 수 있는데 어느 순간 그건 모르겠고 마무리 지어야 해라는 생각으로 하고 있었나 봄.

목표는 충분히 고민하고 혼자서 해답을 찾을 수 있는 검색 능력과 이해하기이다.

이유와 목표를 다시 정리했으니 이제 다시 프로젝트를 시작해 보자

내 정보 확인에서 비밀번호를 올바르게 작성했다면 마이페이지로 넘어간다.

위의 사진과 같이 id가 보이지 않는다. id의 경우 readonly로 되어 있기 때문에 문제가 생긴다.

session이 남아있기 때문에 mypage.jsp에

<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>

작성해 주면 된다.

회원 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"><br> <%-- 한글, 영문만 입력 가능 --%>
<sub>회원 수정은 비밀번호와 이름을 바꿀 수 있습니다.<br>
'비밀번호'를 변경하기 위해서는 변경할 비밀번호와 변경할 비밀번호 재확인을 입력하고 이름도 입력해주길 바랍니다.</sub><br>
<a href="${pageContext.request.contextPath }/member/updatePro"><button>수정</button></a>
<a href="${pageContext.request.contextPath }/member/deletePro"><button>탈퇴</button></a>
<a href="${pageContext.request.contextPath }/"><button>돌아가기</button></a>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

이렇게 작성하고 나니 form태그도 없는데 수정할 때 데이터가 넘어갈까?라는 의문이 들어 검색해 보았다.

가능한데 자바스크립트를 이용해 야한 다고 한다.

그렇다면 form태그를 2개 사용하는 방법은 될까? 거기에 대한 답변은 https://okky.kr/questions/796732 여기서 확인할 수 있었다.

그렇다면 어떻게 어떤 방식으로 회원탈퇴와 회원수정을 한 화면에서 처리할 수 있을까에 대해 검색해 보니 가장 마음에 드는 답변을 찾았다. https://developerjm.tistory.com/23 form태그 하나에 두 개 이상의 submit 버튼으로 각기 다른 요청을 보내는 방법이다. formaction이라는 속성은 한 번도 사용해보지 않아서 어떻게 될지 모르겠지만 한 번 도전해 보기로

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<form method="post">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"><br> <%-- 한글, 영문만 입력 가능 --%>
<sub>회원 수정은 비밀번호와 이름을 바꿀 수 있습니다.<br>
'비밀번호'를 변경하기 위해서는 변경할 비밀번호와 변경할 비밀번호 재확인을 입력하고 이름도 입력해주길 바랍니다.</sub><br>
<button type="submit" formaction="${pageContext.request.contextPath }/member/updatePro">수정</button>
<button type="submit" formaction="${pageContext.request.contextPath }/member/deletePro">탈퇴</button>
</form>
<a href="${pageContext.request.contextPath }/"><button>돌아가기</button></a>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

MemberController

	@PostMapping("member/updatePro")
	public String updatePro(MemberDTO memberDTO) {
		System.out.println("MemberController updatePro()");
		memberService.update(memberDTO);
		return "redirect:/";
	}

MemberService

	public void update(MemberDTO memberDTO) {
		System.out.println("MemberService update()");
		memberDAO.update(memberDTO);
	}

MemberDAO

	public void update(MemberDTO memberDTO) {
		System.out.println("MemberDAO update()");
		sqlSession.update(namespace+".update", memberDTO);
	}

memberMapper

	<update id="update">
		update `member`
		set pw = #{pw}
		where id=#{id}
	</update>

id가 d인 회원의 비밀번호를 바꿔보자

성공적으로 바뀐 것을 알 수 있다.

회원탈퇴

MemberController

	@PostMapping("member/deletePro")
	public String deletePro(MemberDTO memberDTO, HttpSession session) {
		System.out.println("MemberController deletePro()");
		memberService.delete(memberDTO);
		session.invalidate();
		return "redirect:/";
	}

MemberService

	public void delete(MemberDTO memberDTO) {
		System.out.println("MemberService delete()");
		memberDAO.delete(memberDTO);
	}

MemberDAO

	public void delete(MemberDTO memberDTO) {
		System.out.println("MemberDAO delete()");
		sqlSession.update(namespace+".delete", memberDTO);
	}

memberMapper

	<delete id="delete">
		delete from `member`
		where id=#{id}
	</delete>

test라는 아이디를 생성 → 삭제

큰 틀은 만들어 놓았다. 이제 사소하지만 중요한 것들을 생각해 보면

mypage에서 유효성 검사가 빠짐.
→ 어제 작성한 회원가입 시 비밀번호가 틀리면 페이지가 안 넘어가게 하면 됨
mypage에서 이름이 회원가입 했을 때 이름과 달라도 회원수정, 탈퇴가 될 것
→ 로그인할 때 session에 name을 추가하면 될 것
http://localhost:8080/justboard/member/check 이 페이지를 주소창에 작성하면 들어가 짐
→ 로그인되지 않았을 때는 접근 못하게 제어
join에서 아이디 중복확인
→ ajax를 이용해서 아이디 중복확인. 아이디 중복 시 회원가입 불가
inc 사이드바 수정
→ 현재 게시판, 내 정보가 있는데 이를 그냥 홈 화면으로 수정하고 클릭 시 main으로 이동

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<form method="post">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"><br> <%-- 한글, 영문만 입력 가능 --%>
<sub>회원 수정은 비밀번호와 이름을 바꿀 수 있습니다.<br>
'비밀번호'를 변경하기 위해서는 변경할 비밀번호와 변경할 비밀번호 재확인을 입력하고 이름도 입력해주길 바랍니다.</sub><br>
<button type="submit" onclick="return passwordPass()" formaction="${pageContext.request.contextPath }/member/updatePro">수정</button>
<button type="submit" onclick="return passwordPass()" formaction="${pageContext.request.contextPath }/member/deletePro">탈퇴</button>
</form>
<a href="${pageContext.request.contextPath }/"><button>돌아가기</button></a>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
<script type="text/javascript">
function passwordPass(){
	var pw = document.getElementById("pw");
	var pw2 = document.getElementById("pw2");
	
	if(pw && pw2){
		var pass = pw.value;
		var passConfirm = pw2.value;
		
		if(pass !== passConfirm){
			alert("비밀번호가 일치하지 않습니다.");
			pw.focus();
			return false;
		}
	}
	return true;
}
</script>
</body>
</html>

form 태그 안에 onClick 속성을 넣으니 비밀번호 입력란에 비밀번호를 입력하고 포커스를 이동할 때마다 알림 창이 떠서 버튼에 onClick 속성을 넣으니 문제없이 잘 됨!

이름을 아무렇게나 작성하고 해도 문제없이 비밀번호가 수정됨. 2번에서 수정해 보자

MemberController 일부

	/* 로그인 → 회원 확인 */
	@PostMapping("/loginPro")
	public String loginPro(MemberDTO memberDTO, HttpSession session) {
		System.out.println("MemberController loginPro()");
		MemberDTO memberDTO2 = memberService.userCheck(memberDTO); //폼에서 입력받은 데이터가 존재하는지 확인
		
		if(memberDTO2 != null) {
			session.setAttribute("id", memberDTO2.getId());
			session.setAttribute("name", memberDTO2.getName());
			return "redirect:/";
		} else {
			return "member/loginmsg";
		}
	}

mypage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<form method="post">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" value="${sessionScope.name}" required="required"><br> <%-- 한글, 영문만 입력 가능 --%>
<sub>회원 수정은 비밀번호를 바꿀 수 있습니다.<br>
'비밀번호'를 변경하기 위해서는 변경할 비밀번호와 변경할 비밀번호 재확인을 입력해주길 바랍니다.</sub><br>
<button type="submit" onclick="return passwordPass()" formaction="${pageContext.request.contextPath }/member/updatePro">수정</button>
<button type="submit" onclick="return passwordPass()" formaction="${pageContext.request.contextPath }/member/deletePro">탈퇴</button>
</form>
<a href="${pageContext.request.contextPath }/"><button>돌아가기</button></a>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
<script type="text/javascript">
function passwordPass(){
	var pw = document.getElementById("pw");
	var pw2 = document.getElementById("pw2");
	
	if(pw && pw2){
		var pass = pw.value;
		var passConfirm = pw2.value;
		
		if(pass !== passConfirm){
			alert("비밀번호가 일치하지 않습니다.");
			pw.focus();
			return false;
		}
	}
	return true;
}
</script>
</body>
</html>

MemberController

	@GetMapping("member/check")
	public String check(HttpSession session) {
		System.out.println("MemberController check()");
		
		if(session.getAttribute("id")==null) {
			return "/member/loginmsg2";
		}
		return "/member/check";
	}

loginmsg2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<body>
<script type="text/javascript">
	alert("로그인을 해주세요.");
	history.back(); //뒤로 이동
</script>
</body>
</html>

로그인을 하지 않고 주소를 입력했을 때는 위와 같이 경고창이 뜬다.

여기서 Redirect와 Forward 차이를 한 번 살펴보고 가자

redirect : 클라이언트가 새로운 요청을 보내게 한다. URL이 변경되며, 브라우저에서 새로운 요청을 함
forward : 서버 내에서 요청을 다른 JSP로 전달. URL은 변경되지 않음

문법이 엄격한 자바에 비해 자바스크립트는 아주 자유롭다 못해 내가 IDE에서는 코드를 작성해도 문법 오류를 알려주지 않으니 이게 외않되? 하며 페이지 검사를 하게 한다. 중괄호, 소괄호 누락된 거 찾는 것보다 다시 작성하는 게 더 편할 정도로 괄호를 많이 쓴다.

먼저 AJAX(에이잭스, 아잭스, 아작스,... 나는 에이잭스라고 읽긴 하는데) 이에 대해 알아보자

AJAX는 Asynchronous JavaScript And Xml의 약자이다. 가장 쉽게 이해하기 좋은 게 웹 광고이다.

사진에서 원을 쳐놓은 부분은 시간이 지나면 다른 광고로 바뀐다. 즉 화면 전환 없이 일부만 바뀌는 것이 AJAX이다.

뜻을 살펴보면 비동기적인 웹 애플리케이션 제작을 위해 웹을 개발하는 기법이다.

장점과 단점을 살펴보면

장점으로는 페이지 이동 없이 화면 전환이 가능하고, 서버 처리를 기다리지 않고 비동기 요청이 가능하다.

단점으로는 AJAX를 사용하지 못하는 브라우저가 있으며, http 클라이언트의 기능이 한정되어 있고, 보안상의 문제가 있다는 점을 들 수 있다.

좀 더 자세한 설명은 위키백과 ajax를 참고하면 좋을 것 같다.

AJAX의 문법에 대해 알아보자

$.ajax({
    type : '', // get, post 등을 지정
    url : '/url', // 대상 URL을 지정
    async : true, // 비동기화 여부(생략 시 true가 기본값)
    dataType : 'text', // html, xml, json, text 등등
    data : JSON.stringify({ // 보낼 데이터 (Object , String, Array)
    }),
    success : function(result) { // 성공 시
        console.log(result);
    },
    error : function(request, status, error) { // 에러 시
        console.log(error)
    }
})

jquery를 사용할 jsp에

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> //url을 입력해서 사용할 경우
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script> //파일을 넣어 준 경우

이를 작성해줘야 사용할 수 있다.

jquery의 핵심 기능 중 하나가 ajax이다. jquery를 사용하면 ajax요청을 간편하게 생성하고 처리할 수 있다.

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	width: 200px;
	height: 30px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post" id="join" onsubmit="return formCheck()">
<div class="formstyle">
<input type="text" name="id" id="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<div class="validation"></div> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

<script type="text/javascript">
<%-- 아이디 중복확인 --%>


<%-- 비밀번호와 비밀번호 재확인 --%>
function passwordPass() {
    var pw = document.getElementById("pw");
    var pw2 = document.getElementById("pw2");

    if (pw && pw2) {
        var password = pw.value;
        var confirmPassword = pw2.value;

        if (password !== confirmPassword) {
            alert("비밀번호가 일치하지 않습니다.");
            pw2.focus(); // 비밀번호 재확인 필드에 포커스
            return false; // 검증 실패
        }
    }
    return true; // 검증 성공
}

<%-- 정규표현식(RegExp). RegExp() : 정규표현식 표시 함수. RegExp(/정규표현식내용/) --%>
function regExp() {
    var id = document.getElementById("id");
    var idRegExp = /^[a-z0-9]{2,20}$/; // 영소문자 + 숫자가 하나 이상 포함되며 2~20자

    if (!idRegExp.test(id.value)) {
        alert("아이디 형식은 영소문자, 숫자로만 가능하며 2~20자까지 가능");
        id.focus(); // 아이디 필드에 포커스
        return false; // 검증 실패
    }
    return true; // 검증 성공
}

function formCheck(){
    var validId = regExp();
    var validPw = passwordPass();

    if(validId && validPw) {
        return true; // 모든 검증 통과, 폼 제출
    } else {
        alert("형식에 맞게 작성해주세요");
        return false; // 검증 실패, 폼 제출 중지
    }
}

$(function(){
    $('#id').on('blur', function() { // 'id' 입력 필드에 blur 이벤트 추가
        $.ajax({
            url : '${pageContext.request.contextPath}/member/idCheck',
            data : {'id': $('#id').val()}, // $('.id')에서 $('#id')로 수정
            success : function(result){
                if(result == "iddup"){
                    result = "이미 사용 중인 아이디입니다.";
                    $('.validation').css("color", "red");
                } else {
                	result = "사용이 가능한 아이디입니다.";
                    $('.validation').css("color", "green");
                }
                $('.validation').html(result); // 결과 메시지를 표시
            }
        });
    });
});

</script>
</body>
</html>

MemberController

	/* 아이디 중복확인 */
	@GetMapping("member/idCheck")
	public String idCheck(MemberDTO memberDTO, HttpServletResponse response){
		System.out.println("MemberController idCheck()");
		MemberDTO memberDTO2 = memberService.idCheck(memberDTO.getId());
		String result = "";
		if(memberDTO2!=null) {
			result = "iddup";
		} else {
			result = "idnotdup";
		}
		System.out.println(result);
		return result;
	}

MemberService

	public MemberDTO idCheck(String id) {
		System.out.println("MemberService idCheck()");
		return memberDAO.idCheck(id);
	}

MemberDAO

	public MemberDTO idCheck(String id) {
		System.out.println("MemberDAO idCheck()");
		return sqlSession.selectOne(namespace+".idCheck", id);
	}

memberMapper

	<select id="idCheck" resultType="com.mystory001.domain.MemberDTO">
		select * 
		from `member`
		where id = #{id}
	</select>

30분간 이거 고쳐보고 저거 고쳐보고 했는데 문제를 발견했다. 문제는 Controller에서 @ResponseBody 어노테이션을 빼먹고 왜 안될까 하면서 바보같이 고민했다는 것이다.

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	width: 400px;
	height: 30px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post" id="join" onsubmit="return formCheck()">
<div class="formstyle">
<span class="validation"></span> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="text" name="id" id="id" class="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

<script type="text/javascript">
<%-- 아이디 중복확인 --%>
$(function() {
    $("#id").on('blur', function() {
        $.ajax({
            url: '${pageContext.request.contextPath}/member/idCheck',
            data: {'id': $('.id').val()},
            success: function(result) {
                var message;
                if (result == "iddup") {
                    result = "이미 사용 중인 아이디입니다.";
                    $('.validation').css("color", "red");
                } else {
                	result = "사용이 가능한 아이디입니다.";
                    $('.validation').css("color", "green");
                }
                $('.validation').html(result);
            }
        });
    });
});

<%-- 비밀번호와 비밀번호 재확인 --%>
function passwordPass() {
    var pw = document.getElementById("pw");
    var pw2 = document.getElementById("pw2");

    if (pw && pw2) {
        var password = pw.value;
        var confirmPassword = pw2.value;

        if (password !== confirmPassword) {
            alert("비밀번호가 일치하지 않습니다.");
            pw2.focus(); // 비밀번호 재확인 필드에 포커스
            return false; // 검증 실패
        }
    }
    return true; // 검증 성공
}

<%-- 정규표현식(RegExp). RegExp() : 정규표현식 표시 함수. RegExp(/정규표현식내용/) --%>
function regExp() {
    var id = document.getElementById("id");
    var idRegExp = /^[a-z0-9]{2,20}$/; // 영소문자 + 숫자가 하나 이상 포함되며 2~20자

    if (!idRegExp.test(id.value)) {
        alert("아이디 형식은 영소문자, 숫자로만 가능하며 2~20자까지 가능");
        id.focus(); // 아이디 필드에 포커스
        return false; // 검증 실패
    }
    return true; // 검증 성공
}

function formCheck(){
    var validId = regExp();
    var validPw = passwordPass();

    if(validId && validPw) {
        return true; // 모든 검증 통과, 폼 제출
    } else {
        alert("형식에 맞게 작성해주세요");
        return false; // 검증 실패, 폼 제출 중지
    }
}

</script>
</body>
</html>

MemberController

	/* 아이디 중복확인 */
	@GetMapping("member/idCheck")
	@ResponseBody
	public String idCheck(MemberDTO memberDTO, HttpServletResponse response){
		System.out.println("MemberController idCheck()");
		MemberDTO memberDTO1 = memberService.idCheck(memberDTO.getId());
		String result = "";
		if(memberDTO1!=null) {
			result = "iddup";
		} else {
			result = "idOk";
		}
		System.out.println(result);
		return result;
	}

@ResponseBody : 웹 응답 본문에 바인딩해야하는 메소드 반환값을 나타내주는 어노테이션. 서블릿 환경에서 주석이 있는 핸들러 메소드에 대해 지원. 스프링 비동기 통신, API 통신을 구현하기 위한 어노테이션.

클라이언트 → 서버 요청 : @RequestBody : json 기반의 Http Body를 자바 객체로 변환

서버 → 클라이언트 응답 : @ResponseBody : 자바 객체를 json 기반의 Http Body로 변환

참고 : https://velog.io/@nomonday/Spring-RequestBody-ResponseBody-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

읽어보기 : https://findmypiece.tistory.com/191

웹 개발자 도구 Network에서 볼 수 있는 내용들이다. 사실 Elements, Console, Sources는 자주 봤지만 이 곳은 처음 자세히 보는데 이곳에 대한 내용도 한 번 정리해야 할 것 같다.

웹 개발자 도구 Network 탭

웹 페이지가 서버와 통신하는 모든 요청과 응답을 모니터링 할 수 있다.

Name
요청한 리소스의 이름이나 경로를 나타냄. 일반적으로 URL이 표시
Status
서버가 요청을 처리한 결과로 반환한 HTTP 상태 코드를 표시. 각 상태 코드는 각각의 의미를 가지고 있음
200 : 성공적으로 처리됨
404 : 요청한 리소스를 찾을 수 없음
500 : 서버 오류
Type
요청한 리소스의 유형을 나타냄. 일반적으로 MIME 타입이나 리소스의 종류를 보여줌
Document : HTML 문서
Script : 자바스크립트 파일
XHR : XMLHttpRequest의 약자. Ajax 요청을 뜻함
Image : 이미지 파일
Initiator
요청을 시작한 원인을 나타냄. 일반적으로 요청을 트리거한 스크립트나 리소스를 보여줌
Size
요청한 리소스의 크기를 바이트 단위로 표시. 서버에서 반환된 데이터의 크기를 나타냄
Time
요청이 완료되기까지 소요된 시간을 ms로 표시. 요청과 응답의 전체 시간을 나타냄
Waterfall
요청의 타이밍을 시각적으로 나타낸 그래프. 요청이 발생한 시점, 응답을 받기까지의 대기 시간, 데이터가 다운로드 되는 시간 등을 보여줌

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.sidebar{
	float : left;
	width: 200px;
	height: 500px;
}
</style>
<body>
<div class="sidebar"> <%-- sidebar 영역 div --%>
<ul>
<li><a href="${pageContext.request.contextPath }/">홈 화면</a></li> 
</ul>
</div> <%-- sidebar 영역 div --%>
</body>
</html>

다음과 같이 board와 관련된 클래스와 xml을 만들어 놓고 시작

main.jsp에

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="inc/top.jsp" />

<jsp:include page="inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시물 목록</h1>
<table border="1">
<tr>
	<th>번호</th><th>제목</th><th>작성자</th><th>작성일</th>
</tr>
<%-- 게시글 목록 --%>
</table>
<%-- 페이지 목록 10개씩 10개의 페이지 --%>
<form method="get">
 <input type="text" name="search" value="검색">
 <input type="submit" value="검색하기">
 </form>
<%-- 로그인이 되어 있을 때만 버튼이 보이게--%>
<c:if test="${! empty sessionScope.id }">
	<a href="${pageContext.request.contextPath }/board/insert"><button>글쓰기</button></a>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

이와 같이 만들어 놓고 글이 작성될 때마다 th아래 번호로 내림차순으로 글의 목록이 쌓이게 구현할 것

728x90

'organize > 프로젝트' 카테고리의 다른 글

justBoard9 (1)	2024.09.29
justBoard8 게시판 클래스 작업 (0)	2024.09.28
justBoard6 member (2)	2024.09.25
justBoard5 화면(view)2 (0)	2024.09.24
justBoard4 화면(view)1 (0)	2024.09.23

현재글justBoard7 member 마무리, board 준비

001cloudid