그냥 개발 공부

1. 안드로이드 에뮬레이터 자체 폰트 사이즈 변경(설정)

adb shell settings put system font_scale {폰트 사이즈}

{폰트 사이즈} 에는 1, 1.5, 1.75, 2.52 등 숫자 입력

2. React Native 기기  Font Scale 설정 알아내기

방법 1

import {useWindowDimensions} from 'react-native';


...

	useWindowDimensions().fontScale;

...

방법 2

react native device info 사용

import DeviceInfo from 'react-native-device-info';

...

	DeviceInfo.getFontScale().then(scale => {console.log(scale)})
    
...

회사에서 진행하는 리액트 네이티브 프로젝트에서 웹뷰를 사용해야 했다.

react-native-webview

https://www.npmjs.com/package/react-native-webview

웹뷰를 사용하고 테스트하던 중 안드로이드 플랫폼에서만 페이지 이동(react navigation 사용하였음), 스크롤 등의 애니메이션이 발생할 때 충돌이 발생하며 튕기는 버그가 발생하는 것을 확인했다.

구글링 하여 해결책을 찾아보았다.

1.  페이지 이동 시 발생하는 이슈 해결책

react navigation을 사용해 라우팅을 구현하였기 때문에 navigation 설정(options)에서 안드로이드 플랫폼만 라우팅 시 애니메이션이 발생하지 않도록 했다.

import {Platform} from 'react-native';

...
    <Stack.Screen
        name={~~~~}
        component={~~~~}
        options = {
            animationEnabled=Platform.OS !== 'android',
        }
    />
...

2. 스크롤 시 발생하는 이슈 해결책

WebView component의 스타일에 아래의 스타일을 추가한다.

{
	opacity: 0.99,
    minHeight: 1,
}

다른 방법도 있었지만 성능에 영향을 줄 수 있다고 하여 사용하지 않았다.

다른 방법

WebView 컴포넌트에 아래 prop을 추가한다.

androidHardwareAccelerationDisabled={true}

React Native & Javascript - && 문법

리액트에서는 컴포넌트 부분(return 부분)에서 조건문을 사용해야 할 때 주로

삼항 연산자 - 조건 ? A : B

논리 연산자(AND) - A && B

논리 연산자(OR) - A || B

문법을 많이 사용한다.

평소와 같이 특정 조건일 때만 어떤 컴포넌트를 렌더링하고 싶어서 다음과 같은 코드를 작성했다.

<Pressable onPress={}>
	<Icon />
	<Text>테스트 중</Text>
	{count && (
    	<Text>{count}</Text>
    )}
</Pressable>

그런데 아무 이상이 없다가 갑자기 어느 순간

Text Strings must be rendered within a <Text> component

이 에러가 발생했다. string은 Text 컴포넌트 안에만 쓰라는 에러인데 난 도저히 Text 컴포넌트가 아닌 곳에 string을 입력한 적이 없었다.

예전에 실수로 닫는 꺾쇠(>) 옆에 세미콜론(;)을 붙여 에러가 발생한 적이 있었기 때문에 에러 로그에 나온 파일로 이동해서 눈을 크게 뜨고 찾아보았다.

그러나 역시나 이상이 없었다.

그러던 중 Pressable 쪽에 이상이 있다는 에러 문구를 읽고 혹시나 해서 count 부분을 수정하니 해결되었다.

에러가 발생한 이유는 다음과 같다.

count 변수는 number 타입이었는데 count 값으로 0이 아닌 다른 값이 들어갈 때는 내가 의도한 것처럼 count가 0이 아닐 때는 숫자가 잘 출력되었다.

그러나 count가 0이 되었을 때 "0" 만이 결과로 남게 되었고, 그 결과 에러 메시지가 말했 듯 Text컴포넌트가 아닌 곳에서 string을 렌더링하려는 꼴이 되어버린 것이다.

개발자 도구의 콘솔 창을 이용해 다음과 같은 코드를 찍어 보았다.

