리액트 네이티브

사실 리액트 네이티브(엑스포)를 예전에 한번 해봤는데,

그때는 그냥 템플릿으로 이미 절반 완성된 앱에 뷰만 수정했었지만,,

0에서 시작하자는 생각이 들어서 네비게이션 라이브러리를 사용해 내가 직접 페이지를 다 만들어 보기로 했다.

주제

“”내 손 안의 네컷

바로 핸드폰으로 찍을 수 있는 인생네컷 서비스 이다.

별건 없고 그냥 사진 네 장 찍어서 프레임에 씌워주는 거다.

개발 과정

우선 다른 블로그들을 찾아보면서 네비게이션을 구현할 방법을 찾았다.

다행히 자료가 매우매우매우 많아 빠르게 라이브러리를 찾았다.

// ../navigation/index.tsx
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";
import HomeScreen from "../home";
import CameraScreen from "../camera";
import ConfirmPhotoScreen from "../confirmPhoto";
import ResultScreen from "../resultScreen";


const Stack = createStackNavigator();

function StackScreen() {
  return (
    <Stack.Navigator initialRouteName="HomeScreen"><Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{ headerShown: false }}
      /><Stack.Screen
        name="CameraScreen"
        component={CameraScreen}
        options={{ headerShown: false }}
      /><Stack.Screen
        name="ConfirmPhotoScreen"
        component={ConfirmPhotoScreen}
        options={{ headerShown: false }}
      /><Stack.Screen
        name="ResultScreen"
        component={ResultScreen}
        options={{ headerShown: false, gestureEnabled: false }}
      /></Stack.Navigator>
  );
}

function Navigation() {
  return (
    <NavigationContainer><StackScreen /></NavigationContainer>
  );
}

export default Navigation;

이렇게 해서 내가 직접 만든 필요한 기능만 존재하는 네비게이션 바가 생겨났다.

여기서 생각지도 못한 난관에 봉착했다.

리액트 네이티브에서는 카메라를 사용할 수 있도록 기본적으로 지원하는 컴포넌트가 및 함수 등이 있다.

그런데, 이 기능의 이름이 원래 Camera였는데 CameraView로 변경이 되었다.

공식 문서에 설명하는 탭이 따로 있길래 사용가능한 메소드도 같이 변경된 줄 알아서 겁을 좀 먹었다.

원래 deprecated되면 경고는 떠도 사용은 가능하게 되어 있는 경우가 많은데

얘의 경우 아예 사용 자체가 안되게 되었다.

공식문서를 이 잡듯이 봤는데, 카메라를 사용해 화면에 띄우는 것 까지는 설명이 되어있는데,

사진을 찍는게 없다. 이게 젤 중요한건데;;

업데이트 된지 얼마 안됐는지 인터넷에 구글링 해도 관련 글을 못찾았고,

chatGPT에게 물어봐도 레거시코드만 알려주길래 얼씨구? 하면서 골머리를 썩히던 중,,,

그냥 레거시 코드에서 Camera로 적힌 부분을 CameraView로 바꿨더니 작동을 했다.

...?

말을 좀 해놔 주던가....

해결했잖아 ㅎ

사진 저장기능은 두번 사용되는데,

1. 사진을 찍은 직후 "이 사진만 사용하기" 버튼

2. 사진 4장을 프레임에 넣은 후 저장하기 버튼

처음에 계획할 때 화면 캡쳐하는 게 있어서 이걸 사용하기로 했다.

얘는 react-native-view-shot 라이브러리의 captureRef를 사용하기로 했다.

const uri = await captureRef(viewRef.current, {
  format: "png",
  quality: 1.0,
});

보이다시피 캡쳐할 대상의 useRef를 사용해 만든 ref를 넣고, 옵션을 넣는 방식이다.

포맷은 png랑 jpg, jpeg정도 있고 퀄리티는 0 ~ 1로 조정할 수 있다.

나의 경우 캡쳐될 프레임 전체를 감싸는 div를 ref로 해두고 그 안에 사진을 배치하고,

찍은 시간을 적어서 프레임을 완성시키는 방식이다.

결과물이다..!

소감

이렇게 해서 완성을 하게 되었다.

개발 시간은 8시간 정도 한 것 같다.

이정도면 해커톤도 아니고 그냥 장난 친 수준 사실 이게 맞음

별다른 기능 없고 가볍게 사진 찍어서 저장만 하는 앱이지만 생각 보다 재밌게 만든 것 같아

리액트 네이티브에 약간 자신감도 생긴 것 같다 ㅎㅎ..

여담

아빠가 주변 사람들한데 자랑하러 가심 ㅎㅎ 아들로써 뿌듯했다 ㅋㅋㅋ

깃허브

frame by cher1shRXD