세븐 스톡

모바일 앱 내 광고를 게재하기 위한 여러가지 방법이 있겠지만 다음과 솔루션들을 추천한다.

선택한 이유는 해당 플래폼들이 가장 많은 글로벌한 광고주들을 보유하고 있을 것이기 때문이다.

1. Google AdMob

2. Facebook Audience

2. Unity3D Unity Ads

중요한 것은! 하나의 선택이 아닌 이 모든 플랫폼을 사용 할 것이다.

왜??

하나의 플랫폼만으로 동작시킨다면 광고 lack이 비워져 더이상 광고를 띄울 수 없는 상태가 될 수 있는데

여러 플랫폼을 모두 사용한다면 이것을 우회 하여 빈틈 없이 수익을 창출 할 수 있다.

동작 방법은 다음과 같이 하면 된다.

1. Google AdMob를 동작

2. 성공시 End, 실패시 Facebook Audience를 동작시킨다.

3. 성공시 End, 실패시 Unity Ads를 동작시킨다.

4. 성공, 실패 모두 End

React.js 홈페이지에서는 React.js를 통한 Animation 제어 방법을 다음과 같이 추천한다.

1. React Transition Group

2. React Motion

3. React Spring

현재 사용자는 react-motion가 가장 많으나

업데이트 및 사용법 등에 있어 개인적으로 react-spring 을 사용하기로 결정 하였다.

이를 선택한 가장 큰 이유로는 hooks 방식의 인터페이스가 맘에 들어서 이다. :)

더불어 react-spring은 react-native 및 다른 플랫폼에서도 사용이 가능하다!

Images.xcassets에 앱 아이콘을 모두 셋팅하였지만 앱 실행 후 멀티테스킹 뷰에서 셋팅한 앱 아이콘이 제대로 나오지 않는다면

이럴땐 프로젝트를 Rebuild All 하고 

폰을 리부팅 한다.

그럼된다... (이것때문에 삽질을 얼마나...)

React-native로 작업시 쓸때없이 자꾸 리엑트 기본 스플래시 화면이 뜬다.

이를 편하게 변경하려면 다음 링크를 참조한다.

* 주의사항

1. 어이없게도 빌드 후 적용이 되지 않을 때가 있는데 이때는 당황하지 말고 앱을 지웠다가 다시 설치하면 된다.

(이것때문에 X삽질 했음)

2. 간혹 launch screen용 storyboard에 넣은 이미지가 출력되지 않는 경우도 있다. (아이러니 하게도 택스트는 잘 나온다)

이럴땐 먼저 이미지를 프로젝트 Resource 폴더에 넣고 해당 폴더 안에 있는 이미지를 드레그 하여 추가 할 에셋에 삽입 하면 해결 된다.

(이 또한 삽질한거 생각하면 욕나온다...)

https://www.netguru.com/codestories/how-to-add-a-splash-screen-to-a-react-native-application

나는 스케쥴 관리에 Gantt chart 만한게 없다고 생각한다.

이를 지원하는 여러가지 도구들이 있으나 trello도 Power-Ups로 연계되는 teamgantt.com 를 사용하고 있다.

월간 비용이 1인당 8천원 정도이며 쓰잘대기 없는 기능들이 많지 않고 군더더기 없다.

3명까지는 무료로 사용도 가능하니 소규모 팀에서는 도입 해 보길 권장한다.

참고로 유명한 협업도구 중에 Jira는 정말 이름 그대로 지*ㄹ 같다. 엄청 불편함.

가끔은 REST 방식이 아닌 실시간으로 피드백을 필요로 하는 경우가 있다. (채팅, 게임 등)

이를 위해 WebSocket을 이용하여 통신 할 수 도 있지만 Node.js에는 보다 빠르고 편한 Socket.io가 있다.

링크에 정리가 잘 되어 있으니 가서 확인하도록 한다.

https://www.zerocho.com/category/NodeJS/post/57edfcf481d46f0015d3f0cd

