최근 같은 이슈를 겪은 사람들과 문제를 해결한 이야기를 기록하기위해 작성합니다.

기존의 yarn 3이상을 사용시 yarn classic 이 아닌 yarn berry 를 사용하는데 yarn berry의 경우 Plug'n'Play(PnP)라는 기술을 기본적으로 사용합니다. PnP모드를 사용 할 시에 node_modules 를 사용하지 않습니다. 때문에 node_modules에 의존성을 가진 코드와 충돌이 발생 할 수 있습니다.

해당 글은 yarn berry 또는 PnP모드에 관한글이 아닌 yarn berry 사용 시 링커설정을 PnP모드에서 기존의 클래식처럼 node_modules를 사용하는 방법을 작성합니다.

yarn에 대한 세부 내용은 리멤버 개발블로그 를 참조해주세요

Case1

Vercel에서 모노레포 툴링으로 Turborepo의 경우 패키기 매니저중 pnpm의 pnp모드만을 지원하고, yarn berry의 경우 지원을 하지않습니다.

Case2

react-native에서 새 프로젝트를 시작하고 ios의 pod install 을 실행할시 다음과 같은 error 로그를 볼 수 있습니다.

# 실행 코드(Podfile)
def node_require(script)
  # Resolve script with node to allow for hoisting
  require Pod::Executable.execute_command('node', ['-p',
    "require.resolve(
      '#{script}',
      {paths: [process.argv[1]]},
    )", __dir__]).strip
end

# error 코드
Error: Cannot find module 'react-native/scripts/react_native_pods.rb'
Require stack:
- /Users/user/Documents/sources/AwesomeProject/ios/[eval]
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Function.resolve (node:internal/modules/cjs/helpers:127:19)
    at [eval]:1:9
    at Script.runInThisContext (node:vm:123:12)
    at Object.runInThisContext (node:vm:299:38)
    at node:internal/process/execution:79:19
    at [eval]-wrapper:6:22
    at evalScript (node:internal/process/execution:78:60)
    at node:internal/main/eval_string:28:3 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/Users/user/Documents/sources/AwesomeProject/ios/[eval]' ]
}

기본적으로 작성 된 Podfile def node_require 부분이 실행 될때 참조하고자 하는 node_modules가 없어서 에러를 반환하고 있습니다. 해당 코드를 수정하는게 아니라면 기존과 같이 node_modules를 추가해야 합니다.

해결

yarn set version berry

• yarn set version berry를 root project 터미널에 입력
• 그후 .yarnrc.yml 이 생성됩니다.
• 해당 파일에서 nodeLinker가 nodeLinker: node-modules 로 되어있는지 확인하고 없다면 추가해주면 됩니다.

  nodeLinker: node-modules
  yarnPath: .yarn/releases/yarn-4.6.0.cjs

토막 정보

yarnrc는 yarn의 내부 설정을 관리하는 파일입니다.

• yarnPath: yarn을 프로젝트 내에 설치하는데 가장 선호되는 방법으로 모든 팀원이 같은 yarn version을 사용할 수 있도록 해줍니다.
• nodeLinker: Node 패키지를 설치하는데 어떤 링커를 사용할지 명시하는 속성. (pnp, pnpm ,node-modules 가능)

출처: https://nukw0n-dev.tistory.com/37 [찐이의 개발 연결구과:티스토리]

$ yarn add react-native-invoke-tmap

Tmap에서 해주어야 할 설정

1. Tmap 에서 로그인을 해주고 계정이 없다면 회원가입 해주세요

2. Tmap api를 사용할 앱을 만들어야 합니다. 처음엔 앱이 없으니 대시보드를 통해 앱을 만들어 주세요.

3. 앱 상품 사용 신청을 신청해야합니다. 무료플랜이나 그 이상을 선택하면 됩니다.

   SK open API

4. 무료플랜이 적용되어있다면 App Key를 기억하면 됩니다.

앱내의 설정

android

• ./android/app/src/main/AndroidManifest.xml 수정

    <manifest xmlns:android="<http://schemas.android.com/apk/res/android>" package="com.grabber.grabbee">
        ...

        <queries>
          <package android:name="com.skt.skaf.l001mtm091" />
          <package android:name="com.skt.tmap.ku" />
        </queries>
        <application
                ...
           >
          <meta-data
            android:name="com.skt.tmap"
            android:value="여기에 Tmap App Key를 넣으세요" />
        </application>
    </manifest>

ios

1. 키 추가

   //in info plist
   <dict>
    <key>TMAP_API_KEY</key>
    <string>Api key를 입력해주세요</string>
   </dict>

2. 쿼리 추가

   //in info plist
   <key>LSApplicationQueriesSchemes</key>
   <array>
    <string>tmap</string>
   </array>

사용 예시)

import {
  checkTmapApplicationInstalled,
  invokeTMap,
  complexInvokeTMap,
  InvokeTMapRouteInfo,
} from 'react-native-invoke-tmap';

// ...

