REACT-NATIVE(EXPO) SNS 프로젝트 시작 (6)

서론

이번 포스트는 오늘 진행한 내용을 간단히 정리하고자 한다.

저번 포스팅에선 미들웨어와 미들웨어를 적용한 리덕스의 활용법을 알아봤다.

 

오늘은 전에 만든 nwitter 프로젝트를 앱으로 만들어봤다.

아직 다 만든건 아니지만 핵심 기능 절반은 구현했다.

 

우선 진행하면서 겪었던 난항들에 대해서 소개하도록 하겠다.

 

파이어베이스의 보안 해제

내가 원하는 건 이미 웹으로 구현한 파이어베이스 서비스를 앱에서도 가능하도록 하는 것이다.

그렇기 때문에 웹과 동일한 파이어베이스 프로젝트를 사용할 필요가 있다.

 

하지만 리액트 네이티브는 기본적으로 URL을 가지지 않으므로 도메인 보안을 걸어둔 기존의 파이어베이스에는 접근할 수가 없었다.

그래서 어쩔 수 없이 걸어두었던 도메인 제한을 모두 풀었다.

파이어베이스 콘솔의 도메인 제한은 푸는 건 물론이요 구글의 API 탭에 가서도 해제했다.

파이어베이스는 구글에서 만든 서비스이기 때문에 파이어베이스 프로젝트를 만들면 자동으로 구글 API에서도 프로젝트가 생성된다.

거기의 제한을 모두 푼 것이다.

 

그 결과 리액트에서 구동한 것과 완전히 같은 방식으로도 리액트 네이티브에서도 파이어베이스의 서비스 이용이 가능했다.

리액트와의 차이점은 전혀 없다. 완전 똑같음.

 

편리해진만큼 보안에 큰 구멍이 났다고 본다.

이 보안의 결점을 해결할 방법은 프로젝트 완성 후에 고민하도록 하자.

 

스크롤 화면의 구현

div를 대체하는 리액트 네이티브의 View 컴포넌트는 우습게도 스크롤 지원을 하지 않는다.

때문에 화면을 넘어가는 컨텐츠가 있다고 해도 View에서는 이를 전부 볼 수가 없다.

화면을 아래로 못내리니까.

 

대신 ScrollView라는 게 따로 존재한다.

이 ScrollView 안에 들어간 컨텐츠는 전부 스크롤을 통해 관람 가능하다.

 

사용법은 너무 간단해서 따로 언급이 필요없다.

기능을 전부 구현한 뒤에는 스크롤을 이용한 이벤트도 추가할 예정이다.

스크롤을 아래에 내릴 때만 드러나는 메뉴창이라던지 스크롤이 바닥에 닿으면 잉여 컨텐츠를 리로딩 하는 시스템이라던지 구현할 계획이다.

 

Gradient 배경화면 컬러

React-Native는 기본적으로 backgroundColor 속성이 gradient를 지원하지 않는다.gradient 효과를 쓰고 싶다면 gradient 효과를 지원하는 컴포넌트를 따로 설치해야 한다.

 

평범한 RN(React-Native) 사용자라면 npm install react-native-linear-gradient를 입력하면 된다.하지만 EXPO에선 지원하지 않는 패키지다.EXPO 사용자는 제대로 expo install expo-linear-gradient를 입력해야만 한다.

 

여러가지 사용법이 있지만 가장 간단한건 LinearGradient 컴포넌트 안에 colors={[A, B]} 라는 두가지 색상을 포함한 속성을 설정하면 된다.

 

 

Modal의 구현

리액트 네이티브에서는 모달 전용 컴포넌트 역시 지원을 한다.

특정 이벤트를 통해 팝업창을 띄우려는 사용자 입장에선 다소 편리하다.

 

컴포넌트의 이름은 Modal이다.

이 Modal은 팝업창으로서 기능하기 위한 속성들을 가진다.

 

우선 내가 설정한 속성들은 다음과 같다.

• transparent : 이 값을 true로 설정하면 모달창을 사용한 부모 컴포넌트 View의 위를 Modal가 채운다.
• visible : boolean 값을 입력받아 현재 모달창이 보이는 상태인지 안보이는 상태인지를 결정한다.

 

이렇게 두가지다.

두가지만으로도 충분히 팝업 기능을 구현할 수 있다.

 

의외로 성가셨던 부분은 visible 변수의 관리다.

모달창을 끄기 위해서는 Modal 컴포넌트 내부에서 visible 변수를 false로 만들어주는 동작을 해야한다.

반대로 모달창을 키기 위해서는 Modal의 부모 컴포넌트인 Home 컴포넌트 내부에서 visible을 true로 만들어줘야한다.

 

