YumeHANA YUME'S DEV

다크모드를 만들기 위해 toggle을 만들어서 누른것에 따라 다크모드와 화이트 모드가 되도록 토글 버튼을 구현 Toggle Componenttoggle의 전체 영역의 크기를 부모에서 설정하여 toggle 버튼이 또 필요할 경우 이를 활용하고자전체크기를 설정하는 toggle component를 구현import {ReactNode} from "react";import './ToggleComponent.scss'interface ToggleComponentProps { children: ReactNode;}const ToggleComponent = ({children}: ToggleComponentProps ) =>{ return( {c..

react에서 아이콘 사용시 태그를 활용하기에는 색을 자유롭게 바꾸지 못해서 색을 자유롭게 바꾸기 위해 SVG 파일을 사용 Plugin Setvite plugin 설치npm install vite-plugin-svgr 이후 vite.config.ts 파일에서vite-plugin-svgr을 import한 후 plugins 에 plugin을 추가import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import svgr from 'vite-plugin-svgr'// https://vitejs.dev/config/export default defineConfig({ plugins: [react(),svgr()],}) vite-en..

Route를 활용하여 페이지 이동을 할 수 있다.npm install react-router-dom react-router-dom을 설치하여 Route와 Routes를 import App.tsx ( 타입스크립트를 사용하기에 js 파일이 아닌 tsx확장자를 가진다.) 에 Route, Routes를 importimport React from 'react';import { Route, Routes } from "react-router-dom"; 이후 index 파일에서 을 로 감싸주면 Rotue를 사용할 수 있다.import React from 'react';import ReactDOM from 'react-dom/client';import './index.scss';import App from './Ap..