//data structure
const routeInfo: InvokeTMapRouteInfo = {
  // required(필수 props)
  rGoName: '강남역', // 목적지명칭(필수)
  rGoX: 127.027621, // 목적지경도(필수)
  rGoY: 37.497942, // 목적지위도(필수)
  // optional(선택적 props)
  rStName: '서울역', // 출발지명칭
  rStX: 126.972646, // 출발지경도
  rStY: 37.553017, // 출발지위도
  rV1Name: '용산역', // 경유지1명칭
  rV1X: 126.964775, // 경유지1 경도
  rV1Y: 37.52989, // 경유지1 위도
  rV2Name: '사당역', // 경유지2명칭
  rV2X: 126.981633, // 경유지2경도
  rV2Y: 37.476559, // 경유지2위도
};

//in react native components
export default function App() {
    //...
        // 디바이스에 Tmap이 깔려있나 안깔려있나 확인
    const onPressCheckTMapExistButton = () => {
        checkTmapApplicationInstalled()
        .then((isExist) => {
            if (isExist) {
            setIsTMapExist(true);
            } else {
            setIsTMapExist(false);
            }
        })
        .catch(() => {
            setIsTMapExist(false);
        });
    };
        // 지정된 설정으로 티맵 실행
    const onPressInvokeTMap = () => {
        invokeTMap(routeInfo);
    };
        // 지정된 설정으로 티맵 실행
        // 만일 티맵이 설치가 안되어있다면 스토어로 이동
    const onPressComplexInvokeTMap = () => {
        complexInvokeTMap(routeInfo);
    };

    return (
        //...
    )
}

https://reactnavigation.org/docs/use-focus-effect/

목적 :

• 해당 화면이 디바이스에서 보여질때만 실행되는 로직이 필요

useFocusEffect 사용 :

• React Navigation에서 제공해주는 Hooks인 useFocusEffect 사용

사용 예)

    const [user, SetUser] = useState<String[]>([])
    useFocusEffect(
        React.useCallback(() => {
          let isActive = true;

          const fetchFn = async () => {
            // anything works
            SetUser([]);
          };

          fetchFn();

          return () => {
            isActive = false;
          };
        }, [user]), // add dependency
      );

• 외부의 커스텀 폰트를 적용 시켰더니 line-height 를 적용 시키지 않았는데 글자간의 상하 간격이 크게 차이난다.
• 결정적으로 ios와 스타일 통일이 안됨

원인 :

• 다음과 같이 별도의 설정을 해주지 않는다면 Android에서는 TextView이 기본 패딩값이 적용된다.

해결 :

• style에 include-font-padding: false 를 선언 해주면 된다.

// ex) styled-components
export const Label = styled.Text`
  include-font-padding: false;
    // ...
`;

// ex) styleSheet
const styles= styleSheet.create({
    text: {
        includeFontPadding: false;
    }
})

• 그래프를 클릭했을 때 나오는 Pointer가 나오는데 해당 이벤트가 진행중 일때 LineChart를 감싸고있는 Scroll이 스크롤 되지 않게 disable 처리 하는것이 목표

이슈 사항:

• react-native-gifted-chart 에 문제가 있었다 바로
  • ref를 받지 않는다는것
  • pointer를 보여주는 컴포넌트에 대하여 pressIn과 out이 따로 없다

라이브러리의 상태?

• 해당 라이브러리에 작성된 LineChart 를 살펴보았다.
• props 중에서 getPointerProps라는것이 있다
• 해당 props는 포인터가 활성화 될때 {pointerIndex, pointerX, pointerY} 값을 받아서 callBack 해주는 Function 타입의 props이다.

• 여기서 문제가 생기는데 우리가 목표로 하는 컨트롤이 pointer가 보여지고 사라질때의 상태를 조절 인데 해당 이벤트가 pointerX의 값에 의해서만 수정된다.

  

• 때문에 pointerX값의 변화에 따라서만 다른 액션을 취할 수 있는것이다.

문제 해결 :

• 해결한 코드

    <LineChart
    ...
        getPointerProps={(item, index) => {
          const {pointerIndex, pointerX, pointerY} = item;
          if (pointerIndex === -1 && pointerX === 0 && pointerY === 0) {
            /**
             * 거의 모든 랜더링에 불필요한 랜더링중 다음값이 나온다.
             *  {"pointerIndex": -1, "pointerX": 0, "pointerY": 0}
             * 해당 조건이 걸릴떄는 return void 시켜 불필요한 이벤트 방지
             */
            return;
          } else if (item.pointerX === 0) {
            setIsScroll(true);
          } else {
            setIsScroll(false);
          }
        }}
    ...
    />

• 설명 :

  1. getPointerProps 에는 item과 index 를 파라미터로 받고 item은 {pointerIndex, pointerX, pointerY} 을 포함하고 있습니다.

  2. LineChart의 Line을 누르고 있으면 Pointer가 나오고 getPointerProps 가 동작 하며 item에 포함된 요소를 받을 수 있습니다.

  3. getPointerProps 는 랜더링이 되자마자 실행되며 이때 item의 값은 {pointerIndex = -1, pointerX = 0, pointerY = 0 }

  4. 문제는 getPointerProps를 일으키는 이벤트가 실행 될 때(최초 랜더링, pressIn 상태일 때) 수많은 같은 값이 발생이 됩니다.

5. 때문에 이벤트 발생시 너무 많은 중복값 발생시에 void return을 하여 불필요한 이벤트 발생을 막고 필요한 때에만 이벤트를 넣었습니다.

참조 : Could not get BatchedBridge, make sure your bundle is packaged correctly

원인 :

• native 모듈 설치 이후 해당 모듈 사용 metro 서버에 캐시되어있던 데이터와 충돌이 남

