모바일 앱을 개발할 때, 기본적으로 다음 사항들은 꼭 있어야 한다.

• 내비게이션: 탭바, 스택 등을 통한 화면 이동
• 임베디드 데이터베이스: 앱에서 사용하는 사용자 데이터를 저장
  • 아무리 API 서버 기반 앱이라고 해도, 기본적인 사용자 설정, 인증정보 등은 앱 내에 저장해야 한다.
• 디자인 요소들: 폰트, 아이콘 등

이러한 요소들에 대해 React Native 앱 개발시 내가 사용하는 설정들을 정리해보고자 한다. 우선 첫번째는 React Native 설치다.

1. React Native 설치

React Native를 설치하는 법은 2가지가 있다. 첫번째는 Expo 를 이용하는 것이다. Expo 는 React Native 를 손쉽게 개발, 시험, 배포할 수 있도록 도와주는 일종의 프레임워크이다. Expo 는 기본 React Native 위에 몇가지 유틸리티 기능들과 파일 시스템 사용, 알림 기능 등과 같은 고급 기능들을 편리하게 쓸 수 있도록 이미 다 구현을 해두었다. 그리고 CLI를 통해 간편하게 빌드 및 배포하는 기능도 지원해준다.

두번째는 그냥 React Native 를 설치하여 한땀한땀 구성하는 것이다. 얼핏 보면 Expo 의 기능성이 월등해보이지만, 개인적으로 Expo 를 쓰지 않는다. 이유는:

1. Expo 에 호환이 되지 않는 외부 라이브러리들이 많다. 메이저 라이브러리들은 대부분 지원하지만, 가끔 사소한 라이브러리들이 호환이 안되는데, 그럴 경우 난감하다.
2. Expo 에서 제공하는 기능들은 별도의 라이브러리로 모두 설치 가능하다. 예를 들어, 알림의 경우 expo-notifications 라이브러리를 따로 설치할 수 있다.
3. Expo 에서 제공하는 배포용 빌드 시스템이 20-30분 시간을 소요한다. Expo 서버로 보내서 빌드하기 때문인데, 이 시간을 제거하기 위해서는 유료로 사용해야 한다.

그러니 일단 난 두번째 방법으로 React Native를 설치해보도록 하겠다. 난 무조건 TypeScript를 쓰기 때문에, 아래와 같이 설치해준다.

npx react-native init DoneList --template react-native-template-typescript

그러면 명령어를 입력한 폴더에 DoneList 폴더가 생기며, 새로운 React Native 프로젝트가 TypeScript 기반으로 생성된다. 시간은 꽤 오래 걸린다.

2. eslint, prettier 설정

React Native 프로젝트를 처음 생성하면, 기본적으로 eslint 와 prettier 가 설치된다. 그리고 .eslintrc.js 과 .prettierrc.js 파일에 권장하는 설정이 입력되어 있다. 하지만 난 내가 개인적으로 쓰는 설정도 있고, 무엇보다 난 pretter 와 tslint 를 eslint 로 통합해서 사용한다. 이 중 tslint 는 이미 deprecated 되고 eslint 로 통합되었는데, 별도로 plugin 등을 설치해주어야 한다.

2.1. tslint 통합

기존에 TypeScript 코드에 대한 Linting, Formatting 은 tslint 를 통해 수행했다. 하지만 얼마 전에 tslint 개발팀이 eslint 와의 통합을 선언했고, 기존 tslint 는 deprecated 되었다. 그리고 tslint 의 Linting 룰들을 eslint 버전으로 옮겼는데, 그게 @typescript-eslint/eslint-plugin 이다. 여기에 더하여, @typescript-eslint/parser 를 사용해주어야 한다.

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

.eslintrc.js 는 아래와 같이 변경해주자.

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  extends: [
    '@react-native-community',
    'plugin:@typescript-eslint/recommended'
  ]
}

eslint 의 parser 로 @typescript-eslint/parser 를 쓰고, 여기에 @typescript-eslint/recommended 룰을 추가해주는 것이다.

2.2. pretter 통합

