[FN] 게시판 개발 일지[1] / FireBase, TouchableWithoutFeedback, DateTimePicker

메인 페이지 개발 후 이어서 바로 게시판 페이지까지 빠르게빠르게

 

시작하기에 앞서 발생한 오류

npm install --save @react-native-firebase/app

added 66 packages, and audited 1053 packages in 1m

161 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

npm install 할때마다 계속 이 경고 메시지가 뜨면서 패키지가 정상적으로 사용되지 않는 문제가 발생하였다..

# npm audit report

node-fetch  <2.6.7
          react-native-image-slider-box  *
          Depends on vulnerable versions of react-native-snap-carousel
          node_modules/react-native-image-slider-box

6 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

npm audit 으로 확인해보니 node-fetch에서 문제 발생

인터넷을 뒤져보니 같은 문제로 고생중인 사람들이 많더라.. 그래서 결론만 말하자면

"overrides": {
    "node-fetch": "^2.6.7"
  }

package.json에 이 코드를 추가해서 패키지 버전을 강제로 사용하도록 지정하는 방법을 선택함..

그리고 바로 npm install 하니 경고 메시지 없이 정상 설치되고 사용 가능했다

일단은 이렇게 해서 개발을 진행하기

 

1. React Native와 FireBase 연동하기 위한 패키지 설치

npm install --save @react-native-firebase/app

yarn add @react-native-firebase/app

 

2. FireBase 프로젝트 생성

https://firebase.google.com/?hl=ko

Firebase | Google's Mobile and Web App Development Platform

 

1) 프로젝트 생성

2) 프로젝트 이름 생성 (계속 - 계속 - 생성 )

3) 생성된 프로젝트 - 프로젝트 설정 들어가서 - 안드로이드 앱 등록.

4) Android 패키지 이름 = React Native 프로젝트 경로/android/app/src/main/AndroidManifest.xml 에 있는 pakage= 에 있는 패키지명을 넣으면 되는데 나는 안드로이드 최신버전이라 AndroidManifest가 아닌 build.gradle 에 namespace "com.이름"을 안드로이드 패키지 이름으로 넣었다.

5) SHA-1 은 구글 로그인 사용하지 않을거라 비워두고 넘어감.

6) 구성 파일 다운로드하고 프로젝트명/android/app에 파일 추가하기.

 

7) 프로젝트 build.gradle에 코드 추가

classpath 'com.google.gms:google-services:4.3.13'

 

8) build.gradle (app) 

apply plugin: "com.google.gms.google-services"

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

 

3. TouchableWithoutFeedback

• 에뮬레이터에서 내용을 입력할때 키보드가 나타나고 화면 밖을 눌러도 사라지지 않는 불편함이 있었음
• TouchableWithoutFeedback: 화면 빈공간을 터치했을때 키보드가 사라짐
• Keyboard.dismiss: 키보드를 숨기는 메서드

import { TouchableWithoutFeedback, Keyboard } from "react-native";

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>

</TouchableWithoutFeedback>

 

4. DateTimePicker

 

게시물 작성 페이지에서 날짜와 시간 선택을 구현하기위해 datetimepicker 를 사용했다. 일단 설치를 진행해준다.

게시판 구현을 위해 게시물 출력 페이지, 게시물 작성 페이지, 작성된 게시물 확인 페이지 총 3개 페이지를 만들었다.

npm install @react-native-community/datetimepicker

 

날짜 선택 컴포넌트

import { DateTimePickerEvent } from '@react-native-community/datetimepicker';

 

• performanceDate: 현재 선택된 날짜 (Date 객체)
• setPerformanceDate: 선택된 날짜를 업데이트하는 함수
• setShowDatePicker: DateTimePicker를 표시하거나 숨기는 상태를 제어

 

type DateSelectProps = {
  performanceDate: Date;
  setPerformanceDate: (date: Date) => void;
  setShowDatePicker: (show: boolean) => void;
};

 

사용자가 날짜 선택 버튼을 눌렀을때 setShowDatePicker 는 true가 되고 true 일때 DateTimePicker 를 나타냄 

<TouchableOpacity style={styles.dateButton} onPress={() => setShowDatePicker(true)}>

 

• value(표시할 날짜) = performanceDate 선택된 날짜
• mode = date ( 날짜 선택 모드 ) / time으로 설정하면 시간 선택 가능
• display="default"는 날짜 선택의 스타일 default 기본 스타일로 지정

{showDatePicker && (
            <DateTimePicker
              value={performanceDate}
              mode="date"
              display="default"
              onChange={(event, selectedDate) => {
                const currentDate = selectedDate || performanceDate;
                setShowDatePicker(false);
                setPerformanceDate(currentDate);
              }}
            />
          )}

 

날짜 바뀌는 함수 = currentDate (날짜를 선택함) = selectedDate(선택된 날짜) || undefined (선택하지 않은 경우) performanceDate (기본값)

const onDateChange = (event: DateTimePickerEvent, selectedDate: Date | undefined) => {
  const currentDate = selectedDate || performanceDate;
  setShowDatePicker(false);
  setPerformanceDate(currentDate);
};

 

구현된 화면

 

글이 길어지면 정신없으니 게시판 개발 일지 1편은 여기까지...