Jun's TID

JavaScript의 reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 이 함수는 배열을 순회하면서 각 요소에 대해 실행되는데, 이 때 누적된 결과값과 현재 요소를 함수의 인자로 받아 처리한다. reduce 함수는 배열의 요소를 하나씩 처리하면서 최종적으로 단일 값(예를 들어, 합계, 평균, 객체 등)을 생성하는 데 사용된다. 바로 한번 알아보자. 우선, reduce 함수의 기본 구조는 다음과 같다. array.reduce(function(accumulator, currentValue, currentIndex, array) { // 로직 실행 }, initialValue); 여기서 accumulator는 누적값을 의미하며, current..

28일부터 일주일 동안 인도네시아에 출장을 갔다 와서, 어머니가 울진에 내려가시면 동생 혼자 일주일이 넘는 시간 동안 누리와 본인이 키우는 고양이를 함께 돌봐야 하는 상황이었다. 뭐... 어차피 누리는 잠을 정말 많이 자고 얌전해서 괜찮을 거라고 생각했지만, 워낙에 본인 눈 앞에 아무도 없으면 '왜 집에 아무도 없어!!!' 하면서 소리를 치시고 해서... 어머니가 누리를 도저히 집에 동생이랑 둘이 놔둘 수 없었는지... 울진에 데려가셨다. 설이 다 지나고 나서야 인천에 올라오실 계획이셔서, 누리가 가서 잘 지내야 할텐데... 하는 걱정이 있었다. 의외로 누리가 자동차를 종종 타고 다녔는지, 울진에 갈 때는 얌ㅡ전하게 왔다고 하셨다. 그러면서 보내신 사진이... 대박이다. ㅋㅋㅋㅋㅋ 참~나 무슨 본인 침대..

react-native-calendars는 React Native 애플리케이션에서 달력을 표시하고 관리할 수 있는 유용한 라이브러리이다. 이 라이브러리는 다양한 달력 레이아웃과 기능을 제공하여 사용자 정의 달력, 마커, 주간 달력 등을 구현할 수 있다. 바로 예제 코드와 함께 알아보자. npm install react-native-calendars --save yarn add react-native-calendars 설치가 완료되면, React Native 프로젝트에 바로 사용할 수 있다. - 기본 달력 사용하기 기본 달력을 구현하는 것은 간단하다. 다음은 기본 달력을 표시하는 예제 코드이다. import React from 'react'; import {View} from 'react-native'; ..

React Native에서 useWindowDimensions 훅은 현재 화면의 너비와 높이를 가져오는 데 사용된다. 이 훅은 컴포넌트가 렌더링될 때 화면의 크기를 제공하며, 화면 크기가 변경될 때마다 이를 감지하여 컴포넌트가 적절히 반응하도록 할 수 있다. 이는 반응형 디자인을 구현할 때 매우 유용하다. useWindowDimensions는 Dimensions API와 비슷하지만, 컴포넌트 기반의 훅 형태로 제공되어 더 간단하고 직관적인 사용이 가능하다는 장점이 있다. 화면의 방향이 바뀌거나 다양한 화면 크기를 가진 장치에서의 호환성을 고려할 때, 이 훅을 사용하면 효과적으로 UI를 조정할 수 있다. 예제 코드와 함께 알아보자. import React from 'react'; import { View,..

react-native의 Animated 라이브러리는 애니메이션을 구현하는 데 사용되며, 여러 가지 유용한 기능을 제공한다. 이 라이브러리는 다양한 유형의 값과 애니메이션을 생성하고, 뷰에 연결할 수 있게 해준다. react-native에서 기본으로 제공되는 라이브러리기 때문에 따로 설치를 할 필요는 없다. 예제 코드와 함께 확인해보자. 예제 1: 페이드 인 애니메이션 import React, { useRef, useEffect } from 'react'; import { Animated, Text, View } from 'react-native'; const FadeInView = (props) => { const fadeAnim = useRef(new Animated.Value(0)).current;..

react-native에서 date-fns 라이브러리는 리액트에서 날짜 및 시간을 매우 쉽고 편리하게 다룰 수 있게 해주는 라이브러리이다. 이 라이브러리는 다양한 날짜 관련 기능을 제공하며, 사용하기 쉽고 가벼운 구조를 가지고 있다. 자세한 사용법은 여기에서 확인하자. 설치는 아래와 같이 설치한다. npm install date-fns --save # or yarn add date-fns 바로 한번 예제 코드를 알아보자. 1.현재 날짜와 시간 표시 import { format } from 'date-fns'; const currentDate = format(new Date(), 'yyyy-MM-dd HH:mm:ss'); console.log('현재 날짜와 시간:', currentDate); 이 코드는 d..

React Native에서 UUID를 생성하고 사용하기 위한 라이브러리는 'Universally Unique Identifier'를 의미하는 UUID를 생성하기 위해 사용되는 도구이다. 이 라이브러리는 데이터베이스, 파일, 객체 등에서 필요한 고유한 식별자를 생성하는 데 유용하다. React Native 환경에서 많이 사용되는 UUID 라이브러리 중 하나는 react-native-uuid이다. 이 라이브러리를 사용하기 위해서는 먼저 프로젝트에 설치해야 한다. npm install react-native-uuid yarn add uuid // 호환성 라이브러리 yarn add react-native-get-random-values 설치 후, 다음과 같은 방법으로 UUID를 생성할 수 있다. import R..

얘도 적어두면 언젠간 쓰겠지...? function WriteEditor({title, body, onChangeTitle, onChangeBody}) { const bodyRef = useRef(); return ( { bodyRef.current.focus(); }} /> ); } - useRef().focus() = 포커스 - useRef().blur() = 포커스 해제 - useRef().clear() = 내용을 모두 비움

언젠가는... 유용하게 쓰려나..? import React from 'react'; import {Platform, Pressable, StyleSheet, View} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; const FloatingWriteButton = () => { return ( [ styles.button, Platform.OS === 'ios' && { opacity: pressed ? 0.6 : 1, }, ]} android_ripple={{color: 'white'}}> ); }; const styles = StyleSheet.create({ wrapper: { position: 'ab..

+31!! 벌써 한 달이 되었다. 워낙에 누리가 자다가 먹고... 다시 자다가 조금 걷고 다시 자다가 싸고~ 하는 One 패턴 생활이라서 딱히... 글로 적을 이벤트가 없어서 임보 일기 업데이트가 늦었다. (이래서 무소식이 희소식이라는 말이 있는 건가...ㅋㅋㅋ) 누리는 아주 잘 지내고 있다. 이제 맨날 밥 먹는 시간과 싸는 시간, 싸는 장소가 완전히 고정되어서 돌보기 난이도도 아-주 내려갔다. 다만, 집에 아무도 없으면 분리 불안이 좀 심한 편이라서 어디 잠깐 집을 비우고 오면 도대체 어디에 갔다 왔냐고 방방 뛰면서 아~주 잔소리를 하신다. 열흘 전쯤에 누리가 슬슬 꼬순내를 넘어선 무언가를 풍기시길래... 욕조에 물을 담아서 뜨~끈한 물에 목욕을 시켜드렸다. 의외로 굉장히 얌전하시길래 조금 놀란 것도 ..