게시판 만들기 - 리팩토링(자바스크립트 static 폴더로 이동)

테스트

테스트용 폴더 생성

스프링에서 유일하게 외부에서 접근할수 있는 폴더가 static폴더(정적resource폴더)이다.

URL접근이 가능하다 -> 파일명으로 찾을 수있다.

URI-> Controller를 통해서 자원을찾는다. - CV패턴

잘나오는지 확인했으면 a.txt파일은 삭제

 

 

코드리팩토링

static 폴더안에 assets,css,js 폴더를 만들어준다.

 

js폴더 - 오른쪽마우스 - New - Other...

javas검색 - JavaScript File 선택 

 

 

 

서버를 종료하고 users/joinForm.jsp파일의 

<script>내부에 있는 코드들을 ctrl + x(잘라내기)를 한다.

 

조금전에 만든 js/users.js 파일에 Ctrl + v(붙여넣기)를 해준다.

joinForm.jsp파일에서 <script>에 src="/js/users.js" 경로를 넣어줍니다.

 

개발자모드로 확인

Status 상태 코드가 200이면 정상적으로 성공했다는 것이다.

 

나머지loginForm,updateForm도 위와 같은 방식으로 해주면됩니다.

 

________________________________________________________________________________________________

 

Ctrl + x(잘라내기)를 해준다.

 

join(); 함수를 실행해준다.

 

메서드를 만든다.(아래에서 만드는데 코드보기 편하다.)

function join(){}    -  {}안에 위에서 잘라 놓은 코드를 붙여넣어준다.

 

위와 같은 방식으로 나머지JSP에 있던 JS코드들도 메서드화 해준다.

________________________________________________________________________________________________

`를 사용하여 오른쪽 코드로 바꾸어준다.

$문법은  이제 el표현식이 아닌 JavaScript가 이해하는 문법이여서 분리가 되기때문에 사용이 가능하다.

 

 

 

_______________________________________________________________________________________________

전체코드

let isUsernameSameCheck = false;


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

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

$("#btnLogin").click(() => {
	login();
});


$("#btnDelete").click(() => {
	resign();
});

$("#btnUpdate").click(() => {
	update();
});


function join(){
		if (isUsernameSameCheck == false) {
		alert("유저네임 중복 체크를 진행해주세요");
		return;
	}
	// 0. 통신 오브젝트 생성
	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 checkUsername(){
	// 0. 통신 오브젝트 생성 (Get 요청은 body가 없다.)

	// 1. 사용자가 적은 username 값을 가져오기
	let username = $("#username").val();

	// 2. Ajax 통신
	$.ajax(`/users/usernameSameCheck?username=${username}`, {
		type: "GET",
		dataType: "json",
		async: true
	}).done((res) => {
		if (res.code == 1) { // 통신 성공
			if (res.data == false) {
				alert("아이디가 중복되지 않았습니다.");
				isUsernameSameCheck = true;
			} else {
				alert("아이디가 중복되었어요. 다른 아이디를 사용해주세요.");
				isUsernameSameCheck = false;
				$("#username").val("");
			}
		}
	});
}

function login(){
	// 0. 통신 오브젝트 생성
	let data = {
		username: $("#username").val(),
		password: $("#password").val()
	};


	$.ajax("/login", {
		type: "POST",
		dataType: "json", //응답 데이터
		data: JSON.stringify(data), // http body에 들고갈 요청 데이터
		headers: { // http header에 들고갈 요청 데이터
			"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), // http body에 들고갈 요청 데이터(json으로바꾸어서 보낼것이다.)
		headers: { // http header에 들고갈 요청 데이터
			"Content-Type": "application/json; charset=utf-8"
		}
	}).done((res) => { //통신이 끝나면 res로 응답데이터가 날라온다.
		if (res.code == 1) {//update성공
			alert("회원 수정 완료");
			location.reload(); //page새로고침(F5)
		} else {
			alert("업데이트에 실패하였습니다.");
		}
	});
}