20230802 _[43일차]_01. jquery + json 으로 ID 중복검사

국비과정

20230802 _[43일차]_01. jquery + json 으로 ID 중복검사

phyho 2023. 8. 2. 14:48

넥스트 스크립트(nextjs) : React로 만드는 서버사이드 렌더링 프레암 워크

타입 스크립트 : 데이터 타입을 선언 (정적타이핑 언어)

=> 자바스크립트로 바꿔준 후(컴파일필요) 사용가능

바닐라 스크립트 (= 순수자바스크립트)

[ join.jsp ]

<body>
<%@ include file = "menu.jsp" %>

	<form action="./join" method="post" >
		<div class="joinBox">
	

		<h1>회원가입</h1>
		
			<div class="idBox">
				<input type="text" name="id" id="id" placeholder="아이디" > 
				<button id="idCheck">중복검사</button>
			</div>
			<span id="resultMSG">중복검사메세지</span>
			
			<div class="pwBox1">
				<input type="text" name="pw1" id="pw1" placeholder="비밀번호" >
			</div>
			<div class="pwBox2">
				<input type="text" name="pw1" id="pw2" placeholder="비밀번호확인" >
			</div>
			<div class="nameBox">
			<input type="text" name="name" id="name" placeholder="이름" >
			</div>
			<div class="addrBox">
			<input type="text" name="addr" id="addr" placeholder="주소" >
			</div>
			
			<div class="selectBox"> 
				<div class="selectText">성별</div>
				<label for="male">남자</label>
	    		<input type="radio" name="gender" id="male" value="1" />
	    		<label for="female">여자</label>
	    		<input type="radio" name="gender" id="female" value="0"/>
			</div>
			
			<div class="birthBox"> 
				<div class="birthText">생년월일</div>
				<input type="date" name="birth" id="birth">
			</div>
			
			<div class="mbtiBox">
				<div class="mbtiText">MBTI</div>
				<select name="mbti" id="mbti">
					<option>선택</option>
					<optgroup label="대문자 E">
						<option value="ESTP">ESTP</option>
						<option value="ESTJ">ESTJ</option>
						<option value="ESFP">ESFP</option>
						<option value="ESFJ">ESFJ</option>
						<option value="ENFP">ENFP</option>
						<option value="ENFJ">ENFJ</option>
						<option value="ENTP">ENTP</option>
						<option value="ENTJ">ENTJ</option>
					</optgroup>
					<optgroup label="대문자 I">
						<option value="ISTJ">ISTJ</option>
						<option value="ISTP">ISTP</option>
						<option value="ISFJ">ISFJ</option>
						<option value="ISFP">ISFP</option>
						<option value="INTJ">INTJ</option>
						<option value="INTP">INTP</option>
						<option value="INFJ">INFJ</option>
						<option value="INFP">INFP</option>
					</optgroup>
				</select>
			</div>
			
			<div class="btnBox1">
				<button type="submit" class="Jbtn">가입하기</button>
			</div>
			<div class="btnBox2">
				<button type="reset" class="Cbtn">취소</button>
			</div>
		
		</div>
	</form>

</body>
</html>

* jquery 함수 사용해보자 *

아이디 입력창에 값을 입력하고 중복검사 버튼 누르면 id 를 콘솔에 출력

(입력창의 value를 id라는 변수에 넣어줌)

입력값의 길이도 출력해보면

입력한 값의 길이도 출력 (공백포함)

id 입력값의 공백 및 글자수 체크

입력값이 공백이거나, 입력값의 길이가 5 미만이면

id 입력창 아래에 해당 문구출력

jquery 문법으로 지정해줄 때 아래처럼 콤마로 연결해서 한꺼번에 적용해줄 수 있음

$("#resultMSG").css("color", "red").text("아이디는 5글자 이상이어야 합니다.");

id 입력창 아래 출력되는 문구의 css를 jquery 를 이용해서 지정해줌

동기식(Sync) vs 비동기식(Async)

요청과 응답이 동시에 요청에 대한 응답순서가 보장되지 x

보통 회사들은 비동기 방식을 많이 요청한다.

비동기식 => 댓글창 생각하면 된다.

전체페이지를 다시 로딩하는게 아니라 댓글창 부분만 변경 (빠른 변화 & 적은 데이터 소모 )

대신 코드가 어렵고 복잡, 요청에 대한 응답이 뒤죽박죽 될 수 있음

