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

48일차

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

---

오늘 배운 대부분의 지식은 채팅창 만들기를 위한 빌드업이었다.
내일은 채팅창을 조금 더 그럴듯하게 꾸밀 수 있을 것 같다.
채팅창 만들기는 내일 정리해서 올려야겠다.

1. JQuery 이어서..

1) 이벤트가 동작하지 않는다?!

add 버튼을 누르면 파일첨부 버튼이 추가되고, 오른쪽에 X 버튼을 누르면 그 줄에 있는 파일첨부 버튼을 삭제하는 기능을 만드려고 한다.
add 버튼에 이벤트를 줘서 동적 element인 div 안에 input type=file 태그와 X 버튼을 추가해주는 것은 성공적이었다.

이제 삭제버튼을 누를 때, 이벤트를 발생시켜 요소를 삭제해주면 된다.
일단 addClass로 버튼에 클래스 이름을 주었으니, 클래스 이름을 선택하여 test를 위해 alert 함수를 써주었다. 이렇게하면 버튼을 누르면 알람이 뜰 것이다.
그러나 X 버튼을 아무리 눌러도 알람은 뜨지 않았다.
왜일까? 코드가 잘못된 것일까?

$(".btnDel").on("click",function(){
  alert("test");
})

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

2) 정적 이벤트 바인딩

Static Event Binding
정적인 요소에 이벤트를 주는 방법

기존에 배웠던 이벤트 처리 방법을 정적 이벤트 바인딩이라고 한다.
동적 요소에는 이벤트가 적용되지 않고, 이미 렌더링 된 요소에만 이벤트를 적용할 수 있기 때문이다.

$(".btnDel").on("click",function(){
	// 이벤트 핸들러 내용...
})

fieldset 밖에 button 태그를 하나 더 만들어서 class 이름을 똑같이 btnDel로 줘서 테스트를 해보자.
아까와는 다르게 잘 동작한다.
차이점은 이벤트 등록 코드가 렌더링된 그 순간에 이벤트 요소가 존재하느냐이다.
Test 버튼은 존재하기 때문에 이벤트를 등록할 수 있는 것이고, X 버튼은 존재하지 않기 때문(add를 눌러야만 생김)에 없는 요소에는 이벤트를 등록시킬 수 없는 것이다.

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

해결방법은 클래스를 대상으로 이벤트를 등록하는 것이 아니라, element를 만들자마자 그 아래 순서에 element에 이벤트를 등록해주면 된다.

$("#addFile").on("click",function(){

    let line = $("<div>");
    
    let newFile = $("<input type=file>");
    let delButton = $("<button>");
    delButton.addClass("btnDel");
    delButton.text("X");
    
    // 버튼을 생성한 뒤 그 버튼에 이벤트를 바로 등록
    delButton.on("click",function(){
        $(this).parent().remove();
	})

    line.append(newFile);
    line.append(delButton);

    $("#files").append(line);    
})

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

3) 동적 이벤트 바인딩

Dynamic Event Binding
동적인 요소에 이벤트를 주는 방법

위와 같이 순서를 복잡하게 생각하지 않아도, on함수에 파라미터를 하나 더 주는 쉬운 방법으로 이벤트를 등록할 수 있다.
아래가 바로 동적 이벤트 바인딩의 방법이다. 타겟요소의 부모 중 동적 요소가 아닌 고정된 요소를 중심으로 이벤트를 부여한다.
즉, 진짜 이벤트를 부여할 대상을 두번째 파라미터에 써주는 것이다.

// $(고정된 parent).on(이벤트이름,타겟이벤트요소,이벤트핸들러){}
$("#files").on("click",".btnDel",function(){
	$(this).parent().remove();
})

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

4) 여러가지 effect 함수

파라미터로 밀리초, 동작이 끝나고 실행할 함수를 받는다.

함수	설명
hide	요소를 숨긴다.
slideUp	요소를 슬라이드하여 숨긴다.
fadeOut	요소를 fadeout하여 숨긴다.
show	요소를 보여준다.
slideDown	요소를 슬라이드하여 보여준다.
fadeIn	요소를 fadeout하여 보여준다.

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

5) effect 라이브러리

다양한 이펙트를 사용하고 싶다면, cdn을 추가해서 플러그인을 사용 가능하다.
구글에서 jqueryUI cdn을 검색하여 cdn을 추가하고, jquery effect를 검색하여 jqueryui.com에 들어가면 다양한 effect와 예제를 볼 수 있다.