[Front] 코드 분석 중 jQuery

[ 제이쿼리(JQuery) ]

모든 브라우저에서 동작하는 자바스크립트 라이브러리로, 무료로 사용 가능한 오픈소스이다.

이벤트 연결, ajax 등 쉽게 구현 가능하다.

또한, css 선택자를 그대로 사용해서 동적 화면처리도 가능하다.

 

// 로그인 기능
$("#loginForm").on('submit', function(event) {
// 제이쿼리 문법. id = "loginForm"인 폼에서 폼 제출이 되면 해당 이벤트가 발생한다.
	console.log("로그인 실행");
	event.preventDefault(); // 기본 폼 제출 동작을 방지

 

이 부분은 jQuery 문법이 사용된 코드로, CSS 선택자처럼 #loginForm을 선택해서 이벤트를 설정할 수 있다.

 

id = “loginForm”인 <form> 요소에서 제출(submit) 이벤트가 발생할 때 function(event)를 실행하라는 뜻이다.

 

※ event.preventDefault(); : 브라우저는 기본적으로 폼 데이터를 서버에 제출하면서 페이지를 이동시키는 동작을 수행한다.

브라우저가 폼 데이터를 서버로 전송(== HTML 전송)하는 것을 막음. JS로 직접 로그인 요청(AJAX 등)을 보내고 싶을 때 사용한다. 즉, 데이터를 JS로 직접 서버에 보낸다.

• 보통 폼 제출을 하면 데이터를 자동으로 서버에 보내면서 페이지가 새로고침되거나 이동하는데 그걸 막고 비동기 처리를 할 때 사용한다!
• 페이지 새로고침 안되니까 UI에 좋고, JSON으로 JS가 데이터를 받으면서 해당 데이터를 통해 페이지 이동이나 알럿 띄우기 등을 자유롭게 구현할 수 있게 된다.
• 즉, event.preventDefault() + AJAX를 같이 사용!

---

[ 제이쿼리 기본 문법 ]

$(selector).action();

■ $ : 제이쿼리 선언 및 접근에 사용.

• $ == jQuery(selecter).action();
• action에는 HTML에서 이벤트가 발생할 때 실행되는 이벤트 핸들러가 들어간다.

$(document).ready(function () {

    });

제이쿼리 기본 형태. 제이쿼리로 시작하는 모든 페이지는 ready() 함수로 시작하는데, 문서 준비가 완료되면 인자로 전달된 함수를 실행하라는 뜻이다. 여러번 사용 가능.

 

제이쿼리를 사용하기 위해 다음과 같이 cdn을 삽입해준다.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>