prettier 는 JavaScript 쪽에서 아주 유명한 Formatter 인데, Formatter 는 강제로 코드를 정해진 룰에 따라 포멧팅해주는 도구를 말한다. eslint 는 Linter 이지만, eslint 도 saveOn... 설정 같은거 켜주면 똑같은 포멧팅 기능이 있다. 바로 이 부분 때문에 prettier 를 eslint 로 통합해서 사용한다. 굳이 두 개의 Formatter 를 쓸 필요는 없으니까.

prettier 를 위해서는 아래 2개의 라이브러리를 설치해야 한다.

• eslint-plugin-prettier: prettier 의 룰들을 eslint 버전으로 추가해준다.
• eslint-config-prettier: prettier 의 룰과 겹치는 기존 eslint 룰들을 off 처리해준다.

yarn add -D eslint-plugin-prettier eslint-config-prettier

.eslintrc.js 는 아래와 같이 변경해주자.

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  extends: [
    '@react-native-community',
    'plugin:@typescript-eslint/recommended',
    // 반드시 마지막에 넣어주어야 한다.
    'plugin:prettier/recommended' 
  ]
}

이제 eslint 가 prettier처럼 Formatter 로써 동작하도록 해주기 위해서, VSCode 설정을 해주자. 우선 eslint 확장플러그인이 설치되었다는 가정하에, VSCode의 settings.json 파일에 아래와 같이 넣어주자.

{
  ...
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

참고한 링크에 의하면, 첫줄은 eslint를 Formatter 로써 동작하게끔 설정한 것이고, 2 ~ 4줄은 저장 시 eslint fix 가 동작하도록 설정한 것이라고 한다.

이로서 eslint 로 tslint, prettier 의 모든 룰을 Linting, Formatting 하도록 설정했다. (이제 prettier VSCode 확장 플러그인을 지워주자)

3. TypeScript 절대 경로 설정

마지막으로 TypeScript 에서 import 할 때 상대 경로가 아닌 절대 경로로 할 수 있는 설정을 하도록 하자.

import ModuleA from '../../ModuleA' // 상대경로
import ModuleA from '@modules/ModuleA' // 절대경로

난 상대 경로를 정말 정말 싫어하기 때문에, 이 설정을 꼭 해준다. 이를 위해서는 우선 tsconfig.json 파일에서 baseUrl 과 paths 설정을 해주어야 한다. 두 설정은 React Native 에 의해 자동 생성된 tsconfig.json 파일에서 모두 주석처리 되어 있다. 주석을 풀어주도록 하자.

{
  ...
  "baseUrl": "./",
  "paths": {
    "@component/*": ["./src/component/*"],
    "@model/*": ["./src/model/*"],
    "@model": ["./src/model"]
  },
  ...
}

baseUrl 은 paths 에서 정의할 경로들(위에서 ./src/component 같은 상대 경로들)의 출발점이 되는 경로를 말한다. 보통 프로젝트 루트(./)나 src 폴더를 지정한다. 난 프로젝트 루트를 지정하는 편이다.

보통 tsconfig.json 에서 baseUrl 과 paths 설정만 해줘도 동작하기 마련이다. 실제로 VSCode 내에서는 잘 동작한다.

import * as db from '@model` // VScode 는 잘 인식한다.

하지만 React Native 는 babel 을 통해 파일을 변환한 후 동작하기 때문에, 변환된 JavaScript 파일 내에서 @model 같은 경로를 인식하지 못해 에러가 발생한다. 그래서 babel로 변환시 @model 같이 내가 임의로 지정한 경로들도 실제 상대 경로로 변환해주어야 한다. 이를 위해 babel-plugin-module-resolver이 필요하다.

yarn add -D babel-plugin-module-resolver

설치 후, babel.config.js 파일에서 아래와같이 설정해주자.

module.exports = {
  ...
  plugins: [
    ...
    [
      'module-resolver',
      {
        alias: {
          // tsconfig 의 paths 내용과 일치시킨다.
          src: './src',
          '@component': './src/component',
          '@model': './src/model',
        },
      },
    ],
    ...
  ],
}

이제 React Native 프로젝트에서 TypeScript 의 절대 경로 import 를 이용할 수 있다.

자, 이제 코드를 입력할 준비가 되었다. 다음은 앱의 척추라고 할 수 있는 내비게이션을 위한 준비를 해보도록 한다.