[210726월] 오류 처리, 제이쿼리 시작!

오류 처리하기

: 개발자에게는 보이되, 사용자에게는 노출되지 않도록! 

: 모든 오류를 인지하고 처리할 클래스 정의(WebExceptionHandler.java) 

: adevise라는 애노테이션, @ControllerAdvice가 있다. 

: 메소드 정의 : @ExceptionHandler  

 

 

 웹에서 일어나는 모든 이셉션을 처리하는 클래스 정의

사용자들이 작업을 하나 네트워크, 서버에 문제가 있을 경우 

 

@ControllerAdvice 오류를 처리 

: DI 빈이라는 이름으로 생성 

필요로 할때 @AUTOWIRED 생성해 가지고 있던 것을 우리에게 전달 

: 스프링의 주기능: DI, AOP(Aspected object Programming : 기능적 요구사항/ 비기능적 요구사항), 추상화 

AOP는 기능적 요구사항/ 비기능적 요구사항 중 비기능적을 요구사항 따로 분리해서 관리 

 

모델은 사용자를 위한

아래의 printStackTrace는 개발자를 위한 것이다. 

 

 

아래의 노란색 표시줄은 

<META http-equiv=“refresh” CONTENT=“대기시간; URL=웹 문서”>

• 설정해 놓은 시간이 지난 후 지정한 웹 사이트로 이동
• 대기시간 : 초(second) 단위, URL : 이동할 웹 사이트의 웹 문서

 

오류를 발생시키기 위해 일부러

pom.xml 오류나게 해보기? 

존재하지 않는 오류를 발생시키면 오류발생 

 

 

[2교시]

Ajax

jQuery 

 

https://jquery.com/

jQuery

 

용량차이

min 버전은 엔터가 사라져 용량은 적지만 개발자가 읽기 어렵다. 

우리는 용량이 작은 min버전 사용!! 

구동되는지 확인까지 해주기! 

 

창이 잘 열리는 지 확인해주기

 

 

<script>의 위치보다 아래에 있는 것은 구동하지 않기 때문에 하나의 이벤트인 window.onload를 사용

 

window.onload = function(){}는 아래 body부분이 전부 다 실행될 때까지 기다림

②부분 → ①부분 

window.onload로 향할 때는 문서가 로딩이 끝났을 때이다. 

 

onclick을 분리해서 사용하는 것이 좋다.

제이쿼리에서 특히, 그렇지 않을 경우 사용할 수 없기 때문

input 태그 끝에 onclick이 없다는 것이 중요! 

요청 하나가 크다면 화면이 멈춰보인다. 

요청 하나에 서버쪽에서 보내줘야하는 것이 굉장히 많다. 

 

 

주석 처리 ctrl + shift + / 

()가 없으면 속성, 함수가 아니다. 

 

<script src="resources/script/jquery-3.6.0-mins.js">은 자바로 따지면 import이다. 

 

인터넷을 이용중이라면 다운로드 받지 않고 웹에서 받아다 쓰겠다는 것 

 

 

[3교시]

jQuery()

Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.

리턴타입 주의! 

자바스크립트  window.onload

제이쿼리        $(document).ready(function(){})

 

아래 두개는 같은 표현이지만 편의를 위해 

$(function(){})
$(document).ready(function(){})

 

$(function(){})를 사용한다. 

 

Cache란 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소

이미지 2개 가져오기 

 

 

속성에 대한 값을 가져오고 싶을 때 attr 

jsp에 딱 하나있는 img는 아이디가 없어도 사용 가능하다. 

attr과 같은 경우는 속성을 가져오는 것이다. 

 

let data라는 변수가 필요없는 이유는 $("img").attr("src", "resources/images/flower.png");

"src" 소스를 가져다가 "resources/images/flower.png"로 바꾸겠다는 것이다. 

 

 

전달인자가 하나일 때는 read,

전달인자가 두개일 때는 read, write 

 

 

$("img").attr("src", "resources/images/pig.png");

소스를 가져다가 돼지로 넣는 것 (두개일 경우는 적용) 변수를 사용하지 않아도 된다. 

 

클릭하면 돼지로 바뀜 

 

div p : 후손 

div > p : 자식 

ul + p : 형제

ul ~ table : 모든 

 

리턴해주는 것이 제이쿼리라면 입히고 입히고 입히고 또 입히고 

리턴타입이 제이쿼리면 제이쿼리 객체를 적용시킬 수 있다. 

 

 

 

 

제이쿼리의 셀렉터와 css의 셀렉터는 동일하다. 

 

참고 

https://www.w3schools.com/cssref/default.asp

CSS Reference

 

 

https://www.w3schools.com/cssref/trysel.asp?selector=p:first-of-type 

Try CSS Selector

 

 

div p : 후손 

div > p : 자식 

ul + p : 형제

ul ~ table : 모든 

 

아래의 빨간 색 표시선은 필수! 기억해두어야 함