해결 :

• metro를 캐시 초기화 하여 새로 시작

  npx react-native start --reset-cache

참조 : 오류 수정 방법 : Caused by: org.gradle.api.GradleException: 'compileDebugJavaWithJavac' task (current target is 17) and 'compileDebugKotlin' task (current target is 1.8) jvm target compatibility should be set to the same Java version.

에러 원인

현재 Kotlin 버전과, Kotlin Compile 시 JVM 타겟 버전 설정이 달라서 생기는 문제이다.

Caused by: org.gradle.api.GradleException: 'compileDebugJavaWithJavac' task (current target is) and 'compileDebugKotlin' task (current target is) jvm target compatibility should be set to the same Java version.

에러 해결 방법

app 수준의 build.gradle.kts 파일 혹은 build.gradle 파일에 다음과 같이 적혀있을텐데

android{
    ...
    kotlinOptions {
        jvmTarget = "[JVM 타겟 버전]"
    }
}

이 부분을 위에서 말하는 Kotlin 타겟 버전 으로 변경하면된다. 현재 버전이 17이면 jvmTarget을 17로 변경하면 된다.

JDK 1.10버전 이상부터는 1. 을 붙이지 않고 서브버전명을 그대로 쓴다. 즉, 17이라고 쓰면 된다.

android {
    ...
    kotlinOptions {
        jvmTarget = "17"
    }
}

이렇게 하면 빌드가 성공한다.

위의 상황과 별개의 상황도 고려해야 한다.

Case

• adb 및 가상 Emulator를 확인(아예 비활성화 및 못읽어 올 경우 build 자체가 안됨)
• targetKotlin 버전을 명시화 한다. reactnative의 경우는 알아서 되는것 같지만…혹시나 충돌이 날경우는 해결해주어야 함
• 서드파티 라이브러리를 설치했을 경우 충돌이 날 수 있으니 어디에서 에러가 나는지 체크 해주어야함 (필자의 경우는 reanimated가 v2→v3로 넘어가는 과정에서 충돌이 난 경우가 있음)

1. firebase로 얻어온 데이터중 date를 가져오는것이 있는데 나머지 요소를 모두 가져올 수 있지만 오직 date만 가져오지 못한다..!!!

   1. 작성한 코드

   2. 결과값

문제점

• ios에서는 아무 문제없이 date 값을 가져올 수 있다.
• android 에서 id가 포함되어있는 + 다른 형식의 createdAt 의 데이터는 date가 불러와지지만 나머지 값들은 date가 불러와지지 않는다
• data 에 date를 불러오려고 하면 다음과같은 결과를 반환한다
  • [data.date] = undefined
  • data[’date’] = undefined
  • Object.values = [0.04409162, "XAG", "12321cc-1233223123-29de1a81", 1123213, "2023-08-11"]
• 각 요소를 탐색 하였을 때 date는 undefined 를 밷지만 배열의 값만 반환하는 Object.values 를 사용 하였을 때 정상적으로 모든 값을 얻을 수 있다.

해결

이슈에 대한 명확한 해결은 아니지만 해당 이슈에 걸려있는 목적을 위한 값을 얻어내는것을 목적으로 우회하여 문제를 해결

해결코드 예시:

