[Frontend] 함수와 객체, jQuery 그리고 Ajax

Chapter #5 동작을 처리하는 Java Script & 제이쿼리 라이브러리

Section 3. 함수와 객체

 

✴︎ 함수개요와 내장함수

• 함수 개요

- 함수는 특정 작업을 기술하는 곳으로 함수명{} 으로 구성되며 실행결과는 return문을 사용해서 리턴

// 반드시 알아야할 3가지 사항
1. 함수가 하는 일 : 함수명
2. 함수 인수의 개수와 타입 : 인수리스트
3. 함수의 실행결과 타입(리턴타입) : return문

 

• 내장 함수

- 시스템이 제공하는 함수 → 메시지 상자를 호출하거나 화면에 출력하는 등등의 작업을 제공

 

✴︎ 사용자 정의함수

• 일반함수

- 기본적인 형태의 사용자 정의함수로 function문을 사용해서 함수를 정의

- 함수 선언문으로 정의하는 방식과 함수 표현식으로 정의하는 방식 → 함수 표현식으로 정의하는 것을 권장

 

• 익명함수 : 이름없는 함수

- 필요한 곳에서 이름을 정의하거나 이름을 굳이 줄 필요가 없는 경우에 사용

- 이름이 없다는 것 == 특정 경우에만 사용하고 사용 후 자동으로 제거 → 메모리 관리에 좋음

// 작성방법
function(){
}
이름이 없기 때문에 변수에 넣어서 사용하거나 함수의 인수로 사용

 

• 콜백함수 : 이벤트에 반응하는 함수

- 이벤트가 발생하면 자동으로 실행

 

• 즉시 실행함수(Self-Invoking Functions) : 함수 정의와 동시에 실행하는 함수

: 함수 호출 없이 자동으로 실행

// 형태
(function(){})();
함수 선언부와 바디를 ()로 싸서 선언

 

✴︎ 클로저

: 즉시실행 내부함수로 함수의 캡슐화, 런타임 실행시 인자 값을 넘겨서 자동 동작되는 작업에 사용

: 함수 안에 리턴값으로 정의되는 익명 함수로 카운터 딜레마에 사용

 

•  카운팅 딜레마

- 카운터 딜레마는 특정 함수가 실행될 때 마다 1씩 누적되는 변수를 전역변수 또는 지역변수로 지정했을 때의 단점 때문에 발생

- 카운터 변수가 전역변수이면 변수 값이 1씩 증가하는 카운팅은 발생하지만 보안상 취약하다는 문제점이 발생

- 카운터 변수가 지역변수이면 보안상 좋지만 카운팅이 되지 않는 문제점이 발생

- 위 문제를 해결할 때 클로저를 사용

 

• 카운터변수를 전역변수로 선언

- 처리가 쉬우나 누구나 전역변수에 접근 가능 → 보안문제 발생

 

• 카운터변수를 지역변수로 선언

- 함수 밖에서 카운터변수의 접근을 막아서 보안상 좋아지지만 카운터 동작 안함

- 함수를 호출할 때마다 카운터가 0으로 초기화되어 카운팅이 안됨

 

• 클로저를 사용한 카운팅 딜레마 처리

- 즉시실행함수와 내부함수를 결합한 클로저를 사용해서 변수의 보안 기능과 누적 기능을 모두 충족시킬 수 있음

- 원리 : 딱 1번만 실행되는 즉시실행함수를 사용해서 자식인 익명 내부함수가 부모함수의 스코프에 접근

 

✴︎ 객체

: 데이터를 객체로 저장하면 후 데이터를 원하는 위치까지 전달 가능

 

• JS에서 . 방법

- 실무처리 웹 프로그래밍에서 객체는 데이터 1건을 표현하며 객체가 가진 값은 property, 객체가 하는 일은 method로 기술

- JS에서 객체는 var 객체변수명 = {property : 값}; 과 같이 객체 리터럴을 사용해서 생성

 