react-native-image-picker 사용시 다음과 같은 오류를 발생 할 경우가 있다.

=================================================================
Main Thread Checker: UI API called on a background thread: -[UIImagePickerController init]
PID: 9819, TID: 2519723, Thread name: (none), Queue name: com.facebook.react.ImagePickerManagerQueue, QoS: 0
Backtrace:
4   caudex                              0x00000001017b0e58 -[ImagePickerManager launchImagePicker:] + 96
5   caudex                              0x00000001017b0de0 -[ImagePickerManager launchImagePicker:options:] + 116
6   caudex                              0x00000001017af27c -[ImagePickerManager launchImageLibrary:callback:] + 140
7   CoreFoundation                      0x00000001b39b4c20 7519E999-1053-3367-B9D5-8844F6D3BDC6 + 1252384
8   CoreFoundation                      0x00000001b3884d30 7519E999-1053-3367-B9D5-8844F6D3BDC6 + 7472
9   CoreFoundation                      0x00000001b3885908 7519E999-1053-3367-B9D5-8844F6D3BDC6 + 10504
10  caudex                              0x0000000101291ed0 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 1896
11  caudex                              0x00000001012958cc _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 660
12  caudex                              0x0000000101295440 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 144
13  caudex                              0x00000001012953a4 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 28
14  libdispatch.dylib                   0x0000000104cf97fc _dispatch_call_block_and_release + 24
15  libdispatch.dylib                   0x0000000104cfabd8 _dispatch_client_callout + 16
16  libdispatch.dylib                   0x0000000104d01b48 _dispatch_lane_serial_drain + 744
17  libdispatch.dylib                   0x0000000104d026e4 _dispatch_lane_invoke + 448
18  libdispatch.dylib                   0x0000000104d0dadc _dispatch_workloop_worker_thread + 1324
19  libsystem_pthread.dylib             0x00000001b36cab88 _pthread_wqthread + 276
20  libsystem_pthread.dylib             0x00000001b36cd760 start_wqthread + 8
2020-02-24 08:24:12.923320+0100 caudex[9819:2519723] [reports] Main Thread Checker: UI API called on a background thread: -[UIImagePickerController init]
PID: 9819, TID: 2519723, Thread name: (none), Queue name: com.facebook.react.ImagePickerManagerQueue, QoS: 0
Backtrace:
4   caudex                              0x00000001017b0e58 -[ImagePickerManager launchImagePicker:] + 96
5   caudex                              0x00000001017b0de0 -[ImagePickerManager launchImagePicker:options:] + 116
6   caudex                              0x00000001017af27c -[ImagePickerManager launchImageLibrary:callback:] + 140
7   CoreFoundation                      0x00000001b39b4c20 7519E999-1053-3367-B9D5-8844F6D3BDC6 + 1252384
8   CoreFoundation                      0x00000001b3884d30 7519E999-1053-3367-B9D5-8844F6D3BDC6 + 7472
9   CoreFoundation                      0x00000001b3885908 7519E999-1053-3367-B9D5-8844F6D3BDC6 + 10504
10  caudex                              0x0000000101291ed0 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 1896
11  caudex                              0x00000001012958cc _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 660
12  caudex                              0x0000000101295440 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 144
13  caudex                              0x00000001012953a4 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 28
14  libdispatch.dylib                   0x0000000104cf97fc _dispatch_call_block_and_release + 24
15  libdispatch.dylib                   0x0000000104cfabd8 _dispatch_client_callout + 16
16  libdispatch.dylib                   0x0000000104d01b48 _dispatch_lane_serial_drain + 744
17  libdispatch.dylib                   0x0000000104d026e4 _dispatch_lane_invoke + 448
18  libdispatch.dylib                   0x0000000104d0dadc _dispatch_workloop_worker_thread + 1324
19  libsystem_pthread.dylib             0x00000001b36cab88 _pthread_wqthread + 276
20  libsystem_pthread.dylib             0x00000001b36cd760 start_wqthread + 8

facebook에서 아직 패치를 하지 않은 듯 하다.