const Fn = async () => {

// firestore에서 가져온 data list
const _list = await firestore()
    .collection("NonFeMetal")
    .where('category','==','XAG')
    .get();

// Platform이 안드로이드인 경우에서만 발생하는 문제임으로
// 해당 로직은 안드로이드에서만 적용되게 한다.
if (Platform.OS === 'android') {
  _list.forEach(e => {
    const listData = e.data();

    const {value, createdAt, category, ...prop} = listData;
    const propKey = Object.keys(prop);

        const resultDate = 
            propKey.includes('id') ? prop.date : Object.values(prop)[0],
  });

}

• js es6인 디스트럭쳐링을 이용하여 유사하게 data를 필터하여 최대한 date값만 남게 처리하였습니다.
• 필터된 prop라는 값에 Object.keys를 이용하여 key값만 분류하여 propsKey에 입력합니다.
• propsKey에는 ‘id’ 라는 key값이 있을 수 있고 id가 있는 데이터 값들은 .date 또는 [’date’]로 날짜가 추출되기 때문에 그대로 사용합니다.
• 기존에 undefined가 되던 .date와 [’date’] 는 사용하지 않고 Object.values를 이용하여 date값을 정상적으로 얻을 수 있습니다.

• 프로필 이미지를 바꾸는 Post요청 등으로 인해 이미지가 변경 되어야 하는데 해당 변경되는 uri가 동일할 경우 참조 uri의 내용이 달라져도 해당 주소로 이미지가 캐싱되어 이미지 변경이 이루어지지 않는다

해결 :

• 이미지의 Uri 주소 뒤에 garbage값을 붙여 timestamp 등의 값을 붙여 리랜더링 될때마다 다른값을 적용시켜 uri가 캐싱되어 같은값을 불러오는것을 방지

  code :

const Components = ({image}: {image: String}) => { const timeStamp = new Date().getTime(); // before // const uri = image;

// after
const uri = `${image}?${timeStamp}`

return <View>
    <FastImage 
        resizeMode={'contain'}
        style={[]}
         // uri가 불러오는 주소는 동일하지만 FastImage에서 읽어오는 uri가 매번 달라져 캐싱되는일이 없다
        source = {uri}
    />
</View>

}

```

npm i -g react-native-oss-license

Usage

• 프로젝트 루트 terminal에서 react-native-oss-license --json --only-direct-dependency --skip-not-required 를 입력하여 나오는 string 배열을 복사하여 사용하자
• 입력후 다음과같은 형태가 나오는데 저장하여 원하고자 하는 사용값만 리스트로 보여주면 된다.

  export const OpenSourceLicense = [
  {
    libraryName: '@eabdullazyanov/react-native-sms-user-consent',
    version: '1.0.10',
    _license: 'MIT',
    _description:
      "React Native wrapper for Android's SMS User Consent API, ready to use in React Native apps with minimum effort",
    homepage: '<https://github.com/akvelon/react-native-sms-user-consent#readme>',
    author: {
      name: 'Eldar Abdullazyanov',
      email: 'eldar.abdullazyanov@akvelon.com',
    },
    repository: {
      type: 'git',
      url: 'git+https://github.com/akvelon/react-native-sms-user-consent.git',
      baseUrl: '<https://github.com/akvelon/react-native-sms-user-consent>',
    },
    _licenseContent:
      'MIT License\\n\\nCopyright (c) 2021 Akvelon\\n\\nPermission is hereby granted, free of charge, to any person obtaining a copy\\nof this software and associated documentation files (the "Software"), to deal\\nin the Software without restriction, including without limitation the rights\\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\\ncopies of the Software, and to permit persons to whom the Software is\\nfurnished to do so, subject to the following conditions:\\n\\nThe above copyright notice and this permission notice shall be included in all\\ncopies or substantial portions of the Software.\\n\\nTHE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\\nSOFTWARE.\\n',
  },
  ...
  ...
   }
  ]

https://github.com/kristerkari/react-native-svg-transformer

• 특이사항 & 고려할 사항
  • RN 버전 , TypeScript 사용 유무

react-native-svg-transformer 를 devDependencies에 설치

yarn add react-native-svg
yarn add -D react-native-svg-transformer

metro.config.js 설정

• 특이사항 :

    - 해당 부분은 RN의 버전에 따라 설정하는것이 다르기때문에 공식문서를 보고 메뉴얼에 맞게 설정해야한다.
    - 필자는 0.72버전 이상의 RN 을 사용하여서 다음과같이 설정했다.

        const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

        const defaultConfig = getDefaultConfig(__dirname);
        const {assetExts, sourceExts} = defaultConfig.resolver;

        /**
         * Metro configuration
         * <https://facebook.github.io/metro/docs/configuration>
         *
         * @type {import('metro-config').MetroConfig}
         */
        const config = {
          transformer: {
            babelTransformerPath: require.resolve('react-native-svg-transformer'),
          },
          resolver: {
            assetExts: assetExts.filter(ext => ext !== 'svg'),
            sourceExts: [...sourceExts, 'svg'],
          },
        };

        module.exports = mergeConfig(defaultConfig, config);

• typescript decalare.d.ts 생성
  • TypeScript 사용시 임의로 svg type을 선언해주어야 한다.
  • CustomType의 위치와 이름은 자유롭게 설정해도 된다.
  • tsconfig.json 에 customType 명시

    예시)

    // 위치 : ~/src/@types/declarations.d.ts

    declare module '*.svg' {
      import React from 'react';
      import {SvgProps} from 'react-native-svg';
      const content: React.FC<SvgProps>;
      export default content;
    }

// location : ~/.tsconfig.json
    {
      "extends": "@tsconfig/react-native/tsconfig.json",
      "compilerOptions": {
            ...
        "typeRoots": ["./node_modules/@types", "./src/@types"]
            // ㄴ node_modules/@types는 필수적으로 명시해주고
            // 그 다음에 svg 타입 선언을 위한 declar 파일위치를 명시해준다.
            ...
      }
    }

metro재시작!!

• 모든 설정을 마치고 metro 서버를 재시작 해주어야 정상적으로 읽어올 수 있다.

https://reactnative.dev/docs/style

React Native를 사용하면 JavaScript를 사용하여 애플리케이션의 스타일을 지정할 수 있습니다. 모든 style 구성 요소는 prop을 허용합니다.

react native에서 스타일을 구성하기 위한 요소들은(View, Text, ScrollView 등등..) style props 를 optional로 받고있습니다.

View 컴포넌트의 구성요소를 보면 style로 되어있고

// ViewPropTypes.d.ts
style?: StyleProps<ViewStyle> | undefined

StyleProps는 StyleSheet.d.ts 를 살펴보면 RecursiceArray 타입이 Array를 확장하고 있습니다.

// StyleSheet.d.ts
type Falsy = undefined | null | false;
interface RecursiveArray<T>
  extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
/** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle<T>` and return `T`. */
type RegisteredStyle<T> = number & {__registeredStyleBrand: T};
export type StyleProp<T> =
  | T
  | RegisteredStyle<T>
  | RecursiveArray<T | RegisteredStyle<T> | Falsy>
  | Falsy;

이렇게 선언된 타입으로 style은 각 Style 컴포넌트 타입에 정의된대로 스타일을 단일 또는 배열로 받을 수 있습니다.

// ex)

const example = () => {
  return (
        <View style={{width : 100, height: 100}}>
          <View style={[styles.default, styles.box ]}>...</View>
          </View>
  )
}

const styles = StyleSheet.create({
    default : {
      flex : 1;
    },
      box : {
      width : 50,
      height : 50,
      backgroundColor : '#222'
    }
})

style props 작성

style props 는 inline으로 작성 가능하고 javascript를 이용하여 스타일을 지정 할 수 있습니다. 작성하는 방식은 자유지만 저의 경우는 몇 가지 방식을 나누어 상황에 맞추어 적용 하였습니다.

• inline style
• StyleSheet.create 로 선언한 스타일 설정

예시

const example = () => {
  const isDarkMode = false;
  return (
        <View>
            //inline style
          <View style={[{width : 100}]}></View>
          // 배열 및 StyleSheet 사용
          <View style={[styles.default, styles.box]}></View>
            <View style={[{borderWidth : 1},styles.default, styles.box]}></View>
          <View style={[isDarkMode ? styles.dark : styles.light ]}></View>
        </View>
  )
}
const styles = StyleSheet.create({
      default : {},
      box: {},
     dark: {},
      light: {},
})

style props 우선순위

style props를 배열로 받을 경우 결국 동일하게 선언되는 스타일이 생깁니다. 이때는 배열의 마지막에 오는 스타일이 우선권을 가지게 됩니다.

예시

import { SafeAreaView, StyleSheet, View } from 'react-native';
import Text from 'src/atoms/Text/Text';

const UIScreen = () => {
  return (
    <SafeAreaView style={[styles.default]}>
      <View style={{ padding: 20 }}>
        <Text>UIScreen</Text>
        <Text>Box</Text>
        <View style={[styles.box]} />
        <Text>RedBox</Text>
        <View style={[styles.box, styles.bgBlue, styles.bgRed]} />
        <Text>BlueBox</Text>
        <View style={[styles.box, styles.bgRed, styles.bgBlue]} />
      </View>
    </SafeAreaView>
  );
};

export default UIScreen;

const styles = StyleSheet.create({
  default: {
    flex: 1,
    backgroundColor: '#fff',
  },
  box: {
    width: 100,
    height: 100,
    borderColor: '#111',
    borderWidth: 1,
  },
  bgRed: {
    backgroundColor: 'red',
  },
  bgBlue: {
    backgroundColor: 'blue',
  },
});

예시 코드의 결과 화면

react navigation의 Type checking with TypeScript 를 참조하였습니다.https://reactnavigation.org/docs/typescript/

일반적으로 navigation의 props는 위의 사진처럼 NavigationContainer 내부의 stack에 있는다면 자동으로 props를 전달해줍니다. 하지만 typescript 에서는 따로 타입을 지정해주지 않는 이상 error 표시로 남게 됩니다.

navigation type 작성

navigationContainer 외에 다른 screen 컴포넌트에 명시할 타입을 작성해야합니다. 이때 RootStackParam을 작성합니다. 여기서 NativeStackScreenProps을 제외하고 모두 임의의 변수,타입명 입니다. 다음과같이 설정하였습니다.

// src/navigation
//             |- navigation.tsx
//             |- type.ts << 저는 여기에 작성

import { NativeStackScreenProps } from '@react-navigation/native-stack';
...

type StartStackParamList = {
  Start: undefined;
  UserDetail?: { id: number };
};

type HomeStackParamList = {
  Home: undefined;
};

type StackParamList = StartStackParamList & HomeStackParamList;

export type RootStackParamList = {
  [key in keyof StackParamList]: StackParamList[key] extends infer Param
    ? Param extends undefined
      ? undefined | StackParamList[key]
      : StackParamList[key]
    : never;
};


export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, Screen>;

StackParamList

해당 stackParamList에는 이동할 화면의 이름을 선언하고 화면에 넘길 변수의 타입을 선언합니다. Start처럼 넘길것이 없다면 undefined으로 명시 UserDetail처럼 넘겨야 할것이 있다면 Object 로 전달해야합니다.(optional도 가능) 위의 예시처럼 다수의 StackList를 사용한다면 StackParamList 처럼 하나의 타입으로 통합시켜 줍니다.

RootStackParamList

StackParamList 에서 선언한 화면의 이름들을 사용하기위해 keyof로 선언한 Key값들을 가져옵니다.

RootStackScreenProps

실질적으로 화면을 구성하는 ScreenComponent에 사용하게될 타입니다. 작성해둔 RootStackParamList 를 위의 코드와 같이 명시해주시면 됩니다.

작성한 타입 사용

ex)

