한지 - 한조각 쓸모있는 지식 레터

https://reactnative.dev/docs/typescript

(위 링크에 상황별 가이드가 자세히 나와있다)

우리는 react-native + typescript로 새로 프로젝트를 열때를 기준으로 한다.

npx react-native init MyAppName --template react-native-template-typescript

위 명령어 만으로 프로젝트 생성은 완료이다.

다음편은, 생성된 프로젝트에

플랫폼별로 실행 환경 세팅을 진행할것이다.

회사생활을 하다보니

회사 상황에 따라 개발을 하게되곤 하는대요

최근에는 1-2년정도는

react + typescript 환경에서 웹개발을 했었습니다.

이번에 다시 react-native를 통해

개발을 할일이 생겨서

과거에 했던것들을 전부 까먹은

지금같은 상황은 반복하지 않기위해

가장 많이 쓰이는 환경 세팅 및 기능을

일목요연하게 정리해볼 예정입니다.

1. 프로젝트 생성하기

2. 개발환경 세팅하기

3. 개발을 위한 절대경로, 스타일 모듈 및 에디터 설정하기

4. firebase를 통해 push 알림 발송하기

5. Android 배포하기

6. IOS 배포하기

안녕하세요, react-naitve의 webview를 마스터해보는 시간을 갖겠습니다.

저는 유튜브 영상처리를 위해 webview를 써오고 있는데요.

webview는 생각보다 많은 처리가 가능하더라고요~

그래서 한번 정리해보려 합니다.

1. source

source는 유일한 필수 property입니다. 따라서, 반드시 지정해주어야 합니다.

source에는 uri 또는 html이 올 수 있습니다.

말 그대로 page url이나 html을 작성하면 되는대요.

// uri 예제
<WebView 
	source={{ uri: 'https://naver.com' }}
/>

// html예제
<WebView 
	source={{ html: "<p>여기는 다음 티스토리</p>" }}
/>

2. useWebkit

공식문서에서는 해당 속성의 설명을 다음과 같이 하고있습니다.

"If true, use WKWebView instead of UIWebView."

그런데, 최신의 ios버전(아마 12부터)에서는 UIWebView 를 지원하지 않기 때문에 필수적으로 useWebkit을 사용해야합니다.

꼭, true로 값을 지정해주시기 바랍니다.

3. injectedJavaScript

webview의 source에서 지정한 것이 로드된 후에, 해당 페이지 또는 html에 javascript를 넣어주는것인데요.

다양한 용도로 쓰일 수 있겠죠?

응용해보시기 바랍니다.

(javaScriptEnabled를 함께 true로 지정해주어야 합니다.)

4. allowsInlineMediaPlayback

html의 비디오 태그에는 playsinline라는 속성이 있습니다.

ios에서 영상이 자동으로 fullscreen이 되는것을 막아주는 속성인데요.

webview에서도 해당 속성을 true로 지정해주면 같은 효과를 낼 수 있습니다.

5. 그 외

mixedContentMode, domStorageEnabled, mediaPlaybackRequiresUserAction 과 같은 다양한 속성이 있습니다.

다방면으로 대응 가능한 유용한 WebView!!

잘 활용해보시기 바랍니다.

늘 그렇듯 버그에 직면하고 해결했습니다.

ios13의 다크모드가 나오면서

이와 와같이 날짜가 나타나지 않는 (사실은 하양글씨로 바뀌어서;;)

버그를 만났습니다.

* 해결방법

1. 먼저, 최신버전의 react-native-modal-datetime-picker를 설치해줍니다.

제, 기준으로는 7.6 이전버전입니다.

darkMode옵션이 추가됐지만 먹지않는 상황인데요.

2. react-native-appearance모듈도 설치해줍니다.

rn - npm install react-native-appearance / react-native link react-native-appearance

expo - expo install react-native appearance

3. node_module/react-native-modal-dateitme-picker로 찾아들어갑니다.

4. 상단에 코드를 두줄 추가해줍니다.

