[React Native] #2 기본 카테고리 구성

본 게시글에서는 개발을 시작하기 전, 앞으로 생성할게 될 파일들을 카테고리화 하기 쉽도록 미리 폴더를 구성해 본다.

 

* 처음 프로젝트를 시작하면 어떤 것부터 구성 해야할 지 모르는 경우 발생

* 복잡한 프로젝트를 완성한 후 아래처럼 구성했을 시 굉장히 편하다는 것을 느낌

 

# 기본 구성

1. src 폴더 생성 후, 하위 폴더로 components / config / router / screens / utils 생성 및 assets 폴더 이동

* 역할

- scr : 카테고리의 최상위 폴더

- assets : icons, images 등

- components : button, text 등 각 기능을 담당하는 것

- config : domain 등 환경설정 관련 내용

- router : screens 을 보여주기 위한 연결 흐름 구성 

- screens : 앱에 보여지는 화면 구성

- utils : api 등 활용도가 높은 것

 

 

 

 

 

 

 

2.  import 시에 편의를 위해 babel 설정

* babel 설정을 하지 않으면 ./src 부터 import 필요

* 아래 "root": ["./src"] 설정을 통해 assets, components, config, router, screens, utils 로 바로 import 가능

* babel module 설치

yarn add -D babel-plugin-module-resolver

 

# babel.config.js (변경 전)

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

# babel.config.js (변경 후)

module.exports = {
    presets: ["babel-preset-expo"],
    plugins: [
        [
            'module-resolver',
            {
                "root": ["./src"],
            },
        ],
    ],
}

 

* babel 설정 완료 후 Metro bundler cache 를 삭제 후 실행해야 정상 동작함

expo start --clear

 

3. assets 폴더 재구성

* assets 하위 폴더로 icons, images 생성 후, 기존 .png 파일을 icons 폴더로 이동 

 

4. app.json 의 defalut 값으로 셋팅된 경로를  변경 

* 변경 전 : ./assets/~~

* 변경 후 : ./src/assets/icons/~~

 

# app.json

{
  "expo": {
    "name": "dev-weather",
    "slug": "dev-weather",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./src/assets/icons/icon.png",
    "splash": {
      "image": "./src/assets/icons/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./src/assets/icons/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./src/assets/icons/favicon.png"
    }
  }
}

 

끝.