✅ 정리했었던 내용 복습
1️⃣ 웹 프로토콜이란?
- 프로토콜이란, 데이터를 송수신하기 위한 규칙
- 서버와 클라이언트 모두 HTTP를 이용해 통신하기 때문에 HTTP에 대한 지식이 중요하다.
- HTTP는 GET, POST, PUT ,HEAD 4가지 요청 형식이 있다.
- GET은 문서를 요청하고 서버가 클라이언트에 상태 정보와 복제된 문서를 보냄으로써 응답한다.
- POST는 데이터를 서버로 송신하고 서버는 해당 데이터를 특정 아이템에 덧붙인다.
- PUT은 데이터를 서버로 송신하고 서버는 특정 아이템을 완전히 대체한다.
- HEAD는 상태 정보를 요청한다. GET과 동일한 형태로 응답을 하지만 문서를 복제하지는 않는다.
2️⃣ AJAX란 무엇인가?
- Asynchronous JavaScript And XML 비동기식 자바스크립트와 XML의 약자이다.
- 브라우저가 가지고 있는 XmlHttpRequest 객체를 이용해서 전체 페이지를 새로고침하지 않고도 일부만을 위한 데이터를 로드하는 기법이다.
- JavaScript를 사용한 비동기식 통신이며 서버와 클라이언트간에 XML 데이터를 주고받는 기술
- 웹 페이지의 속도가 향상된다.
- 서버의 처리가 완료될 때 까지 기다리지 않고 처리가 가능하다.
- 서버에서 data만 전송하면 되므로 전체적인 코드의 양이 줄어든다.
- 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.
- 히스토리 관리가 되지 않는다.
- 연속으로 데이터를 요청하면 서버의 부하가 증가할 수 있다.
- 페이지가 이동하지 않는 통신이므로 보안에 신경을 써야 한다.
- XmlHttpRequest를 통해 통신을 하는 경우 사용자에게 아무런 진행 정보를 주지 않기 때문에 사용자가 요청이 완료가 안 되었는데 페이지를 떠날 수 있다.
3️⃣ React를 왜 사용하는지
- 컴포넌트를 사용해서 효율적으로 재사용이 가능하며 유지보수가 용이하다.
- 생태계가 넓어 커뮤니티나 자료가 방대하며, 컨퍼런스가 많다.
- 다른 프레임워크나 라이브러리와 혼용이 가능하다.
- Virtual Dom을 활용한 렌더링이 가능하다.
- 단방향 데이터 바인딩을 통한 디버깅이 용이하다.
- 다른 라이브러리에 비해 안정성이 높다.
4️⃣ 이벤트 버블링
- 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성
- 한 요소에 이벤트가 발생되면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작, 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작한다.
5️⃣ 이벤트 버블링을 막는 방법
- stopPropagation() 인터페이스 방법, 캡처 event 및 버블링 단계에서 현재 이벤트의 추가 전파를 방지한다.
6️⃣ 이벤트 버블링 활용 방법
- 하위 요소 각각에 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식으로 이벤트 버블링을 활용할 수 있다.
- 이벤트 위임이라고 말할 수 있다.
- 이벤트 버블링을 응용하여 부모 엘리먼트에 리스너를 위임하여 부착하면, 리스터의 개수를 1개로 줄여 최적화할 수 있다.
7️⃣ 이벤트 위임
- 하위 요소마다 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식
- 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용된다.
- 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.
- 공통 조상에 할당된 핸들러에서 event target을 사용하면 실제 어디서 이벤트가 발생했는지 알 수 있고 이를 이용해 이벤트를 핸드링 한다.
8️⃣ 부모에서 자식으로 이벤트 상속 방법
- 이벤트 캡처링을 사용해서 부모에서 자식으로 이벤트를 상속할 수 있다.
- 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식이다.
'제니의 개발일지 > 개발일지' 카테고리의 다른 글
| 오늘의 웃겼던 개발 경험기 - 이미 정답을 알고 있었다.. (1) | 2023.11.23 |
|---|---|
| TIL - html 명함 만들기 테이블 태그 (0) | 2022.12.02 |
| TIL - 2022.10.22 - TCP, UDP, URL 입력시 일어나는 일, Event loop, RESTful API, GET POST 차 (1) | 2022.10.22 |
| TIL - 2022.10.18 Virtual DOM, useRef, useEffect, var, let, const, Async/Await, Promise (2) | 2022.10.18 |
| TIL - 2022.10.17 상태 관리, Redux란? (0) | 2022.10.17 |