import { Appearance } from 'react-native-appearance';
const colorScheme = Appearance.getColorScheme();

5. darkmode를 체크하는 옵션을 넣어줍니다.

defaultProps부분의 darkmode옵션을 다음과 같이 설정하면 됩니다.

isDarkModeEnabled: colorScheme === 'dark',

6. 마무리로 유지보수 단계에서 버전업이 혹시나라도 될수있으니 package.json의 버전을 ^7.6과 같이 고정해줍니다.

7. 그래도 부족하니 ReadeME에 명시해줍니다.

8. 7.6이상의 버전에서는 node_module까지 가지않고 isDarkModeEnabled옵션을 사용하여 간단히 처리할 수 있습니다. ^^ 업데이트 하세요~

react-native의 shadow 속성에 대해 좀더 자세히 알아보는 시간을 가졌습니다.

한번 살펴볼까요?

이것 하나면 끝!

https://ethercreative.github.io/react-native-shadow-generator/

더 알아보기...

* ios에서 shadow 사용하기

iosShadow: {
	shadowColor: '#4d4d4d',
	shadowOffset: {
		width: 8,
		height: 16,
	},
	shadowOpacity: 0.3,
	shadowRadius: 4,
}

친숙한 shadow옵션을 사용하네요.

어렵지않게 구현할 수 있습니다.

* android에서 shadow 사용하기

androidShadow: {
	elevation: 6,
}

아주 심플한 속성, elevation을 통해 shadow를 줄 수 있습니다.

반대로 생각하면 디테일하게 설정을 못한다는 단점이 있네요.

* 하나의 프로퍼티로 ios, android shadow모두 지정하기

두 플랫폼의 shadow설정 방식이 다르다고해서 위와 같이 두가지 프로퍼티로 관리한다면

다소 귀찮을 수 있습니다.

그래서, shadow속성을 다룰때는 보통  Platform.select기능을 이용합니다.

shadow: {
	...Platform.select({
		ios: {
			shadowColor: '#4d4d4d',
			shadowOffset: {
				width: 8,
				height: 8,
			},
			shadowOpacity: 0.3,
			shadowRadius: 4,
		},
		android: {
			elevation: 8,
		},
	}),
},

* 노하우 / 디버깅

구글링해도 찾기 쉽지않은 개발 노하우가 있습니다.

사실, react-native의 shadow를 사용하다보면 이상하게 동작하는 경우를 종종 마주하게됩니다.

overflow가 안먹힌다거나, 주지도않은 overflow속성이 들어간것 처럼 shadow가 잘릴때도 있습니다.

그 중에서, List모듈(Flatlist, Scrollview 등) 내 컴포넌트들에 shadow를 주는 요령입니다.

그냥 주었다가는 뭐야 왜 잘리지? 하는 상황을 겪을수 있으니 주의하시기 바랍니다.

List모듈 혹은 그 부모 컴포넌트에 padding/margin등의 속성을 사용하고있는 상황에서,

그 내부 컴포넌트에 shadow를 주면 잘리는 경우를 맞닥드렸을 때는!

그 padding, margin 스타일들을 제거하고 LIst모듈의 contentContainerStyle에 padding/margin을 먹여야 합니다.

* RN프로젝트에 Admob붙이기

firebase의 많은 기능중, admob많을 목표로 하는분들을 위한 글입니다.

react-native-admob으로 react-native앱에 광고를 간편히 붙일 수 있습니다.

FB 환경을 세팅해 직접 해주려고도 해봤지만,

광고를 붙이는것만이 목적이라면 해당 모듈을 사용하는것이 아주 속편한 방법입니다.

시간적으로 절약되는것은 물론입니다.

일단, 설치해볼까요.

npm install react-native-admob

react-native link react-native-admob

(현재 환경은 RN 0.59.8, react-native-admob버전은 1.3.2입니다)

* 에러?

먼저, 해당 라이브러리를 설치하니 style undeinfed와 같은 에러가 발생하였습니다.

해당 에러파일을 찾아가보니 react버전문제로 발생한 에러였습니다.

