❓이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요.
이벤트 버블링
이벤트가 시작된 시점에서 위로 전파가 되는 현상
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
document.getElementById('parent').addEventListener('click', function() {
console.log('Parent clicked');
});
document.getElementById('child').addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // 이벤트 버블링 중지
});
</script>이벤트 캡쳐링
이벤트가 시작된 시점에서 아래로 전파가 되는 현상
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
document.getElementById('parent').addEventListener('click', function() {
console.log('Parent clicked during capturing');
}, true); // capturing 설정
document.getElementById('child').addEventListener('click', function() {
console.log('Child clicked');
});
</script>이벤트 위임
버블링 개념을 활용하면 훨씬 효과적인 이벤트 관리를 할 수 있다. 예를 들어 자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리할 수도 있다.
-> 이벤트를 다루는 방식을 자식 요소의 이벤트를 부모 요소에 위임한다고 해서 이벤트 위임(Event Delegation)이라고 부른다.
<ul id="parent-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
document.getElementById('parent-list').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('Clicked on', event.target.textContent);
}
});
</script>
❓HTTP 메소드에 대해 설명해 주세요.
GET: 기존 데이터를 조회하는 리퀘스트
POST: 새 데이터를 추가하는 리퀘스트
PUT: 기존 데이터를 수정하는 리퀘스트
DELETE: 기존 데이터를 삭제하는 리퀘스트
GET, POST, PUT, DELETE 이외의 메소드들
(1) PATCH
PATCH 메소드는 기존의 데이터를 수정할 때 사용하는 메소드다.
PUT은 기존 데이터를 아예 새로운 데이터로 덮어씀으로써 수정하려고 할 때 쓰는 메소드이고, PATCH는 새 데이터로 기존 데이터의 일부를 수정하려고 할 때 쓰는 메소드다.
그러니까 예를 들어 서버에
{
"id": 3,
"name": "Michael",
"age": 25
}이런 식으로 표현되는 데이터가 있을 때, 리퀘스트에 PATCH 메소드를 설정하고
{
"age": 30
}이라는 데이터를 바디에 담아서 보내면,
{
"id": 3,
"name": "Michael",
"age": 30
}서버의 기존 데이터는 이렇게 age 속성만 갱신되지만, 같은 리퀘스트더라도 PUT 메소드를 설정해서 보내면
{
"age": 30
}이렇게 서버의 데이터에는 age 속성만 남게 된다.
⇒ 데이터를 수정하는 메소드 중에서 PUT은 덮어쓰기, PATCH는 일부 수정를 의미한다.
(2) HEAD
메소드에는 HEAD 메소드라는 것도 있다. HEAD 메소드는 GET 메소드와 동일하다. 대신 GET 리퀘스트를 보냈을 때 받았을 리스폰스에서 바디 부분은 제외하고, 딱 헤드 부분만 받는다는 점이 다르다.
❓왜 이런 메소드가 필요할까?
예를 들어, 웹 브라우저가 서버로부터 용량이 엄청나게 큰 영상 파일을 받고자 하는 상황. 만약 파일의 용량이 너무 큰 경우에는 파일을 받지 않으려고 한다. 이때 파일의 용량만 조사하기 위해서 HEAD 메소드가 담긴 리퀘스트를 보내볼 수 있다.
이때 Content-length와 같이 컨텐츠 용량을 나타내는 헤더가 있어서 파일의 용량 정보는 알게 될 수도 있다. 그럼 이 용량을 사용자에게 보여주고 그래도 영화 파일을 시청할 건지 물어보는 코드를 작성할 수 있다. 바로 이렇게 실제 데이터가 아니라 데이터에 관한 정보만 얻으려고 하는 상황 등에 HEAD 메소드가 활용된다.