const a = 0;
const b = 1;

a && console.log('aaa');
// output: 0

b && console.log('bbb');
//output: bbb
//        undefined


const c = false;
const d = true;

c && console.log('ccc');
// output: false

d && console.log('ddd');
// output: ddd
//         undefined

논리 연산자 AND에서 앞에 falsy 값이 있으면 그 값만 출력하게 된다.

앞의 값이 falsy 하지 않으면 뒤의 부분만 실행된다.

조건문이 아닌데 조건문처럼 생각해버렸다.

react navigation - useIsFocused, useFousEffect

RN 개발 중 다음과 같은 상황이 있었다.

스크린 A

API로 가져온 데이터를 화면에 그리는 스크린

스크린 B

스크린 A에서 버튼을 클릭하면 이동하는 스크린

스크린 A에서 렌더링되는 데이터들 중 일부를 수정하는 스크린

수정을 완료하면 스크린 A로 이동한다.

굉장히 흔히 있는 상황이다.

문제는 스크린 B에서 데이터를 수정하고 스크린 A로 돌아갔을 때 스크린 A의 데이터를 새로고침해야 했다.

리덕스를 사용하기에는 딱 이 부분에서만 사용되는 데이터들이라 굳이 전역 상태를 사용할 필요가 있나 싶었다.

그러던 중 react navigation의 useIsFocused와 useFocusEffect라는 hooks을 찾게 되었다.

결론적으로는 스크린 A에서 useIsFocused 훅스를 사용해 스크린이 포커싱될 때 데이터를 새로 요청하도록 했다. (데이터가 매우 적음.)

처음에는 addListener로 focus 이벤트마다 요청을 보내는 방식을 찾았는데 react navigation 측에서는 가능하면 hooks를 사용하는 쪽이 좋다고 추천했다.

useFocusEffect는 사용하지는 않았지만 두 hooks 모두 유용한 것 같다.

React Native의 작동 원리

구글링하면 많이 나오는 내용이지만 정리할 목적과 나중에 빠르게 다시 볼 수 있도록 하기 위한 목적으로 기록한다.

React Native는 4가지 스레드를 갖는다.

그러나 가장 핵심적인 부분들로 구분하면 다음과 같이 구분할 수 있다.

1. UI 스레드 (메인 스레드)

2. JS 스레드

3. Native Bridge

UI 스레드

UI 스레드는 메인 스레드라고 하기도 한다.

이름에서 알 수 있듯 UI를 그리는 스레드로 안드로이드, IOS의 UI를 그리는 역할을 맡는다.

또한 UI 이벤트가 발생하는 내역을 JS 스레드로 넘기는 역할도 수행한다.

JS 스레드

마찬가지로 이름에서 알 수 있듯 JS 코드를 처리하는 스레드이다.

위에서 적었듯, UI 스레드에서 넘어온 이벤트를 바탕으로 JS 코드를 실행하거나 API 호출 등 각종 비즈니스 로직 등을 처리한다.

네이티브 뷰 업데이트에 관한 내용은 일괄적으로 처리되어 이벤트 루프의 끝에서 UI 스레드로 전달된다.

Native Bridge

UI 스레드와 JS 스레드가 통신할 수 있도록 하는 중개자 역할을 수행한다.

Native Bridge에서 병목이 발생하면 React Native 앱의 성능 저하가 발생한다.

실행 과정

1. 앱을 처음 시작하면 UI 스레드가 실행된다.
2. 실행된 UI 스레드는 JS 스레드를 실행시켜 자바스크립트 번들을 로딩한다.
3. 자바스크립트 코드가 모두 로드되면 UI 스레드는 그 코드들을 모두 JS 스레드로 보낸다. 그래야 무거운 JS 코드가 돌아가더라도 UI 스레드는 Load가 없어 문제가 생기지 않기 때문이다.
   (아마 내부적인 로직에 이상이 생기거나 속도가 느려지는 것은 에러를 던져서 사용자에게 알리거나 사용자가 좀 기다리게 하면 되지만 UI를 그리는 부분이 문제가 생기면 사용자에게 어떠한 대처를 하기 어렵기 때문에 그런 것이 아닐까 싶다.)