이럴땐 ImagePickerManager.m를 다음과 같이 수정하면 해결 된다.

- (void)launchImagePicker:(RNImagePickerTarget)target options:(NSDictionary *)options
{
    self.options = options;
	dispatch_async(dispatch_get_main_queue(), ^(void) {
		[self launchImagePicker:target];
	});
}

다음과 같이 진행 한다.

$ rm -rf Podfile.lock
$ pod deintegrate
$ pod install

https://dev-yakuza.github.io/en/react-native/react-native-firebase-admob/

2019.3 버전의 Unity3D 에서

컴파일은 되지만 소스코드 수정시 다음과 같은 오류를 내 뱉는 경우가 있다.

The type or namespace name 'UI' does not exist in the namespace 'UnityEngine'

이는 유니티에서 버전 관리를 잘못한 듯 보이며 다음과 같이 VSCode 패키지를 다운그레이드 하면 해결 할 수 있다.

1] In Unity, go to Window/Package Manager
2] Search for your Visual Studio Code Editor package
3] Downgrade to version 1.1.3
4] Close Unity
5] Delete your .csproj and .sln files in your project
6] Open Unity

OSX에서 Unity3D와 VSCode를 사용하다보면 어쩌다가 갑자기 IntelliSence 가 먹통이 될 경우가 있다.

이유는 C# Extension의 버전업이 되어 OSX에서는 그게 작동하지 않는다는 것이다.

이를 해결하기 위해선 낮은 버전의 Extension을 재 설치하여야 한다.

다음 파일을 받고 아래와 같이 설치를 진행 하도록 하자.

1. Download version 1.15.2 (see link above, or the releases page)

2. Uninstall the C# extension in VSCode
3. Ctrl+Shift+P Extensions: Disable Auto Updating Extensions Enter
4. Ctrl+Shift+P Extensions: Install from VSIX...Enter
4. Reload VSCode

또는

다음과 같이 선택하여 작동 되는 버전으로 재 인스톨을 한다.

추천하는 버젼은 1.21.9 이다.

여럿이 하나의 프로젝트를 공동르로 작업하게되면 작업간 충돌이 발생하기 마련이다.

이를 위한 Git 규약을 정의 할 필요가 있다.

다음 아티클에서 매우 잘 정의 했으므로 참고 하도록 한다.

https://nvie.com/posts/a-successful-git-branching-model/

참 이상하게도 OpenCV에서는 편리한 Mat 합성 코드를 제공하지 않는다.

그래서 어쩔 수 없이 만들어야 한다.

이에 따른 코드는 다음과 같다.

Opacity(Alpha channel)까지 적용하였다.

간단하게 구현한것으로 최적화가 필요하다.

import cv from 'opencv4nodejs'

const overlayImage = (src: cv.Mat, overlay: cv.Mat, location: cv.Point2) => {
	const srcData = src.getData();
	const overlayData = overlay.getData();

	for (let y = Math.max(location.y, 0); y < src.rows; ++y) {
		const fY = y - location.y;
		if (fY >= overlay.rows) break;

		for (let x = Math.max(location.x, 0); x < src.cols; ++x) {
			const fX = x - location.x;
			if (fX >= overlay.cols) break;

			const overlayPxIndex = fY * overlay.step + fX * overlay.channels;
			const opacity = overlayData[overlayPxIndex + 3] / 255;

			for (let c = 0; opacity > 0 && c < src.channels; ++c) {
				const srcIndex = y * src.step + x * src.channels + c;
				const overlayIndex = overlayPxIndex + c;

				const overlayPx = overlayData[overlayIndex];
				const srcPx = srcData[srcIndex];
				srcData[srcIndex] = srcPx * (1.0 - opacity) + overlayPx * opacity;
			}
		}
	}

	const res = new cv.Mat(srcData, src.rows, src.cols, cv.CV_8UC3);
	return res;
};

Node.js + OpenCV 설치방법

설치 방법

OpenCV 설치 (OSX 기준)

