[RN] React Native boilerpate 설정 가이드

 본 게시글은 React Native 공식문서의 내용을 참고했습니다.
앞서, 기본 폴더 및 프로젝트 구조에 대해서는 이전 포스팅을 참고하시면 좋습니다.

1.  React Native 프로젝트 생성 및 TypeScript 템플릿 적용

# 프로젝트 생성
$ npx react-native@latest init [프로젝트명]

# 생성된 프로젝트 폴더로 이동
$ cd [프로젝트명]

react-native template version

 

2. 템플릿 프로젝트를 부트스트랩할 때 충돌을 피하기 위해 모든 린트 구성요소를 제거

# React Native 프로젝트에서 ESLint 설치
$ yarn add @react-native-community/eslint-config eslint

다음의 명령어는 React Native 프로젝트에서 ESLint를 사용하고, 그중에서도 ESLint 구성(config)을 프로젝트에 추가하는 명령어입니다. 이 패키지는 React Native 프로젝트에서 사용할 수 있는 ESLint 구성중 하나로, React Native에서는 일부 특정한 규칙이 필요하므로, @react-native-community 에서 제공하는 이 구성을 사용하면 React Native 프로젝트에 적합한 ESLint 설정을 사용할 수 있습니다.

부트스트랩이란?

소프트웨어 개발에서 "부트스트랩" 이란 필요한 기본적인 구조나 기능을 제공하여 개발자가 빠르게 프로젝트를 시작하도록 도와주는 도구, 프로세스 또는 기술을 의미합니다.

 

3. eslint 패키지 설치

eslint는 Javascript 및 JSX파일에서 코드 품질을 검사하는 도구로
프로젝트에서 린팅을 수행하는데 사용합니다. 

# ESLint 관련 패키지 설치
yarn add eslint -D && npx  eslint --init

 

위의 명령어는 두 가지로 나뉠 수 있습니다.

1. yarn add eslint -D : 이 부분에서는 Yarn 패키지 매니저를 사용하여 프로젝트에 eslint 개발 의종성을 추가하도록 합니다.  -D 이 플래그는 패키지를 개발 의존성으로 추가하라는 것을 나타내도록 합니다. 
2. npx eslint --init : 이 부분에서는 npx를 사용하여 프로젝트에 설치된 eslint를 실행하고 초기화하는 부분입니다. --init 플래그는 프로젝트에 초기 ESLint 구성을 설정하라는 명령어로, 실행시 사용자는 몇 가지 선택지를 통해 초기 설정을 조정할 수 있습니다. ex) 어떤 파일의 타입을 지원할 것인지?, 어떤 규칙을 사용할 것인지? 등

4. eslint 설정

위의 코드를 입력하면 아래와 같이 설정을 조정 코드들이 등장합니다.

예 ) ESLint를 어떻게 사용할 것인지에 대한 선택 옵션 설정

# 1. ESLint 사용 방식 선택
? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

# 2. 모듈 타입 선택
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

# 3. 프레임워크 선택
? Which framework does your project use? … 
❯ React
  Vue.js
  None of these

# 4. TypeScript 사용 여부 선택
? Does your project use TypeScript? › No / Yes -> Yes

# 5. 코드 실행 환경 선택
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

# 6. 코드 스타일 설정 방식 선택
? How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style

# 7. 스타일 가이드 선택
 Which style guide do you want to follow? … 
❯ Standard:https://github.com/standard/eslint-config-standard-with-typescript
  XO: https://github.com/xojs/eslint-config-xo-typescript
  
# 8. 구성 파일 형식 선택
? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON
  
# 9. 필요한 의존성 설치 여부 확인
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.28.0 eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0
? Would you like to install them now? › No / Yes  -> Yes

# 10. 패키지 매니저 선택
? Which package manager do you want to use? … 
   npm
 ❯ yarn
   Pnpm

1. ESLint 사용 방식 선택 -> "To check syntax, find problems, and enforce code style"
   ESLint를 사용하여 문법을 확인하고 문제를 찾으며, 코드 스타일을 강제하려는 것을 의미합니다.
   
   
2. 모듈 타입 선택 ->  "JavaScript modules (import/export)"
   프로젝트에서 JavaScript 모듈 시스템을 사용한다는 것을 의미합니다.
   
   
