Web/HTML (4) 썸네일형 리스트형 [html] 인피니트 스크롤링 - hasMorePost와 같은 state를 만들어서 스크롤링이 마지막부분에 닿았을 때 데이터가 더 있거나 없거나 하는 것을 구분함 - useEffect에 window.addEventListener의 경우 return을 해줘서 이벤트를 없애줘야 메모리에 쌓이지 않음 - 스크롤시 알아야 할 변수 * scrollY : 현재 스크롤 위치 * clientHeight : 화면에서 보이는 스크롤의 길이 * scrollHeight : 스크롤 맨 위부터 아래까지의 총 길이 * 스크롤을 끝까지 내렸을 경우 "scrollY + clientHeight = scrollHeight" - 가장 아래로 내렸을 경우 데이터를 불러오는 것이 아니라 그 전에 불러와야 사용자 경험에 좋음 - 스크롤링의 경우 동작이 연속으로 일어나기 때문.. [html] <a> 태그에서 target = _blank 사용 해당 이슈의 원인은 Tabnabbing 피싱 공격에 노출될 수 있기 때문이라고 한다 Tabnabbing 피싱 공격이란 target="_blank"인 태그를 클릭하였을 때 새롭게 열린 탭에서 기존 페이지를 피싱페이지로 바꿔 정보를 탈취하는 피싱공격 예를 들어 A 사이트에서 사용자가 blank 태그를 이용해 B 사이트로 이동 후에 다시 A사이트로 돌아왔을때 실제 A페이지가 아닌 A페이지처럼 보이는 피싱 사이트로 이동하는 것이다 target=”_blank” 와 rel=”noopener noreferrer”을 같이 적용해서 문제를 해결했다 rel=”noopener noreferrer”는 rel=noopener 속성이 부여된 링크를 통해 열린 페이지는 opener의 location변경과 같은 자바스크립트 요청을 .. [html] input HTML - input태그와 그 속성 type, value, name - 입력태그 (1) (tistory.com) HTML - input태그와 그 속성 type, value, name - 입력태그 (1) HTML - input태그와 그 속성 type, value, name 입력태그 (1) 오늘은 input태그와 그 속성 type, value, name에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하. yangbari.tistory.com [HTML] Semantic HTML [HTML] 시맨틱(Semantic) HTML을 짜보자 (tistory.com) 이전 1 다음