1. 작성해둔 RootStackScreenProps 를 부르고 key값으로 설정한 UserDetail을 선언하면 UserDetail에 선언한 타입과 navigation 기본 Props 모두 타입이 선언되어있습니다.

2. 파라미터를 넘겼다면 route.params 로 확인이 가능합니다.

다음과같이 작성할 수 있습니다.

import FC from 'react'
import { RootStackScreenProps } from '../../navigation/type';
...

const UserDetail: FC<RootStackScreenProps<'UserDetail'>> = ({
    navigation,
    route
}) => {
  return ...
}

OR

import FC from 'react'
import { RootStackScreenProps } from '../../navigation/type';
...

const UserDetail: ({navigation, route}: <RootStackScreenProps<'UserDetail'>>) => {
    return ...
}

• 합병관련 개인정보 이관 알림 업데이트 이후 앱이 종료되는 현상
• 개발할때는 아무 문제없었음
• identifier가 각각 dev,qa,production의 파일들을 모두 dev, qa , production 로 모두 빌드 해보았으나 아무런 문제가 발생하지 않음
• 실제 출시된 제품에서만 터지는 현상
• 앱이 강제종료 되는 계정은 따로 있었는데 예약정보가 있는 계정이면 ios,andorid 모두 강제종료되었음

[그 당시에 해결하면서 정리했던 노트]

