개발 환경 설정: ReactNative
JavaScript-TypeScript

개발환경 구축

  • Node.js (💾설치)

    Node.js 버전은 다음 명령어로 확인할 수 있다.

    1
    
    $ node -v
    
  • 안드로이드 스튜디오 (💾설치)

  • JDK

    JDK 11 이상을 권장한다.

  • 환경 변수 설정 (기본 경로 기준)

    변수
    ANDROID_HOME C:\Users\사용자명\AppData\Local\Android\Sdk
    JAVA_HOME C:\Program Files\Java\jdk 버전
  • 프로젝트 생성

    1
    
    $ npx react-native init 프로젝트명
    

프로젝트 폴더 구조

파일 / 폴더 설명
index.js 프로젝트의 엔트리 파일로, 리액트 네이티브 앱의 진입점 역할을 한다.
App.js  
package.json  
package-lock.json  
📂node_modules/  
📂android/  
📂ios/  

기타 환경설정

.eslintrc.js

확장 프로그램 ESLint이 코드를 교정하는 규칙을 정의한다.

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  root: true,
  extends: '@react-native-community',
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
  },
};

.gitignore

📂node_modules/ 폴더는 용량이 매우 크기에 Github 저장소에 올리는 것이 부담된다.

.gitignore 파일을 생성해 Push하는 파일 또는 폴더에 예외를 적용할 수 있다.

.gitignore 파일의 규칙은 다음과 같다.

  • 특정 파일

    1
    
    파일명
    
  • 특정 폴더

    1
    
    폴더명/
    
  • 특정 확장자

    1
    
    *.확장자명
    

📂node_modules/ 폴더가 없더라도, 다음 명령을 사용하면 package-lock.json 파일에 저장된 정보로 패키지를 설치할 수 있다.

1
$ npm install