3. 프레임워크 선택 -> "React"
   프로젝트가 React 프레임워크를 사용한다는 것을 의미합니다.
   
   
4. TypeScript 사용 여부 선택 -> "Yes"
   프로젝트에서 TypeScript를 사용한다는 것을 의미합니다.
   
   
5. 코드 실행 환경 선택 -> "Browser" 및 "Node"
   프로젝트 코드가 브라우저 및 Node.js에서 실행될 것으로 선택되었습니다.
   
   
6. 코드 스타일 설정 방식 선택 -> "Use a popular style guide" 
   널리 사용되는 스타일 가이드를 사용하여 코드 스타일을 정의하고자 하는 것을 의미합니다.
   
   
7. 스타일 가이드 선택 -> "Standard: https://github.com/standard/eslint-config-standard-with-typescript"
   TypeScript와 함께 사용할 수 있는 Standard 스타일 가이드를 선택하였습니다.
   
   
8. 구성 파일 형식 선택 ->  "JavaScript" 
   ESLint 구성 파일의 형식을 JavaScript로 선택하였습니다.
   
   
9. 필요한 의존성 설치 여부 확인 -> "Yes" 
   선택한 구성에 필요한 의존성 패키지를 설치하도록 선택하였습니다.
   
   
10. 패키지 매니저 선택 -> "yarn"
    프로젝트에 패키지를 설치하는 데 사용할 패키지 매니저로 yarn을 선택하였습니다.

5. prettier, parser, lint-staged. 설정

# Install prettier, parser, lint-staged
$ yarn add -D prettier eslint-config-prettier @babel/eslint-parser lint-staged @babel/core eslint-plugin-react-native

1. prettier:
   코드 포맷팅 도구로, 코드의 일관된 스타일을 유지하도록 돕습니다. 주로 코드를 자동으로 정리하고 가독성을 높이는 데 사용됩니다.
   
   
2. eslint-config-prettier:
   ESLint와 Prettier 간의 충돌을 방지하기 위한 ESLint 구성입니다. 이 구성을 사용하면 Prettier가 관리하는 일부 규칙과 충돌하지 않도록 설정할 수 있습니다.
   
   
3. @babel/eslint-parser:
   Babel을 사용하여 ECMAScript 코드를 파싱하는 데 사용되는 ESLint 파서입니다. Babel은 최신 JavaScript 기능을 사용할 수 있게 해주므로, 이를 ESLint에서 사용하기 위한 도구입니다.
   
   
4. lint-staged:
   Git에 커밋되기 전에 변경된 파일들에 대해 ESLint 및 Prettier를 실행하는 등 코드 변경을 스테이징하는 데 사용됩니다. 이를 통해 변경된 코드에 대한 일관성을 유지하고 코드 품질을 검사할 수 있습니다.
   
   
5. @babel/core:
   Babel의 핵심 패키지로, ECMAScript 코드를 트랜스파일하는 데 사용됩니다. 최신 JavaScript 기능을 하위 버전으로 변환하여 여러 환경에서 실행 가능하게 만듭니다.
   
   
6. eslint-plugin-react-native:
   React Native 코드에 대한 ESLint 규칙을 제공하는 플러그인입니다. React Native 애플리케이션의 코드 품질을 향상시키고 관리하는 데 사용됩니다.

5. Typescript 관련 플러그인을 ESLint에 설치

# TypeScript 프로젝트에서 사용되는 여러 ESLint 및 Prettier 관련 패키지들을 설치
$ yarn add -D  @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-n eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native eslint-import-resolver-typescript  @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-prettier prettier

1. @typescript-eslint/eslint-plugin 및 @typescript-eslint/parser:
   TypeScript 코드에 대한 ESLint 규칙을 제공하고 TypeScript 코드를 ESLint에서 분석하기 위한 파서를 제공합니다.
   
   
2. eslint-config-airbnb:
   Airbnb 스타일 가이드를 따르는 JavaScript 코드에 대한 ESLint 구성입니다. 코드 스타일을 통일시키는 데 사용됩니다.
   
   
3. eslint-config-airbnb-typescript:
   Airbnb 스타일 가이드를 따르는 TypeScript 코드에 대한 ESLint 구성입니다. TypeScript와 함께 사용할 때 코드 스타일을 통일시키는 데 사용됩니다.
   
   