• 객체 사용(접근) : property나 method를 사용해서 접근

: property를 사용한 객체 값에 접근할 때

// 형식
1. 객체명.프로퍼티명
2. 객체명["프로퍼티명"]

 

• 객체의 property 반복 : for in

- for-in문은 객체에서 속성 1개를 뽑아서 속성저장변수에 넣어서 속성의 개수만큼 반복 처리

- var 속성저장변수와 같이 for문 안에서 속성저장변수를 선언하면 변수의 영역을 좁게 줘서 다 쓴 후 메모리 해제가 빨리됨

// 형식
for(var 속성저장변수 in 객체명){}

 

• 객체 property 삭제 : delete 연산자

// 형식
[delete 객체.프로퍼티명]

 

• 객체 비교

- 두 객체는 객체를 가리키는 reference 변수가 같으면 같은 객체

 

• 생성자 함수

- 객체를 생성할 대 사용하는 틀 → 객체의 형태를 결정

- 클래스명을 작성하는 규칙과 같음

 

• 내장객체

- JS는 숫자, 문자열, 배열, 날짜 객체를 제공

 

Section 4. jQuery를 사용한 태그 제어와 Ajax

 

✴︎ jQuery 개요

- jQuery : 빠르고 가볍고 다양한 기능을 가진 JS Library

- 가장 많이 사용되는 JS Libray

 

✴︎ jQuery 기본 사용법

• 기본 문법

- jQuery는 HTML 태그를 사용해서 어떤 동작을 수행

- 엘리멘트를 사용한다는 것 = 제어하는 것

- 동작이 발생되는 태그 == 실렉터

// 특정 동작(action)이 발생되면 처리하는 문법
$(selector).action()

 

• selector - HTML 엘리먼트에 접근

- 실렉터는 어떤 작업을 처리하기 위해 특정 엘리먼트를 선택하는데 사용

- 엘리먼트명, 엘리먼트의 id 속성 값, 엘리먼트의 class 속성 값 사용 가능

→ 코드 작성 방법 : 현재 페이지의 로딩이 끝나면 자동 실행

$(document).ready(function(){//코드}); 안에 작성

 

✴︎HTML 엘리먼트 내용에 접근하기 - get/set

- HTML 엘리먼트 객체의 내용에 접근해야 엘리먼트의 내용을 변경 가능

- 엘리먼트의 내용을 얻어내거나 변경하는 메소드

메소드	설명
text()	선택한 엘리먼트의 내용을 텍스트로 형태로 지정하거나 얻어냄
html()	선택한 엘리먼트의 내용을 HTML 태그를 포함하여 지정하거나 얻어냄
val()	폼 필드의 값을 지정하거나 얻어냄

 

✴︎ jQuery 이벤트 처리

- 웹 페이지에서의 이벤트 == 마우스를 이동하거나 엘리먼트를 클릭 또는 라디오 버튼 등을 클릭하는 동작에 의해 발생

 

• 마우스 이벤트

- 마우스 클릭, 더블클릭, 마우스 포인터의 위치 등에 발생

Mouse Events	설명
click	엘리먼트를 클릭시 발생
dbclick	엘리먼트를 더블클릭시 발생
mouseenter	엘리먼트에 마우스 포인터가 위치
mouseleave	엘리먼트에 위치된 마우스 포인터가 나가면 발생

 

• 키보드 이벤트

- 키보드의 키를 누르거나, 누른 상태에서 놓을 때 발생

Keyboard Events	설명
keypress	키보드를 눌렀다 놓으면 발생
keydown	키보드를 누르면 발생
keyup	눌린 키보드를 놓으면 발생

 

• 폼 이벤트

- 폼 엘리먼트가 포커스를 받거나 잃는 경우 or 폼을 전송하는 경우에 발생

Form Events	설명
submit	폼을 전송 시 발생
change	폼 엘리먼트가 변경되면 발생
focus	폼 엘리먼트의 포커스가 위치되면 발생
blur	폼 엘리먼트가 포커스를 잃으면 발생

 

• 도큐먼트/윈도우 이벤트

- 웹 페이지의 로드가 발생되거나 완료되는 경우 or 웹 브라우저 창의 크기가 변경되거나 스크롤이 이동될 때 발생

Document/Window Events	설명
ready	페이지의 로드가 완료되면 발생
load	페이지가 로드되면 발생
resize	웹 브라우저의 창의 크기를 변경하면 발생
scroll	웹 브라우저 창의 스크롤을 이동하면 발생
unload	페이지가 언로드되면 발생

 

✴︎ jQuery Ajax

- Ajax 기능을 구현한 메소드드들을 사용

- 서버로부터 TEXT, HTML, XML or JSON 형태의 파일을 요청하고 응답받을 수 있는 기능을 제공

Method	설명
$.get()	서버로 HTTP get 방식의 요청
$.getJSON()	HTTP get방식을 사용해서 JSON 데이터를 요청
$.post()	서버로 HTTP post 방식의 요청
.load()	서버로 데이터를 요청하고 HTML 엘리먼트에 응답받은 결과를 로드
$.ajax()	비동기 Ajax 요청을 수행. get, post 방식을 지정해서 사용

 

• .load() 메소드

- 서버에 요청하고 지정한 엘리먼트에 응답 받은 결과를 넣음

- 응답 받은 결과를 화면에 표시해야하는 작업을 실행할 때 주로 사용 → 로그인 폼, 회원가입 폼, 글 목록 등

⇒ url : 서버에 요청할 url로 문자열로 지정. 필수 요소

⇒ data : 전송할 파라미터를 키와 값의 쌍을 문자열 또는 객체로 기술. 선택 요소

⇒ complete : 서버가 처리한 요청에 대한 응답 결과를 얻어냄. 선택 요소

- responseText → 응답 결과

- textStatus → 응답된 상태

- XMLHttpRequest → XMLHttpRequest 객체 포함

 

• $.get()

- 서버로 HTTP get 방식의 요청 → $.ajax() 메소드도 가능

⇒ url : 서버에 요청할 url로 문자열로 지정. 필수 요소

⇒ data : 전송할 파라미터를 키와 값의 쌍을 문자열 또는 객체로 기술. 선택 요소

⇒ success : 서버가 처리한 요청이 성공하면 이 콜백함수는 실행. 선택 요소

- data  → 요청된 페이지의 내용

- textStatus → 처리 상태

- jqXHR → XMLHttpRequest 객체

 

• $.post()

- 서버로 HTTP post 방식의 요청 → $.ajax() 메소드도 가능

⇒ url : 서버에 요청할 url로 문자열로 지정. 필수 요소

⇒ data : 전송할 파라미터를 키와 값의 쌍을 문자열 또는 객체로 기술. 선택 요소

⇒ success : 서버가 처리한 요청이 성공하면 이 콜백함수는 실행. 선택 요소

- data  → 요청된 페이지의 내용

- textStatus → 처리 상태

- jqXHR → XMLHttpRequest 객체

 

• $.ajax()

- 서버로 비동기 Ajax 요청을 함

- DB와 연동 후 처리 결과만을 반환하는 경우에 사용하면 좋음 → Ex) 로그인 처리, 회원 가입 처리, 글쓰기 처리 등

⇒ type : 서버에 요청할 HTTP 방식, get or post 지정

⇒ url : 서버에 요청할 url로 문자열로 지정. 필수 요소

⇒ data : 전송할 파라미터를 키와 값의 쌍을 문자열 또는 객체로 기술. 선택 요소

⇒ success : 서버가 처리한 요청이 성공하면 function(data){} 콜백 함수가 실행, 매개변수 data는 처리 결과를 반환 받음.

success는 처리 결과에 따른 작업 수행이 필요한 경우 사용