다다의 프로그래밍

안드로이드 EditText외에 다른 영역을 선택 했을 때 키보드를 제거 하는 코드이다.

TouchedView ! is Button 조건을 사용하지 않고 dispatchTouch event만 사용했을 경우 키보드가 뜬 상태로 버튼 선택이 되지 않는 SideEffet가 발생하여 선택한 영역이 버튼일 경우에는 제외하는 조건을 추가 하였다.

    override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
        val focusView = currentFocus

        if (focusView != null) {
            val rect = Rect()
            focusView.getGlobalVisibleRect(rect)
            val x = ev.x.toInt()
            val y = ev.y.toInt()

            // 터치된 뷰가 버튼인지 확인
            val touchedView = findViewAtPosition(x, y)
            if (!rect.contains(x, y) && touchedView !is Button) {
                val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
                imm.hideSoftInputFromWindow(focusView.windowToken, 0)
                focusView.clearFocus()
            }
        }
        return super.dispatchTouchEvent(ev)
    }

    private fun findViewAtPosition(x: Int, y: Int): View? {
        return window.decorView.findViewById<ViewGroup>(android.R.id.content)?.let { rootView ->
            findViewAtPosition(rootView, x, y)
        }
    }

    private fun findViewAtPosition(parent: ViewGroup, x: Int, y: Int): View? {
        for (i in 0 until parent.childCount) {
            val child = parent.getChildAt(i)
            if (child is ViewGroup) {
                val foundView = findViewAtPosition(child, x, y)
                if (foundView != null) {
                    return foundView
                }
            } else {
                val rect = Rect()
                child.getGlobalVisibleRect(rect)
                if (rect.contains(x, y)) {
                    return child
                }
            }
        }
        return null
    }

    private fun deviceId(): String? {
        val deviceIdKey = "makeDeviceID"
        val sharedPreferences = getSharedPreferences("AppDate", 0)
        var deviceId = sharedPreferences.getString(deviceIdKey, null)
        if (deviceId == null) {
            deviceId = retrieveDeviceId()
            if (deviceId == null) {
                deviceId = retrieveAndroidIdOrGenerateUUID()
            }
            val editor = sharedPreferences.edit()
            editor.putString(deviceIdKey, deviceId)
            editor.commit()
        }
        return deviceId
    }


private fun retrieveDeviceId(): String? {
    return try {
        val telephonyManager =
            this.getSystemService(Context.TELEPHONY_SERVICE) as TelephonyManager
        if (Build.VERSION.SDK_INT < 26) {
            telephonyManager.deviceId
        } else {
            telephonyManager.imei
        }
    } catch (e: Exception) {
        // Handle exception (log if necessary)
        null
    }
}

private fun retrieveAndroidIdOrGenerateUUID(): String? {
    try {
        val androidId = Settings.Secure.getString(
            this.contentResolver,
            Settings.Secure.ANDROID_ID
        )
        if (androidId != null && androidId.isNotEmpty()) {
            return androidId
        }
    } catch (e: Exception) {
        // Handle exception (log if necessary)
    }
    return UUID.randomUUID().toString().replace("-".toRegex(), "")
}

TypeScript vs JavaScript

Static Types(set during development) - 오류를 개발하는 중간에 체크 vs Dynamic types(resolved at runtime) - 오류를 런타임을 하여야 알수 있음

프로그램이 유용하려면, 가장 간단한 데이터 단위로 작업 할 수 있어야 하며, TypeScript에서는 JavaScript에서 기대하는 것과 동일한 타입을 지원하기 위해 추가적인 열거 타입이 제공된다.

TypeScript에서 프로그램 작성을 위해 제공되는 기본타입 

JavaScript 기본 자료형을 포함(Superset), ECMAScript 표준에 따른 기본 자료형 6가지

- boolean, number, string, null, undefined, symbol(ES6이후에 추가)

- Array(Object 형)

- 프로그래맹을 도울 몇 가지 타입(any, void, never, unknown, enum)

Primitive types

오브젝트와 레퍼런스형태가 아닌 실제 값을 저장하는 자료형을 말한다. 즉 메모리에 주소가 아닌 선언된 자료형 그대로 데이터를 저장하고 있는 자료형을 말하며, 자바스크립트 처리 방식으로 Primitive 형의 내장 함수를 사용가능하다. 

자바스크립트에 타입이 추가된 개념?

