[React-Native] React Native Expo 프로젝트의 app.json 분석하기

React Native 프로젝트에는 app.json이라는 파일이 존재하는데,
이 파일은 프로젝트의 메타데이터와 설정을 정의하는 데 사용된다고 한다.
또한 이 파일의 용도는 Expo 프로젝트와 React Native CLI 프로젝트 간에 약간 다르다고 하는데, 각각 어떻게 다른지 또한 어떤 설정들이 있는지 공부해보았다.

app.json 사용 용도

1. Expo CLI에서의 용도

Expo 프로젝트의 'app.json' 파일은 다양한 앱 설정과 관련된 정보를 포함하고 있다.

2. React Native CLI에서의 용도

React Native CLI 프로젝트의 'app.json' 파일은 Expo 프로젝트의 'app.json' 파일과 유사한 역할을 하지만, Expo의 추가적인 기능을 사용하지 않기 때문에 일부 설정만 포함되어 있다.
React Native CLI에서 주로 사용되는 설정은 name, displayName, version, private, ios, android 등이 있다.

Expo CLI에서의 app.json 설정

프로젝트를 생성하였을 때 자동으로 생성된 app.json 파일이다.

{
  "expo": {
    "name": "google-form",
    "slug": "google-form",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

각각 설정에 대해 알아보자

1. orientation: 앱의 화면 방향.
   'portrait'는 새로, 'landscape'는 가로를 의미.
2. userInterfaceStyle: 앱의 사용자 인터페이스 스타일.
   'light'는 밝은 테마 'dark'는 어두운 테마를 의미.
3. splash: 스플래시 화면 설정을 포함하는 객체.
   splash 이미지: 앱이 로딩되는 사이 사용자에게 보여지는 이미지
4. resizeMode: 이미지의 크기 조정 모드
   'cover'는 비율 유지하면서 뷰에 맞춰서 이미지 자르기,
   'contain'는 비율 유지하면서 이미지 전체가 보이게,
   'stretch'는 뷰에 이미지 맞추기,
   'repeat'는 반복,
   'center'는 중앙을 의미.
5. assetBundlePatterns: 번들에 포함할 에셋 파일 패턴.
6. supportsTablet: 태블릿을 지원하는지 여부.
7. adaptiveIcon: Android 앱 아이콘 설정을 나타내는 객체.
8. favicon: 웹 페이지의 파비콘 파일 경로.

이렇게 각각 설정에 대해 알아보고, 화면과 여러 아이콘에 대해 설정해보는 경험을 할 수 있었다.