기록하기

게시물을 작성한 시간에 따라 '방금 전', '3분 전', '1시간 전', '3일 전' 이런 형식으로 날짜가 나타나도록 수정하는 방법! 이때 사용한 라이브러리는 date-fns 라이브러리! 코드 function formatDate(date) { const d = new Date(date); const now = Date.now(); const diff = (now -d.getTime()) / 1000; if(diff < 60 * 1) { return '방금 전'; } if(diff < 60 * 60 * 24 * 3) { return formatDistanceToNow(d, {addSuffix: true, locale: ko}); } return format(d, 'PPP EEE p', {locale: ko..

Error non-std C++ exception React Native 개발 도중 이런 짧은 에러 발생... 해결 방법은 아주 간단했다! 해결 방법 npm run --reset-cache 터미널에 명령어 입력하고 필요한 명령어 입력하기 저는 expo start --ios 입력하니까 에러 해결 되더라구요!

코드는 엄청 간단하지만 예전에 프로젝트를 진행하며 구현하는데에 어려움을 겪었던 경험이 있어서 이번에는 까먹지 않게 기록을 해보려고 한다! 구현 방법 간단하게 숫자로 나타내고 싶으면 tabBarBadge : 5, 텍스트로 나타내고 싶으면 tabBarBadge : 'new', 그냥 알림으로 나타내고 싶으면 tabBarBadge : true, 결과 깔끔하게 나타난다! 근데 왜 알림은 저렇게 크기가 큰건지 잘 모르겠다.. 바꾸는 방법은 조금 더 찾아봐야할 것 같다.. ㅎㅎ

tabBarActiveTintColor 활성화된 항목의 아이콘과 텍스트 색상 tabBarActiveBackgroundColor 활성화된 항목의 배경색 tabBarInactiveTintColor 비활성화된 항목의 아이콘과 텍스트 색상 tabBarInactiveBackgroundColor 비활성화된 항목의 배경색 tabBarShowLabel 항목에서 텍스트의 가시성 설정(기본값 : true) tabBarShowIcon 항목에서 아이콘의 가시성 설정(기본값 : false) tabBarStyle 하단 탭 스타일 tabBarLabelStyle 텍스트 스타일 tabBarLabelPosition 텍스트 위치 'beside-icon' 아이콘 우측 / 'below-icon' 아이콘 하단 tabBarAllowFontSca..

React Native에서 라이브러리를 적용하기 위해 NavigationContainer 컴포넌트를 불러와서 앱 전체를 감싸주어야 한다. 네이티브 스택 내비게이터 화면 전용 컴포넌트 screens 디렉터리를 하나 만들고 그 안에 파일들을 저장한다. 만드는 이유는 ? 화면 전용 컴포넌트를 모아서 관리할 수 있기 때문에 편리함! 간단하게 HomeScreen이랑 DetailScreen 만들었다. HomeScreen.js import React from 'react'; import {View, Button} from 'react-native'; function HomeScreen({navigation}) { return ( navigation.navigate('Detail')} /> ); }; export de..

너무나도 곤란한 오류가 발생함. 오류 원인을 몰라서 구글링도 해보고 찾아 봤는데 결국 답을 찾지 못했다.. 그런데 적었던 코드에서 조금 어색한게 보였음.. 원래 코드는 저렇게 입력 되어 있지 않았음. 오류 났을 때 function Counter(count, onIncrease, onDecrease) { } 해결 방법 -> 중괄호도 입력해주기 function Counter({counter, onIncrease, onDecrease}) { } 소괄호 뒤에 중괄호가 없었다.. 오류를 찾은거지..!! ✨ 소괄호 뒤에 중괄호를 입력해 주니까 오류가 없어지고 결과 값이 제대로 나타났다!

React에서 상태를 관리하는 가장 기본적인 방법은 useState라는 함수를 사용하는 것이다. React에는 use로 시작하는 다양한 함수가 있는데, 그 함수들을 Hook 이라고 부른다. Hook을 사용하여 상태 관리, 최적화, 컴포넌트 작동 흐름 관리 등 다양한 기능을 구현할 수 있다. 그 중 useState는 상태 값을 관리하는 함수이다. 컴포넌트에 버튼을 하나 만들고 Box 컴포넌트를 숨기고 다시 보여주는 기능을 구현해 보았다. useState 사용하기 App.js import React, {useState} from 'react'; import {SafeAreaView} from 'react-native'; import Box from './components/Box'; const App = (..

예전에 짧게 공부했던 React Native를 다시 머리 속에서 꺼내기 위해..! 다시 공부해보자 그래서 여긴 자세하게 적는 것 보단 짧게 짧게 메모 형식으로 적을 것이다. 다음에 혹시나 필요할 때 볼 수 있게 ㅎㅎ 컴포넌트를 선언하는 방법 컴포넌트를 선언하는 방법은 2가지 1. 함수 컴포넌트 선언하기 2. 클래스로 컴포넌트 선언하기 함수 컴포넌트 선언하기 Greeting.js 파일을 만들고 이렇게 코드를 작성함. import React from 'react'; import {View, Text} from 'react-native'; function Greeting() { return ( 안녕하세요 함수 컴포넌트! ) } export default Greeting; 이전에도 항상 궁금했던 건데 expo..