YumeHANA YUME'S DEV

현재 react-data-grid를 활용하여 그리드를 만들어 보고 있어서이때 그리드의 행,열 추가 및 삭제 기능을 자식컴포넌트에서 다루는게 편하것같아서 부모쪽에서는 그냥 자식컴포넌트의 함수만 호출 하도록 처리하기 위해forwardRef와 useImperativeHandle을 사용ForwardRef더보기ref 연결한 대상의 인스턴스나 객체를 ref.current에 연결시켜주는 역할을 한다. DOM이면 DOM 객체 연결클래스 컴포넌트면 컴포넌트 인스턴스 연결export default forwardRef(function MetaGrid(props: Props, ref: React.Ref) { return ( )} props는 함수형 컴포넌트에서 전달할 파라미터 타입이고, forwardRef를 사용했기때문..

페이지에 언어 변경이 가능한 페이지를 구현하기 위해서 i18n을 사용 우선 i18n 라이브러리를 설치합니다.npm install i18next react-i18nextInitalizedi18n 초기 세팅을 위해루트 경로에 i18n.ts 파일을 만들어서 기본 언어 설정 및 사용할 언어 리소스를 추가해줍니다.import i18n from 'i18next';import { initReactI18next } from 'react-i18next';import { enTranslation, koTranslation } from './locales/index';i18n .use(initReactI18next) .init({ resources: { en: { translati..

기존에 Router를 사용할때 Navigator를 활용해서 해당 메뉴를 누르면Navigator로 이동을 시키는 방법으로 router를 사용했었는데이 경우 메뉴를 하나 추가할때마다 여러 파일에서 추가적으로 작업을 해주어야했기에 좀 더 편하게 관리하고자 했다. 이번에는 navigator로 이동을 하는 것이 아닌 Link를 활용하여 a 태그로 이동이 되도록 처리하고,routes와 router도 자동으로 만들어지도록 하여좀 더 메뉴를 쉽게 관리할 수 있도록 바꿔보았다. 기존의 react-router는 그대로 사용한다.npm install react-router-domRouter Typerouter를 좀 더 편하게 사용하기위해 타입을 커스텀을 해준다.기존의 RouteObject를 활용하여 router 할 수 있지..

티스토리와 같은 방식의 태그를 구현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..