4. eslint-plugin-import:
   모듈 import 관련 ESLint 규칙을 제공하는 플러그인입니다. 모듈 경로의 유효성을 검사하고, 불필요한 import 또는 누락된 import를 찾아내는 데 사용됩니다.
   
   
5. eslint-plugin-jsx-a11y:
   JSX 요소의 접근성을 검사하는 ESLint 플러그인입니다. 웹 애플리케이션의 접근성을 높이기 위해 사용됩니다.
   
   
6. eslint-plugin-n:
   숫자와 관련된 ESLint 규칙을 제공하는 플러그인입니다. 코드에서 숫자 사용에 대한 일관성을 갖도록 도와줍니다.
   
   
7. eslint-plugin-promise:
   Promise 객체와 관련된 ESLint 규칙을 제공하는 플러그인입니다. Promise의 사용에 대한 규칙을 지정하여 안정적이고 효율적인 코드를 유도합니다.
   
   
8. eslint-plugin-react:
   React 코드에 대한 ESLint 규칙을 제공하는 플러그인입니다. React 컴포넌트와 관련된 규칙을 정의하여 React 애플리케이션의 코드 품질을 향상시킵니다.
   
   
9. eslint-plugin-react-hooks:
   React Hooks 사용에 관련된 ESLint 규칙을 제공하는 플러그인입니다. React Hooks를 올바르게 사용하도록 도와줍니다.
   
   
10. eslint-plugin-react-native:
    React Native 코드에 대한 ESLint 규칙을 제공하는 플러그인입니다. React Native 애플리케이션의 코드 품질을 유지하고 향상시킵니다.
    
    
11. eslint-import-resolver-typescript:
    TypeScript 모듈을 해결하기 위한 ESLint의 import resolver입니다. TypeScript에서 모듈을 찾고 해석할 때 사용됩니다.
    
    
12. eslint-plugin-prettier:
     Prettier와 ESLint를 함께 사용할 때의 규칙 충돌을 방지하는 플러그인입니다. Prettier가 적용되는 부분과 ESLint가 관리하는 부분의 중복을 방지합니다.
    
    
13. prettier:
    코드 포맷팅 도구로, 코드의 일관된 스타일을 유지하도록 돕습니다. 코드의 가독성을 높이고 작업을 단순화합니다.

7. 코드 커밋과 관련된 도구들을 설치

이 도구들을 통해 효율적으로 코드 관리 및 협업을 할 수 있도록 합니다. 이를 통해 커밋을 관리하고 커밋 메시지의 일관성을 유지하도록 하기 위함입니다.

1. Commitizen:
   커밋 메시지를 쉽게 생성하기 위한 도구입니다. 이 도구를 사용하면 사용자에게 질문을 통해 커밋 유형, 범위, 메시지 등을 입력받아 표준화된 형식의 커밋 메시지를 생성할 수 있습니다.
   
   
2. Husky:
   Husky는 Git 훅을 관리하기 위한 도구로, 특정 이벤트 (예: 커밋 전, 푸시 전)가 발생할 때 스크립트를 실행할 수 있습니다. 주로 Git 훅을 사용하여 코드 검사, 테스트 등을 자동으로 수행하는 데 사용됩니다.
   
   
3. Commitlint:
   Commitlint는 커밋 메시지의 형식을 규칙에 맞게 작성되었는지 검사하는 도구입니다. 일관된 커밋 메시지 형식을 유지하고 프로젝트 히스토리의 가독성을 향상시키기 위해 사용됩니다.

# 컨벤셔널한 커밋 메시지를 유지하기 위한 패키지 설치
yarn add -D @commitlint/{config-conventional,cli} commitizen cz-conventional-changelog husky @commitlint/config-conventional

