민프

만약 /spot/BTCUSDT_SPBL?type=spot 이라는 URL 파라미터를 설정해주기 위해서는 아래와 같이 작성해야한다 이렇게 하게 되면 위의 id값은 BTCUSDT_SPBL이 되는 것 이다. 그럼 뒤에 타입은 어떻게 가지고올까? useLocation hook을 사용하여 쿼리 파라미터를 받아와 사용할 수 있다 예를 들어서 import { useLocation } from "react-router-dom"; function SpotTradingPage() { const location = useLocation(); const id = useParams().id; const type = new URLSearchParams(location.search).get("type"); // ... return ..

필터링 방법 import React, { useState } from 'react'; //타입 인터페이스 지정 interface Item = { id: number; name: string; }; const Example: React.FC = () => { // 예시 데이터 생성 const [items, setItems] = useState([ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }, ]); //필터링 된 아이템을 저장해줄 useState const [filteredItems, setFilteredItems] = useState(items); //필터링 기능 const handleFilter = (sea..

https://www.npmjs.com/package/qrcode.react qrcode.react React component to generate QR codes. Latest version: 3.1.0, last published: 9 months ago. Start using qrcode.react in your project by running `npm i qrcode.react`. There are 691 other projects in the npm registry using qrcode.react. www.npmjs.com 먼저, qrcode.react 라이브러리를 설치합니다. 이를 위해 npm을 사용하면 다음 명령어를 입력합니다: npm install qrcode.react 설치가 완료되..

https://www.npmjs.com/package/http-server http-server A simple zero-configuration command-line http server. Latest version: 14.1.1, last published: 10 months ago. Start using http-server in your project by running `npm i http-server`. There are 1035 other projects in the npm registry using http-server. www.npmjs.com 위 공식홈페이지에서 나온 것 처럼 http-server는 Node.js에서 제공하는 모듈 중 하나로, 로컬 컴퓨터에서 정적인 파일들을 웹서버를 ..

커스텀 하고싶은 부분은 1. width 2. height 3. 텍스트 필드 앞부분 혹은 뒷부분에 아이콘 및 이미지 넣기 4. border 5. background 결과화면

https://mui.com/x/react-date-pickers/getting-started/ Date and Time Picker - Getting started - MUI X Get started with the Date and Time pickers. Install the package, configure your application and start using the components. mui.com https://mui.com/x/react-date-pickers/adapters-locale/#set-a-custom-locale Date and Time pickers - Localized dates - MUI X Date and Time Pickers support formats from ..

화면 크기를 줄일 때 root style에서 자동으로 padding-bottom이 생기는 것을 확인할 수 있었는데 왜 생기는 것 일까? React에서 렌더링하는 웹 페이지에서 뷰포트(viewport) 크기를 줄인다면, 콘텐츠 영역의 크기도 함께 줄어들게 되는데. 이때, 페이지 하단에 있는 콘텐츠가 뷰포트 밖으로 넘치지 않도록 하기 위해 padding-bottom이 자동으로 추가되는 것이다 padding-bottom은 CSS 속성 중 하나로, 요소의 내부 공간을 조절하는 속성이다. 따라서 React Root에서도 해당 요소에 padding-bottom을 추가하여, 뷰포트 크기가 줄어들더라도 콘텐츠가 페이지 하단에서 자연스럽게 잘리지 않도록 보호하는 것이다. 만약 이러한 자동 padding-bottom을 원..

MUI TextField를 사용하여 React TypeScript 애플리케이션을 개발할 때, 글꼴 크기, 높이 및 길이와 같이 스타일을 변경하려면 몇 가지 방법이 있다. 나는 3번의 방법을 사용하는데 상황에 맞게 쓰면 될 것 같다. 1. MUI 테마 설정을 변경하여 스타일 변경 MUI 테마를 사용하여 글꼴 크기, 높이 및 길이를 변경할 수 있습니다. 테마를 사용하면 MUI 구성 요소의 다양한 스타일을 한 번에 변경할 수 있습니다. 예를 들어, 다음 코드는 MUI TextField의 글꼴 크기, 높이 및 길이를 변경하는 방법이다. import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import TextField from '@m..

자식 컴포넌트 Child.tsx import { TextField, TextFieldProps } from "@mui/material"; import React, { forwardRef, RefObject, useImperativeHandle, useRef, } from "react"; import styled from "styled-components"; // Create your ref types here export type CategoryRefHandler = { inputRef: RefObject; //여기에서 정의한 Ref들은 부모에서 사용할 수 있다. }; const CategoryInputBox = forwardRef((props: any, ref: any) => { const inputR..

https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API Clipboard API - Web API | MDN Clipboard API는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다. developer.mozilla.org const eventKey = (e: React.KeyboardEvent) => { console.log("e", e); if (e.code === "Backspace" || e.key === "Backspace") { } } else if ((e.ctrlKey || e.metaKey) && e.key === "v") { navigator.clipboard..