쿠키유효성검사
AOP
수요일 게시판 5일
jquery ajax
댓글
6일 휴강
7일
8일 프로젝트 시작
결제API
메인을 가지 않고
그냥 로그인 타이핑해서 들어왔어 /member/login
쿠키 자동로그인
컨트롤러 : 쿠키 배열로 담아놓고 자동로그인이라는게 있으면 로그인 처리 호출. (null, auto, response) null보내고 받는쪽에서 알아서 처리하면 되니까 문제없음
로그인 매개변수(MemberVO member, String auto, HttpServletResponse response);
자동로그인 되면 메인으로 이동
서비스 임플 : 로그인 처리
멤버가 안들어왔다면 객체 생성만. 껍데기만
겟쿠키 동일 작업을 한 다음에
쿠키들에게 id, pw, auto 값을 채워준다. (쿠키가 있으면)
DB가서 id pw 일치하는지 확인 매퍼불러 1 0 결과로 오겠지
임플에 세션 얻어오는 거 메서드로 하나 따로 빼두고 세션 다시 가져와서. 위 idpw일치하면(1이면) memId 있으면 로그인해주고
auto 널 아니면 쿠키 채워진거면 쿠키를 갱신 자동로그인하면 다시 갱신해주는거.
로그인 한적 없으면
로그인해보면
login(memberVO넘어옴, null, response) 임플로 넘어감
마지막에 jsp까지 감.
로그아웃 처리 버튼 누르면(세션, response)같이 던져줌 response던지는 이유 쿠키 같이 지우려고
세션도 지우고,
쿠키 꺼내서 id, pw, auto면
경로도 똑같이 만들고
setMaxAge
addCookie로 다시 보내야. 유효기간 0초로 갱신 (지우는게 없으니까)
메인으로 들어왔을 때 - 쿠키가 있을 수도 없을 수도 있는데
쿠키 있게 보자
로그인 해놓으면 Application > Cookies들이 있음 / 브라우저를 종료한 후 다시 열어서 main들어가보면 로그인된 상태가 됨. 쿠키가 아직 있어서
자동로그인 유효기간만 세팅해주면 알아서 다 처리됨
쿠키는 다른 이유로도 많이 사용
쿠키 생성하는 방법
꺼내쓰는 방법
스프링에서 쿠키를 만드는거아니고 존재하는지 읽고꺼내기 가능 어노테이션. 조금 더 수월해짐
바꿔보기. 컨트롤러만 수정하면 됨.
10:14
쿠키꺼낼 Http서블릿 필요없음 지워주고 대신
@CookieValue(name="cookieAuto", required=false)String cookieAuto
매개변수처럼 하면 쿠키 있는걸 찾아서 값을 변수에 채워줌
코드 간결해짐
쿠키 끝.
유효성 검사 추가
signup.jsp
필수기입요소를 입력했는지, pw pwCh 일치하는지
자바스크립트로 작성
체크할 폼테그에 name 속성추가
return false면 action을막아줌
name="inputForm"
onsubmit="return check()"
로그인
탈퇴
회원정보수정창도 유효성검사 추가
회원가입
아이디 중복확인 검사
이번엔 폼태그를 매개변수로 바로 보내기도 해보자
중복확인 스크립트
팝업도 같이 띄움(open(주소, 이름, 옵션))
요청경로가 왔으니까 컨트롤러에 추가, 팝업 jsp페이지 만들기
닫기 페이지로 바로 적용되게
로직 처리 필요
컨트롤러로 -> DV존재여부 체크해서 view결과 전달
view
이미 사용중인 아이디인지 컨트롤러에서
d
사용하기 누르면 나를 부른 곳(오픈으로 나를 부른 곳: 오프너)으로 아이디 가져가기 스크립트로
ㅇ
jQuery
라이브러리 다운받으면 min버전 = compressed 우측버튼 다른이름으로 저장
cdn방식 복사 붙여넣기 (라이브러리 배치)
jsp파일
해드 부분에
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
바디닫히는 부분에도 가능
테스트 파일 만들어봅세
JQuery 사용 선택자의 사용
스크립태 태그 안에 작성 1. 문서 객체가 준비되면 = ready()함수
$("")안에 문자형데이터로 CSS 선택자 입력
$("선택자").css("스타일속성명","값"); 스타일적용
$("선택자").attr("속성명","값"); 속성적용
document 클래스 변수니까 객체가르키니까 쌍따옴표 없이
$(document).ready(function(){jquery작성}); 콜백함수를 정의. 클래스의 메인메서드같은 격.
2. 즉시함수로 해주기:
$(function(){jquery작성});
둘의 차이 사용한 함수가 뭐냐~~ 다른건 동일
기본선택자 직접선택자
css거랑
jquery함수들... 차이있는것들....
체이닝 기법
배열관련 메서드
$("선택자").each(function(매개변수1,매개변수2){실행코드 또는 $(this)}); 업그레이드포문처럼 / $.each($("선택자),function(){});
실행코드를 넣는 경우 인덱스가 필요한 경우
$(this)넣는 경우 인덱스가 필요 없는 경우
$붙으면 다 jquery
.map메서드 (java의 stream에서 비슷한거 봤는데)
$.map(Array,function(매개변수1,매개변수2){return데이터});
위에거랑 달리 매개변수 데이터부터, 그다음이 인덱스
반복문 다 실행한 후 결과를 배열로 줌
속성탐색자
리스트인데 비져블인애들은?
a태그인데 href있냐, 값이 /member로 시작하는거
$("a[class]")
$("a[href]")
$("a[class=join]")
$("a[href^=/member]") 속성값이 이 값으로 시작하는 요소
$("a[href$=/member]") 속성값이 이값으로 끝나는 요소
$("a[href*=/member]") 속성값에 이 값을 포함하는 요소
$(":text") input태그의 type 속성값이 일치하는 요소
속성 상태에 따라 다른 애들은
$("div:visible/hidden") 상태가 이거인 선택요소
$("선택자:selected") 선택 상태인 요소
$("선택자:checked") 체크된 상태인 요소
****유용한 메서드
is() 상태가 지정 속성과 일치하면 true/false
$("#auto").is(":checked");
get() 인덱스 반환 선택자에 적용하면/ 자바스크립트의 돔방식 스타일애 사용가능
$("div").get(0).style.color="#fff"; div의 0번째 스타일 컬러 설정
jquery는 기본적으로 돔방식 못써 함수를 쓰든지 1:00
has() 요소중 지정요소 포함된것만 선택
$("li").has("span") 스판태그가 들어있는 li만 선택
not() 요소 중 not지정한것만 제외한 선택요소
$("li").not(":first") 첫번째꺼 뺀 list
find() 요소 중 특정 요소를 한 번 더 찾기
$("list").find("strong") 리스트태그 중에서 stroing태그
*******속성 조작 메서드
$("선택자").html() 하위요소를 문자열로 리턴
.html("새요소") 하위요소 모두 지우고 새요소로 바꿈
$("선택자").text() 요소의 텍스트만 가져와
.text("새텍스트") 내용바꾸기
$("선택자").attr("속성명") 속성값 리턴
.attr("속성명","값") 속성의 값 변경, 쉼표... $("a#test").attr("href","https://www.naver.com");
.attr({"속성명":"값", "속성명":"값", ...}); 여러개 일때는 중괄호와 :
$("선택자").removeAttr("속성") 선택 속성을 삭제
$("선택자").css("color") 속성 값을 리턴 red
.css("color","yellow") 속성값 변경 css로 적용
$("선택자").addClass(class값) 클래스값 추가
$("선택자").removeClass("class") 클래스값 삭제
#("선택자").toggleClsse("class값") 토글방식으로 추가 삭제
$("선택자").hasClass("class값") 있으면 true, 아니면false 리턴
$("선택자").val() 인풋태그에서 주로 씀. value속성값을 리턴
.val() value값 새값으로 적용
JQuery
함수매서드들의 묶음 라이브러리라 함수 짱많아
코드를 묶어서 하나의 함수로 만들어놔서 코드가 줄쥐
*****수치조작메서드
매개변수를 지정해주면 그거로 바꿔치기가 됨
height() 패딩(안여백)과 보딩(선두께) 뺀거
height(값)
width()
height(새값)
innerHeight() / innerWidth() 안쪽여백(패딩)포함 높이값/너비값 리턴, 매개변수 주면 수정
outerHeight()/ outerWidth() 선두께와 안쪽 여백 포함, 높이/너비 리턴, 매개변수 주면 지정.
pisision() 요소의 포지션 위치값 x좌표가 내꺼 y좌표는 top
.position().legt;
옵션은 절대값, position은 상대값
.position.left;(x)
.position.top;(y)
offSet 문서기준 수평/수직 떨어져있는 값 .offSet().left; .offset().top;
.scrollLeft() 수평 스크롤 이동값 @(window
scrollTop() 수직 스크롤 이동 값 scrollTop 수직이동 값\
*****객체 편집 메서드() 요소를 객체에 넣고 빼는...
$("선택자").before("새요소"); 선택요소 이전 위치에 새요소를 추가
.after("새요소")
.append("새요소") 선택요소 안에 마지막 위치에 새요소 추가
.prepend("새요소") ~ 맨 위치에 새요소 추가
.clone() 요소를 복제 매개변수 true, false추가시 이벤트까지 복제할지 요소만 복제할지~
.empty() 선택요소에 모든 하위요소를 삭제. 내용물을 비워
.remove() 선택요소를 삭제.
.replaceAll() 선택요소를 새요소로 바꿈
.unwrap() 부모요소를 삭제(랩을 푸는거니까)
.wrap("새요소") 감싸기~
.wrapInner("새요소") 선택요소의 모든 하위요소를 새요소로 감싸기
****이벤트 등록 메서드
이벤트 브라우저에 취하는 모든 행위
이벤트 핸들러 이벤트 발생시 실행되는 코드 /보통 function(){...}으로 많이 넣음
이벤트 등록 메서드 : 동작 일어나면 저장된 핸들러를 실행시키는 일을 함
.click() : 클릭이벤트 등록메서드 그 괄호 안에 function(){..} 넣으면 됨
이벤트 등록 방법1 : 단독으로 이벤트 등록할 때
$("이벤트 대상 선택").이벤트 등록 메서드(function(){ js코드..});
방법2 단독으로 이벤트 등록
$("이벤트 대상 선택").on("이벤트 종류",function(){js코드..});
방법3 그룹 이벤트 등록(2개 이상의 동작에 대한 이벤트 등록 on()
$("이벤트 대상 선택").on("이벤트 종류1, 이벤트종류2",function(){js코드..});코드는 하나
방법4
$("이벤트 대상 선택").on({"이벤트 종류":function(){}, "이벤트종류":function(){}, "이벤트종류 이벤트종류":function(){}, ...});
*****이벤트 제거 메서드
$("이벤트 대상").off("제거할 이벤트 종류");
로딩 이벤트 메서드
사용자가 브라우저에서 html문서 요청, html문서 로딩 완료시 이벤트 핸들러 실행
.ready() : 요청 html문서객체 로딩이 끝나면
.load() : 외부 연동 소스(img, video,... )로딩 끝나면 / 모~~든 소스까지 완료되면
.error() 이벤트 대상요소 오류가 발생하면
아까 본 $(document).ready()
**마우스 이벤트
click()
dbclick()
<a><form> 등 클릭 이벤트 적용시 기본 이벤트를 차단하고 원하는 코드를 실행해서 보내고 싶은 경우
<a> 클릭 시 링크로 이동 기본탑재 / form action 등록 주소로 이동
==> 차단법 1. return false // ja스크립트 signup.jsp 유효성검사에서 썼었지
$("a또는 form").이벤트메서드(function(){ js코드... / return false;}
==> 차단법 2. preventDefaulT()메서드이용
$("a또는 form").이벤트메서드(function(e){ e.preventDefault();/js코드... }
이벤트를발생시킨객체(이벤트 타겟이 되는 애)를 매개변수로 받음
mouseover() 커서 올렸을 때
mouseout() 떠났을 때
hover() 마우스에 올리거나 떠났을 때
mouseenter() 요소아닌 범위 안에 들어갔을 때 경계범위가 넓게 잡을 수 있음
mouseleave() 요소경계범위 벗어난순간
mousemove() 움직일때
mousedown() 마우스누릴때
mouseup() 뗄때
scroll()
**포커스이벤트
마우스로 <a> <input>태그 클릭하거나 tab키 누르면 생성돼
키보트 이벤트와 비슷..
focus() /mouseover랑 같이 설정
blur() 포커스가 나갔을 때 /mouseout이랑 같이
focusin() 대상의 하위요소로 포커스 내려갈때 (부모를 대상으로 걸어줌)
focusout() 나의 하위요소로 있다가 밖으로 이동할 때
* data()함수
html요소에 데이터 저장하고 읽는 함수
개발자도구에서 elements요소로 확인 data-live-doing 변수처럼 씀. 태그에 값을 보관하고싶을 때.. 보관했다가 꺼낼때
ajax....
쉽게 쓸수있어용
저장
${"선택자").data("key","value");
key=문자열
value= object
읽기 삭제
* change()함수
change와 on 동일으로 쓰는 방법도 있음
****키보드 이벤트
***이벤트 발생시킨 요소 추적하는 방법
$(this)
이벤트 핸들러에서 사용하면 이벤트가 발생한 요소를 선택해서 추적가능~~~~
**효과주는 이벤트 (css보다 더 역동적으로 조절)
hide/ fadeOut/ slideUp
show/ fadeIn/ slideDown
toggle/ fadeToggle/ slideToggle/
위에껏들은(소요시간, 가속도, 콜백함수)
fadeTo(소요시간, 투명도, 콜백함수)
소요시간: slow, normal, fast/ 1000(1초), 500(0.5초)
가속도 : swing(천천히-빨리-천천히가 디폴티), linear(일정하게)
콜백함수: 효과 끝나고 실행할 함수(생략가능)
투명도 0~1사이 0일수록투명
w3schools.com > jQuery Selectors/ Events/ Effects/ ...... 문서들 참고
mozilla
이벤트 등록하는 방법. 인라인으로 간단하게. 대신 한줄 매번 다 작성해야 함
js 이벤트 리스너로 할건지
제이쿼리로 function 내부에
태그 이름으로 전부 이벤트 등록
css태그는 마지막게 적용됨
동적으로 브라우저에서 바꿔주는 것.
문서구조상에서는 바뀌는게 아님. 페이지 우클릭 소스로 보면 html문서는 그대로 보임.
라이브러리 쓸 때 동적으로 생성된 태그를 선택할 수 없는 경우가 있다는 것을 참고.
뼈대는 미리 만들어놓는 게 좋음 나중에 채워지도록 처리하고.
셀렉트태그
ajax
jquery안에서 날리는 것
댓글