1. @commitlint/config-conventional: 이 패키지는 Commitlint와 함께 사용할 컨벤셔널한 커밋 설정을 제공합니다. 컨벤셔널 커밋은 프로젝트의 히스토리를 이해하기 쉽게 만들어주는 지정된 형식을 따릅니다.
   
   
2. @commitlint/cli: 이는 Commitlint의 명령 줄 인터페이스입니다. 커맨드 라인에서 Commitlint를 실행하여 커밋 메시지 규칙을 적용하는 데 사용됩니다.
   
   
3. commitizen: Commitizen은 표준화된 커밋 메시지를 작성하는 도구입니다. 사용자 친화적인 방식으로 커밋 메시지를 작성하도록 안내하며, 커밋이 규약적인 형식을 따르도록 보장합니다.
   
   
4. cz-conventional-changelog: 이는 컨벤셔널 changelog를 위한 Commitizen 어댑터입니다. Commitizen을 컨벤셔널 changelog와 통합하여 커밋 기록을 기반으로 한 changelog를 더 쉽게 생성할 수 있도록 합니다.
   
   
5. husky: Husky는 Git 후크를 쉽게 설정할 수 있도록 도와주는 도구입니다. 여기서는 아마도 커밋 전에 commitlint와 같은 확인을 강제하기 위해 사용되고 있을 것입니다.
   
   
6. @commitlint/config-conventional: 첫 번째 언급된 패키지와 동일합니다. 아마도 Commitlint를 컨벤셔널 커밋 스타일로 구성하기 위해 별도로 포함되었을 것입니다.

8. commitlint.config.js 옵션 설정

이 파일은 커밋 메시지의 유형을 지정하는 옵션을 설정하기 위해 사용합니다. 어떤 유형의 커밋을 할지를 선택하는 과정에서 옵션들을 사용자에게 보여주게 합니다.

 

module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
        'type-enum': [
            2,
            'always',
            [
                'build',
                'chore',
                'ci',
                'docs',
                'improvement',
                'feat',
                'fix',
                'perf',
                'refactor',
                'revert',
                'style',
                'test',
            ],
        ],
    },
};

이처럼 배열안의 feat, fix, chore 등과 같은 키워드들이 git commit시에  커밋 유형을 지정하도록 설정에 나타나게 합니다. 

git commit

9. .huskyrc 설정 추가

다음의 코드를 package.json의 scripts 에 추가하도록 합니다. 

// Package.json 추가
"prepare" : "husky install"

 

홈 디렉터리에 .huskyrc 라는 파일을 만들기 위해 다음의 명령어를 터미널에 입력합니다.

# 현재 디렉토리에 .huskyrc 파일을 생성
$ touch .huskyrc

touch : 이 명령어는 파일의 최종 수정 시간을 업데이트하거나 새로운 파일을 만들때 사용하는 명령어 입니다.  

.huskyrc : 주로 프로젝트에서 Git Hooks를 설정하기 위한 파일로 Git 작업의 특정 이벤트에 대한 사용자 지정 스크립트를 실행하는 기능을 제공하도록 합니다. 

 

# 텍스트 편집
$ nano .huskyrc

이 명령어를 통해서 현재 디렉토리에 있는 .huskyrc 파일을 열도록 하는 명령어입니다.

nano
터미널에서 사용할 수 있는 텍스트 편집기 중 하나로 편집기가 열리고, 파일 내용을 편집하거나 확인을 하며 종료시에는 Ctrl + x 를 통해서 변경사항을 저장합니다. 

 

그다음 다음의 코드를 작성합니다. 

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

이 명령어는 NVM (Node Version Manager)를 설정하는 데 사용됩니다. 이 스크립트는 사용자가 터미널 세션을 시작할 때마다 실행되어 NVM이 설치된 디렉토리에서 NVM을 초기화하고 사용 가능한 Node.js 버전을 관리할 수 있도록 도와줍니다. 

• export NVM_DIR="$HOME/.nvm 
  환경변수 NVM_DIR 를 설정하여 NVM이 설치될 디렉토리를 지정하도록 합니다. 주로 사용자의 홈 디렉토리 내에 .nvm 디렉토리를 가리킵니다.
