[Java 풀스택 과정 강의] 1월 14일차

※ TIL와는 별개로 적는 개인 개발 일지라서 말은 좀 편하게하는 페이지입니다.
일지이기 때문에 일기의 성격이 더 강합니다.

 

 

1월 14일, 이벤트에 대한 마무리와 jQuery의 시작이다. jQuery는 JS 라이브러리의 하나다. React의 개발 이후로는 거의 죽었지만, 아직까지 jQuery를 쓰는 곳은 많다.

 

Event

form에서의 이벤트 정리가 있었다. input의 value를 불러오는 방법에 대한 리뷰가 있었다. 간단하다. 그냥 input의 DOM을 선택하고 value; 하면 된다.

그리고 onsubmit과 같은 DOM Event도 있었는데, W3School에서 정리한 게 있다.

그 외에 form에서 input 요소를 선택할 때, 폼 이름.input의 이름으로 하면 DOM 접근이 가능하다.

 

jQuery

jQuery에 대한 이론적인 부분을 들었다. 사실, 라이브러리 언어는 이해보다는 외우는 쪽이 더 쉽다. 애초에 표준인 것을 더 쉽게 만든 거니까, 표준을 이해하면 라이브러리는 암기 과목이다. 하지만 말했듯 어디까지 표준의 메커니즘과 로직을 이해한 상태에서 라이브러리를 쓰는 것이지, 그냥 무조건 외우면 안 된다.

jQuery의 특징은 ajax와 메서드 체인이 있다. 실제로 ajax를 위해 jQuery를 자주 사용한 편이다.

 

기본 load 메서드

기본적으로 $(document).ready(function(){}); 를 사용하지만, 나는 그냥 $(function(){}); 를 사용한다. 사실 load 메서드를 그렇게 즐겨쓰는 편이 아니라서(호출을 후선언 하거나 function을 쓰는 경우가 많기 때문에) 자주 쓰지는 않는다.

 

jQuery 선택자

선택자는 CSS와 비슷하다. 그냥 표로 요약하겠다. 알고보니 표가 처음 생성될 때만 10개 제한이 있던거였다…

 

선택자	형식	비고(호출)
전체 선택자	$('*')
태그 선택자	$('태그명')
ID 선택자	$('#아이디명')
클래스 선택자	$('.클래스명')
부모 요소 선택자	$('선택자').parent()
조상 요소 선택자	$('선택자').parents() $('선택자').parents('특정 상위 요소')	전체 상위 요소 특정 상위 요소
자식 요소 선택자	$('선택자').children() $('선택자 > 특정 자식 요소') $('선택자') .children('특정 자식 요소')	전체 자식 요소 특정 자식요소 위와 동일
자손 요소 선택자	$('선택자 특정 자손 요소') $('선택자').find('특정 자손 요소')	특정 자손 요소 선택
형제 요소	$('선택자').prev() $('선택자').prevAll() $('선택자').prevUntil('선택자2') $('선택자').next() $('선택자').nextAll() $('선택자').nextUntil('선택자2')	바로 이전 요소 선택 이전 요소들 모두 선택(같은 부모) 선택자2~선택자까지의 요소 바로 다음 요소 선택 다음 요소들 모두 선택(같은 부모) 선택자~선택자2까지의 요소

 

객체

jQuery 메서드에서는 객체 사용이 가능하다. 여기서는 좁은 의미의 객체를 사용한다. 이 좁은 의미의 객체는 key와 value값으로 나뉘어서, key:value 처럼 사용한다. 그렇게 해서 여러 속성(Property)을 한꺼번에 지정할 수 있다. 사용은 다음처럼 사용하면 된다.

 

$('선택자').메서드명({ 속성1: 값1,    속성2: 값2,    속성3: 값3 });

 

 

메서드 체인

메서드 체인은 간단히 말하면 다음과 같은 식이 된다.

 

$('선택자').메서드A('').메서드B('');

 

메서드 체인은 순서대로 처리된다. 왼쪽 → 오른쪽, 위 → 아래로 처리 된다.

이점은 한 선택자에 여러가지 메서드를 한 줄 안에 사용할 수 있다는 것이다.

그러나 과하게 사용하면 복잡해지기 때문에, 줄바꿈을 하거나 분리하는 경우도 있다.

 

 

오늘은 여기서 14일의 강의가 끝났다. 생각보다 짧네 싶겠지만 강사님의 이론적인 설명과 시연이 함께하다보니 이론에 비해 실제 본 코드는 훨씬 많다.