https://velog.io/@minkyeong-ko/React-Native-%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8-%EA%B0%99%EC%9D%80-Like-%ED%9A%A8%EA%B3%BC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-Double-tap-Animated [React Native] 인스타그램 같은 좋아요 효과 구현하기 (Double tap, Animated) 최근 개인 프로젝트에서 좋아요 기능이 필요했다. 그래서 인스타그램처럼 사진을 두번 클릭하거나 하트 아이콘을 누르면 하트가 떴다가 사라지는 효과를 구현했고, 이를 정리해보려 한다. 간단 velog.io * 할일 수정하기 할일목록은 탭을 한번만 하면 할일의 상태가 토글되..

* 페이지 확장을 위한 코드 리팩토링하기 import React, { useState, useEffect } from 'react' import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import Icon from 'react-native-vector-icons/MaterialIcons' import HomeScreen from './screens/HomeScreen'; imp..

https://iamthejiheee.tistory.com/246 Firebase Realtime, Cloud Firestore [의미, 공통점, 차이점, 앱 기능에 따라 데이터베이스 추천] 우선 Firebase에 대해 먼저 알아보자! Firebase란 구글이 소유하고 있는 모바일 애플리케이션 개발 플랫폼이다. 앱을 개발하고 개선할 수 있는 도구 모음을 제공한다. 사실 처음에 Firebase는 단순히 데 iamthejiheee.tistory.com https://rnfirebase.io/database/usage Realtime Database | React Native Firebase Copyright © 2017-2020 Invertase Limited. Except as otherwise noted..

https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform Discover Firebase, Google’s mobile and web app development platform that helps developers build apps and games that users will love. firebase.google.com https://velog.io/@ddowoo/react-native-firebase-%EC%97%B0%EB%8F%99 react native firebase 연동 react native firebase 연동하기 velog.io https://velog.io/@chloe..

* 오늘 날짜 보여주기 import React from 'react' import { View, Text, StyleSheet } from 'react-native' function DateHeader({ date }){ const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() return ( {`${year}년 ${month}월 ${day}일`} ) } const styles = StyleSheet.create({ container: { padding: 10, backgroundColor: '#a8c8ffff' }, dateText: { fontSize: 30, color: 'white' } }..

* 네비게이션 뼈대코드 작성하기 npm install @react-navigation/native 리액트에서 탭메뉴를 만들기 위하여 해당 라이브러리를 설치한다. npm install react-native-screens react-native-safe-area-context 리액트 네비게이션 라이브러리는 다른 라이브러리를 이용하여 개발되었기 때문에 관련된 라이브러리들도 설치해줘야 한다. 이를 의존성 라이브러리라고 한다. npm install @react-navigation/native-stack 리액트 네이티브의 스택 내비게이터는 새로운 화면으로 이동하면 스택처럼 위에 쌓고 (push), 다시 이전 화면으로 돌아가면 스택에서 최상단에 있는 화면을 제거하여 (pop) 화면을 이동시킨다. import { S..

* 주의할점 : 앞서 virtual 필드 추가한 코드가 반영이 안되어 있을수 있음  토큰을 발급받은 사용자라고 하더라도 API서버에 무리를 줄만큼 과도한 트래픽을 발생하도록 허용하는 것은 좋지 않다. 그렇기 때문에 일정시간동안 API 사용횟수를 제한하여 서버의 트래픽을 제한하는 것이 좋다. 예를 들어 무료로 서비스를 이용하는 사용자는 하루에 50번으로 제한하고 유료 사용자는 하루에 500번으로 제한하는 것이다. npm install express-rate-limit사용량(트래픽) 제한에 대한 구현을 위하여 위 패키지를 설치한다.{ "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { ..

https://jsikim1.tistory.com/195 moment.js 사용 방법 - JavaScript 날짜 라이브러리moment.js 사용 방법 - JavaScript 날짜 라이브러리 moment.js는 JavaScript에서 사용되는 날짜관련 라이브러리 중 가장 많이 사용되었던 라이브러리입니다. 현재는 더이상의 업데이트가 없을 것이라 하였jsikim1.tistory.comhttps://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDNIn this articl..

* Mogoose validate 메서드로 DB 저장 이전에 데이터 형식 검증하기 https://mongoosejs.com/docs/api/schematype.html#SchemaType.prototype.validate() Mongoose v8.3.3: SchemaTypeParameters: SchemaType constructor. Do not instantiate SchemaType directly. Mongoose converts your schema paths into SchemaTypes automatically. Example: const schema = new Schema({ name: String }); schema.path('name') instanceof SchemaType; // t..

https://www.chartjs.org/docs/latest/getting-started/ Getting Started | Chart.jsGetting Started Let's get started with Chart.js! Alternatively, see the example below or check samples. Create a Chart In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snippet to your page: You shouldwww.chartjs.orghttps://www.chartjs.org/docs/latest/general/colo..