자바스크립트 vs 제이쿼리
자바스크립트
웹 페이지를 동적으로 표현해주는 언어
예시) 경고창 & 확인창 & drop다운 기능 & 탭 기능 등
제이쿼리
자바스크립트를 더 간편하게 사용하게 해주는 자바스크립트 라이브러리이다
Jquery를 사용하면 순수 자바스크립트로 코딩하는 것보다 높은 생산성을 기대할 수 있다
✅ 제이쿼리의 장점
1️⃣ 태그를 선택자로 한번에 선택하는 강력한 방법을 제공
2️⃣ 선택자로 선택한 태그를 제어하는 강력한 기능을 제공
Jquery를 사용하는 방법에는 2가지가 있는데 우리 수업은 직접 다운로드를 해서 사용했다
👩💻다운로드 해서 적용하는 방법은 다음과 같이 하면 된다!
1️⃣ 구글창에 Jquery를 검색해서 홈페이지로 들어간다
2️⃣ 홈페이지에 들어가서 메뉴에 있는 다운로드를 누른다
3️⃣ 빨간색으로 체크해 놓은 파일을 선택한다
4️⃣ 그럼 다음과 같은 파일이 나올 텐데, 오른쪽 마우스 버튼을 눌러서 다른 이름 저장을 한다 ( 무서워하지 말 것..분석하라고 안 시키니까ㅎ 나는 보자마자 기겁함.. )
5️⃣ 그리고 Jquery 폴더를 하나 생성한 다음 그 폴더 안에 vscode파일을 하나 복사해서 가져온다 ( JS 수업할 때 썼던 폴더에서 갖고 왔다 )
6️⃣ visual studio를 켜서 [File] - [Open Folder] - [jquery] 선택하고 js라는 폴더 만들고 그 안에 아까 다운받은 제이쿼리를 넣어주면 끝! ( 제이쿼리 환경설정 완😉)
👩💻이제 본격적으로 제이쿼리 문법을 알아보자
1️⃣ 선택자 $(선택자)
$ ( "#태그 아이디" )
$ ( ".태그 클래스" )
$ ( "요소[속성=값]" ) 예시) $ ( "a [ href = # ]" )
$ ( this )
2️⃣ 값 확인, 값 변경 val ( )
$("선택자").val ( )
$("선택자").val ( 변경할 값 )
다음 사진을 통해 위의 두 문법에 대해 확인해 볼 수 있다
3️⃣ 제이쿼리 문서 객체 조작 attr ( )
$("선택자").attr( "src" ) : 특정 값을 확인
$("선택자").attr( "src", 변경값 ) : 특정 값을 변경
$("선택자").attr( { 객체 } ) : 여러값을 변경
4️⃣ 제이쿼리 문서 객체 조작 css ( )
$ ("선택자").css ( "backgroundColor" ) : 특정 값을 확인
$ ("선택자").css ( "backgroundColor", 변경값 ) : 특정 값을 변경
$ ("선택자").css ( "backgroundColor" ) : 여러 값을 변경
5️⃣ 제이쿼리 문자 조작 html( )
$ ("선택자").html ( ) : 선택자의 값을 확인
✅ html( )은 자바스크립트 문법과 비교하면, 선택자의 innerhtml(태그 사잇값)를 확인하고 변경해주는 것이라고 보면 된다
⚠️ 헷갈림 주의!!! 나는 벌써 헷갈렸음 하하
$ ("선택자").html ("홍길동") : 선택자의 값을 변경
$ ("선택자").text ("<h2>텍스트</h2>") : 선택자의 값을 순수텍스트로 변경
✅ html( )은 변경값에 "태그"를 넣는다면 그 태그 자체가 변경되는 반면,
text( )은 변경값에 "태그"를 넣으면 순수한 텍스트로 인식되어 다음과 같은 결과값이 도출된다
6️⃣ 제이쿼리 클래스 조작 addClass( ), removeClass( ), toggleClass( )
< button class = "happy" >< /button >
---------------------------------------------------------------------------------------------
$ (".happy").addClass("day") : 선택자에 클래스 추가 (결과: happy day)
$ (".happy").removeClass("day") : 선택자에 클래스 삭제 (결과: happy)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<button id="btn" class="btn btn-default">클래스 조작</button>
<script>
//js
//document.getElementById("btn").classList.add("myBtn"); //클래스 추가
//document.getElementById("btn").classList.remove("myBtn"); //클래스 삭제
$("#btn").addClass("myBtn"); //클래스 추가
$("#btn").removeClass("myBtn"); //클래스 삭제
</script>
</body>
</html>
$ ("선택자").toggleClass("open") : 선택자에 "open"를 토글형식으로 전환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<button id="tog" class="dark">토글형식</button>
<script>
$("#tog").click(function() {
console.log(this);
// this.classList.toggle("dark"); //js코드로 작성한 토글
$(this).toggleClass("dark");
})
</script>
</body>
</html>
7️⃣ 제이쿼리 이웃 형제 노드 조작
$ ("선택자").closet("td") : 선택자의 최근접 단일부모 탐색 ( td를 탐색 )
제이쿼리의 노드조작을 확인해보기 위해서는 클릭 이벤트를 사용했다
클릭 이벤트에서 this와 e.target(이벤트 객체)로 나 자신의 태그를 확인할 수 있다는 것을 체크하고 가자
누른 버튼을 기준으로 가장 가까운 tr을 찾아준다(부모태그 중)
$ ("선택자").children( ) : 선택자의 자식요소 탐색
$ ("선택자").first( ) : 선택자의 첫번째 자식요소 탐색
$ ("선택자").find("td" ) : 선택자의 특정 자식요소 탐색 ( td를 탐색 )
$ ("선택자").next( ) : 선택자의 다음 형제노드
$ ("선택자").prev( ) : 선택자의 이전 형제노드
참고 [ 전체코드 ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<table class="xxx">
<tr>
<th>번호</th>
<th>이름</th>
<th>버튼</th>
<th>테스트</th>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>
<button type="button" class="btn">버튼</button>
</td>
<td>
<span><i class="test">테스트1</i></span>
<span >테스트2</span>
</td>
</tr>
<tr>
<td>2</td>
<td>이순신</td>
<td>
<button type="button" class="btn">버튼</button>
</td>
<td>
<span><i class="test">테스트1</i></span>
<span >테스트2</span>
</td>
</tr>
</table>
<script>
/*
1. closet("선택자") - 최근접 단일 부모 선택
2. prev() - 이전형제
3. next() - 다음형제
4. siblings() - 모든 형제
5. first() - 첫번째 자식
6. last() - 마지막 자식
7. children() - 모든 자식
8.find("선택자") - 특정 자식 태그
*/
$(".btn").click(function(e) {
// 나 자신의 태그를 나타낼 수 있는 것 : this or e.target
console.log(this);
console.log(e.target);
console.log( $(this).closest("tr")); //최근접 tr태그
console.log($(this).closest(".xxx")); //최근접 xxx클래스
console.log($(this).closest("td").prev()); //이전형제
console.log($(this).closest("td").next()); //다음형제
console.log($(this).closest("td").siblings()); //모든형제
console.log($(this).closest("tr").children()); //모든자식들
console.log($(this).closest("tr").children().first()); //첫째
console.log($(this).closest("tr").children().last()); //막내
console.log($(this).closest("tr").find(".test")); //.test 자식
console.log($(this).closest("tr").find("span")); //span태그 자식
})
</script>
</body>
</html>
⭐ 제이쿼리 이벤트 함수
이번에는 위에서 노드 조작을 확인하기 위해 사용했던 제이쿼리 이벤트 함수에 대해 알아보고자 한다
👩💻 $ ( document ).ready ( function ( ) { }); ➡️ 페이지 로딩 시 스크립트를 실행
자바스크립트의 window.onload와의 기능이 유사하나 가장 큰 차이점이 있다
자바스크립트의 window.onload는 단 한번 사용 가능하지만,
제이쿼리의 document.ready는 여러 번 사용 가능하다
✅ 추가적으로 알고 가야 할 document
document란?
DOM의 상위 객체 ( "웹 페이지 그 자체"를 의미 )
웹 페이지에 존재하는 HTML요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 함
👩💻 $ ( "선택자" ).click ( function ( ) { }); ➡️ 클릭시 소괄호 안에 익명 함수 실행
👩💻 $ ( "선택자" ).keyup ( function ( ) { }); ➡️ 키를 눌렀다 뗐을 때 익명 함수 실행
👩💻 $ ( "선택자" ).change ( function ( ) { }); ➡️ 태그의 값이 바뀔 때 익명 함수 실행
👩💻 $ ( "선택자" ).mouseenter ( function ( ) { }); ➡️ 마우스가 틀 안으로 들어갔을 때 익명 함수 실행
👩💻 $ ( "선택자" ).mouseleave ( function ( ) { }); ➡️ 마우스가 틀 밖으로 떠났을 때 익명 함수 실행
영상으로 확인 가능!
이벤트 위임함수
이벤트 위임이란? 부모태그에 이벤트를 등록하고, 자식태그에 이벤트를 넘겨서 사용하는 방식을 말한다
👩💻 $ ( "선택자" ).on ( "이벤트" , "(자식)선택자" , function ( ) { } );
: "선택자"의 태그에 "이벤트"를 주면 그 이벤트가 "(자식)선택자"에게 넘어간다는 의미이다
비동기 통신 Ajax
Ajax란?
자바스크립트를 이용해서 비동기식(여러 일이 동시에 발생)으로 서버와 통신하는 것을 의미한다
화면 이동 없이 서버와의 통신을 처리한다고 생각하면 쉽다
그리고 서버와 통신할 때 json이라는 형식을 사용한다
👩💻 ajax 문법 : $.ajax ({ 속성 })
주요 속성
data : 서버에 전송할 데이터 key/value 형식
contentType : 내가 던지는 데이터 타입 ⭐⭐⭐( 필수 - 기본값이 form형식 )
dataType : 서버가 리턴하는 데이터 타입( 내가 받을 데이터 타입 )
type : 서버로 전송하는 데이터 타입 ( post, get )
url : 전송할 주소
success : 통신에 성공했을 때 호출할 스크립트 함수
error : 통신 실패시 호출할 스크립트 함수
SpringBoot 서버와 Visual Studio(리액트) 서버를 통해 ajax 통신을 확인해 보았다
1️⃣ Post 방식
2️⃣ Get 방식
Spring Security & JWT
🔹 API 서버 개발자라면 알아야하는 preflight와 cors(Cross Origin Resources sharing)의 개념
🔹 같은 서버에서만 코드 쉐어링 가능
👩💻 알고 가야 하는 개념! @CrossOrigin
클라이언트와 서버의 도메인이 서로 다르면 block이 되기 때문에 서버에서 CrossOrigin으로 특정 도메인을 열어줘야 함
도메인이 다르면 서버에서 직접 열어줘야 한다
1️⃣ @CrossOrigin("*")
2️⃣ @CrossOrigin("특정 주소")
'SpringBoot' 카테고리의 다른 글
| [SpringBoot] RestAPI - 서버간 통신, @RestController, GET방식, POST방식 (0) | 2023.02.21 |
|---|---|
| [SpringBoot] 유효성 검사(Validation) (0) | 2023.02.16 |
| [SpringBoot] 판매자 관리 페이지 프로젝트(실습) - 공통 부분 템플릿화 하기, 상품 등록 기능 구현 (0) | 2023.02.15 |
| [SpringBoot] 타임리프 문법의 모든 것(변수, 출력문, 조건문, 반복문, include, 내장함수 등)과 실습 (0) | 2023.02.13 |
