JAVA 웹개발 과정 국비 47일차 정리

47일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!

---

11월 11일 (46일차)에는 학원 평가를 봤다.
시험이 4개였는데 너무 힘들었다.

1. JQuery 이어서..

1) Element 동적 제어

infinite Scroll 방식을 사용할 때 많이 쓰는 개념이다.
즉, 새로운 element를 화면 상에 나타내지 않고 생성한 후, 함수를 통해 짠! 하고 나타내는 것이다.

① 여러가지 사용 함수

동적제어 기능을 만들고 싶을 때 함께 사용하는 여러 함수들이다.
이외에도 여러가지가 있으니, 원하는 기능을 찾아서 함께 사용하면 된다.

ⓐ 요소 배치 관련 함수

함수	설명
prepend	기존 내용의 앞으로 값을 집어넣는다.
append	기존 내용의 다음으로 값을 집어넣는다.
before	기존 요소 이전으로 값을 집어넣는다.
after	기존 요소 다음으로 값을 집어넣는다.

ⓑ 속성 관련 함수

함수	설명
text	test 값을 추가한다.
html	html 값을 추가한다.
addClass	class 값을 추가한다.
attr	속성을 추가한다.

ⓒ 삭제 관련 함수

함수	설명
remove	자기자신을 지운다.
empty	자신을 제외한 후손들을 모두 지운다.

ⓓ 선택자 함수

여러개가 선택될 땐 배열으로 리턴한다.

함수	설명
prev/next	형제 중, 바로 이전 또는 바로 다음 요소를 반환
sibling	형제중에서 선택자에 해당하는 요소를 반환
parent	자신을 포함하는 직계 부모 요소를 반환
closest	자신의 모든 부모 중 선택자로 검색되는 요소를 반환
children	자신에게 포함되어 있는 직계 자손을 반환
find	자신에게 포함되어 있는 자손 또는 후손을 검색하여 반환

② 동적 제어 방법 - 첫번째

추천하지 않는 방법이지만, 이해를 돕기 위한 단계라고 생각하고 알아보자.
아래와 같이 wrapper에 내용을 추가한다고 생각한다면, prepend안의 파라미터에 내용이 담길 것인데, 만약 string 값이 아닌 element가 담겨야한다면? 그리고 그 element의 속성이 많아서 길이가 길어진다면?

$("#wrapper").prepend("여기가 Prepend<br>");

아래와 같이 파라미터의 길이가 계속해서 늘어나야 할 것이다.
div 하나일 때는 그래도 어느정도 알아보기 쉬운데, div 안에 div, img… 여러 요소들이 함께 들어가 있다면 어떻게될까?
문자열로 감싸져 있어서 오타가 나도 오류를 찾기 어렵고, 가독성도 떨어질 것이다.
만약 div 안에 img 태그의 src 속성을 변수로 받아야한다면?
문자열을 끊고 + 로 변수를 연걸해서 다시 문자열로 이어주어야 하는 번거로움이 있다.
그래서 위에서 언급했듯이 추천하지 않는 방법이라고 하는 것이다.
이런 모든 단점을 아래 두번째 방법에서 해결할 수 있다.

$("#wrapper").prepend("<div class='~~~' id='~~~'>여기가 Prepend</div>");

③ 동적 제어 방법 - 두번째

$를 쓰고 안에 태그 자체를 넣어주면 그 요소를 화면상에 나타내지 않고 만들어낼 수 있다.
이 요소를 변수에 담아주면 변수가 요소의 주소값을 가지게 되므로 변수에 append, text, html 등의 함수로 내용을 채워준 뒤, 보여주고 싶은 div(wrapper)에 적절하게 넣어주면 내용을 가진 요소가 wrapper 의 지정된 위치에 짠! 하고 나타나게 된다.
삭제 관련 함수를 이용하면 반대로 버튼을 클릭하면 요소가 지워지는 이벤트를 만들 수 있다.

<div id="wrapper">
	내용<br>
</div>

let line = $("<div>")  // element 생성
line.append("데이터1");  // element 내용 채우기
wrapper.prepend(line);  // 원하는 요소에 집어넣기

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.