(7)블로그만들기 - 자바스크립 코드 리팩토링 해주기(JS 코드 -> JS 파일로 옮기기),메서드화

코드 리팩토링

• resource에 static 폴더를 만들어준다
• 앞으로 여기에 css,js,assets등등 필요한 것 들을 넣어 둔다

View로 보고 싶다면 localohst:8000/assets/"파일명" 으로 찾는다.

1. JS 파일 내부에 JS파일 생성 (User를 다루기 때문에 user 생성)

js - new - other

 

javas - javascript file

 

2. 이제 JSP 내부 JS 코드 -> JS 파일로 모두 옮겨주기 

script 내부 코드들 모두 Ctrl + x

 

<script>에 경로 넣어주기 src = "/js/users.js" 

 

users.js에 붙여넣기

 

서버 실행해 개발자 모드로 확인 하기 

Status 상태 코드가 200이면 정상적이라는 뜻이다.

나머지도 JSP 파일들도 모두 똑같은 방식으로 쭉 실행

---

JS 코드 내부 실행 함수 메서드화 시켜주기 

이 부분을 메서드화 시켜준다.  -> Ctrl + x 

 

잘라서 내부엔 메서드만실행

 

메서드 만들어주기 

가장 아래로 이동해 function 메서드명(){}

{} 내부에 아까 잘라둔 코드를 붙여넣어준다.  

메서드화 까지 끝!

나머지 JSP에 있던 JS 코드들 모두 파일로 빼주고 , 메서드화 하기 

/**
 * 
 */

let isUsernameSameCheck = false;
let isPasswordCheck = false;

// 패스워드 체크 
$("#btnPasswordCheck").click(() => {
	checkPassword();
});


//회원가입
$("#btnJoin").click(() => {
	join();
});

//유저네임 중복체크 
$("#btnUserNameSameCheck").click(() => {
	checkUsername();
});

// 로그인
$("#btnLogin").click(() => {
	login();
});

// 회원 삭제
$("#btnDelete").click(() => {
	resign();
});

// 회원 정보 수정
$("#btnUpdate").click(() => {
	update();
});
// =======================함수============================

// 회원 가입 함수
function join(){
		if (isUsernameSameCheck == false) {
		alert("유저네임 중복 체크를 진행 해주세요");
		return;
	}
	if (isPasswordCheck == false) {
		alert("비밀번호 체크를 진행 해주세요.");
		return;
	}
	let data = {
		username: $("#username").val(),
		password: $("#password").val(),
		email: $("#email").val()
	};
	$.ajax("/join", {
		type: "POST",
		dataType: "JSON",
		data: JSON.stringify(data),
		headers: { 
			"Content-Type": "application/json"
		}
	}).done((res) => {
		if (res.code == 1) {
			location.href = "/loginForm";
		}
	});
}

// 패스워드 체크 
function checkPassword(){
		let passwordCheck = $("#passwordCheck").val();
	let password = $("#password").val();
	if (password == passwordCheck) {
		alert("패스워드가 일치합니다");
		isPasswordCheck = true;
	}
	else {
		alert("패스워드가 일치하지 않습니다.");
		return;
	}
}

// 유저 네임 중복 체크 
function checkUserName(){
		let username = $("#username").val();
	$.ajax("users/usernameSameCheck?username=" + username, { 
		type: "GET",
		dataType: "json", 
		async: true 
	}).done((res) => {
		console.log(res);
		if (res.code == 1) {
			if (res.data == false) {
				alert("아이디 중복 되지 않았습니다.");
				isUsernameSameCheck = true;
			}
			else {
				alert("아이디가 중복 되었습니다. 다른 아이디 사용해주세요")
				isUsernameSameCheck = false;
				$("#username").val("");
			}
		}

	}); 
}

//로그인
function login(){
		let data = {
		username: $("#username").val(),
		password: $("#password").val()
	};

	$.ajax("/login", {
		type: "POST",
		dataType: "JSON",
		data: JSON.stringify(data),
		headers: {
			"Content-Type": "application/json; charset=utf-8"
		}
	}).done((res) => {
		if (res.code == 1) {
			location.href = "/";
		}
		else {
			alert("로그인 실패, 아이디 패스워드를 확인해주세요");
		}
	});
}

// 회원 탈퇴
function resign(){
	let id = $("#id").val();

	$.ajax("/users/" + id, {
		type: "DELETE",
		dataType: "json"
	}).done((res) => {
		if (res.code == 1) {
			alert("회원탈퇴 완료");
			location.href = "/";
		} else {
			alert("회원탈퇴 실패");
		}
	});
}

// 회원 정보 수정
function update(){
	let data = {
		password: $("#password").val(),
		email: $("#email").val()
	};


	let id = $("#id").val();

	$.ajax("/users/" + id, {
		type: "PUT",
		dataType: "json", 
		data: JSON.stringify(data),
		headers: {
			"Content-Type": "application/json; charset=utf-8"
		}
	}).done((res) => {
		if (res.code == 1) {
			alert("회원 수정 완료");
			location.reload(); 
		} else {
			alert("업데이트에 실패하였습니다");
		}
	});
}