728x90 프로그래밍 언어/JS34 JavaScript) 이벤트 버블링/캡처링, 이벤트 전파 막기 이벤트 버블링 겹쳐있는 영역에 이벤트가 일어날 경우 겹쳐진 영역에 해당하는 모든 엘리먼트의 이벤트가 순차적으로 전달 되는 것 -> 가장 하위 엘리먼트 부터 최상단 엘리먼트로 이어지면서 이벤트가 실행되기 때문에 이벤트가 떠오른다고 하여 버블링이라고 부른다 거의 모든 이벤트는 버블링 된다 focus 등 몇 이벤트는 버블링 되지 않기도 한다 이벤트 캡처링 이벤트의 전파 단계는 3단계로 이루어진다 캡쳐 단계 - window 부터 대상 까지의 전파 흐름 (이벤트 대상을 찾는 단계 같음) 대상 단계 - 이벤트 개체가 이벤트 대상에 도착한 단계 (해당 이벤트 전파의 최하위 영역) 버블 단계 - 이벤트 개체로 부터 window까지의 버블링 단계 캡처링은 이벤트 발생 이전에 대상을 찾는 단계로 최상단 window 부터 .. 2022. 4. 27. JavaScript) fetch, axios로 서버에 요청 보내기 요청 보내기 서버에 url와 restAPI를 통해 필요한 데이터에 대한 요청을 보낸다 restAPI 웹 http 프로토콜 통신에서 CRUD를 하기 위한 규약 CRUD 순서대로 POST, GET, PUT, DELETE가 담당하지만 주로 GET, POST를 사용하여 GET은 Read, POST가 나머지를 담당한다 get: uri의 ?(물음표) 뒤 query를 통해 key=value 형식으로 요청을 보낸다 (여러 요청을 보낼 경우 & 로 구분) -> 해당하는 key=value에 대한 값을 요청 보내는 것, 응답은 응답 객체로 받을 수 있음 post: 요청 객체 body에 응답에 필요한 데이터를 실어 보내고, 응답 객체를 받는다 fetch와 axios 모두 promise 타입의 객체를 반환한다 promise 객.. 2022. 4. 22. JavaScript) axios 헤더 설정, CORS 설정 axios 브라우저, node.js에서 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 -> 서버와 클라이언트의 통신을 위해 사용 CORS Cross Origin Resource Sharing (다른출처 리소스 공유) 웹이 고도화 됨에 따라 여러 곳의 리소스를 사용하기 위해 사용 기본적으로는 막혀있기 때문에 따로 설정을 해줘야 한다 -> 클라이언트의 요청 헤더와 서버의 cors 설정 axios 설치 npm install axios yarn add axiosCORS 설치 npm install cors yarn add corsaxios 사용 및 헤더 설정 // 클라이언트 import axios from 'axios'; axios('server url', { met.. 2022. 4. 21. JavaScript) 화면 크기, 브라우저 크기, 마우스 좌표 html5 표준 html5 표준을 지키지 않으면 브라우져 별로 인식하는 크기가 다름 window.outerWidth // 브라우져 전체 가로 길이 window.innerWidth // 브라우져 두께를 제외한 가로 길이 window.outerHeight // 브라우져 전체 세로 길이 window.innerHeight // 브라우져 두께를 제외한 세로 길이 그 외 document.body.offsetWidth // 현재 엘리먼트의 가로 길이 document.body.scrollWidth // 브라우저 안쪽 가로 길이 document.body.clientWidth // 현재 문서 기준 마우스 좌표 clientX, clientY // 문서 기준 위치 offsetX, offsetY // 현재 오브젝트 기준 위치 .. 2022. 4. 20. 이전 1 2 3 4 ··· 9 다음 728x90
