꿀팁 저장소

안녕하세요, 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!!

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

NoSQL에서 배열은 DB의 자료형으로써 매우 자주 쓰이는 편입니다.

어떻게 array에 특정 조건을 걸어서 값을 필터링하는지 간단히 살펴보겠습니다.

* 키워드는 elemMatch

const filtered_examples = await ExampleCollection.aggregate([
	{
		$lookup: {
			from: 'joinedCollection',
			localField: 'localField,
			foreignField: 'joinedCollectionField',
			as: 'retunName',
		},
	},
	{
		$match: {
			examples: { $elemMatch: { name: 'johndoe' } },
		},
	},
])

nodejs에서 s3에 이미지를 업로드하는 방법은 두가지가 있습니다.

1.  multer-s3사용하기

2. s3, api사용하기

nodejs를 통해 개발을 해오신분이라면 multer에 익숙하리라 생각합니다.

multer-s3는 이미 업로드의 위치를 s3의 버킷으로 합니다. 

간단히 살펴볼까요?

* multer, multerS3 사용

const multer = require('multer');
const multerS3 = require('multer-s3');
const aws = require('aws-sdk');

aws.config.update({
    accessKeyId: myAccessKey,
    secretAccessKey: mySecretKey,
    signatureVersion: 'v4',
    region: myRegion,
});

const s3 = new aws.S3();

const imageUpload = multer({
    storage: multerS3({
        s3: s3,
        bucket: 'myS3Bucket',
        metadata: (req, file, cb) => {
            cb(null, { fieldName: file.fieldname });
        },
        key: (req, file, cb) => {
            cb(null, Date.now().toString());
        },
    }),
});

이와같이 어렵지 않게 업로드 할 수 있습니다.

* 이번에는 AWS에서 document의 putObject를 살펴보겠습니다.

var params = {
	Body: <Binary String>, 
	Bucket: "examplebucket", 
	Key: "HappyFace.jpg", 
	Tagging: "key1=value1&key2=value2"
};

 s3.putObject(params, function(err, data) {
	if (err) console.log(err, err.stack); // an error occurred
	else     console.log(data);           // successful response
	/*
	data = {
		ETag: "\"6805f2cfc46c0f04559748bb039d69ae\"", 
		VersionId: "psM2sYY4.o1501dSx8wMvnkOzSBB.V4a"
 	}
 	*/
 });

두 방법 모두 간편하여, 원하는 방법으로 사용하시면 될것같습니다.

현재, 저는 multer를 쓰고있지만, 이왕이면 aws에서 가이드해주는 방식을 따르는것이

좋다고 생각합니다.

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

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옵션을 사용하여 간단히 처리할 수 있습니다. ^^ 업데이트 하세요~

* Null field 어떻게 조건식에 넣지?

NoSql에서 쿼리문을 짜다보면 종종 필드값을 갖지않은 컬렉션을 골라내야할 때가 있습니다.

그때를 위해 간단히 알아보도록 하겠습니다.

Case 1:

// 필드가 존재하지 않거나, 필드의 값이 null인 것
db.inventory.find( { item: null } )

Case 2:

// field가 존재하지 않는 것
db.inventory.find( { item : { $exists: false } } )

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을 먹여야 합니다.

* a태그가 필요해

개발을 하다보면 Html의 a태그가 필요한 순간들이 발생합니다.

예를들어,

전화번호를 누르면 다이얼 화면으로 연결한다던지,

링크를 클릭하면 해당 링크로 이동시킨다던지.. (특히, RestAPI를 사용할 때)

이때는, RN의 기본모듈인 Linking.openURL('')를 사용하면 됩니다.

다음은 사용 예시입니다.

Linking.openURL('tel://+82 ...'); // 전화

Linking.openURL('https://kakao.com/auth/...') // link

* 몽고디비에서 날짜 필터링