원인

• 기기마다 폰트 크기 호환성을 맞추기위해 추가한 useWindowDimension 때문에 오류발생 근데 useWindowDimension의 fontScale은 결국 사용하지 않았다

import {… , useWindowDimension } from ‘react-native’;

...
...

{
    const { fontScale } = useWindowDimension();
}

해결

• 미사용 코드인 fontScale을 삭제하니 문제 해결

왜 수정까지 오래 걸렸는가?

1. 실제 제품이 아닌 개발중에서는 아무런 오류가 생기지 않았다.
2. 실제 마켓제품의 Log도 출력해서 보았으나 제대로된 에러가 출력되지 않았다.
3. 초반에 백엔드단에서 error code를 499를 내뱉어서 nginx오류로 오판

결론 및 마무리

• 모든 테스트 환경에서 고객에게 제공되는 앱환경에서만 발생하는 오류이기 때문에 해결까지의 상당한 시간이 걸렸다.
• RN에서 제공해주는 Modal과 useWindowDimension이 충돌한거 아닐까 추측
• 미사용 코드가 있다면 꼭! 주석 처리를 하거나 라이브빌드 코드에선 지워서 이러한 상황을 미연에 방지하는 습관을 가져야겠다.

이번 글로 한번 기초를 밟아보겠습니다.

일단 this를 찍어본다면?

F12나 Ctrl(=Command) + shift + c 를 눌러서 브라우저 콘솔에 일단 this를 찍어봅시다

> this
> Window {
    0: Window, 1: Window, 2: global, window: Window, 
    self: Window, document: document, name: '', location: Location, … }

그냥 this를 입력했을때 Window객체가 나옵니다. Window객체는 일반적으로 브라우저의 요소와 자바스크립트 엔진과 관련된 모든 정보를 포함하고 있는 객체입니다. 그렇지만 단순히 this = Window 객체인건 아닙니다.

우선 실행 컨텍스트 라는걸 알아야 합니다.

실행 컨텍스트(Execution Context)

실행컨텍스트란 자바스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념입니다.

좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있습니다.

여기서 말하는 실행 가능한 코드는 다음 세가지가 있습니다.

• 전역 코드 : 전역 영역에 존재하는 코드
• Eval 코드 : eval 함수로 실행되는 코드
• 함수 코드 : 함수 내에 존재하는 코드

일반적으로 실행 가능한 코드는 전역코드와 함수코드입니다.

메인 주제가 this이니 전역(Global)과 함수(Function)의 실행 컨텍스트를 간단하게 설명하겠습니다.

Global Execution Context

기본적으로 코드가 실행되는 영역이며, 여기서 글로벌 객체인 Window객체를 생성하며, this를 글로벌 객체(Window객체)로 설정해줍니다.

그래서 아까 브라우저 상에 this 를 찍었을 때, Window객체가 출력 된것입니다.

Functional Execution Context

각각의 함수가 가지는 실행 컨텍스트로, 함수가 호출될 때 해당 실행 컨텍스트가 생성됩니다.

function foo() {
    console.log('foo')
} //Funtioncal Execution Context

function boo() {
    const booVar = 8;
    const printVar = (value) => console.log(value); //Funtioncal Execution Context

    console.log('boo');
    foo();
    printVar(booVar);
}//Funtioncal Execution Context

const myNumber = 10;
boo();

/*Output*/ 
/*
//boo
//foo
//8
*/

언제 this 가 바뀌는가

this는 기본적으로 Window객체를 말합니다(Node.js는 Global 객체)

하지만 this의 값이 바뀌는 경우가 있습니다. 때문에 this 값이 어떻게 바뀌고 있는지, 해당 this가 무슨값인지 알기 위해선 코드의 문맥을 살펴볼 필요가 있습니다.

객체의 메소드를 호출하는 경우

const myObj = {
    myValue: 6,
    myWindow: this,
    myFunc: function() {
        console.log(this);
    },
    myArrow: () => {
        console.log(this);
    },
};

console.log(myObj.myFunc()); // myObj 객체
console.log(myObj.myArrow()); // Window 객체

Regular Function과 Arrow Function에 따라 this 의 값이 바뀌었습니다.

MDN에서는 아래와 같이 설명하고 있습니다.

— 함수를 어떤 객체의 메소드로 호출하면 this의 값은 그 객체를 사용합니다. — ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다. -MDN web docs- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

function 키워드는 해당 객체를 바인딩하여 this 의 값을 변경 하는 것이고,

() ⇒ {} 는 상위 객체의 this를 그대로 이어받아 사용하는 것입니다.

생성자를 통해 객체를 생성하는 경우

function Programmer(name, age) {
    this.name = name;
    this.age = age;
}

