231010/D+7

firebase사용. 데이터 삭제하기

 

html button태그 속성에 type을 쓰는 이유

<button> 태그는 HTML에서 버튼을 생성하는 데 사용됨. 그러나 type 속성을 사용하는 이유는 버튼의 기본 동작을 브라우저에게 알려주기 위해서인데,

<button> 요소에 type 속성을 지정하지 않으면 브라우저는 해당 버튼을 "submit" 타입으로 처리한다. 이것은 폼(Form) 내에서 버튼을 사용했을 때 주로 사용된다. 이러한 경우, 버튼을 클릭하면 폼이 제출되며, 페이지가 다시 로드되거나 다른 작업이 수행될 수 있다.

 

그러나 <button> 요소에 type="button"을 지정하면 버튼은 더 이상 폼을 제출하지 않으며, 단순히 클릭 이벤트를 처리하는 용도로 사용된다. 이때 스크립트를 사용하여 버튼에 원하는 동작을 할당할 수 있다.

예를 들어, 다음과 같은 버튼은 폼을 제출하지 않고 스크립트 함수인 doSomething()을 호출한다.

htmlCopy code
<button type="button" onclick="doSomething()">버튼 클릭</button>

만약 type 속성을 생략하고 다음과 같이 작성한다면:

<button onclick="doSomething()">버튼 클릭</button>

이 버튼은 "submit" 타입으로 간주되어 폼 제출을 시도할 것이며, 페이지 새로고침이나 다른 동작이 발생할 수 있다.

따라서 버튼의 동작을 명시적으로 제어하기 위해 type="button"을 사용하는 것이 좋다.

 

DOM(Document Object Model) 요소

HTML 문서 내에서 웹 페이지의 각 부분을 나타내는 객체.

DOM은 웹 페이지의 구조와 콘텐츠를 프로그래밍적으로 조작하고 접근할 수 있게 하는 모델로 웹 페이지의 요소를 계층적으로 구성하며, 각 요소는 트리 구조로 표현된다.

간단히 말하면, DOM 요소는 웹 페이지에서 보이는 모든 것을 의미한다. 

1. <h1>제목</h1>는 웹 페이지에서 하나의 텍스트 제목을 나타내는 DOM 요소
2. <p>문단</p>은 단락 텍스트를 나타내는 DOM 요소
3. <img src="image.jpg" alt="이미지">는 이미지를 나타내는 DOM 요소
4. 링크는 하이퍼링크를 나타내는 DOM 요소

각 DOM 요소는 특정 속성과 메서드를 가지며, JavaScript와 같은 프로그래밍 언어를 사용하여 이러한 요소를 조작하거나 수정할 수 있습니다. DOM을 통해 웹 페이지의 내용을 변경하거나 이벤트를 처리하여  사용자와 상호작용할 수 있습니다. 즉, DOM 요소는 웹 페이지의 구성 요소를 프로그램적으로 다루기 위한 인터페이스 역할을 합니다.

 

 

객체와 딕셔너리

이벤트(Events)

웹 페이지나 애플리케이션에서 발생하는 사용자 상호작용이나 브라우저 동작을 나타냄.

이벤트는 사용자가 웹 페이지와 상호작용할 때 또는 브라우저에서 특정 상태 변화가 발생할 때 발생.

1. 클릭 이벤트 (Click Event): 사용자가 마우스로 요소를 클릭할 때 발생. 주로 버튼 클릭, 링크 클릭, 이미지 클릭 등의 상황에서 사용
2. 마우스 이벤트 (Mouse Events): 마우스와 관련된 다양한 상호작용을 다루는 이벤트로, 예를 들어 마우스를 요소 위로 가져갈 때(mouseover) 또는 요소에서 떼어낼 때(mouseout) 발생.
3. 키보드 이벤트 (Keyboard Events): 키보드 입력을 다루는 이벤트로, 키를 누를 때(keydown) 또는 눌린 키를 떼어낼 때(keyup) 발생.
4. 포커스 이벤트 (Focus Events): 요소에 포커스가 주어질 때(focus) 또는 포커스가 요소에서 빠져나갈 때(blur) 발생. 주로 입력 양식 요소와 관련있음.
5. 로드 이벤트 (Load Event): 웹 페이지나 이미지 등이 로드될 때 발생하며, 주로 초기화 및 리소스 로딩 후 실행할 코드를 설정하는 데 사용됨.
6. 이벤트 위임 (Event Delegation): 부모 요소에 이벤트 리스너를 추가하여 하위 요소의 이벤트를 처리하는 방법. 이를 통해 동적으로 생성된 요소에도 이벤트를 적용할 수 있다.
7. 사용자 정의 이벤트 (Custom Events): 개발자가 직접 정의한 이벤트로, 특정 상황에서 자신만의 이벤트를 발생시키고 처리할 수 있다.

이벤트는 일반적으로 JavaScript를 사용하여 처리된다. addEventListener와 같은 메서드를 사용하여 원하는 이벤트에 대한 리스너(콜백 함수)를 등록하고, 이벤트가 발생할 때 실행될 코드를 지정한다. 

 

이벤트리스너

특정 이벤트(예: 클릭, 마우스 오버, 키 누름 등)가 발생했을 때 실행할 함수를 등록하는 역할을 한다. 이벤트 리스너를 사용하면 웹 페이지나 애플리케이션에서 사용자 상호작용에 대응하거나 특정 동작에 반응할 수 있다.

// HTML 요소 선택
const myButton = document.querySelector('#myButton');

// 이벤트 리스너 등록 (버튼 클릭 시 실행할 함수)
myButton.addEventListener('click', function() {
    alert('버튼이 클릭되었습니다.');
});