4. 이제 JS 스레드가 실행되어 자바스크립트 번들을 로드하면 리액트는 가상 DOM을 생성하고 Diffing 알고리즘으로 변경 사항을 탐색한다.
5. 탐색 완료된 변경 사항은 Native Bridge를 통해 Shadow 스레드로 전달된다.
6. Shadow 스레드는 전달 받은 변경 사항 데이터로 레이아웃을 계산하고 계산 완료된 레이아웃의 파라미터나 객체를 UI 스레드로 보낸다.
7. UI 스레드가 전달 받은 레이아웃 데이터를 바탕으로 UI를 렌더링한다.
8. 사용자가 화면에서 UI 이벤트를 발생시키면 이벤트 정보들이 Native Bridge를 경유하여 JS 스레드로 넘겨진다.
9. UI 이벤트 정보를 바탕으로 JS스레드에서 비즈니스 로직들이 실행되고 리액트는 다시 가상 DOM을 생성하여 변경 사항을 탐색한다.
10. 4번에서 9번까지의 과정이 앱이 종료될 때까지 계속 반복된다.

참고 1) Shadow 스레드

위에서 언급된 Shadow 스레드는 Native Bridge를 통해 넘어온 가상 DOM의 변경 사항을 바탕으로 레이아웃을 계산하고, 계산한 레이아웃 파라미터나 객체를 UI 스레드로 전달한다.

화면에 렌더링하는 것은 UI 스레드만 가능하므로 Shadow 스레드가 계산한 레이아웃 데이터를 UI 스레드에 전달하면 UI 스레드가 해당 레이아웃을 화면에 렌더링한다.

참고 2) 데드 라인

IOS는 초당 60프레임, 안드로이드는 초당 90~120프레임을 표시한다. 따라서 IOS, 안드로이드 각각 16.67ms (1/60초), 8.33 ~ 11.11ms(1/120~1/90초) 안에 JS 스레드에서 이벤트 루프를 완료한 후 UI 스레드로 전달하고 UI를 그려서 한 프레임을 렌더링해야 프레임 끊김 없이 화면을 볼 수 있다. 실제로 프로젝트를 개발한 후, 특히 안드로이드에서 프레임이 조금 끊기는 것을 느꼈는데 아마 코드를 비효율적으로 작성하는 등 최적화된 상태가 아니어서 그러한 현상이 발생했던 것 같다.

하지만 아직은 이 수치를 봐도 어떻게 코드를 짜야 데드 라인 내로 렌더링이 완료되도록 할 수 있을지 감이 잘 오지 않는다.

ScrollView와 navigatorIOS는 온전히 UI 스레드에서 실행되기 때문에 Native Bridge에서 병목 현상을 발생시키지 않는다.

참고 3) Diffing 알고리즘

리액트는 가상 DOM을 활용해 변경된 부분을 비교/탐색하고 변경된 곳만 부분적으로 리렌더링하는 방식을 사용한다.

좀 더 구체적으로 설명하면 컴포넌트 내에서 상태값이 변경되면 해당 컴포넌트를 dirty하다고 표시하고 batch에 추가한다.

그 후 가상 DOM의 요소와 실제 DOM의 요소를 비교 순회하면서 dirty 체크가 되어있는 컴포넌트들을 처리한다. 처리하는 과정에서 속성값만 변한 경우에는 속성값만 업데이트하고 해당 컴포넌트의 태그나 컴포넌트 자체가 변경된 경우라면 해당 노드를 포함한 하위 모든 노드를 제거하고 새로운 가상 DOM으로 대체한다.

