[ReactNative-RN] 설정하기 on Windows11

1. nodejs 설치

 

Download | Node.js (nodejs.org)

Download | Node.js

현재 v18.18.0 설치

 

2. jdk1.8 설치

Oracle JDK1.8 설치

 

3. Android Studio 설치

Android SDK

Android SDK Platform

Android Virtual Device 

체크하여 꼭 설치~

Android SDK Platform 34 설치 

SDK Tools 설치

로컬유저데이터\Android\Sdk\platform-tools 를 패스에 등록

 

에뮬레이터 생성

 

4. Visual Studio Code 설치

현재 1.84.2

 

5. 프로젝트 생성하기

npm i -g expo-cli

현재 deprecated 라는 경고가 나오지만, 아직은 잘됩니다.

 

expo init my-first-rn

cd my-first-rn

npm start

 

터머널에 qr 코드가 나옵니다.

모바일폰에 expo go 앱을 설치하고 qr 을 찍으면 앱을 확인할 수 있습니다.

 

6. Visual Studio Code 플러그인 설치

Prettier 설치

플러그인 클릭후, 톱니바퀴 Extension Setting 선택

format on save 체크

formatter 검색 default formatter 에 prettier 로 변경

.prettierrc 파일을 생성 한 후,

{
  "singleQuote": true,
  "arrowParens": "always",
  "tabWidth": 2,
  "printWidth": 80
}

 

ESLint 설치

콘솔에서

npx eslint --init 실행

2개의 모듈 설치 후,

To check syntax and find problem 선택

JavaScript module 선택

React 

No

Browser 선택 해제후, Node 선택 ( 스페이스바 )

JSON 선택

npm

Yes 끝!

.eslintrc.json 파일이 생성된다. 그럼 파일을 열어서 2가지를 수정

  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime"
  ],
  
  ...
  
    "rules": {
    "no-console": "warn"
  }
}

 

7. 프로젝트 추가 정리

npm i -D @types/react @types/react-native

자동완성 잘나오게 하기

 

npm uninstall react-native-web

않쓰는 패키지 삭제해서 자동완성시 안햇갈리게 하기

 

8. 시작!

npm start