YumeHANA YUME'S DEV

티스토리와 같은 방식의 태그를 구현Input TagonKeyDown함수를 활용하여 Enter와 Tab이 눌렀을때 input을 다시 빈값으로 초기화 해준다. const [tag, setTag] = useState("") const onKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); setTag(""); } }우선 해시태그와 input으로 태그를 입력할 수 있도록 작성 # setTag(e.target.value)} onKeyD..

react에서 color picker를 사용하기 위해서 react-colorful을 사용 https://npmjs.com/package/react-colorful react-colorful🎨 A tiny (2,8 KB) color picker component for React and Preact apps. Fast, well-tested, dependency-free, mobile-friendly and accessible. Latest version: 5.6.1, last published: 3 years ago. Start using react-colorful in your project by running `npm i reacwww.npmjs.com Installmentnpm install re..

component를 import 할때 ../../ 경로가 들어가는데 좀 더 단순화 하기 위해절대경로를 설정하여 좀 더 단순하게 표시할 수 있다. vite의 경우 이미 해당 라이브러리가 이미 포함되어있기 때문에 따로 설치할 필요가 없지만 vite가 아닌 경우 직접 라이브러리를 설치해줘야한다. 또한 추가적으로 설정을 해주어야한다.npm install path-browserify vite의 경우에는 vite.config.js 파일만 설정해주면 되지만vite가 아닌 경우 config.js 파일도 작업을 해주어야한다.Useageimport {defineConfig} from 'vite'import react from '@vitejs/plugin-react'import path from 'path'// https..

제한시간을 두기 위해 타이머 기능을 구현Timer Component 컴포넌트로 만들어서 다른곳에서도 재사용 할 수 있도록 세팅 제한시간을 둘 값을 prop로 전달, 타이머가 종료 되었을 경우 특정 함수가 실행 되도록 설정memo를 사용한 이유는 react가 재렌더링이 될 경우 Timer 컴포넌트도 재렌더링 되는 경우를 막고자 prop의 값이 변경될때만 재렌더링이 되도록 처리 memo : prop 값이 변경이 되어야 재렌더링을 한다. MINUTES_IN_MS 는 initTime * 1000을 해서 initTime에 제한 시간 초를 보내어서 분으로 처리되게 설정만약 3분이 제한이라면 initTime에 180을 보내면 3분으로 설정이된다. 이후 useEffect() 를 활용하여 시간이 변경될때마다 보여주는 분..

구글처럼 상단에 사용자 아이콘을 누르면 바로 아래에 팝업이 나오게 처리UserPopup Component우선 user icon을 추가하고 open과 onClose함수를 생성const [isUserPopup, setIsUserPopup] = useState(false)const handleUserPopup = () => { setIsUserPopup(!isUserPopup);}return ( ) import './UserPopupComponent.scss';const UserPopupComponent = ({ isOpe..

이전에 커스텀 메뉴를 눌렀을때 추가와 편집 메뉴를 구성했는데 이때 추가 버튼을 누르면 드래그가 가능한 팝업을 구현DraggableDraggable을 사용하기위해 라이브러리 설치npm install react-draggable Draggable PopupComponent를 생성부모 컴포넌트에서 버튼을 클릭하면 화면이 나오게 하기 위해서 isOpen 상태와 팝업을 닫기위한 onClose를 설정isOpen값이 true면 팝업이 열리도록 조건을 추가import React from 'react';import Draggable from 'react-draggable';import './DraggablePopupComponent.scss'import {observer} from "mobx-react";import t..

기존 크롬 화면에서 우클릭시에는 기본 크롬 메뉴가 나오는데 이를 막고 원하는 메뉴를 설정해서 나오게 구현ContextMenu Component해당 메뉴 기능들을 내가 원하는 구역에만 나오게 처리하고 싶어서 컴포넌트를 생성 context_container영역은 props로 전달되어 화면에 나오는 영역이므로 이 영역에서만 우클릭을 할 때 커스텀 메뉴가 나오게 해당 div에 onContextMenu 이벤트를 추가 context_menu는 커스텀한 메뉴바 내용 return ( {children} 추가 편집 ..

다크모드와 화이트모드 토글을 만들면서 현재의 모드가 어떤 모드인지 상태관리가 필요하여 MobX를 사용MobXmobX와 mobx-react를 설치npm install mobx mobx-react isDarkMode = false로 초기값을 세팅이후 constructor를 만들어 makeAutoObservable(this)를 통해 isDarkMode값이 바뀌면 이를 감지하여 자동으로 해당 페이지를 재렌더링 toggleTheme 함수를 만들어 모드 변경 토글 버튼을 누르면 해당 함수가 실행되도록 처리 마지막으로 themeStore 객체를 만들어준 후 exportimport { makeAutoObservable } from "mobx"class ThemeStore { isDarkMode = false ..