1.프로젝트 수정
구글드라이브/Google drive :
https://drive.google.com/drive/folders/1dj8TfcDCeaLoRzHU5YRlBJoUgh4AcBdg?usp=drive_link
1)src디렉토리 / src directory
– 아래 이미지는 vscodes에서 프로젝트 폴더를 열었을 때 모습입니다.
The image below is what the project folder looks like when opened in vscodes
– src디렉토리와 파일은 위의 구글 드라이브 소스코드를 다운받아서 프로젝트 폴더 안에 붙여넣기 하시면 됩니다.
For the src directory and files, download the Google Drive source code above and paste it into your project folder.
2) index.js
– 프로젝트 생성시 기본적으로 생성되는 파일로 이 부분을 다음과 같이 수정합니다.
This is a file that is created by default when creating a project. Modify this part as follows.
/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './src/index';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);3)package.json
-프로젝트 생성시 기본적으로 생성되는 파일로 설치된 모듈정보를 가지고 있고 수정할 필요는 없습니다.
The files that are created by default when creating a project contain information about the installed modules and do not need to be modified.
2.모듈설치 / install module
– 아래의 dependencies부분에 설치된 모듈 정보가 있습니다.
The installed module information is in the dependencies section below.
– 이 파일을 복사 붙여넣기 하지 마시고 모듈을 설치하시면 이 파일이 자동생성됩니다.
Do not copy and paste this file; install the module and this file will be automatically generated.
명령프롬프트/윈도우파워쉘/쉘에서 npm install @react-native-async-storage/async-storage 이렇게 모듈을 설치 하시면 됩니다.
You can install it like this: npm install @react-native-async-storage/async-storage in the command prompt/Windows Powershell/Shell.
※ ios의 경우 모듈 설치 후 반드시 쉘에서 ios디렉토리로 이동후 pod install을 하셔야 설치한 모듈이 적용됩니다.
For iOS, after installing the module, you must move to the ios directory in the shell and run pod install for the installed module to be applied.
{
"name": "flmLogin",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^2.1.2",
"@react-navigation/native": "^7.1.6",
"@react-navigation/stack": "^7.2.10",
"react": "19.0.0",
"react-native": "^0.79.1",
"react-native-gesture-handler": "^2.25.0",
"react-native-safe-area-context": "^5.4.0",
"react-native-screens": "^4.10.0"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "18.0.0",
"@react-native-community/cli-platform-android": "18.0.0",
"@react-native-community/cli-platform-ios": "18.0.0",
"@react-native/babel-preset": "0.79.1",
"@react-native/eslint-config": "0.79.1",
"@react-native/metro-config": "0.79.1",
"@react-native/typescript-config": "0.79.1",
"@types/jest": "^29.5.13",
"@types/react": "^19.0.0",
"@types/react-test-renderer": "^19.0.0",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "19.0.0",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
}
}
3.실행 / run
– npm run ios 또는 npm run android명령으로 실행 앱을 실행 할 수 있습니다.
You can run the executable app with the npm run ios or npm run android command.
※안드로이드로 실행 할 경우 반드시 안드로이드 스튜디오가 실행되어 있어야합니다.
If you are running on Android, Android Studio must be running.
-실행하면 다음과 같은 화면을 보실 수 있습니다.
When you run it, you will see the following screen.
– 에뮬레이터에서 왼쪽은 안드로이드 ,오른쪽은 ios모드로 실행한 모습입니다.
The left side of the emulator is Android mode, and the right side is iOS mode.
