node 버전 설치
nodebrew로 node 버전설치
brew로 설치된 node 삭제 brew search node 1. 위 명령어를 입력 후 체크되어 있는 모든 대상을 지운다. brew uninstall {target} 2. brew search node를 재 실행하여 체크되어 있는 대상이 있는지 재 확인 brew s..
benoit.tistory.com
설치 및 프로젝트 생성
참고 : https://reactnative.dev/blog/2017/03/13/introducing-create-react-native-app
Introducing Create React Native App · React Native
Today we’re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and
reactnative.dev
npm i -g create-react-native-app
create-react-native-app my-project --use--npm
cd my-project
npm start or npm run ios or npm run android
Navigation, Stack, Tabs
참고 : https://reactnative.dev/docs/navigation#react-navigation
Navigating Between Screens · React Native
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
reactnative.dev
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack
npm install @react-navigation/bottom-tabs
npx pod-install ios
styled components
참고 : https://styled-components.com/docs/basics#react-native
styled-components: Basics
Get Started with styled-components basics.
styled-components.com
npm i styled-components
typescript를 사용할 경우 아래 설치를 해야 에러가 안난다.
npm install @types/styled-components @types/styled-components-react-native
type script
참고 : https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project
Using TypeScript · React Native
TypeScript is a language which extends JavaScript by adding type definitions, much like Flow. While React Native is built in Flow, it supports both TypeScript and Flow by default.
reactnative.dev
1. 실행
npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer
2. tsconfig.json 생성하여 아래 내용 넣자.
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react-native",
"lib": ["es2017"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
3. 모든 js파일을 > .tsx로 수정
Eslint, Prettier
ESLint, Prettier 설치
1. ESLint 코드의 오류나 버그, 스타일 점검 설치 후 명령어 입력 npm install -g -d eslint eslint --init 아래와 같이 설정 - To check syntax and find problems, and enforce code style - JavaScript modul..
benoit.tistory.com
.gitignore
상위루트에 .gitignore 파일 추가
# OSX
#
.DS_Store
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml
# node.js
#
node_modules/
npm-debug.log
yarn-error.log
# BUCK
buck-out/
\.buckd/
*.keystore
!debug.keystore
# 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
# Bundle artifact
*.jsbundle
# CocoaPods
/ios/Pods/
Mobx
npm install mobx --save
npm install mobx-react --save
npm i @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators
.babelrc 생성
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
tsconfig.json 내에 추가
"compilerOptions": {
"experimentalDecorators": true,
}
'React Native : RN > Setting & Bug' 카테고리의 다른 글
| 자주 쓰이는 npm 명렁어 (0) | 2022.03.15 |
|---|---|
| nodebrew로 node 버전설치 (0) | 2022.03.10 |
| [Facebook + Expo] create-react-native-app {project name} (0) | 2022.03.08 |
| command not found: code (0) | 2022.02.28 |
| Expo 설치하기 (0) | 2022.02.24 |