그래서 나는 Home 컴포넌트에 useState로 visible 변수를 만들고, setVisible 함수를 자식 컴포넌트인 Modal 컴포넌트에 전달하려고 했다.

이런 변수 끌어올리기 방식은 리액트에서도 사용한 적이 있었기 때문에 별다른 의심은 안했다.

하지만 이런 변수 끌어올리기가 이번 리액트 네이티브에서는 불가능했다.

 

그래서 별 수 없이 visible을 store에 넣고 Redux에서 관리했다.

리덕스로 관리하면 편리한면도 있지만 사용하기 까지의 세팅이 번거롭기에 오히려 불편한 면도 존재한다.

그래도 팝업의 기능은 잘 됐다.

 

이미지 비율 맞추기

또 하나 곤란했던 부분은 이미지의 로딩이었다.

리액트 네이티브는 이미지를 위한 Image 컴포넌트를 제공하지만 여기에는 치명적인 단점이 있다.

 

바로 사전에 이미지의 width와 height를 입력하지 않으면 이미지가 로딩되지 않는다는 점이다.

아니, 로딩 시킬 이미지의 크기를 내가 어떻게 알아? 라고 할 수도 있다.

하지만 그런 말은 리액트 네이티브에겐 씨알도 먹히지 않는다.

 

병주고 약주고 인지 모르지만 이 Image 컴포넌트는 이미지의 크기를 얻어오는 함수를 가지고 있다.

나는 이를 통해서 사전에 이미지의 크기를 미리 알 수 있었다.

 

if (nweetObj.attachmentUrl.length !== 0) {
      Image.getSize(nweetObj.attachmentUrl, (width, height) => {
        setWidth(width);
        setHeight(height);
      });
    }

getSize가 이미지의 url을 입력받아 그 이미지의 width와 height를 반환하는 함수다.

하지만 이렇게 이미지의 크기를 구하는 법을 알았더니 두번째 고비에 부딪히고 말았다.

 

그건 이미지의 비율을 맞추는 것이다.

이미지를 로드하는 컨테이너는 크기가 정해져있다.

그러므로 이미지의 원래 크기를 그대로 로딩했다간 컨테이너를 뚫고 나올 것이다.

그렇다고 넓이와 높이를 딱 정해버리면 들어가지 못하는 부분은 잘리거나 공간이 이상하게 남아 여백이 보일 수도 있다.

 

이러한 단점을 지우기 위한 것이 바로 aspectRatio 속성이다.

이는 이미지의 비율을 미리 정의하는 것이다.

내가 사전에 구한 넓이와 높이의 비율을 입력하면 이 비율을 그대로 유지하는 것이다.

만약 넓이를 늘리면 그 비율에 맞춰 높이도 늘어날 것이고 그 반대 작용도 마찬가지일 것이다.

 

무엇보다 이 aspectRatio 속성을 입력하면 별도로 width와 height를 설정할 필요가 없다.

그러므로 나는 이미지의 "비율"과 "넓이"만 선언해주면 거기에 맞춰 이미지가 훼손당하지 않는 높이가 자동으로 설정될 것이다.

이러면 이미지가 잘릴 걱정도, 컨테이너를 뚫고 나갈 걱정도 없다.

 

<Image
   source={{ uri: nweetObj.attachmentUrl }}
   style={{
     aspectRatio: width / height,
     width: "100%",
     backgroundColor: "black",
   }}
 />

 

 

폰트 사용하는 법

EXPO에서는 폰트를 적용하는 것도 큰일이다.

우선 폰트를 사용해주기 위해서는 해당 폰트를 다운받아서 프로젝트 폴더에 옮겨줄 필요가 있다.

 

폰트 파일이 없으면 폰트는 적용안된다.

이렇게 옮겨놓은 폰트 파일을 사용하는 방법은 다음과 같다.

 

먼저 expo-font를 설치해야 한다.

expo install을 통해서 설치하자.

 

그리고 다음 폼을 그대로 따라하도록 하자.

const [sans] = useFonts({ Sans: require(`../assets/NotoSansKR-Black.otf`) });

나는 폰트 파일을 .assets 폴더에 그대로 옮겨놓았다.

require은 그 파일을 경로를 따라가는 것이다.

 

그리고 Sans가 실제로 폰트를 적용할 때 사용되는 이름이다.

topText: {
    fontFamily: "Sans",
    fontSize: 50,
    color: "gray",
  },

이런 식으로 말이다.

 

sans는 useFonts의 실패 여부를 확인할 때 사용하면 좋다.

아무튼 오늘 염두해야할 점은 이 정도가 다다.

 

내일은 나머지 기능을 전부 구현하고 CSS를 좀 더 완벽하게 다듬어줄 것이다.

 

그럼 이만🖐🖐🖐🖐