전체 글

[ Hook ] usePreventLeave

🔴 Introduction ⚪ 현재 페이지를 종료하려고 할 때, 경고 메시지를 띄울지 말지를 결정하는 함수를 리턴해주는 Hook 🟠 Hook export const usePreventLeave = () => { const listener = (event) => { event.preventDefault(); event.returnValue = ""; }; const enablePrevent = () => window.addEventListener("beforeunload", listener); const disablePrevent = () => window.removeEventListener("beforeunload", listener); return [enablePrevent, disablePrevent..

[ Hook ] useNotification

🔴 Introduction ⚪ Window Notification에 대한 옵션을 설정하면 권한 허용 여부 이후 Notification을 띄워주는 Hook 🟠 Hook export const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { if (Notification.permission !== "granted") { Notification.requestPermission().then((permission) => { if (permission === "granted") { new Notification(title, options); } else { retur..

[ Hook ] useHover

🔴 Introduction ⚪ 컴포넌트에 Hover 이벤트 발생시 전달한 함수를 실행시켜주는 Hook 🟠 Hook import { useEffect, useRef } from "react"; export const useHover = (onHover) => { const element = useRef(); useEffect(() => { if (typeof onHover !== "function") { return; } if (element.current) { element.current.addEventListener("mouseenter", onHover); } return () => { if (element.current) { element.current.removeEventListener("mous..

[ Hook ] useConfirm

🔴 Introduction ⚪ 메시지와 확인할 시 함수, 취소할 시 함수를 인자로 넣어 보내면 이에 해당하는 Confirm 모달 창을 띄워주는 hook 🟠 Hook export const useConfirm = (message = "", onConfirm, onCancel) => { if (!onConfirm || typeof onConfirm !== "function") { return; } if (onCancel && typeof onCancel !== "function") { return; } const confirmAction = () => { if (window.confirm(message)) { onConfirm(); } else { onCancel(); } }; return confirmAc..

[ Hook ] useBeforeLeave

🔴 Introduction ⚪ 마우스가 브라우저 창의 바깥으로 벗어났을 때, 파라미터로 받은 onLeave 함수를 실행시키는 hook 🟠 Hook import { useEffect } from "react"; export const useBeforeLeave = (onLeave) => { const handle = (event) => { const { clientY } = event; if (clientY { if (typeof onLeave !== "function") { return; } else { document.addEventListener("mouseleave", handle); } return () => document.removeEventListener("mouseleave", handle..

[ 1단계 ] 신규 아이디 추천

🔴 문제 설명 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력한 ..

[ React ] framer-motion

🔴 Introduction ⚪ React에서 컴포넌트 animation을 도와주는 라이브러리 🟠 Official Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-ready React animation and gesture library. www.framer.com 🟡 Install npm i framer-motion 🔵 Reference GitHub - windragon0807/framer-motion-examples: 여러 가지 framer-motion 요소들을 컴포넌트별로 경험해 볼 수 있 여러 가지 framer-motion 요소들을 컴포넌트별로 경험해 볼 수 있는 Application ..

[ React ] react-beautiful-dnd

🔴 Introduction ⚪ Drag and Drop을 쉽게 해결해주는 오픈 소스 라이브러리 🟠 Official GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React Beautiful and accessible drag and drop for lists with React - GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React github.com 🟡 Install // react version >= 18.0.0 npm i react-beautiful-dn..

[ JS ] 이벤트 버블링 & 캡쳐링

[JS] 📚 브라우저 버블링 & 캡쳐링 정리 이벤트의 흐름 계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 즉, 이벤트가 전파(Event Propagation)되는데 전파 방향에 따라 버블링(Event Bubbling)과 캡처링(E inpa.tistory.com