• [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh
  NVM 스크립트 파일인 nvm.sh가 존재하고 실행가는한지 확인한 후, 실행하도록 합니다.  [ -s "$NVM_DIR/nvm.sh" ] 는 디렉토리내에 nvm.sh 파일의 존재여부를 확인하는 명령어입니다. "파일이 존재하고 크기가 0보다 크다면" 을 의미하는데, 즉 비어있지 않을 경우 True 를 반환합니다. 
  그다음, \. 이 명령어는 nvm.sh 파일을 현재 쉘 세션에 소스로 포함시키는 역할을 합니다. 

# 파일에 실행권한 추가
chmod +x .huskyrc

이 명령어를 통해서 .huskyrc 파일에 실행 권한이 추가되어, 해당 스크립트를 실행할 수 있게 됩니다. 

• chmod: 파일 권한을 변경하는 명령어입니다.
• +x: 실행 권한을 추가하라는 옵션입니다.
• .huskyrc: 실행 권한을 추가하고자 하는 대상 파일의 이름입니다.

 

10. Git Hooks 설정

1) commit-msg

이 파일의 경로는 다음과 같습니다. .husky/commit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit ${1}

 

이 Hook은 커밋 메시지를 작성할 때 실행됩니다. Commitlint를 사용하여 커밋 메시지의 형식을 검증하는 역할을 합니다. 

2) pre-commit

이 파일의 경로는 .husky/pre-commit 입니다.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint &&
git add . &&
npx lint-staged

이 Hook은 커밋을 수행하기 전에 실행됩니다. npm run lint 명령으로 코드 스타일을 검사하고, git add .로 스타일이 수정된 파일을 스테이징하며, npx lint-staged로 스테이징된 파일에 대해 린트를 실행하는 역할을 합니다. 

3) prepare-commit-msg

이 파일의 경로는 .husky/prepare-commit-msg 입니다.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

exec < /dev/tty && npx cz --hook || true

이 Hook은 커밋 메시지를 작성하는 단계에서 실행됩니다. 사용자에게 커밋 메시지를 작성하기 전에 실행되며, npx cz --hook 명령으로 Commitizen를 사용하여 인터랙티브하게 커밋 메시지를 작성할 수 있게 합니다.

 

11. .eslintrc.js 설정

이전의 있는 내용을 삭제하고 아래의 코드를 붙여넣습니다. 

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    'react-native/react-native': true,
    jest: true,
  },
  settings: {
    react: {version: 'detect'},
    'import/resolver': {
      typescript: {},
    },
  },

  extends: [
    'standard-with-typescript',
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
  ],
  overrides: [
    {
      files: ['**/*.ts', '**/*.tsx'],
      parserOptions: {
        project: './tsconfig.json',
      },
    },
  ],
  parserOptions: {
    ecmafeatures: {jsx: true},
    ecmaVersion: 'latest',
    project: ['./tsconfig.json', './packages/*/tsconfig.json'],
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'react-native'],
  rules: {
    // Note: you must disable the base rule as it can report incorrect errors
    'object-curly-spacing': 'off',
    '@typescript-eslint/object-curly-spacing': 'error',
    'react/jsx-filename-extension': ['error', {extensions: ['.js', '.jsx', '.ts', '.tsx']}],
    'no-use-before-define': ['error', {functions: true, classes: true, variables: true}],

    'react-native/no-unused-styles': 'error',
    'react-native/split-platform-components': 'error',
    'react-native/no-inline-styles': 'error',
    'react-native/no-raw-text': 'error',
  },
}

 

이 코드는 React Native 프로젝트를 위한 ESLint 설정 파일인 .eslintrc.js 를 정의하는 코드입니다. 코드 스타일과 코드 품질을 관리하기 위해 다음과 같은 내용이 있습니다. 

 

1. env: 어떤 환경에서 코드가 실행될지를 정의합니다.
   • browser, es2021, node: 브라우저, ECMAScript 2021, Node.js 환경에서 실행됨을 나타냅니다.
   • react-native/react-native: React Native 환경에서 실행됨을 나타냅니다.
   • jest: Jest 테스트 환경에서 실행됨을 나타냅니다.
2. settings: 플러그인 및 확장에 대한 추가 설정을 제공합니다.
   • react: React 버전을 자동으로 감지하도록 설정합니다.
   • import/resolver: TypeScript 파일에 대한 import 경로를 해석하기 위한 TypeScript 설정을 제공합니다.
