Jun's TID

1. R & R: Short for "rest and relaxation," it refers to taking time off from work or duties to relax or recuperate. Example: After six months of continuous work, Mark took a week off for some much-needed R & R on a quiet beach. 2. Put something off: To delay doing something until a later time or date. Example: I've been putting off going to the dentist because I'm a bit scared, but I know I have..

타입 스크립트 좋더라, 타입 스크립트 쓰세요. 런타임 에러가 확 줄어요..!라는 말을 종종 들으면서도 현재 회사에서 잡고 있는 프로젝트가 전부 JS로 되어 있는 것도 그렇고, 뭔가 JS도 잘 쓰고 있는 마당에 굳이...?라는 생각이 들어서 따로 쳐다보지를 않고 있었다. 이젠 리엑트로 프로젝트도 하고 있고, 조만간 RN으로도 하나 진행할 거 같아서 더는 미루지 말고 한번 사용이나 해보자! 라는 생각이 들어서 다뤄보려고 한다. 기본적인 내용부터 차근차근 공부해보자. - 그래서 타입 스크립트가 뭐야? 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 하는 언어로, 자바스크립트의 모든 기능을 포함하면서 타입 시스템을 추가해 준다는 것이 기본 콘셉트이다. 이로 인해 큰 규모의 애플리..

어떤 언어던, 프레임 워크던 친해지는 데 가장 좋은 방법은 CRUD가 완벽하게 구현된 블로그 프로젝트이다. 이번에도 RN와 Firebase를 사용하여 아주 간단한 SNS 프로젝트를 책을 따라가면서 만들어봤다. 이 프로젝트는 회원 인증, 화면 전환, CRUD, 카메라 & 앨범 제어, 새로고침, 로딩바, 스플레시, 이벤트 Emit 등 다양한 기능이 들어간 Simple SNS 프로젝트이며, 이걸로 내 RN_비기너 타이틀...? 정도는 가질 수 있게 된 거 같다. 늘 그렇듯, 전체 코드를 따라가며 설명하는 건 너무 길고 책에서 설명하는 것과 크게 다르지 않기 때문에 따로 하지 않으려고 한다. Git: https://github.com/Choonham/publicGalleryChoon GitHub - Choonh..

react-native-splash-screen은 React Native 애플리케이션에서 시작 화면(스플래시 스크린)을 쉽게 구현할 수 있게 도와주는 라이브러리이다. 이 라이브러리를 사용하면 앱이 로딩되는 동안 사용자에게 보여줄 초기 화면을 설정할 수 있으며, 앱의 로딩 경험을 개선하는 데 유용하다. 이 글에서는 Android와 iOS 환경에서 각각 셋팅하는 방법과 기본적인 사용 예제에 대하여 설명하려고 한다. yarn add react-native-splash-screen npm install react-native-splash-screen --save Android 환경에서의 셋팅 android/app/src/main/java/[...]/MainActivity.java 파일을 열고, import or..

React Native의 EventEmitter는 컴포넌트나 모듈 간의 이벤트 기반 통신을 가능하게 하는 클래스이다. 이 클래스를 활용하여, 개발자는 특정 이벤트가 발생했을 때 리스너에 알림을 보낼 수 있다. EventEmitter는 주로 네이티브 모듈과 JavaScript 간의 이벤트 통신에 사용되지만, React Native 애플리케이션 내의 다른 용도로도 사용될 수 있다. 이 글에서는 해당 이벤트를 위해 eventemitter3 라는 라이브러리를 사용하려고 한다. yarn add eventemitter3 EventEmitter 사용법 EventEmitter 인스턴스 생성: EventEmitter의 인스턴스를 생성하여 이벤트를 발생시키고, 이에 대한 리스너를 등록한다. 이벤트 리스너 등록: addLi..

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..

듀얼 모니터 환경에서 OTT 스트리밍을 재생하면 그냥 아무런 이유 없이 모니터 하나가 뻗어버리고 프레임이 초당 1 프레임 정도로 미친 듯이 떨어지는 문제가 생겼다. 크롬, 파이어폭스, 웨일 등 어떤 브라우저를 사용해도 동일한 문제가 생기길래... 처음에는 모니터 1개의 해상도가 달라서 따로 해상도를 계산하는데 문제가 있다고 생각했다. 그렇다고 하기에는... 유튜브는 또 잘 된다...ㅋㅋㅋ 그래서 나온 결론은 각 스트리밍 서비스가 웹에서 사용하는 스트리밍 라이브러리가 문제인가? 했는데, 또 노트북을 바꾸기 전까지는 참.. 잘 됐단 말이지;; 구글링을 좀 해보니까, 각 모니터 간 새로고침 빈도가 달라서 생기는 문제일 수 있다는 글이 있었다. 실제로, 연결한 모니터들은 60Hz인데 노트북 자체 화면이 240H..

useMemo는 React의 Hook 중 하나로, 성능 최적화를 위해 메모이제이션된 값을 반환한다. 이 Hook은 계산 비용이 많이 드는 함수의 결과값을 재사용함으로써, 불필요한 재계산을 방지하고 애플리케이션의 효율성을 높이는 데 사용된다. useMemo는 두 개의 인자를 받는데, 첫 번째 인자는 메모이제이션할 값을 생성하는 함수이며, 두 번째 인자는 이 함수가 의존하는 값들의 배열이다. 의존성 배열의 값이 변경될 때만 함수가 실행되어 값을 재계산하고, 그렇지 않으면 이전에 메모이제이션된 값을 재사용한다. 예제와 함께 알아보도록 하자. 아래는 useMemo를 사용하는 간단한 예제이다. 이 예제에서는 사용자의 목록을 필터링하는 비용이 많이 드는 연산을 메모이제이션한다. import React, { useS..