YumeHANA YUME'S DEV

OracleCloud DataBase오라클 클라우드에서 자율 운영 데이터 베이스 생성 생성 후 데이터 베이스 접속 ( 처음 데이터 베이스 생성시에는 몇분 후에 데이터 베이스가 생성 된다. ) 클라이언트 인증서( 전자지갑 ) 다운로드 전자지갑을 다운받은 후 압축을 풀어 원하는 경로에 저장 https://www.oracle.com/kr/database/technologies/appdev/jdbc-downloads.html JDBC and UCP Downloads page | Oracle 대한민국Oracle JDBC Driver Implements JDBC 4.2 spec and certified with JDK8, JDK11, JDK17, and JDK19 Oracle JDBC driver except cl..

구글처럼 상단에 사용자 아이콘을 누르면 바로 아래에 팝업이 나오게 처리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 ..

다크모드를 만들기 위해 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..