아무튼 이때 가상 DOM에서 변경된 부분을 탐색하는 알고리즘이 바로 Diffing 알고리즘이다.

간단하게 설명하면 트리 구조 상에서 같은 레벨끼리만 비교하여 변경된 부분을 탐색하는 방식이다.

어플리케이션에서는 컴포넌트 간 계층의 변화가 거의 없기 때문에 가능한 방식이다.

React Native  npx react-native init

신규 RN 프로젝트를 생성하는데 타입스크립트 템플릿을 적용함과 동시에 아직 RN 0.68 버전은 불안해서 0.66 버전으로 생성하려고 했다.

npx react-native init --version 0.66.4 --template react-native-template-typescript

그래서 위와 같이 코드를 입력했는데 0.68 버전으로 생성됐다.

찾아보니 typescript 템플릿을 적용할때는 템플릿에 버전을 지정해 RN 버전을 설정해야 한다고 한다.

npx react-native init --version 0.66.4 --template react-native-template-typescript@6.8.6

으로 프로젝트를 생성하니 typescript가 적용된 RN 0.66.4 버전 프로젝트가 잘 생성되었다.

​Git

새로운 프로젝트를 위해 새 레포지토리를 생성했다.

로컬에서 레포지토리에 코드를 push하고 깃헙에서 Read.me 파일을 생성하니 다시 로컬에서 push를 하기 전에 pull을 해야 했다.

그런데

힌트: You have divergent branches and need to specify how to reconcile them.
힌트: You can do so by running one of the following commands sometime before
힌트: your next pull:
힌트:
힌트:   git config pull.rebase false  # merge
힌트:   git config pull.rebase true   # rebase
힌트:   git config pull.ff only       # fast-forward only
힌트:
힌트: You can replace "git config" with "git config --global" to set a default
힌트: preference for all repositories. You can also pass --rebase, --no-rebase,
힌트: or --ff-only on the command line to override the configured default per
힌트: invocation.
fatal: Need to specify how to reconcile divergent branches.

이러한 에러가 발생하며 pull 이 안 됐다.

찾아보니 git pull 전략을 설정해야 한다고 한다.

그래서 위 메시지에서 제시된 방법 중 세번째인 fast forward (ff) 방식을 설정했다.

git config pull.ff only

(참고로 only 키워드는 해당 레포지토리에만 적용하는 것이고 --global을 넣으면 전역적으로 설정할 수 있다.)

그런데

fatal: 정방향이 불가능하므로, 중지합니다.

이런 에러가 발생했다.

fast foraward가 안 되는 것이었다.

그래서 

git pull --rebase

로 rebase를 진행하고

git config --unset pull.ff

git config pull.rebase true

로 fast forward 설정한 것을 해제한 후 rebase를 디폴트로 설정했다.

merge는 merge할 때마다 추가 커밋이 생겨서 불-편해 rebase로 설정했다.

React Native - React Navigation

1.  SafeAreaView

React Navigation을 사용하는 RN 프로젝트를 생성하고 route 세팅을 하고 있었다.

그런데 IOS에서 SafeArea가 잘 적용되지 않았다.

찾아보니 React Navigation를 사용할 때는 React Native에서 기본 제공하는 SafeAreaView가 아닌 react-native-safe-area-context의 SafeAreaProvider와 SafeAreaView를 사용해야 한다고 한다.

이전에는 이러한 문제를 경험해본 적이 없는데 왜 이번에만 이런지 잘 모르겠다.

적용 방법은 다음과 같다.

import React from 'react';
import { Provider } from 'react-redux';
import store from './src/store';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './src/utils/RootNavigation';
import AppMain from './src/navigations/AppMain';

const App = () => {
  return (
    <Provider store={store}>
      <SafeAreaProvider>
        <NavigationContainer ref={navigationRef}>
          <AppMain />
        </NavigationContainer>
      </SafeAreaProvider>
    </Provider>
  );
};

export default App;

