YumeHANA YUME'S DEV

react에서 color picker를 사용하기 위해서 react-colorful을 사용 https://npmjs.com/package/react-colorful react-colorful🎨 A tiny (2,8 KB) color picker component for React and Preact apps. Fast, well-tested, dependency-free, mobile-friendly and accessible. Latest version: 5.6.1, last published: 3 years ago. Start using react-colorful in your project by running `npm i reacwww.npmjs.com Installmentnpm install re..

component를 import 할때 ../../ 경로가 들어가는데 좀 더 단순화 하기 위해절대경로를 설정하여 좀 더 단순하게 표시할 수 있다. vite의 경우 이미 해당 라이브러리가 이미 포함되어있기 때문에 따로 설치할 필요가 없지만 vite가 아닌 경우 직접 라이브러리를 설치해줘야한다. 또한 추가적으로 설정을 해주어야한다.npm install path-browserify vite의 경우에는 vite.config.js 파일만 설정해주면 되지만vite가 아닌 경우 config.js 파일도 작업을 해주어야한다.Useageimport {defineConfig} from 'vite'import react from '@vitejs/plugin-react'import path from 'path'// https..

메뉴를 구성하기 위해 Drawer Navigator를 사용 https://reactnavigation.org/docs/drawer-navigator Drawer Navigator | React NavigationDrawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.reactnavigation.org Navigation docs에서 expo기준으로 진행Setup두개를 설치npm install @react-navigation/drawernpx expo install react-native-gesture-handler react-native-reanimate..

tab 기능을 구현하기 위해서tabBar를 사용 https://api.flutter.dev/flutter/material/TabBar-class.html TabBar class - material library - Dart APIA Material Design primary tab bar. Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations. Typically created as the AppBar.bottom part of an AppBar and in conjunction with a TabBarView. If a Tapi.flutter.de..

3 x 2 형태로 데이터를 보여주고자 하여 GridView를 사용하여 구현Table 보다는 Grid 형식으로 사용하는 이유는 테이블의 경우에는 데이터를 구조에 맞춰서 보여줘야하지만Grid의 경우에는 알아서 개수를 나누어 구조를 만들어주기 때문에 GridView를 사용 https://api.flutter.dev/flutter/widgets/GridView-class.html GridView class - widgets library - Dart APIA scrollable, 2D array of widgets. The main axis direction of a grid is the direction in which it scrolls (the scrollDirection). The most commonl..

외부에서 font를 사용하는 과정에서 font size가  큰 상태에서 bold속성을 주면 fontColor가 정상적으로 채워지지 않는 경우가 발생 이것처럼 텍스트의 외곽선이 안채워져서 비어있는 느낌이 나는 경우가 발생 이를 해결하기위해 테두리도 함께 색을 변경해주기 위해foreground 속성을 사용하여 테두리크기와 색을 변경해주었지만이 경우에는 내부 색은 채워지지 않는 상황이 발생 찾아보니 Text의 경우 테두리 색과 글자색을 동시에 변경을 할 수 없다고 하여테두리 색과 글자색을 개별로 만들어줘서 합쳐줘야한다.Useage이렇게 Stack을 활용하여 두개의 Text를 겹쳐주어 하나에는 외곽선 스타일을 다른 Text에는 내부 글자 색상을 넣어주도록 위젯을 생성 return Stack( child..

progress bar 기능 구현을 위해 percent_indicator 라이브러리를 사용여러 progress bar가 존재하기에 추후 여러 progress bar를 만들때 유용하게 사용이 가능할 것 같음. https://pub.dev/packages/percent_indicator percent_indicator | Flutter packageLibrary that allows you to display progress widgets based on percentage, can be Circular or Linear, you can also customize it to your needs.pub.dev Dependenciespercent_indicator 의존성 추가percent_indicator: ^..

bottomModal을 사용하면서 완료를 눌렀을때 뿐만 아닌 모달이 닫혔을때도 값을 전달하고자 한다.기존에는 Navigator.pop(context,value) 방식으로 모달이 닫힐때 값 전달을 처리했지만 이는 특정 버튼을 눌렀을때 혹은 특정 동작을 했을때만 처리가 가능하고 단순히 뒤로가기 혹은 모달 외부 클릭시 값 전달 방법이 없어callBack 함수를 이용. PopScope를 활용해보고자 했지만 모달을 닫기전에만 컨트롤을 할 수 있었을 뿐 모달이 닫히면서 값 전달이 안되었다. 텍스트 수정을 위해 연필 아이콘을 누르면 단순 input창이 나오는 bottomModal을 구현이후 모달이 닫을때 자동으로 수정되게 처리CallBack FunctionCallBack 함수 선언class BottomModalInp..