Programming/Javascript (5) 썸네일형 리스트형 [Javascript/React] 이벤트 버블링 제거하기 / 해당 영역 클릭시 이벤트 방지 / Event Bubbling 1. 이벤트 버블링(Event Bubbling)이란? 계층형 구조의 이벤트를 가진 부모 선택자 선택 시 → 자식 선택자에게 영향 2. 이벤트 버블링을 방지해야하는 경우 modal(popup)창 만들 때 dim 처리 된 바깥 부분을 눌렀을 때도 modal이 꺼지도록 기능을 만들 경우 등 겹치는 영역의 요소에는 이벤트가 발생하지 않도록 할 때 3. 이벤트 버블링 막는 방법 { setOpen(!open); } > { // e.stopPropagation();으로 이벤트 막기 e.stopPropagation(); }} > { setOpen(!open); } /> [Javascript] 클릭 시 url 페이지 띄우기(새 창, 새 탭) 1. 새 창에서 url 띄우기 // 새로운 창에서 url 열기 window.open('url 주소', 'newWindow'); 2. 새 탭에서 url 띄우기 // 새 탭에서 url 열기 window.open('url 주소', '_blank'); 3. 태그 사용으로 새 창, 새 탭에서 열기 태그로는 새 창, 새 탭을 구분하여 열 수는 없다. 사용자의 브라우저 설정에 따른다. 4. React에서 사용 시 // 새 창에서 url 열기 { window.open('url 주소', 'newWindow'); }> // 새 탭에서 url 열기 { window.open('url 주소', '_blank'); }> [Javascript] Cookie, Sessionstorage, Localstorage 내용 정리 및 사용법 1. Cookie, Sessionstorage, Localstorage 정리 Cookie Web Storage Sessionstorage Localstorage 특징 • 최대 4kb • 만료기한 있음 • Key, Value 형태 • 서버와 로컬에 정보 저장 • 클라이언트에 300개까지 저장 가능 • 하나의 도메인 당 20개의 값만 가능 • 각 클라이언트 고유 ID 부여 • 로컬에만 정보 저장 • 클라이언트에 대한 정보 저장 • 최대 5mb(브라우저마다 차이있음) • Key, Value 형태 • 세션 종료시 정보 삭제 = 데이터 영구적X • 데이터 영구적O 동작 1. 클라이언트 → 페이지 요청 2. 서버에서 쿠키 생성 3. http 헤더에 쿠키를 넣어 응답 4. 쿠키가 만료되지 않았다면 브라우저 종료 후에.. [Javascript] Scroll API, 스크롤 현재 위치, 디바이스 세로 사이즈 찾기 1. 스크롤 최상위 강제 이동 window.scrollTo(0); 2. 현재 스크롤의 위치 window.scrollY 3. 사용하는 디바이스 화면 세로 사이즈 document.documentElement.clientHeight 4. 웹 페이지의 스크롤을 포함한 세로 사이즈 document.documentElement.scrollHeight 5. 스크롤 최하위 위치 document.documentElement.scrollHeight - document.documentElement.clientHeight [Javascript] 정규식 모둠세트 프로젝트 한 번당 한 번 이상은 사용하게 되는 느낌의 Javascript 정규식입니다. 천 단위 콤마, 3자리 수 콤마 (Comma separator) // Comma separator(,) 천 단위 콤마, 3자리 수 콤마 function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } 이메일 유효성 체크 (Email Validation) // Email Validation function CheckEmail(str) { var reg_email = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/; if (!reg_email.test(str).. 이전 1 다음