YumeHANA YUME'S DEV

현재 react-data-grid를 활용하여 그리드를 만들어 보고 있어서이때 그리드의 행,열 추가 및 삭제 기능을 자식컴포넌트에서 다루는게 편하것같아서 부모쪽에서는 그냥 자식컴포넌트의 함수만 호출 하도록 처리하기 위해forwardRef와 useImperativeHandle을 사용ForwardRef더보기ref 연결한 대상의 인스턴스나 객체를 ref.current에 연결시켜주는 역할을 한다. DOM이면 DOM 객체 연결클래스 컴포넌트면 컴포넌트 인스턴스 연결export default forwardRef(function MetaGrid(props: Props, ref: React.Ref) { return ( )} props는 함수형 컴포넌트에서 전달할 파라미터 타입이고, forwardRef를 사용했기때문..

alert이나 confirm을 직접 커스텀하여 만들려고 하기에직접 커스텀 hook을 만들어서 사용했다. context는 전역 데이터를 전달하기 위한 것이며 provider를 통해 값을 넣어준다.provider는 context에 값을 넣어주는 역할을 하며, provider로 감싼 범위 안에 있는 컴포넌트들이 context에 있는 값에 접근 할 수 있도록 해준다.hook은 provider가 context에 넣은 값을 가져오는 함수 역할을 해준다. Context 데이터를 저장할 context생성alert과 confrim만 사용하기에 alert과 confirm 함수를 받을 수 있도록 타입을 정의import { createContext } from "react";export interface DialogCont..

메모앱을 이제 지속해서 업데이트를 하면서 index DB를 활용해서 데이터를 저장하다보니 막상 데이터를 옮길려면 직접 복붙을 해야하는 상황이어서 백업 파일을 활용해야할 것 같다고 생각들어 기능을 구현 electron 의 dialog를 활용saveBackupMemo: (data) => ipcRenderer.invoke('save-backup', data), ipc 등록파라미터로 데이터를 받아서 데이터 객체를 Json으로 변환한다 이때의 확장자는 원하는 확장자를 선택해서 자유롭게 설정ipcMain.handle('save-backup', async (event,data) => { const today = formatDate(new Date()); const defaultFileName = `yume..

메인 화면에 추가 컨텐츠를 bottom sheet를 활용하여 구현해보고자 하여 기능을 구현Installment아무생각 없이 했다가 버전의 호환때문에 계속 오류가 나다가 버전을 낮췄더니 정상적으로 되었다.bottom-sheet 4.x.x 버전과 reanimated 3.x.x 버전을 사용npm install @gorhom/bottom-sheet@^4 react-native-reanimated^3 react-native-gesture-handler 설치완료 후에는 babel.config.js에 plugin을 추가해준다.module.exports = { presets: ['@react-native/babel-preset'], plugins: ['react-native-reanimated/plugin'..

grid layout을 할려고 style을 적용해보는데 react native에는 flex: grid가 없어서 찾아보다가그리드 기능을 해주는 flatList를 이용UseageflatList는 가로 세로 두가지를 할 수 있으며 각각 사용법이 다르다. 1. vertical우선 flaticon에서 해당 월의 개수만큼 박스를 만들려고해서해당 월의 마지막날을 data로 넣어주었다. numColums는 한 줄에 몇개를 할지 설정할 수 있다.이후 박스 영역 안에 넣어줘야하므로 onLayout을 이용해 박스 영역의 크기를 계산하여 박스 영역 안에 들어가는 item 박스의 크기를 계산 columWrapperStyle로 각 아이템의 간격을 설정이후 renderItem으로 아이템 박스를 생성const GAP = 4; con..

react native 앱에서 언어 변경을 하기 위해서 i18n을 사용직접 언어변경을 만들까 하다가 그냥 i18n을 사용하기로 했다. i18n 초기 세팅 이후에는 테마 변경처럼 동일하게 사용한다.Initialized세개의 패키지를 설치react-native-localize는 시스템 언어를 가져오기 위해서 사용한다.npm install i18next react-i18next react-native-localize 한국, 영어 언어 json을 생성// i18n/ko.json{ "translate": "언어", "theme" : "테마"}// i18n/en.json{ "translate": "Language", "theme" : "Theme"} 이후 i18n 초기화 작업을 한다.기본 언어는 한국어로 처..

항상 프로젝트를 하면 라이브러리를 많이 사용하는데popup이나 modal같은 경우는 항상 직접만들게 된다.라이브러리를 사용하면 커스텀이 복잡하여 원하는 디자인으로 만들기가 어려워서 직접 만들게 된다.react native에서도 마찬가지로 직접 만들어 보았다. react native에서는 Modal컴포넌트가 있어서 좀 쉽게 구현이 되는데 이것저것하다가 Modal이 재대로 적용이 안되어서그냥 다른 방식으로 만들기로했다.Initializedportal은 portal로 감싼 자식들을 최상위로 보내준다.web으로 따지만 자식 컴포넌트이지만 최상위로 보내주는 것과 같다고 생각하면 된다. Modal 컴포넌트도 portal처럼 작동하지만 뭔가 꼬여버린지 잘 안되어서 portal을 그대로 사용했다.npm install ..

이전에 bottom tabs을 했다가 bottom tabs을 빼고 진행하기로 결정.이후 버튼을 누르면 페이지 이동이 필요하여 stack navigation을 사용Initializednative-stack 패키지를 설치npm install react-native-screens @react-navigation/native-stackStack Navigation사용방법은 이전 bottom-tabs와 비슷했다.각 페이지별로 option에 애니메이션 진행 방향을 설정해서 뒤로가기나 이동이 자연스럽게 이루어지도록 설정첫 페이지는 home 페이지로 설정 App.tsx자체에서 만들어도 되지만,App.tsx에는 나중에 provider나 이것저것 추가하게 되면 지저분해보일까봐 navigation을 따로 만들었다.impor..