$ brew update
$ brew install opencv@4
$ brew link --force opencv@4

Node.js 모듈 설치

$ yarn add opencv4nodejs

주의사항!

opencv4nodejs 설치 전 node.js의 packages.json 파일에 다음 설정을 추가 한다.

{
	...
	"opencv4nodejs": {
		"disableAutoBuild": 1
	}
}

참고

opencv4nodejs를 사용하여 openCV를 편리하게 사용 할 수 있다.

Docker 사용시에도 인스톨 방법이 있으니 공식 사이트를 통해서 확인 하도록 한다.

내부적으로는 GraphQL 기반으로 통신하지만 결국 유저들에게는 Public End point를 제공 해야 한다.

다음과 같은 룰을 숙지하여 public end point를 제공한다면 보다 깔끔하게 주소창을 유지 할 수 있다.

https://restfulapi.net/resource-naming/

Git 제외 폴더 지정

Git에 업로드(Push) 할때 쓸대 없는 파일 및 폴더는 .gitignore 파일을 루트에 정의 하면 자동으로 해당되는 조건은 제외하여 알아서 업로드(Push) 한다.

.gitignore 는 다음과 같이 구성 할 수 있다. (필요에 따라 수정하면 된다.)

# OSX
#
.DS_Store

# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace

# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml

# node.js
#
node_modules/
npm-debug.log
yarn-error.log

# BUCK
buck-out/
\.buckd/
*.keystore

# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://docs.fastlane.tools/best-practices/source-control/

*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots

# Bundle artifact
*.jsbundle

제외된 파일을 Git에 포함하고 싶을 때

만약 폴더를 제외 시켰으나 해당 폴더의 특정 파일은 포함 시키고 싶을 때가 있다.

이럴 땐 다음과 같은 명령어로 추가 해 주면 된다.

iOS13이 되면서 폴더에 대한 권한이 강화된 듯 하다.

react-native-image-picker (version 0.28.0 ~ 1.10)를 통해 Video를 얻어 오면 Permission Error를 낸다.

원인은 본 소스를 살펴본 결과 임시로 만든 비디오 파일을 옮기는데에 있다. iOS13 부터는 임시 폴더의 파일은 옮기는 행위를 할 수 없다.

그럼 옮기는 대신 복사를 해 도록 하자.

아래처럼 바꿔 주면 간단하게 이 문제를 해결 할 수 있다.

RNImagePicker > ImagePickerManager.m > 460 번째 줄:

[fileManager moveItemAtPath:[videoURL absoluteString] toPath:path error:&error];

위를 다음과 같이 변경한다.

[fileManager copyItemAtURL:[videoURL absoluteString] toPath:path error:&error];

iOS에 RN 프로젝트를 실행하다보면 Console 창에 다음과 같은 에러를 매초 마다 로깅하여 다른 디버깅을 전혀 할 수가 없다.

이는 다음과 같이 해결하도록 하자.

1. Xcode menu -> Product -> Edit Scheme… (단축키: ⌘ + Shift + <)
2. Environment Variables -> Add -> Name: “OS_ACTIVITY_MODE”, Value:”disable”

참고: https://medium.com/@hr.hseyin_80381/8-steps-to-get-rid-of-error-nw-connection-get-connected-socket-connection-has-no-connected-handler-1bf622ca2332

VSCode로 프로젝트를 진행하다보면 쓸대 없는 폴더를 읽어서 오류로 표시하는 경우가 있다.

프로젝트 빌드에는 아무런 영향이 없지만 빨갛게 표시된 것은 상당히 거슬린다.

이럴 땐 Files:Exclude에 해당 폴더를 포함시켜 VSCode 내에서 해당 폴더를 아예 표시하지 않도록 하자.

위와 같이 GUI로도 셋팅이 되지만 settings.json에 미리 기입해 두면 추후에 파일만 복사하면 되기에 여러 설정을 관리하기에 편리하다.

{
	...
	"files.exclude": {
		"unity": true
	},
    ...
}