[웹개발] 미니프로젝트2(기능 공부)

기능은 얼추 다 구현된 것 같다. 

삭제하기랑 수정하기를 구현해야하는데 어떻게 해야할지 감이 잡히지 않았을 때, 같은 팀원이신 분이 구현을 하셨길래, 파일을 받아 그걸 보고 공부하기로 했다.

---

이게 삭제하기 버튼인데 아직 모르는 부분이 많아서 하나하나 분석해보기로 했다.

---

 

여기서 모르는 부분은 .on과 전체적인 구조였다  .on()은 메소드에 해당,

.on()메소드를 사용하면 하나의 이벤트 핸들러에 여러개의 이벤트를 동시에 연결하는 역할이다.

우선 여기서 봐야할 점은 '동적 이벤트' 방식이다! 동적/정적 이게 무엇이냐부터 알아야 동적이벤트가 무엇인지 이해할 것 같았다.

• 정적 : 변하지 않고 고정되어 있는 것
  • 서버에 미리 저장된 파일(HTML,CSS,JS...)이 그대로 전달
• 동적 : 변화하거나 움직이는 것

---

• 이벤트(Event)란?
  • 어떤 사건을 의미
    
    • 사건 : "클릭했을 때", "스크롤을 했을 때", "무언가 입력했을 때" 등등 상호작용으로 인해 일어나는 것
  • 이벤트 핸들러 : 특정 이벤트가 발생했을 때 실행되는 함수나 메서드

---

동적 이벤트 -> 결국 변화하는 상호작용이라고 생각하면 될 것 같다.

그렇다면 코드를 다시보자.

 $(document).on('click', '.card-link1', function ()

• document는 웹 페이지의 전체 문서를 의미
  • 즉, 페이지의 DOM(Document Object Model) 전체를 대상으로 이벤트를 처리하려고 할 때 사용한다.

• .on()은 jQuery에서 이벤트를 등록할 때 사용하는 메서드, 특정 요소에 이벤트 핸들러를 바인딩하는 역할
  • 이벤트 바인딩 : 이벤트 핸들러를 연결하는 작업
• "click"은 이벤트의 종류 ->  "클릭"할 때 이벤트가 발생
• ".card-link1"이 이벤트가 발생할 대상 요소
  • 즉, 페이지에서 class='card-link1'을 가진 요소를 클릭할 때 이벤트가 발생
• function() { ... }: 이벤트가 발생했을 때 실행할 콜백 함수
  • 이벤트 핸들러 - 클릭 이벤트가 발생하면 이 함수 안의 코드가 실행
  • 콜백 함수 : 다른 함수에 인수로 전달되어, 특정 조건이나 사건이 발생했을 때 나중에 실행되는 함수
  • 인수 :  함수나 메서드를 호출할 때 함수에 전달하는 값

결론은 결국 .card-link1이라는 클래스를 클릭했을 시 콜백 함수가 실행되는거라고 생각하면 될 것 같다. 클릭 이벤트는 전체를(document) 대상으로 한다.

---

$(this).attr('id'); 라는 부분은 attr() jquery 함수였다.

attr 함수는 엘리먼트의 속성 값을 가져오거나 변경할 수 있는 함수라고 한다. 예시를 들어보자

<script>
	// 기본 양식
	$("id값").attr("id 또는 속성명");

	// "testName"을 가져옴
	$("testDiv").attr("name");
    
	// name 속성 "testName"을 "attrName"으로 변경
	$("#testDiv").attr("name","attrName");
    
</script>
.
.
<div id="testDiv" name="testName">TestContent</div>

그럼 여기서 또 의문이 생긴다, 기능을 구현 한 코드를 보면 예시처럼 $('#id값')이 되어있지 않고 this가 들어가있다.

이런 경우에는 현재 객체에 대한 id값을 알고 싶을 때 this를 사용한다.

그렇다면 이 코드도 이해할 수 있게 되었다.

말 그대로 현재 객체에 대한 id값을 button_id라는 변수에 저장한다 라는 말이다.

---

ㅠㅠ.. 그리고 이제 다음 코드를 보자 ...

parent() 메소드는 부모 요소를 가져온다고 생각하면 된다.

이것도 간단하게 예시를 들어보자!

<div>
  <p>
    <span>How to find parent elements?</span>
  </p>
</div>

이렇게 간단한 html이 있다 만약 여기서

var tagName = $('span').parent().prop('tagName');
console.log(tagName);

• prop() : 부모 요소의 태그 "이름"을 가져온다. html 태그 이름은 대문자로 반환됨

실행 했을 시, 반환되는 값은 "P"이다. 왜 p인가? 생각하면

'span'의 부모 요소를 가져온다했으니 span태그 요소의 바로 위 부모 요소인 p태그를 가져오는 것이다.

그럼 이제 substr은 무엇인가? 봐야한다.

substr()함수는  문자열의 일부를 일정 길이만큼 추출하고 싶을 때 사용한다. 이렇게 말했을 때는 이해가 되지 않을 것 같아 예시를 들어보자

"ABCDEFG".substr(2, 3); // "CDE"

이 코드를 보면, 내가 추출하고싶은 문자열 "ABCDEFG"과 어디서부터(2) 어느정도의 길이로(3) 추출할 것 인가를 보면 된다.

결국 기본 공식으로 정리를 하자면 이렇게 되는 것이다.

"문자열".substr(startIndex, length);

여기서 주의해야할 점은 Index부분이다. 자바나 자바스크립트나 파이썬이나, 인덱스의 시작은 0번이다.

우리가 생각하는 숫자의 시작은 대채로 1부터 시작이라 생각하지만, 컴퓨터 언어는 0부터 시작이다. 

그러므로 아까 전의 예시를 보았을때 이건 0,1,2 이렇게 인덱스를 생각해야하는 것 ㅇㅇ!!!

그럼 결국 저 문장도 이해가 된다! 

---

참고자료

[JavaScript] 이벤트(Event)란?

---

회고

이렇게까지 하나하나 분석하고 찾아보며 공부한 적은 처음이기도하고, 블로그 작성도 이렇게 한 건 처음인데 오히려 이런식으로 하니까 더 이해가 잘 되는 것 같아서 1일1포스팅은 힘들더라도 조금 더 퀄리티 있고, 오늘처럼 하나하나 공부해가며 작성하는 포스팅 위주로 하는 것이 더 좋다고 느꼈다.