이러한 비동기 통신을 위한 대표적인 기술이 AJAX

( HTML, XML, JSON 등의 다양한 형식의 데이터를 주고받는다.)

우리는 JSON으로 해볼 예정

🌐 웹의 비동기(Async) / 동기(Sync) 통신 정리 (tistory.com)

🌐 웹의 비동기(Async) / 동기(Sync) 통신 정리

웹에서의 비동기와 동기 웹 개발을 하다보면 비동기(Async)와 동기(Sync)라는 용어를 자주 접하게 될 것이다. 이 두 용어는 웹에서 데이터를 주고받는 방식을 설명하는데 사용되는데, 동기(Sync)는

inpa.tistory.com

Ajax 사용해보자

id입력 조건문을 통과하면 ajax 실행

success 에서 받아오는 매개변수 data 는 서버에서 날아오는 데이터값을 의미한다. 그냥 data라는 변수로 받아준거

이제 LoginController 에 가서 입력데이터를 서버로 보내보자

@PostMapping

checkID () 메소드실행> 매개변수로는 id 를 가져갈건데

"id" 라는 이름의 값을 가져와서 (input창의 name) id라는 string 변수에 넣어줌

값을 잘 가져오는지 id를 콘솔창에 출력해보자

그런데 실패시 결과값 : 이 뜬다.... (에러인 경우 뜨는 문구)

@ResponseBody

jsp 파일이 아니라 리턴값을 바로 받아올거라 위에꺼로 선언.이게 없으면 무조건 jsp를 호출한다.

다시말하면 return 값이 "1"인데 jsp가 리턴되는 상황이니 "1" 이 리턴되도록 해주자.

조건문 만들어서 입력한 id가 pororo 또는 poseidon 이면 1을 리턴 / 아니라면 0을 리턴

이게 비동기식 방법 (전체 jsp 페이지가 아닌 아래 일부만(span 부분만) 변경된다.)

@RequestBody

@ResponseBody

xml이나 json 요청에서 유용하게 사용

HTTP 요청 < = > 자바 객체

매핑해주는 역할

https://cheershennah.tistory.com/179

[Spring] @RequestBody / @ResponseBody 어노테이션 이란?

스프링에서 비동기 처리를 하는 경우 @RequestBody , @ResponseBody를 사용한다. 비동기 처리를 위해 이 어노테이션들은 어떻게 작동할까? 클라이언트와 서버의 비동기 통신 클라이언트에서 서버로 통

cheershennah.tistory.com

서비스에게 checkID() 메소드로 일을 시켜 받은 값을 result 에 저장

( id값을 db값과 비교해서 일치하는 값의 count를 가져올거라 result 타입은 int)

서비스에서는 DAO 한테 checkID() 메소드로 일을 시켜.

~~매개변수로 id를 보내야하는데 빠뜨려서 오류가 났었다.~~

DAO에서는 mapper 에게 sql 실행시켜

selectOne () 메소드로 값을 받아옴 (받을값이 하나)

mapper에서는 입력한 id 와 db에 저장된 id (m_id) 를 비교해서 일치하는 값의 count를 가져오는 쿼리문 실행

parameterType = "String" // resultType = "Integer"

result 값이 제대로 오는지 콘솔에 출력해보자

아래처럼 입력한 id가 db에 있으면 리턴값이 1이 출력된다.

result (int타입) 값에 "" (string타입)을 붙여서 최종적으로 string 타입으로 리턴되도록 만들어줌

결과값은

1 (입력아이디 => db에있음)

또는

0 (입력아이디 => db에 없음)

[ join.jsp ]

결과값이 1이면 "이미 등록~ " 문구가 뜨고

결과값이 0이면 "가입 가능 ~" 문구가 뜨게 해줌

if문 안에 data == 1로 해줘야 else 부분으로 넘어간다. 오류났었다.

입력한 id가 중복이라면

입력한 id가 db에 없는 id라면

중복되는 id면 입력창 빨간색으로 설정해주고

focus() 로 커서도 id 입력창에 위치하도록 만들어줬다.

오류를 발생시켜보자

아래처럼 error 함수가 실행되어서 설정해준 오류문구가 뜬다.

JSON (JavaScript Object Notation)

https://www.json.org/json-ko.html

JSON

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1

www.json.org

JSON 형식의 object는 name(key) / value 쌍들의 비순서화된 SET