Jun's TID

듀얼 모니터 환경에서 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..

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() = 내용을 모두 비움