YumeHANA YUME'S DEV

react에서 svg 아이콘 사용  해당 gitHub를 참고하여 사용https://github.com/kristerkari/react-native-svg-transformer GitHub - kristerkari/react-native-svg-transformer: Import SVG files in your React Native project the same way that you would inImport SVG files in your React Native project the same way that you would in a Web application. - kristerkari/react-native-svg-transformergithub.com 우선 사용할 svg 파일을 다운https:/..

Expo camera를 활용하여 QR 코드 인식하기Expo 에서 BarcodeScanner를 사용할려고했는데 오류가 발생하면서 실행이 안되어서 Camera를 사용해서 기능을 구현 https://docs.expo.dev/versions/latest/sdk/camera/ CameraA React component that renders a preview for the device's front or back camera.docs.expo.devExpo Camera Setup우선 Expo-camera를 설치npx expo install expo-camera 앱을 사용할때 사용자의 카메라 혹은 오디오의 권한을 요청하기 위해 플러그인을 추가app.json 파일에 plugins를 추가{ "expo": { "..

텍스트를 상황에 맞게 보여주고 안보여주고 처리를 위해 blur 처리를 이용 금액을 보여주는 부분을 만들면서 blur처리를 하며 보이고 안보이고를 선택할 수 있도록 기능을 처리  BackdropFilterbackdropFilter를 사용하면 backdropFilter위에 작성한 내용들을 blur처리를 한다background의 배경을 blur처리 하는 것이므로 child안에는 blur처리를 안하는 내용들이 들어간다. 텍스트 하나만 blur처리를 하고자 child에는 빈 영역을 넣어주어 blur처리가 되는 영역을 잡아준다.child: BackdropFilter( filter: ImageFilter.blur( sigmaX: 5.0sigmaY: 5.0), child: Con..

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 ..