개발조각

이번에는 차트페이지를 만들어보려 합니다. 구현할 화면 그래프를 막 그리긴 했지만 대강 이런 디자인으로 구현하고자 합니다. 이 스크린의 기능에 대해 간단하게 설명하자면 작성한 운행일지 기록 데이터의 월간, 연간에 대한 영업금액 차트 화면입니다. 구현 기능 항목을 크게 나누면 탭, 차트, 리스트로 구분되어 있습니다. 탭 : 월간, 연간 월간 년도를 표시하는 달력타이틀이 있음 차트에는 해당 연도에 대한 1월 ~ 12월까지의 영업금액 데이터가 나옴 리스트에는 해당 연도에 대한 1월 ~12월까지에 대한 영업금액 데이터가 역순으로 나옴(최신 데이터가 제일 위에 있음) 연간 년도를 표시하는 달력타이틀이 없음 차트에는 연도별 영업금액 데이터가 나옴 리스트에는 연도별 영업금액 데이터가 역순으로 나옴(최신 데이터가 제일 ..

이번 프로젝트에서 꼭 필요한 요소 중 하나인 차트 리액트에서 유명한 차트 라이브러리가 많이 때문에 고민을 했었는데 리액트 네이티브에서는 너무 없어서 설치해 보고 내가 원하는 디자인으로 커스텀이 가능한지 확인하고 테스트하면서 설치 삭제를 3번정도 진행한 뒤 드디어 100% 만족은 아니지만 어느 정도 만족하는 차트라이브러리를 찾게 되었습니다. 제가 선택한 라이브러리는 react-native-gifted-charts라는 라이브러리입니다. 그동안 무슨 라이브러리를 설치하고 왜 사용안했는지에 대한 설명과 react-native-gifted-charts 사용방법에 대해 설명하겠습니다. react-native-chart-kit RN에서 그래프 라이브러리 중 가장 유명하기도 하고, 주간 다운로드가 50,000이 넘어서..

Home화면에서 구현해야 될 기능을 크게 3가지로 구분할 수 있습니다. 현재 달이면 다음 달 이동 못하게 하기 월간 운행 정보 데이터 구하기 연간 영업 금액 구하기 구현 화면 기존 코드 // react, react-native import React, {useEffect, useState} from 'react'; import {ScrollView} from 'react-native'; // library import dayjs from 'dayjs'; // assets, utils, realm import {useRecoilState} from 'recoil'; import {recordState} from '../recoil/atoms.ts'; import {readAllRecord} from '....

드디어 오류의 오류를 거쳐 프로젝트에서 crud를 구현했습니다. RN에서 crud를 구현한 부분에 대해 공유해보려 합니다. recoil을 사용하게 된 이유 분명 realm에서는 crud가 잘 작동되는데, 화면에서는 realm이 crud가 돼도 업데이트가 되지 않는 오류를 발견하게 되었습니다. 이 화면에서 추가, 수정, 삭제를 해도 변화가 없는 문제 발생 -> 추가, 수정, 삭제를 해도 화면이 업데이트를 안 함 추가를 하면 달력에 mark가 찍혀야 되며, 운행정보 화면이 나와야 된다. 수정을 하면 운행정보 내용이 업데이트되어야 된다. 삭제를 하면 달력에 mark가 사라지고, 운행정보가 없습니다. 화면이 나와야 된다. realm에서 데이터를 확인하면 realm에서는 추가, 업데이트, 삭제 시 데이터가 실시간..

버튼을 클릭하면 Record페이지에 postDate를 넘겨주는 코드를 작성할 때 계속 오류가 발생했다. 오류는 아래와 같은데 납득이 안가는 오류문구라 어떻게 고쳐야 될지 고민하고 있었다. 처음에는 오류가 발생하는 부분에 타입을 지정하면 되지 않을까?해서 타입을 지정했지만 실패했다. any마저도 실패해서 이건 아니다라는 생각이 들었다. 'Record', {postDate: currentDate} 다음으로 든 생각은 아예 navigation에 타입을 지정하면 어떨까라는 생각이 들었습니다. const navigation = useNavigation() as any; 이렇게 any를 지정해봤더니 타입에러가 사라지는 걸 알 수 있었다. 그럼 navigation에 대한 탑을 설정하면 해결되겠다 생각해서 타입을 설정..

realm설정을 했었는 데 사용하다 보니 db을 열고 닫는 상황이 중복적으로 발생하다 보니 오류를 마주하게 되고 결국은 realm 구조를 새롭게 수정해보았습니다. 폴더구조 구조는 똑같은데 realm폴더에 recordRealmFunctions.ts를 추가했습니다. realm 세팅 realm/schema.ts // 운행기록 스키마 export const RecordSchema = { name: 'Record', properties: { date: 'string', card: 'int', cash: 'int', // 현금 lpgInjectionVolume: 'int', // LPG 주입량 lpgUnitPrice: 'int', // LPG 단가 mileage: 'int', // 주행거리 businessDista..

생각보다 길어져서 3부까지 작성하게 되었습니다. (2 부면 충분할 줄 알았더니 엄청 기네요.) 이번 3부에서는 realm에 저장하는 코드에 대해 작성하겠습니다. 구현화면 저장하기를 클릭하면 새로운 날짜에 대한 데이터를 저장할 경우 create 저장하고, 기존에 있던 날짜에 대한 데이터를 저장할 경우 update 저장되게 하도록 구현하면 됩니다. 기존코드 1부에서 screens/Record.tsx에서 해당 날짜에 따라 데이터를 CREATE를 해야 되는지 UPDATE를 해야 되는지 useState로 지정해 주었습니다. screens/Record.tsx const Record = ({route}: profileProps) => { const {postDate} = route.params; const realm..

1부에서는 +버튼을 클릭하면 현재날짜의 데이터에서 운행정보를 기록할 수 있도록 달력에서 다른 날짜를 선택하면 선택한 날짜의 데이터로 기록 운행 정보 기록할 수 있도록 구현하기 했었습니다. https://development-piece.tistory.com/448 [React-native CLI] RN 기록화면 구현하기(선택한 날짜에 따라 Creact, Update하기) +버튼을 클릭하면 현재날짜의 데이터에서 운행정보를 기록할 수 있도록 달력에서 다른 날짜를 선택하면 선택한 날짜의 데이터로 기록 운행 정보 기록할 수 있도록 구현하기 그리고 기본 운행 development-piece.tistory.com 이번 2부에서는 기본 운행 정보 기록하기에서 카드, 현금, LPG 주입량, LPG 단가, 주행거리, 영업..