YumeHANA YUME'S DEV

다크모드와 화이트모드 토글을 만들면서 현재의 모드가 어떤 모드인지 상태관리가 필요하여 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..

OnBoarding에서 초기 설정을 처리하기 위해서요일과 금액을 세팅해야 화면을 넘어가게 처리 그 과정에서 요일 선택에서 datePicker를 사용할까 하다가 요일만 필요하기에 새로운 방법을 고민하다가Scroll ListView를 사용하기로 결정 그러면 ListView를 가로로 스크롤이 가능하여 선택 할 있다.Scroll ListViewListView에서 보여줄 리스트 초기화 및 선택값 초기화final List list = List.generate(31, (index) => (index + 1).toString()); String selectedValue = "1"; ListView 에 Scroll기능을 추가할려면scrollDirection을 추가해서 방향을 설정해주면 된다. 이후 Getstu..

처음 앱이 실행되었을때 설명하는 화면이 나오는 것을 처리하고 싶어서 OnBoarding을 사용https://pub.dev/packages/introduction_screen introduction_screen | Flutter packageIntroduction/Onboarding package for flutter app with some customizations possibilitiespub.dev flutter에서 introduction_screen을 활용하여 onBoarding을 구현Dependenciesintroduction_screen 의존성 추가introduction_screen: ^3.1.14 OnBoardingOnBoarding 화면을 만들기 위해 메인 컴포넌트를 제작이후 세부 페이지..

Addhive box에 데이터를 추가할 경우 단순하게 add를 통해 데이터를 추가 할 수 있다. 처음엔 기존 index값을 현재 _costBox의 length를 기준으로 해서 했지만수정 삭제 기능이 들어가면서 index값이 계속 꼬여 수정이나 삭제가 다른 데이터에 적용되서 방식을 변경 void add(String title, String pay) { Cost cost = Cost(id: getNextId(_costBox), title: title, pay: pay); _costBox.add(cost); } box가 비어있다면 0을 return하고그 외는 현재 박스의 마지막 값의 id에서 +1 을 해주는 방식으로 index를 설정 int getNextId(Box box) { if (bo..

삭제 기능을 구현하기 위해 alert을 사용AlertDialogalertDialog는 다른 삭제 부분에서 사용 가능성을 고려하여 컴포넌트화 시킴class CustomAlertDialog extends StatelessWidget { const CustomAlertDialog({super.key}); @override Widget build(BuildContext context) { return AlertDialog( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)), backgroundColor: boxColor, title: Text( '정말루?!', style..