일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- react native 세팅
- GIT
- babel.config.js
- react native CLI
- react native font
- 리액트 네이티브
- 문자열 대소문자 구별
- img upload
- AWS Access Key
- Next.js
- s3 upload
- js
- react native 개발
- React
- PongWorld
- firebase 라이브러리
- 리액트 네이티브 에러
- error
- 리액트
- react native
- 문자열 대소문자
- AWS
- Project
- fire base
- 백준
- react native picker
- aws bucket 정책
- 리엑트 네이티브 아이콘
- 에러
- Access Key 생성
- Today
- Total
목록마모리(My Memory) 프로젝트 (20)
밝을희 클태
토큰(Token)이란?토큰은 인증에 사용되는 문자열로, 서버가 사용자를 식별하기 위해 발급합니다. 일반적으로 로그인과정에서 아이디와 비밀번호가 검증된 후 사용자에게 발급되며, 이후 사용자는 발급받은 토큰을 이용하여 서비스 내에서 권한이 필요한 요청을 할 수 있습니다.토큰의 장점:보안성: 토큰은 사용자의 로그인 정보를 서버에 저장하지 않기 때문에, 서버에 대한 해킹으로부터 사용자 정보가 유출될 위험을 줄여줍니다.확장성: 토큰 기반 인증은 서비스의 서버뿐만 아니라, 다른 플랫폼 및 서비스에서도 동일한 토큰을 통해 인증할 수 있어 서비스 확장성을 높여줍니다.상태 비저장성(Statelessness): 서버는 상태를 저장할 필요 없이 토큰만으로 사용자를 인증할 수 있어 서버 자원을 절약할 수 있습니다. React..
안드로이드 스튜디오에서 project->app->res 클릭 후 file->New->image Asset을 누르면 어플의 아이콘을 넣을 수 있는 창이 하나 뜬다.거기서 원하는 로고를 넣어서 맨 아래에 resize 퍼센트를 적절하게 조절해서 영역 안에 로고가 들어가게 해 준다그리고 name을 지정해 줄 수 있는데 기본 이름은 ic_launcher로 저장이 되는데 바꾸고 싶다면 manifests/AndroidManifest.xml도 수정해 주어야 한다. IOS 앱 아이콘 변경하기https://gaebarsaebal.tistory.com/35 [IOS] ios 앱 아이콘 변경하기앱 로고를 만든 다음 해당 로고를 다양한 사이즈로 resize 하기 위해 https://w..
앱 로고를 만든 다음 해당 로고를 다양한 사이즈로 resize 하기 위해 https://www.appicon.co/ App Icon Generator www.appicon.co사이트에서 원하는 로고를 넣고 저장해준다.❇︎다양한 사이즈를 만들기 위해 사이트에 나와있는 데로 1024 * 1024 사이즈의 이미지가 필요함 파일을 저장하고 해Assets.xcassets로 들어가면 AppIcon.appiconset폴더가 있는데Xcode에서 AppIcon의 폴더를 열고다운로드한 AppIcon.appiconset 폴더를 기존의 AppIcon.appiconset폴더와 교체해 주면 된다. Android 어플 아이콘 변경하기https://gaebarsaebal.tistory.com/36app->res 클릭 후 file..
path: ios/project/info.plist``` CFBundleDisplayName name name 부분을 원하는 이름으로 바꾸면 된다. https://gaebarsaebal.tistory.com/33 [Android] android project 앱 이름 바꾸기path: android/app/src/main/res/values/strings.xml name "name"부분을 원하는 부분으로 변경하면 된다 https://gaebarsaebal.tistory.com/34 [IOS] ios project 앱 이름 바꾸기 path: ios/project/info.plist ``` CFBundleDisplayName name gaebarsaegaebarsaebal.tistory.com
path: android/app/src/main/res/values/strings.xml name "name"부분을 원하는 부분으로 변경하면 된다 https://gaebarsaebal.tistory.com/34 [IOS] ios project 앱 이름 바꾸기path: ios/project/info.plist ``` CFBundleDisplayName namegaebarsaebal.tistory.com
안드로이드 스튜디오에서 APK를 추출하려는데 아래와 같은 에러가 난다. 읽어보면 react native vector icons에서 나는 에러 같은데 검색해 보면 쉽게 해결법이 나온다.A problem was found with the configuration of task ':app:lintVitalAnalyzeRelease' (type 'AndroidLintAnalysisTask').Gradle detected a problem with the following location: '/Users/tom/Documents/GitHub/media/android/app/build/intermediates/ReactNativeVectorIcons'.Possible solutions:Declare task ':a..
설치방법https://gaebarsaebal.tistory.com/20 [react native / 리액트 네이티브] react-native-push-notification IOS, Android 푸시 알람 설치하기푸시 알람을 보내기 위해선 IOS, Android 둘다 푸시 알람에 대한 권한을 받아야 해서 react-native-permissions 라이브러리도 함께 설치해야 한다. https://gaebarsaebal.tistory.com/21 [react native / 리액트 네이티브]rgaebarsaebal.tistory.com공식 githubhttps://github.com/zo0r/react-native-push-notification GitHub - zo0r/react-native-push-..
https://github.com/zoontek/react-native-permissions#supported-permissions GitHub - zoontek/react-native-permissions: An unified permissions API for React Native on iOS, Android and Windows.An unified permissions API for React Native on iOS, Android and Windows. - GitHub - zoontek/react-native-permissions: An unified permissions API for React Native on iOS, Android and Windows.github.com 라이브러리 설치..
푸시 알람을 보내기 위해선 IOS, Android 둘다 푸시 알람에 대한 권한을 받아야 해서 react-native-permissions 라이브러리도 함께 설치해야 한다.https://gaebarsaebal.tistory.com/21 [react native / 리액트 네이티브]react-native-permissions 설치 방법https://github.com/zoontek/react-native-permissions#supported-permissions GitHub - zoontek/react-native-permissions: An unified permissions API for React Native on iOS, Android and Windows. An unified permissions..
ERROR Error: [Reanimated] Mismatch between JavaScript code version and Reanimated Babel plugin version (3.5.3 vs. 3.4.2).See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-javascript-code-version-and-reanimated-babel-plugin-version` for more details.Offending code was: `function anonymous(){const{createLayoutAnimationManager}=this._closure;globa..
먼저 s3 bucket을 사용하기 위해선 bucket을 만들고 Access Key를 발급받아야 한다.https://gaebarsaebal.tistory.com/13 [AWS] AWS S3 bucket 정책 설정aws s3 bucket에 이미지 업로드를 하기 위해서 정책 설정 등 변경해야 할 것이 있다 s3 bucket 정책 설정 { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicListGet", "Effect": "Allow", "Principal": "*", "Action": [ "s3:List*gaebarsaebal.tistory.comhttps://gaebarsaebal.tistory.com/14 [AWS] AWS S3 Access Key 발급,..
IOS # Using npmnpm install --save @react-native-firebase/app# Using Yarnyarn add @react-native-firebase/app우선 firebase 설치해 주고project/ios/Podfiletarget 'project_name' do config = use_native_modules!밑에 코드를 추가해 준다 pod 'GoogleUtilities', :modular_headers => true pod 'FirebaseCore', :modular_headers => true pod 'FirebaseAnalytics' pod 'FirebaseAuth' pod 'FirebaseFirestore'$ pod install 초기화 코드#..
react native로 ios 앱을 개발 중 갑자기Constants.platform.ios.model has been deprecated in favor of expo-device's Device.modelName property. This API will be removed in SDK 45.이런 경고가 난다 그래서 expo-constants가 최신 버전이 아니라 그런가 싶어서 최신 버전으로 업데이트하니 아예 에러가 나버려 앱이 실행이 안 된다 무슨 건드릴 수 없는 값을 건드렸다 뭐 대충 그런 내용이었던 것 같았다.그래서 하루 종일 삽질을 아무리 해도 안돼서 공식 github에 들어가서 issue를 뒤져보니 나와 같은 내용이 나왔다issue issue2문제 원인내가 expo CLI를 사용하다가 exp..
설치$ npm install react-native-picker-select # React Native users$ npm install @react-native-picker/picker$ npx pod-install # Expo$ expo install @react-native-picker/pickerimportimport RNPickerSelect from 'react-native-picker-select';codefunction Category({ onChangeCategory }) { return ( onChangeCategory(value)} items={[ { label: "영화", value: "movie" }, { label: "책", value: "book" ..
react native와 라이브러리들을 업데이트하고 나니GestureDetector must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-이런 오류가 난다GestureDetector는 GestureHandlerRootView의 자식으로 사용되어야 한다해결 방안import { GestureHandlerRootView } from 'react-native-gesture-handler';export default function App() { return ( ... );}..
react-native-reanimated를 설치하고 나니 아래와 같은 에러가 난다Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?...babel.config.js을 수정하지 않아서 나는 오류다해결 방안babel.config.jsmodule.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'],};위와 같이 plugins를 수정해 준다
githubhttps://github.com/oblador/react-native-vector-icons설치$ npm install --save react-native-vector-icons라이브러리 연결 아래부터는 쉬운 방법이라는데 나는 해봤는데 안된다.... 아이콘 하나 설치하기 힘들다... 그래도 해보실 분들은 ... UIViewControllerBasedStatusBarAppearance UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_So..
0.7.0 이상 버전에서 폰트 적용하는 법구글폰트눈누폰트project root경로에서 assets/fonts/ 에 다운로드한 폰트를 저장하고없으면 만들어야 한다react-native.config.js 파일을 만들어서module.exports = {assets: ["./assets/fonts/"],![]};내용을 적는다 그리고$ npx react-native-asset 잘 됐겠지만 한번 xcode info에서 Fonts provided by application을 확인해서 내가 적용하고 싶은 폰트가 잘 link 됐는지 확인하자
프로젝트를 진행하면서 react native 0.71.8을 사용하고 있었는데0.72.1 버전으로 업그레이드를 했다그런데 코드에 아무 변화가 없는데 버전을 업데이트하고 나서 잘 작동하던 앱이 먹통이 됐다증상useState 변수들의 상태가 변하지 않음코드에 변수나 Text를 수정할 때 실행되는 hot reload에는 앱이 계속 먹통이지만 console.log를 코드의 아무 곳에 나 추가하면 앱이 너무나 잘 작동함 당연히 기존에는 잘 돼서 코드 문제 일 거라곤 전혀 상상도 못 하고 애꿎은 라이브러리들을 탓하면서 삭제하고 새로 깔고 버전 다운그레이드 하고 거의 이틀을 이 짓만 했다끝내 라이브러리들은 문제가 없음을 확인하고 코드를 들여다보기 시작했는데 ...const [isSwitch, setIsSwitch] =..
일단 flatlist의 전체 코드다 View style={{ flex: 1 }}> FlatList style={{ flex: 1 }} data={rememberBooks} keyExtractor={(item) => item.idx} renderItem={({ item }) => Item title={item.title} />} numColumns={numColumns} /> View> data의 예시다 const rememberBooks = [ { idx: 1, title: "Book 1" }, { idx: 2, title: "Book 2" }, { idx: 3, title: "Book 3" }, { idx: 4, title: "Book 4" }, { idx: 5, title: "Book 5" }, ..