[React Native] Expo App 세팅하기 (with Typescript)

Jaehyun Park·2024년 3월 30일

1. Typescript 설치

먼저 전역으로 설치된 typescript와 ts-node가 필요하다. 다음 명령어를 실행해 설치해준다. ts-node는 node의 typescript 버전이다.

npm i -g npm // npm 업데이트
npm i -g typescript ts-node

전역으로 사용해주기 위해 -g 키워드는 꼭 붙여야 한다.

2. Expo CLI 설치

다음 명령어를 터미널에 입력하여 Expo App 개발에 필요한 패키지를 설치한다.

npm i -g expo-cli

이후 설치가 잘되었는지 확인하자.

npm show expo version // 50.0.14
npm show expo-cli version // 6.3.10

이후 expo에 로그인을 해준다.
계정이 없는 경우 Expo Web Site에서 가입하거나, expo register 해주면 된다.

npx expo register // 계정이 없는 경우에만
npx expo login // expo에 로그인

로그인이 잘된 것을 확인하려면 npx expo whoami를 입력하면 현재 로그인된 계정 정보를 알 수 있다.

expo-cli 및 expo 로그인 후 터미널에서 아래 명령어를 실행하면 typescript 사용 환경이 초기화 된 Expo App 프로젝트가 생성된다.

npx create-expo-app 앱이름 -t expo-template-blank-typescript

모든 module이 정상적으로 설치되고 위와 같이 떴다면 프로젝트 초기화는 성공.
초기화한 프로젝트를 vs code로 열어준다.

2. 초기 환경 구축

1) App 구조

Expo SDK 50 기준 초기 Expo App은 다음과 같은 폴더 구조를 가지고 있다. Legacy expo-cli나 React-Native CLI로 초기화한 프로젝트에 비해 엄청 간단하고 가볍게 구성되어 있다.

assets에는 Expo App의 기본 icon, splash, favicon이 저장되어 있다. 로컬에서 개발할 때 이 asset 파일들은 app.json파일에 연결하여 사용하면 된다.

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "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"
    }
  }
}

app.json 파일을 보면 뭐가 뭔지 바로 알아볼 수 있을 정도로 최적화가 잘 되어있다. expo 객체에서 "icon"과 "splash"에 icon, splash로 사용할 이미지 루트를 설정하고 사용하면 된다. 그 외 App을 구성할 때 필요한 정보들이 초기화되어 있다. 이후 앱을 개발하면서 필요한 부분은 자신의 프로젝트에 맞게 수정하면 된다.

그 외 git에 업로드 할 때 제외하고 올릴 파일 정보가 저장되어 있는 .gitignore,
Babel의 번들링을 위한 정보가 저장되어 있는 babel.config.js,
앱 빌드에 필요한 node module 정보가 저장되어 있는 package-lock.json,
앱 개발에 필요한 node mudule 정보가 저장되어 있는 package.json,
Expo App의 코어 렌더링 파일인 App.tsx가 있다. 초기 설치 시 템플릿을 typescript로 했기 때문에 jsx가 아닌 tsx이다.

2) Prettier 세팅

prettier는 코드 포맷터로, 필수는 아니지만 사용했을 때 코드 가독성을 위해 추가하면 좋다.

VS Code의 Extension 또는 npm으로 설치하면 된다. prettier는 앱 실행 시점에는 필요 없기 때문에 -D 옵션을 붙여 개발 의존성을 추가해줘야 한다.

npm i -D prettier

설치 후에는 App.tsx가 있는 루트 디렉토리에 .prettierrc.js 파일을 생성하여 다음 코드를 입력하면 된다.

touch .prettierrc.js

// .prettierrc.js

module.exports = {
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

자신의 개발 환경에 적합한 속성과 값을 적용하여 사용하면 된다.

이후 cmd + shift + P (윈도우는 ctrl + shift + p)를 눌러 나오는 시스템 검색 창에 setting을 검색한 후, 기본 설정: 사용자 설정 열기(JSON) 메뉴를 클릭한다.

코드 에디터 구성 정보 파일인setting.json 이 열리는데, 이 파일의 가장 마지막 라인 뒤에 다음 코드를 추가하고 저장하면 된다. 그 앞의까지 코드는 각각의 사용자가 VS Code Editor를 개인화한 설정이다.

  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

저장한 후 다시 cmd + shift + P (윈도우는 ctrl + shift + p)를 눌러 나오는 시스템 검색 창에서 format을 검색하고, 문서 서식 프로그램을 눌러 코드 기본 포맷터를 Prettier - Code Formater로 설정해주면 된다.

3) Typescript 초기 환경 세팅

기본적으로 jsx(또는 tsx) 파일을 JavaScript로 변환하는 작업은 TypeScript를 사용하지 않는 React Native 프로젝트와 동일한 Babel 인프라를 통해 이루어진다. 따라서 TypeScript 컴파일러는 타입 검사에만 사용하게 하는 것이 좋다.

ESLint나 Webpack 등을 추가로 사용할 것이 아니라면 create-expo-app이 초기화해준 프로젝트 그대로, 아무 것도 건들이지 않고 사용하면 된다. 추후 필요한 세팅 또한 Expo SDK가 해주기 때문에 tsconfig.json 파일에 어떤 것이 필요한지 확인만 해보자.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  },
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ]
}

compilerOptions의 경우 typescript로 컴파일할 때 어떤 옵션을 지원할 것인지를 나타내는데, 기본적으로 strict: true는 세팅되어 있다. 이것은 컴파일 시 컴파일 규칙을 엄격하게 적용할 것인지 여부를 정하는 것인데, 런타임 에러를 방지하게 위해 true로 설정하는 편이 좋다. 공식 문서에서도 설정해두는 편을 권장하고 있다.

다음 라인에 include 속성으로 어떤 파일에 대하여 컴파일 할 것인지 설정하고, 저장하면 끝이 난다.