react-native-image-picker은 React Native 애플리케이션에서 사용자의 디바이스 갤러리나 카메라를 통해 이미지나 비디오를 선택할 수 있게 해주는 라이브러리이다. 이 라이브러리를 사용하면 사용자가 디바이스에서 미디어를 쉽게 선택하고, 앱 내에서 이를 활용할 수 있게 된다. react-native-image-picker는 iOS와 Android 플랫폼 모두를 지원하며, 다양한 커스터마이징 옵션을 제공한다. 설치는 뭐, 동일하다. yarn add react-native-image-picker npm install react-native-image-picker 이후에는 카메라 접근 권한을 위한 권한 설정을 해줘야 한다. - 권한 설정 ◎Android(android/app/src/main..
React.forwardRef는 React 컴포넌트에서 부모 컴포넌트로부터 받은 ref를 자식 컴포넌트에게 전달하는 기능을 제공한다. 이 기능은 주로 두 가지 상황에서 유용하다. 첫째, DOM 요소나 클래스 컴포넌트 인스턴스에 직접 접근해야 할 때이다. 둘째, 라이브러리와 같은 재사용 가능한 컴포넌트들 사이에서 내부 요소에 ref를 전달해야 할 때 사용된다. React.forwardRef를 사용하는 방법은 다음과 같다. React.forwardRef 함수는 렌더링 함수를 인자로 받는다. 이 함수는 props와 ref를 매개변수로 받으며, React 엘리먼트를 반환한다. 이렇게 함으로써, 부모 컴포넌트에서 전달한 ref가 자식 컴포넌트 내부의 특정 DOM 요소나 컴포넌트 인스턴스에 연결될 수 있다. 아래는..
react-native-community/datetimepicker는 React Native에서 날짜 및 시간 선택 기능을 제공하는 컴포넌트이다. 이 컴포넌트는 Android와 iOS 플랫폼을 모두 지원하며, 사용자에게 친숙한 네이티브 날짜 및 시간 선택 도구를 제공한다. react-native-community/datetimepicker를 사용하기 전에, 먼저 npm 또는 yarn을 사용하여 프로젝트에 설치해야 한다. 설치 명령은 다음과 같다. yarn add @react-native-community/datetimepicker 이제 사용법을 알아보자. 다음은 간단한 날짜 선택기 예시이다. import React, {useState} from 'react'; import {View, Button, Pl..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/AGueP/btsEEK5QAej/Mc1LXDcDFuyPnYs06MGsU1/img.png)
듀얼 모니터 환경에서 OTT 스트리밍을 재생하면 그냥 아무런 이유 없이 모니터 하나가 뻗어버리고 프레임이 초당 1 프레임 정도로 미친 듯이 떨어지는 문제가 생겼다. 크롬, 파이어폭스, 웨일 등 어떤 브라우저를 사용해도 동일한 문제가 생기길래... 처음에는 모니터 1개의 해상도가 달라서 따로 해상도를 계산하는데 문제가 있다고 생각했다. 그렇다고 하기에는... 유튜브는 또 잘 된다...ㅋㅋㅋ 그래서 나온 결론은 각 스트리밍 서비스가 웹에서 사용하는 스트리밍 라이브러리가 문제인가? 했는데, 또 노트북을 바꾸기 전까지는 참.. 잘 됐단 말이지;; 구글링을 좀 해보니까, 각 모니터 간 새로고침 빈도가 달라서 생기는 문제일 수 있다는 글이 있었다. 실제로, 연결한 모니터들은 60Hz인데 노트북 자체 화면이 240H..
useMemo는 React의 Hook 중 하나로, 성능 최적화를 위해 메모이제이션된 값을 반환한다. 이 Hook은 계산 비용이 많이 드는 함수의 결과값을 재사용함으로써, 불필요한 재계산을 방지하고 애플리케이션의 효율성을 높이는 데 사용된다. useMemo는 두 개의 인자를 받는데, 첫 번째 인자는 메모이제이션할 값을 생성하는 함수이며, 두 번째 인자는 이 함수가 의존하는 값들의 배열이다. 의존성 배열의 값이 변경될 때만 함수가 실행되어 값을 재계산하고, 그렇지 않으면 이전에 메모이제이션된 값을 재사용한다. 예제와 함께 알아보도록 하자. 아래는 useMemo를 사용하는 간단한 예제이다. 이 예제에서는 사용자의 목록을 필터링하는 비용이 많이 드는 연산을 메모이제이션한다. import React, { useS..
JavaScript의 reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 이 함수는 배열을 순회하면서 각 요소에 대해 실행되는데, 이 때 누적된 결과값과 현재 요소를 함수의 인자로 받아 처리한다. reduce 함수는 배열의 요소를 하나씩 처리하면서 최종적으로 단일 값(예를 들어, 합계, 평균, 객체 등)을 생성하는 데 사용된다. 바로 한번 알아보자. 우선, reduce 함수의 기본 구조는 다음과 같다. array.reduce(function(accumulator, currentValue, currentIndex, array) { // 로직 실행 }, initialValue); 여기서 accumulator는 누적값을 의미하며, current..
![](http://i1.daumcdn.net/thumb/C200x200/?fname=https://blog.kakaocdn.net/dn/ze5VS/btsEz9c9srG/B3A49Mhx4Vmmy2KGORU4h0/img.png)
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
- 정보보안기사 #실기 #정리
- redux-thunk
- AsyncStorage
- Async
- 맛집
- 이탈리안 레스토랑
- await
- react
- redux
- Promise
- javascript
- 파니노구스토
- 인천 구월동 맛집
- Total
- Today
- Yesterday