React 4

[React-Native] 리액트 네이티브 Keyboard (키보드 제어 밑 속성)

Keyboard키보드 모듈의 이벤트를 감지하고 처리 (열리고 닫히는 것 혹은 크기 및 위치)import {Keyboard} from 'react-native';useEffect(()=> { const showSubscription = Keyboard.addListener('keyboardDidshow', () => { // 키보드 열림 감지 내용 작성 }); return () => { showSubscription.remove(); // 이벤트 리스너 제거 // Keyboard.removeAllListeners('keyboardDidShow'); 특정이벤트의 모든 리스너 제거 // Keyboard.dismiss(); 키보드 강제 닫기 // Keyboard.isVisible(); 키보드가 마지막..

카테고리 없음 2024.12.27

[React-Native] 리액트 네이티브 Dimensions (화면 크기 구하기)

Dimensions보통 현재 화면의 가로, 세로 길이를 구할 때 사용한다.import {Dimensions} from 'react-native';// 현재 앱이 표시되는 창의 크기를 반환하며 상태 바 및 네비게이션 바를 제외const windowWidth = Dimensions.get('window').width;const windowHeight = Dimensions.get('window').height;const {width, height} = Dimensions.get('window'); //장치 전체 화면 크기를 반환const screenWidth = Dimensions.get('screen').width;const screenHeight = Dimensions.get('screen').heigh..

React-Native 2024.12.27

[React-Native] React Native CLI 프로젝트 생성. (아무것도 없는 상태로 리액트 네이티브 시작하기)

이번에는 아무것도 없는 상태로(bareborn) 프로젝트를 만들어서 실행 할 수 있도록 해 볼 것이다.원하는 폴더 안에서 아래의 명령어로 프로젝트를 생성한다.npx @react-native-community/cli@latest init testpin20241226 명령어 실행 시 아래와 같이 설치가 친행된다.현재 기준 cli 버전은 15.1.3. react-native 버전은 0.76.5 이다. 원하는 버전이 있을 시 아래와 같이 생성한다.npx @react-native-community/cli@X.XX.X init testpin20241226 --version X.XX.X react-native-community/cli 란 리액트 네이티브 개발에 필요한 다양한 작업들을 간소화 해준 Command Lin..

React-Native 2024.12.26

[React] FCM 메세지 보내기 요청 to NodeJS ( firebase-admin )

리액트에서 node js로 요정을 하여 fcm 메세지를 보내는 코드를 작성 해보자. import { messaging } from 'lib/firestore/config';import { getToken } from "firebase/messaging";import db from 'lib/firestore';export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;export const getMessage = async (profile) => { let title = "타이틀"; let body="테스트"; try { const permission = await Notification.requestPermission(); if (..

React 2024.09.06