// 생성자를 사용하지 않은 경우 - 단순 호출
const covy = Programmer('Covy', 20); // covy변수는 undefined
console.log(window.name, window.age); //Covy 20

// 생성자를 통한 객체 생성
const tony = new Programmer('Tony', 25);
console.log(tony.name, tony.age) // Tony 25 -> this가 해당 객체에 바인딩됨

new 키워드를 통해 객체를 생성하면, this 가 해당 객체에 바인딩 되어 해당 값을 읽게 되는것입니다.

es6에 추가된 class 를 사용하면 동일하게 작동하는 것을 볼 수 있습니다.

예외적인 경우

Jquery, React등에 일부 라이브러리에서 엘리먼트에 이벤트를 추가할 때, 콜백함수에서 this 를 사용하면 값이 바뀌는 경우가 있습니다.

//Jquery
#('div').on('click', function() {
    console.log(this) // <div>
    function normalFunc(){
        console.log(this); //Window 객체
    }
    const arrowFunc = () => {
        console.log(this); // <div>
    }
});

위 코드 처럼 라이브러리 상에서 this를 바인딩 해주는 경우가 있기도 하니 this 를 사용할 때는 해당 라이브러리의 docs를 찾아보는것도 중요합니다.

(특히 Vue!!!! Vue는 stackOverflow나 공식문서를 적극적으로 봐야한다)

apply(),call(),bind()

사실 this 는 이 3개를 이해하기 위한 발판입니다.

자바스크립트에서는 this 를 자유자제로 바꿀 수 있도록 해주는 메소드를 제공하는데, 바로 apply, call, bind 입니다.

ES5는 함수를 어떻게 호출했는지 상관하지 않고 this값을 설정할 수 있는 bind메서드를 도입했습니다. -MDN web docs- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

const Tome = {
    age: 25,
    gender: 'man',
};

function printProfile(name) {
    console.log(name, this.age, this.gender);
}

printProfile.call(Tom, 'Tom'); // Tom 25 man
printProfile.apply(Tom, ['Tom']); // Tom 25 man
printProfile.bind(Tom, 'Tom').call(); // Tom 25 man

• call : 객체를 바인딩 함과 동시에 호출을 합니다.
• apply: call 함수와 유사하지만, 매개변수는 배열로 받는것에 있어 차이가 있습니다.
• bind: 바인딩이 된 함수를 반환하며, 한번 더 호출시 함수를 실행합니다.

마치며

라이브러리나 프레임워크에 따라 쓰임세가 유동적으로 변하기 때문에 바닐라 JS를 쓰는게 아닌이상 약간의 차이를 감안하고 사용을 해야합니다.

개발을 하면 할수록 중급단계에서 사용빈도수가 높아지고 더 나아가 라이브러리 및 모듈 제작을 할때 적재적소로 활용될수 있으니 확실하게 개념을 짚고 넘어가는게 좋은것같습니다.

암호화 되지 않은 비동기적인 데이터를 관리하는 Key-Value 저장 시스템입니다.

앱 전역에서 사용할 수 있으며, LocalStorage 대신 사용합니다.

사용하는 이유

활용하는 이유와 방법에 대한건 요구사항에 따라 다르겠지만 저는 주로 다음과같은 목적과 이유때문에 사용합니다.

1. redux, redux-toolkit 등의 상태관리와 달리 앱을 종료해도 저장한 값이 유지된다.
2. 보안에 문제되지 않은 한의 저장값들에 대해 활용한다 ex) 로그인 상태 유지의 확인, 앱 설치시 최초1회만 실행되어질 로직에 대한 값

설치

원래는 react-native에서 공식적으로 지원해주었지만 deprecated 되었습니다. 이제는 자체 지원을 중단하고 community packages에 오픈 소스로 만들어진 AsyncStorage를 사용해야 합니다.

npm install @react-native-async-storage/async-storage

OR

yarn add @react-native-async-storage/async-storage

사용 방법

1. AsyncStorage 를 호출하여 Key-Value를 저장하는 함수와 저장한 key 값을 호출하여 value를 불러오는 함수 두가지를 작성하겠습니다.

   import AsyncStorage from '@react-native-async-storage/async-storage';
   

export const setItem = async (key: string, value: string) => { try { await AsyncStorage.setItem(key, value);

// 저장값 확인을 위한 console.log
console.log(`setItem... ${key} : ${value}`);

} catch (e) { throw e; } };

export const getItem = async (key: string) => { try { const res = await AsyncStorage.getItem(key); return res || ''; } catch (e) { throw e; } };

key-value값을 저장하는 setItem 함수와
저장한 key의 value값을 불러오는 getItem 함수를 작성하였습니다.

작성 코드 git 

