개발 일기

리액트 네이티브 안에 dropdown이 따로 있지만 나는 팀 프로젝트를 하다 보니 설치하는 것 보다 component를 사용해서 dropdown을 만들었다. import react from "react"; import styled from "@emotion/native"; import { DARK_BTN, DROPDOWN_FONT_COLOR, DROPDOWN_BACKGROUND_COLOR, } from "../color"; import { Entypo } from "@expo/vector-icons"; import { TouchableOpacity } from "react-native"; import { useState, useCallback } from "react"; import { useFocusE..

import React, { useEffect, useState } from "react"; import { FlatList, TouchableOpacity, StyleSheet, View } from "react-native"; import styled from "@emotion/native"; import { DARK_COLOR, LIGHT_COLOR, BRAND_COLOR } from "../color"; import { DARK_GRAY, LIGHT_GRAY } from "../color"; import { useColorScheme } from "react-native"; import { Entypo } from "@expo/vector-icons"; import { AntDesign } fro..

1. ScrollView와 FlatList의 차이: ScrollView: 모든 리스트들을 한번에 랜더링 해서 리스트가 많으면 성능이 저하된다. FlatList: 화면에 보이지 않는 리스트는 메모리에서 제거하고 화면에 보이는 부분만 랜더링한다. (무한스크롤 적용 적합) 2. FlatList 사용법: } ItemSeparatorComponent={}/> FlatList는 map이 기본적으로 내장되어 있으며 item을 사용해줘야 한다. ItemSeparatorComponent를 사용하면 간격 조절도 가능하다. 3. FlatList에서 Refresh 적용하기: const [isRefreshing, setIsRefreshing] = useState(false); const onRefresh = async () =..

1. expo 프로젝트 생성 기존에는 expo 홈페이지에 들어가서 프로젝트를 생성했는데 간단하게 명령어로 만드는 방법을 알아보자. //프로젝트 생성 npx create-expo-app 이름 //expo 연결하기 eas update:configure //배포하기 eas update 2-1. navigation 사용 navigation 설치는 우선 공식 홈페이지를 참고하자. https://reactnavigation.org/docs/getting-started/ https://reactnavigation.org/docs/getting-started/ reactnavigation.org npm install @react-navigation/native npx expo install react-native-sc..

React native에서 firebase를 연결하는데 삭제 기능이 정상적으로 작동하지 않았다. 오류에는 map을 불러올 수 없다고 나왔는데 그 이유가 addDoc을 통해 ID를 추가하면 원래 설정한 uuid가 아닌 firebase에서 자체적으로 컬렉션 ID를 추가해준다. 그래서 계속 삭제 버튼을 눌러도 ID 값을 찾지 못했다. const q = query( collection(dbService, "todos"), orderBy("createdAt", "desc") ); onSnapshot(q, (snapshot) => { const newTodos = snapshot.docs.map((doc) => { const newTodo = { id: doc.id, ...doc.data(), }; return n..

1. 추가 기능 넣기. 이제 TodoList에 추가 기능을 넣어보자. const [todos, setTodos] = useState([]); const [category, setCategory] = useState("Work"); // Work, Life, Want const [text, setText] = useState(""); const newTodo = { id: uuidv4(), text, isDone: false, isEdit: false, category, }; //추가하기 const addTodo = () => { setTodos((prev) => [...prev, newTodo]); //newTodo를 추가 하기 위해 setText(""); }; 우선 useState를 추가해주자. new..

1. Page 구성 우선 나는 로그인 화면을 먼저 구현해서 로그인이 됐다면 Todolist를 작성할 수 있게 만들었다. 그러기 위해 우선 navigation을 설치해줘야 한다. npm install @react-navigation/native npm install @react-navigation/native-stack 설치 후에 모바일 하단에 네비게이션 메뉴를 만들기 위해 추가로 설치해주자. npm install @react-navigation/bottom-tabs npm install @expo/vector-icons bottom-tabs는 모바일 하단에 아이콘을 넣어 클릭시 페이지로 이동이 가능하게 해준다. 우선 설치 후에 만든 화면 구성을 먼저 살펴보자. 하단을 보면 MY PAGE와 TODO LIS..

React native란? 안드로이드나 iOS에서 동작하는 네이티브 모바일 어플리케이션을 만드는 자바스크립트 프레임워크 이다. 페이스북, 인스타그램 등이 리액트 네이티브로 개발됐다. 리액트 네이티브는 장점과 단점이 확실하기 때문에 만들고자 하는 애플리케이션의 특성을 파악해서 사용해야한다. + 리액트 네이티브에서 리액트 네이티브 웹을 발표하면서 웹 개발까지 가능해짐. React native의 동작 방식 (Javascript - Bridge - Native) 리액트 네이티브는 기기와 통신하는 모든 자스크립트의 기능을 분리된 스레드로 처리하며 성능을 높혔다. Javascript : 자바스크립트 영역에서는 자바스크립트 코드가 실행되는 장소로 보통 리액트로 구성. Bridge: 자바스크립트 코드를 통해 네이티브 ..