다른 부분은 무시하고 SafeAreaProvider만 확인하면 된다. NavigationContainer보다 상위에서 감싸주기만 하면 된다.

이렇게 감싸주고 일반적으로 SafeAreaView를 사용하듯 하위 컴포넌트에서 사용하면 된다. (react-native-safe-area-context의 것을 사용해야 한다.)

참고: https://reactnavigation.org/docs/handling-safe-area/

puppeteer는 셀레니움과 비슷하게 Node에서 웹 브라우저를 실행 및 컨트롤할 수 있는 모듈이다.

웹 스크래핑 작업이 필요했는데 해당 사이트가 (아마?) 클라이언트 사이드 렌더링 방식으로 렌더링을 하고 있어서 일반적으로 request 등의 모듈을 이용해 html 파일을 받아오면 데이터가 보이지 않고 javascript 코드만 파싱되었다.

puppeteer를 활용해 해당 사이트를 브라우저로 실행시켜 렌더링을 시키고 스크래핑하는 방식을 사용해야 했다.

먼저 puppeteer를 설치한다.

npm i puppeteer

다음과 같이 코드를 작성한다.

// const puppeteer = require('puppeteer');
// 나는 ES6 모듈 방식을 사용하였다. package.json의 최상위에 "type": "module"을 추가하면 된다.
import puppeteer from 'puppeteer';

const html = (async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  const body = await page.$eval('body', (e) => e.outerHTML);
  
  await browser.close();
  
  return body;
})();

console.log(html);

아주 간단하다.

이후에는 html parsing 모듈을 사용하여 html 코드를 파싱하면 된다.

node-html-parser 를 사용할 예정이다.

문제

신규 프로젝트를 생성하고 안드로이드 에뮬레이터를 실행했는데 아래와 같은 에러가 발생했다.

Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081(Mac React-native Error)

...

android gradle plugin requires java 11 to run. you are currently using java 1.8.

    you can try some of the following options:

        - changing the ide settings.

        - changing the java_home environment variable.

        - changing org.gradle.java.home in gradle.properties.

원인

build.gradle에서 사용하는 java 버전이 맞지 않아 발생하는 이슈이다.

해결 방법

먼저 안드로이드 스튜디오에서 해당 프로젝트를 연다.

Preference → Build, Execution, Deployment → Build Tools → Gradle 에서 Gradle JDK를 11버전으로 변경한다.

나의 경우 이미 11버전으로 설정되어 있었다.

그럼에도 불구하고 위 에러가 발생한 이유는 내 시스템의 자바 버전이 1.8 버전이었기 때문이다.

터미널에 java -version을 입력하여 자바 버전을 확인해보자. 나의 경우 1.8버전으로 나왔다.

자바 버전 변경

먼저 자바 11버전을 설치한다.

https://www.oracle.com/kr/java/technologies/javase/jdk11-archive-downloads.html

설치를 마친 후 환경 변수에서 자바 버전을 수정한다.

vim ~/.zshrc로 진입할 수 있다.

i를 눌러 편집한 후 :wq 로 저장하고 source ~/.zshrc 로 변경사항을 실행한다.

그러면 자바 버전이 변경된다.

터미널에 java -version을 입력하여 성공적으로 변경되었는지 확인해보자.

자바 변경 후 VSode와 터미널을 모두 재실행하고 npm run android 를 실행하면 정상적으로 실행된다.

VScode를 재실행하지 않았을 때는 여전히 실행이 안 됐었다. 그냥 속 편하게 다 재실행한 후 실행해보자.

자바스크립트에서 함수는 변수에 할당할 수 있고, 인자로 전달할 수 있고, 다른 함수에서 return 될 수 있는 일종의 객체이다. → 일급객체

고차함수란 함수를 인자로 받거나 함수를 return 하는 함수를 말한다.

위 형태와 아래 형태는 같은 의미를 갖는다. (화살표 함수 return 생략가능)

const func = () => () => { }

const func = () => {
	return () => {

	}
}