개발해보개

이벤트 버블링(Event Bubbling)이란? 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는데 이것을 이벤트 버블링이라고 한다. 버블링의 순서 이벤트발생요소 -> 이벤트발생부모요소 -> 이벤트발생조상요소 이벤트 캡쳐링(Event Capturing)이란? 캡쳐링은 버블링의 반대 개념으로, 한 요소에 이벤트가 발생하면, 최상단의 요소부터 처음 발생한 요소까지 핸들러가 동작하는 것을 말한다. 캡쳐링의 순서 이벤트발생조상요소 -> 이벤트발생부모요소 -> 이벤트발생요소

JavaScript 2022. 1. 9. 19:26

쿠키(Cookie)란? 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 저장소. 웹서버에서 pc로 보내는 작은 파일들을 저장. 서버와 데이터를 공유하는 용도로 사용되며 만료 기간이 있어 시간이 지나면 자동 삭제되나, 만료 기간 지정이 가능하다. 장점으로는 대부분의 브라우저가 지원을 하고있다는 점이지만 단점으로는 데이터 저장 제한으로 사이즈가 매우 작고(4KB) 서버에 매번 HTTP 요청을 하므로 서버에 부담이 된다는 점이다. (로그인, 방문횟수, 방문기록, 팝업창 다시 보지 않음 등의 기능에 사용된다.) 캐시(Cache)란? 웹 페이지 요소를 저장하기 위한 임시 저장소. 캐시는 자주 쓰이는 문서의 사본을 자동으로 보관하는 HTTP 장치이다. 목적은 웹페이지가 빠르게 렌더링 할 수 있도록 ..

Computer Science 2022. 1. 9. 19:16

웹 스토리지(web storage)란? 웹 스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. 약 5MB까지 저장 공간을 이용할 수 있다. 웹 스토리지에는 로컬 스토리지 (local Storage)와 세션 스토리지 (session Storage)가 있다. 두 스토리지는 모두 window 객체 안에 들어 있으며, Storage 객체를 상속받기 때문에 메소드가 공통적으로 존재한다. 도메인 별 용량 제한이 있다.(프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유) 브라우저별로, 기기별로 다르긴 하지만 모바일은 2.5mb, 데스크탑은 5mb~10mb. 로컬 스토리지 (Local Storage)란? 로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며,..

Computer Science 2022. 1. 9. 19:05

포트폴리오 제작 중, 너무나도 자연스럽고 무의식적으로 a 태그를 사용하다가 노란색 에러 친구를 만났다. 응? 잠깐... 너무 기본적이고 익숙한 태그를 작성한거 같은데... ? 나 뭐 잘못 썼나 ? 당황하다가 친절한 에러를 보고 구글링을 시작했다. rel="noopener" .... ? stackoverflow에서도 많은 사람들이 왜 rel 없이 사용 할 수 없는지 궁금해하고 있었다. 공부한 결과. tartget="_blank"로 새 탭에서 링크된 페이지를 열게 할 경우, 보안상 취약하다고 한다. 새로운 탭으로 전환되는 동안 기존 페이지가 피싱사이트로 바꾸어 버리는 나쁜 범죄가 있다고한다. 이것을 reverse tabnapping 이라고 한단다.. 이때 rel="noopener noreferrer"이 이것..

HTML CSS 2021. 12. 29. 13:26

React 로그인로그아웃 기능 구현 강좌를 따라하다가 다음과 같은 오류를 만났다. 'useHistory' is not exported from 'react-router-dom' 구글링하여 찾아낸 해결법. react-router-dom V6에서 useHistory()는 useNavigate()로 대체되어 Navigate로 변경했더니 잘 작동 된다! **변경전 import {useHistory} from "react-router-dom" const history = useHistory(); props.history.push("/login") **변경후 import { useNavigate } from "react-router-dom" const navigate = useNavigate(); navigate(..

React 2021. 11. 24. 13:37

이미 만들었던 블로그 사이트의 디자인을 대폭 변경하면서, React Router로 렌더링되는 컴포넌트를 지정해주는 상황에서 props를 전달하게 되었다. 변경전 변경후 ^^ 아 혹시나 해봤는데 역시나 안된다. 구글링 후 바로 해결 할 수 있었다. Goood!! 옳은 방법 } />

React 2021. 11. 22. 20:45

React에서 Font Awsome과 같은 Icon을 간편하게 사용하는 방법. React-icons 라이브러리 설치하기. npm install react-icons --save yarn add react-icons 터미널에서 해당 라이브러리를 설치 후 https://react-icons.github.io/react-icons 사이트에서 사용하고자 하는 항목의 맨 위에 있는 사용방법을 참고하자. 컴포넌트를 import 하여 사용 하는 것과 같은 방법으로 icon을 쉽게 사용 할 수 있다. import { FaHeart } from "react-icons/fa"; function Icons(){ return(

React 2021. 11. 18. 12:52

Data속성 HTML5부터 새로 추가된 개념. HTML 요소의 'data-'로 시작하는 속성을 말한다. 이러한 데이터 속성은 특정한 데이터를 DOM요소에 저장해 두는 것이 목적이다. 속성명은 data-value 이지만 custom data attributes로서 value자리에 원하는 속성명을 넣을 수 있다. data-code / data-img / data-color / data-number 등 .. 다양하게 사용 가능하다. 이 저장된 데이터를 자바스크립트에서 불러와 사용하게 될텐데, 속성명은 data-의 뒷부분이 된다. dataset.code / dataset.img / dataset.color / dataset.number 등 과 같이 접근할수있다. **주의사항 새로 추가된 속성이다보니, 호환성에 ..

HTML CSS 2021. 11. 17. 13:13