3. extends: 다양한 ESLint 구성을 확장하여 사용합니다.
   • 'standard-with-typescript', 'eslint:recommended': 기본적인 ESLint 규칙을 사용합니다.
   • 'plugin:react/recommended': React 관련 규칙을 사용합니다.
   • 'plugin:@typescript-eslint/recommended': TypeScript에 대한 ESLint 규칙을 사용합니다.
   • 'prettier': Prettier 규칙을 사용합니다.
   • 'airbnb', 'airbnb-typescript', 'airbnb/hooks': Airbnb의 React/JSX 규칙을 사용합니다.
4. overrides: 특정 파일 유형에 대한 추가 설정을 제공합니다.
   • TypeScript 파일인 경우, 해당 파일들에 대한 프로젝트 구성 파일인 tsconfig.json을 사용하도록 설정합니다.
5. parserOptions: 코드를 파싱하는 옵션을 정의합니다.
   • ecmafeatures: JSX를 사용할 수 있도록 설정합니다.
   • ecmaVersion: ECMAScript의 버전을 'latest'로 설정합니다.
   • project: TypeScript 프로젝트 설정 파일의 경로를 지정합니다.
   • sourceType: 모듈 시스템을 'module'로 설정합니다.
6. plugins: 사용할 ESLint 플러그인을 지정합니다.
   • 'react', '@typescript-eslint', 'react-native': React, TypeScript, React Native 관련 플러그인을 사용합니다.
7. rules: 프로젝트에 대한 특정 ESLint 규칙을 사용자 정의합니다.
   • 예를 들어, React Native에 특화된 규칙들이 설정되어 있습니다. 이 규칙들은 React Native 앱에서 일반적으로 발생하는 문제를 감지하고 수정하기 위한 것입니다.

12. package.json 에 추가 스크립트 작성

{
   …………
   "scripts": {
       "lint": "eslint .",
       "prepare": "husky install"
   },
   "lint-staged": {
       "*.{js,jsx,ts,tsx}": [
           "prettier --write",
           "eslint --fix"
       ]
   },
   "config": {
      "commitizen": {
      "path": "cz-conventional-changelog"
     }
   },
 …………
}

 

13. .eslintignore 파일 생성 및 작성

.eslintignore 파일은 ESLint 에서 코드 검사를 수행할 때 무시해야 하는 파일 및 디렉토리를 지정하는 데 사용됩니다. 이 파일에 기재된 패턴에 해당하는 파일 또는 디렉토리는 ESLint의 검사 대상에서 제외하도록 합니다.

.eslintrc.js
ios/
android/
*.config.js

 

14. .gitignore 파일 작성

# vs code
.vscode
.vs

# OSX
.DS_Store

# Xcode
!**/*.xcodeproj
!**/*.pbxproj
!**/*.xcworkspacedata
!**/*.xcsettings
!**/*.xcscheme
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace
**/.xcode.env.local
build/

# Android/IntelliJ
build/
.idea
.gradle
local.properties
/packages/react-native/android/*
!/packages/react-native/android/README.md
*.iml
*.bundle
*.bin
*.apk
*.jprof
*.prof
*.lock
*.hprof
.cxx/
*.keystore
!debug.keystore


/android/app/src/main/res/drawable-hdpi
/android/app/src/main/res/drawable-mdpi
/android/app/src/main/res/drawable-xhdpi
/android/app/src/main/res/drawable-xxhdpi
/android/app/src/main/res/drawable-xxxhdpi
/android/app/src/main/res/raw


/packages/react-native-gradle-plugin/build/
/packages/rn-tester/build
/packages/rn-tester/android/app/.cxx/
/packages/rn-tester/android/app/build/
/packages/rn-tester/android/app/gradle/
/packages/rn-tester/android/app/gradlew
/packages/rn-tester/android/app/gradlew.bat
/packages/react-native/ReactAndroid/build/
/packages/react-native/ReactAndroid/.cxx/
/packages/react-native/ReactAndroid/gradle/
/packages/react-native/ReactAndroid/gradlew
/packages/react-native/ReactAndroid/gradlew.bat
/packages/react-native/ReactAndroid/external-artifacts/build/
/packages/react-native/ReactAndroid/external-artifacts/artifacts/
/packages/react-native/ReactAndroid/hermes-engine/build/
/packages/react-native/ReactAndroid/hermes-engine/.cxx/
/packages/react-native/template/android/app/build/
/packages/react-native/template/android/build/

# Android Studio
.project
.settings
.classpath

# node.js
yarn.lock
node_modules
*.log
.nvm
package-lock.json

# BUCK
*.keystore
.buckd
buck-out
/.lsp.buckd
/.lsp-buck-out
/packages/react-native/ReactAndroid/src/main/jni/prebuilt/lib/
/packages/react-native/ReactAndroid/src/main/gen

# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://docs.fastlane.tools/best-practices/source-control/
*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots
*/fastlane/test_output