2. setItem을 호출하여
'key'라는 이름으로 value를 저장하여 asyncStorage에 저장하는 함수를 생성합니다.
```jsx
...
import { setItem } from 'src/storage/storage';

const [asyncValue, setAsyncValue] = useState('');
const [stoageValue, setStoageValue] = useState('');


const onPressSetAsyncStorage = async () => {
    try {
      await setItem('key', asyncValue);
      confirmAsyncValue();
    } catch (e) {
      console.log(e);
    }
  };

const confirmAsyncValue = async () => {
    const result = await getItem('key');
    setStoageValue(result);
  };
  useEffect(() => {
    confirmAsyncValue();
  });

  return (
      <View>
        ...
    </View>
  )

적용 확인

다음과같이 redux-toolkit등을 이용한 상태관리 값인 count는 앱을 종료할 시에 값이 유지가 되지 않습니다.

'key'라는 string key값으로 input에 입력한 값을 value로 등록하여 async-storage에 등록한 값은 앱을 종료하여도 그 값이 유지가됨을 확인할 수 있습니다.

💡 metro에서 ios와 달리 안드로이드는 직접 연결상태에서 빌드하여 그 연결이 끊어지면 실행중인 metro서버와 바로 끊어지는 불편함이 생깁니다. 이를 해결하기 위해 adb를 이용하여 무선연결을 하는 방법을 알아보겠습니다.

1. adb devices 를 이용하여 연결된 디바이스를 확인합니다.

2. adb tcpip [연결할 port 번호] 를 입력합니다. ex) adb tcpip 5555

3. adb connect [metro서버와 Device에 연결된 ip주소]:[연결할 port 번호] 를 입력합니다.port번호를 미입력하면 가장 처음에 설정하였던 port번호가 연결됩니다. 이후 adb device를 입력하여 확인합니다. ex) adb connect 192.0.0.0:5555 (= adb connect 192.0.0.0 )

• 주의사항 : ip주소는 반드시 device의 네트워크에 연결된 ip주소를 적어야 합니다.

4. 이후 모바일 디바이스와 컴퓨터의 연결을 해제하셔도 무선으로 빌드가 가능합니다. 각자 환경에 맞추어 안드로이드 빌드 하시면 됩니다. ex) default build ⇒ $ npx react-native android run-android

Assets 에 폰트 파일 추가

폰트파일을 지정한 위치에 복사하여 넣어줍니다. (해당 위치는 임의로 설정하면 되고 저는 ~/src/assets/fonts 에 설정 하였습니다.)

react-native.config 를 생성하고 font위치를 명시

프로젝트 루트위치에 react-native.config.js 파일을 만든 후 아래와 코드 같이 assts : { 폰트 저장위치 }를 명시해줍니다

module.exports = {
  assets: ['src/assets/fonts'],
};

각 플렛폼(ios, android)에 적용

그 후 터미널에 npx react-native-asset 를 입력하여 폰트를 적용합니다.

react-native의 버전 0.69 초과 : 터미널 내 npx react-native-asset 명령어 입력 0.69 이하 : 터미널 내react-native link 명령어 입력 (적용 후 새로 빌드해주세요)

플랫폼 별 폰트 적용 확인

android

안드로이드는 android/app/src/main/assets/fonts 에 폰트가 적용되어있는 것을 확인하면 됩니다.

ios

ios는 ios/{project-name}/Info.plist 에서 확인 할 수 있습니다.

프로젝트를 처음 설정하다보면 사용하고 있지않은 값에 대해 다음과 같이 경고가 표시되고 있습니다.

기능과 성능상으로는 문제가 없지만 실제 문제가 생기는 부분과 햇갈릴수 있으므로 수정해보겠습니다.

해결

해당 경고문에 다음과 같은 문구가 있습니다.

eslint(@typesript-eslint/no-unused-vars)

다음 사이트에 TypeScript의 eslint 규칙을 참조해보니 해당 옵션으로 설정할 수 있을거같습니다. https://typescript-eslint.io/rules/no-unused-vars/

저는 package.json에서 eslint룰을 설정하여 해결 하였습니다.

"eslintConfig": {
    "extends": [
      "@react-native-community",
      "prettier",
      "plugin:react/jsx-runtime",
      "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
      "no-unused-vars": "off",
      "@typescript-eslint/no-unused-vars": [
        "warn"
      ]
    }
  },

그리고 다음 typescript-eslint를 설정하기 위해선 다음의 패키지(@typescript-eslint/parser @typescript-eslint/eslint-plugin)를 devDependencies 에 추가해준 이후 reload하여 확인하면 됩니다.

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

적용이 된 이후에 경고가 없어진 화면

추가

만약 모든 설정 적용후에도 설정이 되지않는다면 루트 폴더에 있는 .eslintrc.js 를 제거하고 리로드 해보세요!

react-native error Your Ruby version is 2.6.8, but your Gemfile specified 2.7.5

원인

mac은 기본적으로 ruby가 설치되어있지만 reactNative를 설치하기 위해서는 버전에 맞는 ruby가 설치되어 있어야 합니다.

해결

따로 ruby 패키지 매니저를 설치하여 버전을 맞춰주었다. 나는 rbenv 사용하였습니다.

1. 우선 rbenv로 원하는 버전을 설치합니다.

rbenv install 2.7.5
rbenv global 2.7.5
rbenv local 2.7.5

그후 ruby —version 으로 버전을 확인해보면 여전히 2.6.8로 버전이 바뀌지 않았습니다. 아직 설치 경로가 그대로이기 때문입니다. 따라서 새로 설치된 루비 경로를 환경 변수에 추가해주어야 합니다,

제 경우는 ~/.zshrc 를 수정하였습니다.

1. 루비 환경변수 추가

[[ -d ~/.rbenv  ]] && \
export PATH=${HOME}/.rbenv/bin:${PATH} && \
eval "$(rbenv init -)"

이후 저장하고 다시 루비 버전을 확인하면 2.7.5로 변경되있는것을 확인할 수 있습니다.