• 자바 스크립트에 타입을 추가하여 자바스크립트를 확장 시킨다.
• 실행 전 자바스크립트를 해석함으로 사용자의 소스를 수정하는 시간을 절약할 수 있다.
• 모든 브라우저, 운영체제, 자바스크립트 실행 환경에서 제공하는 오픈소스이다.
  
  

TypeScript = Language

• 자바스크립트에 있는 기능을 강화시키고 타입이라는 개념이 추가
• 순수한 자바스크림트로 컴파일 (ts -> js)
• 타입스크립트는 'Programming Language 언어'
• 타입 스크립트는 'compiled Language'
  1. 전통적인 Compiled Language와는 다른 점이 많음
  2. 'Transpile'이라는 용어를 사용하기도 함

※ 자바스크립트는 'Interpreted language' 

Compiled  vs  Interpreted

타입스크립트 프로젝트 설정

// 프로젝트 생성
mkdir tsc-project
cd tsc-project

// package.json 파일 생성
npm init -y

// 타입스크립트는 런타임에서 필요하지 않음으로 -D를 붙인다.
npm i typescript -D

// tsconfig.json 파일 생성
npx tsc -init

package.json

npm 환경에서 프로젝트에서 필요한 패키지들을 관리

typeScript

프로젝트 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정

변수에 객체를 할당하고 아래와 같이 변수를 복사하고 첫번째 할당한 변수의 값을 변경하면, 복사한 변수의 값도 함께 변경 된다.

const user = { name: "lee", age: 20, email: ["test@naver.com"] };
const test01 = user;

console.log(user);
console.log(test01);

user.name = "kim";

console.log(user);
console.log(test01);

결과

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'kim', age: 20, email: Array(1)}age: 20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'kim', age: 20, email: Array(1)}
age: 20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

객체의 경우 같은 주소를 참조하기 때문에 원래의 데이터의 값이 바뀌면 복제된 변수도 같은 주소를 참조하기 때문에 같은 값이 출력이 된다.

별도의 주소를 할당 받아 데이터를 복제하는 방법으로 두 변수 사이에 영향을 받지 않게 할수 있다.

1. 얕은 복사(shallow copy)

사용법

const user = { name: "lee", age: 20, email: ["test@naver.com"] };

const test02 = Object.assign({}, user);
const test03 = { ...user }; 

user.name = "kim";

console.log(user);
console.log(test02);
console.log(test03);

결과