# Bundle artifact
*.jsbundle

# CocoaPods
/ios/Pods/
/ios/Podfile.lock
ios/Podfile.lock
ios/assets
/ios/assets
/vendor/bundle/

# Watchman
.watchmanconfig

# Test generated files
/packages/react-native/ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
*.js.meta

/coverage
/third-party

# Test Reports
/reports

# Stack Dumps generated when programs crash (Ex. bash.exe.stackdump on Win)
*.stackdump

# Root dir shouldn't have Xcode project
/*.xcodeproj

# ReactCommon subdir shouldn't have Xcode project
/packages/react-native/ReactCommon/**/*.xcodeproj

# Libs that shouldn't have Xcode project
/packages/react-native/Libraries/FBLazyVector/**/*.xcodeproj
/packages/react-native/Libraries/RCTRequired/**/*.xcodeproj
/packages/react-native/React/CoreModules/**/*.xcodeproj
/packages/react-native/React/FBReactNativeSpec/**/*.xcodeproj
/packages/react-native-codegen/**/*.xcodeproj

# Ruby Gems (Bundler)
/packages/react-native/vendor
/packages/react-native/template/vendor
.ruby-version
/**/.ruby-version

# iOS / CocoaPods
/packages/react-native/template/ios/build/
/packages/react-native/template/ios/Pods/
/packages/react-native/template/ios/Podfile.lock
/packages/rn-tester/Gemfile.lock

# Ignore RNTester specific Pods, but keep the __offline_mirrors__ here.
/packages/rn-tester/Pods/*
!/packages/rn-tester/Pods/__offline_mirrors_hermes__
!/packages/rn-tester/Pods/__offline_mirrors_jsc__

# @react-native/codegen
/packages/react-native/React/FBReactNativeSpec/FBReactNativeSpec
/packages/react-native-codegen/lib
/packages/react-native-codegen/tmp/
/packages/react-native/ReactCommon/react/renderer/components/rncore/
/packages/rn-tester/NativeModuleExample/ScreenshotManagerSpec*
/**/RCTThirdPartyFabricComponentsProvider.*

# Additional SDKs
/packages/react-native/sdks/download
/packages/react-native/sdks/hermes
/packages/react-native/sdks/hermesc

# Android memory profiler files
*.hprof

# Temporary files created by Metro to check the health of the file watcher
.metro-health-check*

 

15. 코드 검사 명령어 실행

yarn lint --fix

 

package.json 파일에 작성한 스크립트 명령어에 따라 해당 명령어를 입력하여 코드 스타일을 검사하고 자동으로 수정하도록 합니다. 이는 린팅을 실행할 준비가 되었다는 것을 의미합니다. 이를 통해 잠재적인 오류를 찾아내고 자동으로 수정하는 기능을 제공하도록 합니다. 

 

린팅(Linting)

이는 소스코드를 분석하여 프로그래밍 언어의 문법 규칙, 스타일 규칙, 일반적인 오류등을 확인하고 검사하는 것을 말합니다. 이를 통해 잠재적인 오루는 물론 코드 품질을 향상 시킬 수 있습니다.

 

16. Metro 서버와 React Native 프로젝트 실행

# 프로젝트 실행
yarn start

# 안드로이드 실행
yarn android

 

start 명령어는 프로젝트를 실행하면서 android 또는 ios로 실행할 것인지 선택할 수 있습니다. android같은 경우 사전에 애물레이터(emulator)를 설치해야합니다. 

애물레이터(emulator)
소프트웨어 등의 환경을 모방하여 다른 환경에서 동작하는 것입니다. React Native에서 애뮬레이터란 모바일 디바이스를 의미하며 데스크탑에서 모바일의 환경을 확인하고 테스트할 수 있게 합니다.