await SomethingCollection.find({
    createdAt: {
    	$gte: moment().startOf('month').toDate(),
        $lt: moment().endOf('month').toDate(),
    },
}).exec();

여기서는 moment.js를 함께 사용하였습니다.

$gte는 from,

$lt는 to 의 역할을 한다.

시간을 핸들링 할 필드값이 따로 있다면, createAt 외의 다른 필드를 사용해도 무방합니다.

* javascript heap out of memory

react프로젝트를 빌드하다보면 안타깝게도 이와같은 에러를 미주하게 될때가 있습니다. 보통 프로젝트가 너무 커서 메모리가 고통스러워 하는것인데요.

max_size를 키워주는것으로 간단히 해결할 수 있습니다~

(on ubuntu)

export NODE_OPTIONS=--max_old_space_size=4096

그래도 걱정된다면 8192와 같이 4096보다 더 크게 설정해도 됩니다.

https설정은 할일이 매우많다

로그인이 들어가는 순간 그 서버는 거의 필수적으로 https를 사용해야 된다고 생각한다.

그래서 관련 포스팅을 해본다.

기본적으로 https설정은 유료이다.

단, Certbot을 사용하면 무료로 설정할 수 있다.

Let's encrypt에서 발행해주는 https인증서는 그 수명이 3개월인데, 간단한 설정으로 자동 무한발급을 받을수 있다.

( lets' encrypt의 정책이 바뀌지 않는다면)

https://certbot.eff.org/lets-encrypt/ubuntubionic-nginx

위의 사이트에서 자신의 os - web server에 맞게 검색하여 가이드라인을 따른다면

세팅을 아주 무난히 마칠수 있다.

문제는, 늘 세팅 이후의 나의 환경에 맞게 설정하는 부분이다.

다들, 그냥 이렇게 저렇게 하라고만 할뿐 어떻게 내 환경에 맞게 설정해야 될지는 아무도 알려주지 않아 내가 적는다.

0. 최소한의 웹서버 설정

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;
        root /home/ubuntu/myproject/build;
        index index.html index.htm index.nginx-debian.html;

        server_name mydomain;

        location / {
                try_files $uri $uri/ =404;
        }
}

1. Http요청 Https redirect시키기

웹의 기본 요청방식(통신방식)은 http이기 때문에, 사용자들의 http요청을 https로 redirect시킬 필요가 있다.

/etc/nginx/sites-available/defulat 파일에서 설정을 해보도록 하자 (본 파일은  nginx.conf에 include됨)

server 블록을 하나 만들어 http요청을 모두  https로 redirect시킬 수 있다.

server {
    server_name mydomain;

    if ($host = mydomain) {
        return 301 https://mydomain
    }

    return 404;
}

2. 내 프로젝트 붙이기

이제 막, 서버를 개설중인 것이라면 내 프로젝트를 nginx/apache서버에 붙여줄 필요가 있다.

어떻게 만들어졌냐에 따라 크게 달라지지만

먼저, html로 만든 간단한 웹사이트의 경우이다.

server {
    client_max_body_size 100M; // 너무 큰 요청은 곤란하다..

    server_name mydomain;
    root /var/www/html; // 내 프로젝트 위치를 잡아주면됨. 특히, 그중에서도 index.html의 위치
    index index.html // 위에서 말한 index.html 파일명을 명시

    // https 설정!!
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mydomain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

다음으로, react로 만든 프로젝트이다.

...

server {
  server_name mydomain;
  root /home/ubuntu/myproject/build; // 내 프로젝트 위치를 잡아주면됨. 특히, 그중에서도 index.html의 위치
  index index.html // 위에서 말한 index.html 파일명을 명시


  location / {
  	try_files $uri $uri/ /index.html;
  }

  location ~* \.(?:manifest|appcache|html?|xml|json|service-worker\.js)$ {
  	expires -1;
  }

  location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
  }

  location ~* \.(?:css|js)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "public";
  }

  // https 설정!!
  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/mydomain/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}