{name: 'kim', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"lee"
[[Prototype]]:Object

얕은 복사일 경우 객체 내에 존재하는 변수가 변경이 되어도 복사된 변수에서는 다른 메모리 주소를 사용하기 때문에 값이 변경 되지 않는것을 확일할 수 있다.

하지만 얕은 복사내에 객체 변수가 존재할 경우 내부에 추가하는 값은 변경된다.

const user = { name: "lee", age: 20, email: ["test@naver.com"] };

const test02 = Object.assign({}, user);
const test03 = { ...user }; 

user.email.push("test@gmail.com");

console.log(user);
console.log(test02);
console.log(test03);

결과

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

얕은 복사일 경우는 복사가 되었더라도 객체 내에 또 객체가 존재할 경우에는 같은 메모리 주소를 참조하고 있기 때문에 값이 변경이 된다.

이런 경우는 lodash에서 제공하는 깊은 복사를 사용하면 된다.

2. 깊은복사(Deep copy)

사용법

const user = { name: "lee", age: 20, email: ["test@naver.com"] };
const test04 = _.cloneDeep(user);

user.email.push("test@gmail.com");

console.log(user);
console.log(test04);

결과

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:(2) ['test@naver.com']
name:"lee"
[[Prototype]]:Object

깊은 복사 일 경우는 객체내에  타입이 객체인 변수가 변경되더라도 복사된 변수의 값이 변경되지 않는것을 알 수 있다.

Lodash (https://lodash.com)

→ 모듈성, 성능 및 추가 기능을 제공하는 최신 JavaScript 유틸리티 라이브러리이다

→ 라이센스는 MIT 라이센스로 Object, Array 등의 데이터 구조를 쉽게 변환하는 기능을 제공해준다.

설치

npm i -g lodash

import

import _ from "lodash"

※ 기본적으로 _ 로  명시해주나, _가 아닌 다른 이름으로 하여도 됨.

1. defaultTo

기본값 설정 값이 있으면 해당 값을 저장, 값이 비어있으면(null or undefined) 일 경우 기본값을 저장

사용법

let a = 100;
a = _.defaultTo(a, 1);
console.log("100 default :", a);

a = undefined;
a = _.defaultTo(a, 1);

console.log("undefined default :", a);

a = "";
a = _.defaultTo(a, 1);
console.log('"" default :', a);

a = null;
a = _.defaultTo(a, 1);
console.log("null :", a);

결과

100 default : 100
undefined default : 1
 "" default : 
null : 1

2. uniqBy와 unionBy

중복된 값이 있을 때 중복된 값을 제거

사용법

const fruit1 = [
  { id: 1, name: "apple" },
  { id: 2, name: "banana" },
  { id: 3, name: "cherry" },
];
const fruit2 = [
  { id: 2, name: "orange" },
  { id: 4, name: "apple" },
];

// 두개 배열 병합
const fruit = fruit1.concat(fruit2);
// 중복 제거
const uniqBy = _.uniqBy(fruit, "id");

// 병합 후 중복제거
const unionBy = _.unionBy(fruit1, fruit2, "id");

console.log("fruit1:", fruit1);
console.log("fruit2:", fruit2);
console.log("fruit:", fruit);
console.log("fruit uniqBy:", uniqBy);
console.log("fruit unionBy:", unionBy);

한개의 배열에서 중복을 제거할 때는 uniqBy 두개 이상의 배열을 병합 시 중복제거 할 때는 unionBy를 사용한다.

결과

fruit1: (3) [{…}, {…}, {…}]
0: {id: 1, name: 'apple'}
1: {id: 2, name: 'banana'}
2: {id: 3, name: 'cherry'}
length: 3[[Prototype]]: Array(0)

fruit2: (2) [{…}, {…}]
0: {id: 2, name: 'orange'}
1: {id: 4, name: 'apple'}
length: 2[[Prototype]]: Array(0)

fruit: 
(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 2, name: 'banana'}
2:{id: 3, name: 'cherry'}
3:{id: 2, name: 'orange'}
4:{id: 4, name: 'apple'}
length: 5[[Prototype]]:Array(0)

fruit uniqBy: 
(4) [{…}, {…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 2, name: 'banana'}
2:{id: 3, name: 'cherry'}
3:{id: 4, name: 'apple'}
length:4[[Prototype]]:Array(0)

fruit unionBy: 
(4) [{…}, {…}, {…}, {…}]
0: {id: 1, name: 'apple'}
1: {id: 2, name: 'banana'}
2: {id: 3, name: 'cherry'}
3: {id: 4, name: 'apple'}
length: 4[[Prototype]]: Array(0)

3. find, findIndex

배열 내에 조건에 해당하는 데이터 찾기 또는 데이터의 인덱스 찾기

사용법

console.log("fruit find :", _.find(uniqBy, { id: 2 }));
console.log("fruit findIndex :", _.findIndex(uniqBy, { id: 2 }));

결과

fruit find : {id: 2, name: 'banana'}
fruit findIndex : 1

4. remove

배열의 조건에 해당하는 데이터 삭제

사용법

_.remove(uniqBy, { id: 2 });
console.log("fruit remove :", uniqBy);

결과

fruit remove : (3) [{…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 3, name: 'cherry'}
2:{id: 4, name: 'apple'}
length:3[[Prototype]]:Array(0)

5. shuffle, sortBy, sortBy revers

배열의 순서 랜덤으로 섞기, 배열의 오름차순, 내림차순정렬

사용법

const shuffle = _.shuffle(fruit);
console.log("fruit shuffle :", shuffle);
const sort = _.sortBy(shuffle, "id");
console.log("fruit sortBy :", sort);
const reverse = sort.reverse();
console.log("fruit sortBy revers:", reverse);

결과

fruit shuffle :(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 2, name: 'banana'}
1:{id: 2, name: 'orange'}
2:{id: 4, name: 'apple'}
3:{id: 1, name: 'apple'}
4:{id: 3, name: 'cherry'}
length:5[[Prototype]]:Array(0)

fruit sortBy :(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 2, name: 'banana'}
2:{id: 2, name: 'orange'}
3:{id: 3, name: 'cherry'}
4:{id: 4, name: 'apple'}
length:5[[Prototype]]:Array(0)

sortBy revers:(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 4, name: 'apple'}
1:{id: 3, name: 'cherry'}
2:{id: 2, name: 'orange'}
3:{id: 2, name: 'banana'}
4:{id: 1, name: 'apple'}
length:5[[Prototype]]:Array(0)

const timmer = setTimeout(() => {
  console.log("hello");
}, 3000);

clearTimeout(timmer);

- 시간 간격마다 함수 실행 : setInterval(함수, 시간-ms) 

const interval = setInterval(() => {
  console.log("hello");
}, 3000);

- 설정된 Interval 함수를 종료 : clearInterval()

clearInterval(interval);

JavaScript객체 타입을 얻는 방법으로 typeof를 사용하면 된다. 

console.log(typeof "hello world");
console.log(typeof 123);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof {});
console.log(typeof []);

결과

string
number
boolean
undefined
object
object
object

결과를 보면, 객체 타입의 값을 출력하지만 null, {}, [] 에 대한 출력값은 모두 objec로 출력된다.

null, {}, []의 정확한 객체의 타입을 얻기위해서는 아래와 같은 방법으로 얻을수 있다.

Object.prototype.toString.call(data);

출력 결과

[object Null]
[object Object]
[object Array]

양쪽의 []와 object라는 문자를 제거하기 위해 slice를 사용하면 깔끔하게 원하는 값을 얻을수 있다.

Object.prototype.toString.call(data).slice(8, -1);

출력결과

Null
Object
Array

리액트 네이티브 환경변수를 설정하고 서버 URL이 변경되어 값을 변경하고 다시 빌드를 진행하였다 

(https://magicofdream.tistory.com/30)

안드로이드의 경우는 변경한 URL로 접속이 되었는데, IOS 시뮬레이터로 테스트 시 기존의 URL로 계속 접속이 되어 삽질을 하였다.

1. Metro서버에 캐시가 남아있어서 발생하는 문제라 생각하고.Metro 서버 종료 후 캐시 리셋을 하였다.

react-native start --reset-cache

하지만 여전히 IOS에서 기존 URL로 접속하고 있었다.

2. 시뮬레이터에 캐시가 남아 있을 수도 있어서..? 라는 이야기가 있어 시뮬레이터를 종료 후 다시 실행을 해보았으나, 여전히 Config데이터는 변경되지 않았다.

3. node_module에 데이터가 캐싱되어 있을수 있다는 생각을 하고 프로젝트에 node_modules 폴더를 삭제 후 npm install을 하고 pod install 진행 후 다시 앱을 빌드하였다. Config값은 정상적으로 바뀌었으나 모듈을 모두 삭제하고 다시 빌드를 진행하여 꽤 시간이 오래걸렸다.

rm -rf node_modules

npm install

cd ios && pod install

4. 빌드 시간을 줄이고자 react-native-config 모듈을 삭제 후 재설치 pod install을 진행하였다.

npm uninstall react-native-config

npm install react-native-config

cd ios && pod install

다시 빌드를 하고 실행하니, 정상적으로 되는 것으로 Config 값이 갱신 되었음을 확인하였다. 이 방법 말고 다른 방법을 찾다가 react-native-config github의 issue에서 다른 방법을 발견 하였다.

https://github.com/luggit/react-native-config/issues/591

5. Xcode에서 ios폴더의 프로젝트를 오픈하고 Product >> Clean Build Folder를 진행 후 다시 빌드한다.

실행이 되지 않을 시 pod install 후 다시 실행하니 Config 값이 변경이 적용되었다.

※ 빌드 시간이 오래 걸린다는 단점이 존재한다.

React-Native의 자바스크립트 코드에서 환경변수를 구성할 때  react-native-config를 사용한다.

react-native-config 모듈은 패키징을 할 때 데이터를 난독화 하거나 암호화 하지 않음으로 민감한 정보에 대해서는 값을 넣지 않는 것을 추천한다.

https://github.com/luggit/react-native-config

- 사용밥법

react-native-config npm 모듈 설치

npm install react-native-config

프로젝트 root에 .env파일을 생성하고 아래와 같이 환경변수 값을 설정하여 사용한다.(key=value)

API_URL=https://apiurl

사용하고자 하는 자바스크립스 소스에 import

import Config from 'react-native-config';

import 후에 아래와 같은 형식으로 사용하면 된다.

const url = Config.API_URL;

• Android

android/app/proguard-rules.pro 에 아래내용 추가

-keep class com.fooddeliveryapp.BuildConfig { *; }

android/app/build.gradle에 아래내용 추가

apply plugin: "com.android.application"

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

...

    defaultConfig {

        ...

        resValue "string", "build_config_package", "com.fooddeliveryapp"

    }

• IOS

ios/podfile에 아래 내용추가

pod 'react-native-config', :path => '../node_modules/react-native-config/react-native-config.podspec'

pod install 실행 (프로젝트/ios 경로에서)

pod install