ios 와 android 에서 동시에 폰트적용을 하기 위해서는 아래와 같이 해야합니다.

폰트 설정 방법

1. 'react-native.config.js' 생성 및 작성

• 먼저 project 의 root directory 에 아래와 같이 파일을 작성해줍니다.

  //react-native.config.js
  module.exports = {
  project: {
    ios: {},
    android: {}, 
  },
  assets: ['./assets/fonts'], 
  };
  

```

2. 글꼴을 담고있는 폴더를 생성

• project의 root 경로에 assets/fonts 폴더를 만들고 내부에 글꼴 파일(ttf 혹은 otf) 파일을 넣어둡니다.

3. assets 폴더를 각 플랫폼(iOS,android)에 연동

react-native 0.69 초과의 버전이라면 터미널 내 npx react-native-asset 명령어 입력 아니면 터미널 내react-native link 명령어 입력

• 위 1번 에서 작성한 react-native.config.js을 기반으로 assets을 각 플랫폼에 동기화하여 자동으로 적용되게 해줍니다.
  • ios: root/ios/[projectName]/info.plist 경로에서

        `<key>UIAppFonts</key>` 아래 넣은 폰트의 명이 입력되었는지 체크 

  • android: root/android/app/src/main 내 assets/fonts폴더와 내부 폰트가 있는지 체크

*** 만약 둘중 하나라도 없다면 수동으로 폰트를 적용시켜주어야합니다. **

4. 다시 빌드하여 확인합니다.

에러 해결

1. ios 내 폰트 관련 에러 발생 해결방안: assets/fonts 폴더내에 넣은 폰트의 이름을 서체 관리자의 'PostScript 이름' 과 동일하게 변경해줍니다.

2. android 내 폰트 미적용 발생 해결방안: ios는 폰트가 적용되지만 android에서 적용되지 않는다면 코드 내 스타일에fontWeight가 적용되어 있는지 확인합니다.

(*가끔 fontWeight 때문에 글꼴이 적용안되는 경우가 있다고 하네요)

reference

https://stackoverflow.com/questions/68441556/npx-react-native-link-dose-not-working-for-me

https://techblog.geekyants.com/adding-custom-fonts-a-complete-guide-react-native-060

Drawer Navigation 설치 과정

react-navigation/drawer 를 설치하려면 해당 라이브러리와 더불어 여러 종속적인 라이브러리를 함께 설치해야 합니다.

 1. yarn add @react-navigation/drawer
 2. yarn add react-native-gesture-handler
 3. yarn add react-native-reanimated

여기서 1번은 위 이미지와 같이 Drawer Navigator의 라이브러리, 2번은 드로우 네이게이터에서 사용자의 제스처를 인식하기 위해 내부적으로 사용하는 라이브러러, 3번은 리액트 네이티브에 내장된 애니메이션 효과보다 더욱 개선된 애니메이션 효과를 구현하는 라이브러리 입니다.

설치 이후, 아래와 같이 Drawer Navigator를 선언하여 쓰면 되는데요,

import {createDrawerNavigator} from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

에러 현상

그런데 아래와 같은 에러 결과와 함께 TypeError: Cannot read property 'createDrawerNavigator' of undefined 와 같은 에러 로그가 찍힘을 볼 수 있습니다.

해결 방안

이 에러는 babel.config.js 파일 내에 plugins: ['react-native-reanimated/plugin'], 을 추가해주면 해결됩니다.

    module.exports = {
      presets: ['module:metro-react-native-babel-preset'],
      plugins: ['react-native-reanimated/plugin'],
    };

추가 사항

추가로 위 에러를 해결하기 위해 스택오버플로우나 여러 커뮤니티에서 관련 사례를 서치 해보았는데 아래와 같은 해결방안과 파생된 다른 에러 이슈가 있었습니다.

1. react-native-reanimated@next 설치

   • 안정적으로 릴리즈된 버전이 아닌 실험적인 버전을 설치하여 해결하는 방안입니다.
   • 하지만 위 방법을 사용하였을 때에 정상적으로 Drawer Navigation 이 노출됨을 확인하였지만 작동 시, 아래와 같이 경고문이 지속 발생하였습니다.
     WARN Sending 'onReanimatedPropsChange' with no listeners registered.

2. react-native-reanimated@2.8.0 다운그레이드 설치

   • 위 사례와 다르게 오히려 2.8.0 으로 다운그레이드 하여 설치하는 방법입니다. (현재 버전 2.10.0)
   • 하지만 이 방법은 ios는 정상 동작함을 확인할 수 있었지만 android에서는 컴파일 에러를 내뱉는 것을 확인할 수 있었습니다.

reference

• react-native-reanimated 공식 문서
• 스택오버플로우 관련 사례
• velog 관련 사례

for 문은 반복의 범위가 명확할때 사용, while 문은 원하는 값을 얻을 때까지 반복을 돌려야할 때 사용!

최근 어떤 계기로 인하여 뒤늦은(?) 알고리즘 공부를 시작하였는데 for문과 while문을 제 용도에 맞지 않게 써 시간초과, 런타임에러, 틀렸다는 결과를 받고 기억하고자 for문과 while문의 차이를 정리하려 합니다.

for문

for문의 코드 구조는 아래와 같습니다.

for(초기값; 조건식; 증감연산)
    ...동작 코드
}

//예시
for(let i = 0; i < 10; i++){
    console.log(i)
}

for문은 조건식이 거짓 으로 판별될 때까지 반복합니다. 여기서 조건식은 i < 10; 으로 정의된 부분입니다.

위 조건식이 false 가 될때까지 i는 0부터 시작해서 9가 되는 순간까지 콘솔 로그를 찍게 됩니다.

이와 같이 조건식(반복의 범위) 가 들어가는 for문은 1. 구하고자 하는 값의 조건이 무엇인지 명확할 경우 사용합니다. _ _2. 반복 횟수에 따라 값을 구한다던지 또는 횟수를 참조해야할때 사용합니다.

while문

while문의 코드 구조는 아래와 같습니다.

while(조건식){
    ...동작 코드
}

//예시
while(true){
    console.log('hi')
}

while문은 어떤 조건문이 참이기만 하면 문장을 계속해서 수행합니다. for문에 비해 변수도 새로 만들지 않고 훨씬 간단합니다.

간단한 만큼 예시와 같이 조건식이 항상 true인 경우 무한루프에 빠지기 쉽습니다. 그래서 주로 break문과 함께 쓰입니다. (break문은 반복에서의 탈출을 위해 사용하며 for문도 적용 가능합니다.)

이와 같이 while문은 1.반복의 범위 가 명확하지 않지만 원하는 값이 나올때까지 계속해서 반복할때 사용합니다.

(다만 조건이 항상 거짓일지라도 무한 루프는 피해야합니다)

버전 사양

• node: 18.7.0
• xcode : 13.4.1
• iOS Simulator : 15.0
• react-native: 0.69.5

에러 현상

M1 Mac에서 리액트 네이티브 프로젝트로 ios 시뮬레이터를 구동할때에 요런 알림창이 뜨며 시뮬레이터가 뜨지 않는 에러를 맞닥뜨렸습니다.

Unable to boot device in current state: Booted

1회성 해결 방법

관련 레퍼를 찾아본 결과 여러 해결 방안들이 있었고 그 중 가장 많았던 해결방안은 아래와 같습니다.

1. 터미널 또는 iTerm 에 xcrun simctl list 입력

2. 엄청나게 많은 리스트가 보여질 텐데 여기서 command+F 키를 누르고 booted를 검색한다.

   

3. booted로 검색하여 나온 결과 행의 일련번호 같은걸 복사하고서 xcrun simctl shutdown <시뮬레이터 일련번호 입력> 와 같이 입력한다 (<>는 빼고)

4. 그리고 다시 시뮬레이터를 구동하면 정상적으로 화면이 노출됨을 확인할 수 있다

찐해결 방법

하지만 위 방법은 그때의 상황을 모면하기 위한 해결 방안으로 보입니다. 왜냐하면 시뮬레이터를 종료했다가 다시 구동하면 위와 같은 과정을 다시 거쳐야 했기에 시뮬레이터를 자주 실행한다면 매번 위와같이 해주어야 했거든요.

그러다가 관련 에러를 stack overflow 에서 검색하던 도중 cool한 해결 방법을 찾았습니다.

Simulator를 열고 Preferences -> 'Simulator lifetime' 에서 When Simulator starts boots the most recently used simulator 체크해제

Reference

https://stackoverflow.com/questions/24135067/unable-to-boot-device-in-current-state-booted