본문 바로가기

분류 전체보기91

[React Native] 데이터 그래프처럼 꾸미기 데이터를 그래프로 표현해야 하는 작업이 생겼는데막상 그래프 관련 라이브러리를 가져와서 표현해보면 여러 제약 사항 때문에 마음에 들게 표현이 되지 않았다.표형해야 하는 그래프는 단순히 바 형태의 차트이므로 그래프 라이브러리 없이 직접 구현해보려고 했다. 1. 최초 코드const data = { '일': 6 , '월': 10, '화': 13, '수': 8, '목': 19, '금': 22, '토': 7};const maxHeight = Math.max(...Object.values(data)); { Object.keys(data).map((item) => ( {data[item]} {item} )) }그래프로 표현할  View 영역 .. 2024. 11. 16.
[Ract Native] 네비게이션 바 설정하기 1. 패키지 설치 및 폴더 구조네비게이션 바를 사용하기 위해 아래 두 패키지를 설치한다.npm install @react-navigation/native @react-navigation/bottom-tabs 아래와 같이 폴더 구조를 설정한 후 기존에 작업하던 파일을 Screens 폴더 아래 MemoScreen.js로 옮겼다./src ├── /assets # 이미지, 폰트 등 에셋 파일 ├── /components # 재사용 가능한 UI 컴포넌트들 ├── /navigation │ ├── TabNavigator.js # 탭 네비게이션 ├── /screens │ ├── Me.. 2024. 11. 14.
[React Native] 메모 상태 수정, 필터 기능 구현하기 1. 테스트 데이터 준비하기재실행 할 때 마다 데이터가 초기화 되어 매번 입력하고 확인하는 것을 방지하기 위해 초기에는 몇 개의  데이터를 세팅한다.export default function App() { const [memos, setMemos] = useState([{"id": 1, "date": "2024-11-13", "memo": "앱 만들기", "status": false}, {"id": 2, "date": "2024-11-13", "memo": "더 많은 앱 만들기", "status": false}, {"id": 3, "date": "2024-11-12", ".. 2024. 11. 13.
[React Native] 달력 추가하기 1. 설치리엑트 네이티브 달력을 구현하기 위해 아래 라이브러리를 import 한다.npm install react-native-calendars 2. 기본 뷰 구현그 후, Calendar 컴포넌트를 호출한 후 아래와 같이 작성한다.import { StyleSheet, View } from 'react-native';import { Calendar } from 'react-native-calendars';export default function App() { return ( );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', align.. 2024. 11. 13.
[Flutter] Future Builder 와 ValueListenableBuilder 메모 앱 기능 개발 중 한 가지 문제가 생겼다.메모 데이터 수정이 발생한 경우 수정된 메모만 다시 랜더링 한다는 의도와는 다르게 모든 메모들이 다시 랜더링 되는 현상이 발생했다.이를 해결하기 위해 여러 방법을 시도한 결과, 데이터를 저장하는 형식을 바꾸는 방법으로 해결했다. 1. 기존 방법 - Future Builder 사용DB에서 메모 데이터를 받아오는 방식이기 때문에, 데이터를 모두 받은 이후에 랜더링 할 수 있도록 Future Bulider 를 사용했는데해당 클래스의 future 파라미터에 넣는 함수는 데이터를 반환해야 한다.Future>> _requestDateTodoList() async { final data = await DatabaseHelper.instance.readDateTodo.. 2024. 9. 11.
[Flutter] 메모 앱 만들기 - 데이터 베이스 연결 이전 글 - 메모 입력 화면 만들기메모 작성 위젯에서 메모를 입력하고, 저장 버튼을 누르면 이전 화면으로 메모 내용을 전달하는 것 까지 구현했다.작성한 메모 내용을 유지하기 위해서는 로컬 또는 서버에 메모 내용을 저장해야 한다.현재 만들고 있는 앱의 경우에는 이용자를 식별할 수 있는 값 (ex. 가입 ID )이 없으므로 로컬에 데이터를 저장하도록 구상했다. 1. 패키지 설치텍스트 형식의 데이터만 저장할 예정이므로, 규모가 큰 데이터베이스가 요구되지 않기 때문에 SQLite 를 사용해서 메모 데이터를 저장해보려고 한다.먼저, 작성 중인 플러터 앱 > pubspec.yaml 파일에 아래 패키지를 추가한다.dependencies: flutter: sdk: flutter sqflite: ^2.2.0 .. 2024. 9. 7.

티스토리툴바