YumeHANA YUME'S DEV

페이지에 언어 변경이 가능한 페이지를 구현하기 위해서 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..

이전에 커스텀 메뉴를 눌렀을때 추가와 편집 메뉴를 구성했는데 이때 추가 버튼을 누르면 드래그가 가능한 팝업을 구현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..