라이브러리에서는 react.PropTypes....와 같은 코드를 사용했지만,

현재 환경에서는 지원하지 않는 기능이었고, PropTypes를 import 하여 코드를  PropTypes....으로 수정해주었다.

* 본격 세팅

firebase console에서 admob key를 간단히 발급받을 수 있습니다.

key를 발급받는 것 외의 환경세팅은 사실 필요없습니다. 해당 라이브러리를 사용한다면요.

세팅이 완료되었다면 코드를 넣어야 하는데요.

admob은 테스트용 키가 별도로 있습니다.

테스트할때는 test key로 확인해야하고, 배포할때는 발급받은 배포용 키를 적용해야 합니다.

* 테스트 단계에서 Key

https://developers.google.com/admob/android/test-ads#sample_ad_units

* 그외 체크해볼만한 환경 세팅

https://developers.google.com/admob/ios/quick-start#import_the_mobile_ads_sdk

* 코드블럭

* 사실은..

세팅과정에서 많은 난항을 겪었습니다. 해당 라이브러리의 버전문제가 심각했던것도 있고,

AndroidX의 문제도 겹쳐버려서요.

AndroidX문제는 다음과 같이 해결하였습니다. 제법 오랜시간이 걸렸네요!

1. jetify를 통해 androidX문제를 해결!

2. 아래의 지침에 따라 해당 라이브러리의 문제를 해결!

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

expo는 아주 잘 관리되고 있는것같다.

"비록, RN에 비해서 Prod에서 쓰기에는 무리가 있다." 라고는 하지만,

앱의 규모를 생각해서 판단하도록 하자.

많은 고급 라이브러리의 사용을 요구하지 않는 앱개발이 예정되어있다면 expo도 추천할만 하다.

버전업 방법은 간단하다.

app.json의 sdk version을 올려주고, node_modules를 삭제한 뒤, npm install 하여 module들을 새로 설치하면 끝.

이라고 생각하면 잘못된 판단.

expo library들이 설치되어있다면 package.json도 수정해주자

expo버전을 app.json과 맞추고 npm install 한 다음, 실행해보면 어느 라이브러리들이 버전이 맞지않는지 나타난다.

해당 라이브러리들의 버전을 올린뒤, node_modules파일을 제거하고 다시 npm install

그러면 정말 완료!

명심할것은, expo sdk version은 standalone file을 배포해야지만 유저앱에 반영된다. 

code push (publishing)으로는 되지않는다.

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

textinput 을 사용함에 있어 ios, android 두 진영에서 다르게 동작하는 경우가 종종있다.

그 중에 하나는, textinput의 기본 높이값이 어느정도 주어졌을 때,

ios는 top down 형식으로 써내려오게 되고,

android는 가운데부터 작성하게 된다.

이를 통일시켜주기위해 textAlignVertical: 'top'을 적용해보자 (ios 기준)

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

Image를 다루다 알수없는 버그가 발생했다.

바로, ImagePicker로 이미지를 주워와 Image에 띄웠을때 이미지가 깨지는 현상이다.

근데, 한번 더 불러와 다시 Image에 띄웠을땐 정상적으로 나타났다.

왜그런지는 아직도 원인을 찾지못햇다.

다만, Image를 감싸고있던 불필요한 View태그를 제거하는 것으로 버그를 해결했다.

구조는 정확히 8개의 태그 속에 Image태그가 들어가있었다.

View ... View... Animated.View ... KeybaordAvoidingView... ScrollView ... View... View... View...

react-native를 처음 개발하고 세팅하다보면, 당황스러운 경우를 만나게 된다.

어느순간, 요청에대해  Network request failed 라며 서버로 요청한것이 deny된다.

그럼 다음과 같은 설정을 했는지 확인해보자.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

  <manifest ...>

    <uses-permission android:name="android.permission.INTERNET" />

    <application ... android:usesCleartextTraffic="true" ...>

      ...

    </application>

</manifest>

usesCleartextTraffic='true'

가 핵심이다. 반드시 설정하자

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud