프로그래밍 남기기

jQuery로 HTML 태그에 값이나 html을 설정해야 하는 경우, Html 태그 별로 각각 사용하는 함수가 다르다.

그러므로 개발을 진행하다고, 함수를 찾아보거나, html 에 값이 적재되지 않는 이유를 찾지 않아도 된다.

( 예를 들어 span의 경우, val() 함수를 사용하고, 왜 값이 안 들어갔지라는 의문을 가질 필요가 없다. )

따라서, 매번 Html 태그를 확인해서 함수를 사용하기 보다는 미리 html의 값을 설정 할 수 있는

getter, setter로 함수를 생성하고 사용하는 편이 나중을 생각해서도 편하다.

소스코드 예시

//사용법

$('#id').setValue('test');

console.log($('#id').getValue());

jQuery로 배열이나, Collection 정보를 순차적으로 Ajax 비동기를 호출해서 처리해야 하는 상황에서 

(예시 : 첫번째 Ajax 비동기 호출이 완료 될 때까지, 기다렸다가 두번째 Ajax 비동기 호출을 해야하는 경우 )

Ajax 비동기 호출을 기다리기 위해서 async, await, promise를 사용하여 문제 해결을 진행했다.

단, 소스 코드를 실행 전에 사용하고 있는 브라우저가 async, await, promise 를 지원하는지 확인이 필요하다.

크롬도 마찬가지로 버전이 낮을 경우, 해당 소스코드를 문법 오류로 인식한다.

- 소스는 참조용입니다.

Textarea 태그에는 장문의 글을 넣을 수 있지만, 장문에 따라 생기는 스크롤로 인하여

페이지가 표시될 때, Textarea의 최하단에 focus가 될 수 있도록 하는 기능이 필요함.

여러 엘리먼트에 어떠한 작업 ( ex: css 변경 ) or 이벤트( ex: click )를 적용하려면, 

여러 엘리먼트에서 각각 엘리먼트에 대해 적용하여야 하나, jQuery에서는 .each()를 제공하고 있다.

먼저, 기본 문법은 아래와 같다.

function의 매개변수로 index와 Element가 있지만 하나만 생략해도 되고, 둘다 생략 가능하다.

.each( function(){} ) <- 이와 같은 일반적인 .each()의 형태가 되겠으나,

각각 엘리먼트를 제어하기 위해서는 function() 내부에서 $('this') 를 사용하면, 

현재 일치되는 엘리먼트에 대해서 제어할수 있게 된다.

위의 내용은 모든 p태그의 색상을 빨강으로 변경하게 된다.

$('this')를 활용하여 각각의 엘리먼트 중에서도 특정한 엘리먼트에 대해서도 제어를 진행할 수 있으므로,

다양하게 활용될 수 있다.

HTML Element에 대해서 추가적인 정보를 제공하는 것이 Attribute가 되겠다.

그리고 name/value 형식(pairs)으로 구성되어 추가적인 정보를 제공할 수 있게 되어있다.

( ex: name="MOON" )

Attribute에 담겨져 있는 추가적인 정보를 활용하게 위해서는 attr() 을 사용하면 보다 편리하게 

Attribute의 값을 제어 할 수 있게 된다.

먼저 문법을 살펴보자.

위와 같이 기본 문법이 있다.

1. .attr( attributeName )

이 경우는 셀럭터에 의해서 선택된 엘리먼트 안에 attributeName에 대한 value값을 리턴하여 사용하게 되는 경우이다.

위의 결과는 name이라는 attribute의 value값을 리턴 받게 될 것이다.

2. attr( attributeName, value )

이 경우는 셀럭테에 의해서 선택된 엘리먼트에 attributeName/value 형식(pairs)으로 를 설정(set)하는 경우 이다. 

위의 결과는 input 엘리먼트에 id="inputId" 라는 atttirbute를 설정(set)하게 될 것이다.

jQuery.each() or $.each()는 자바스크립트 개체 및 배열을 통해서 Iterating에 대한 generic iterator function 이다.

.each()는 jQuery 객체를 통해 반복하여, 일치하는 Element에 대해 실행되는 함수를 가진 Iterator이다.

(이하 내용은 jQuery.each() or $.each()이지만 jQuery.each()로 통일하여 작성 하였습니다. )

위와 같이 jQuery.each()와 .each()이 차이가 있다는 것을 알 수 있다.

그렇다면 각각의 기본 문법을 살펴보자.

문법을 살펴보게 되면 확연하게 차이가 있음을 보여준다.

jQuery.each()는 입력받은 collection에 대한 callback이 이루어지는 반면, 

.each()는 셀렉터( $(' ') )에 일치하는 엘리먼트에 대해 function이 동작하게 된다.

이제는 성능에 대해서 알아보기 되면, 결론은 jQuery.each() > .each() 이다.

그렇다고 매우 차이가 날 정도로 jQuery.each()가 빠른것이 아니라 약간의 나은 성능을 보여준다는 것이다.