전체 글 160

[RN] Can't show Image in React Native

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"시뮬레이터에서는 이미지가 나오는데 실제 디바이스에서는 이미지가 나오지 않는아주 슬픈 버그가 발생했다.일단 나같은 경우는 s3 에서 이미지를 받아와서버 url 로 변경 후 프론트로 내려주는 방식을 사용하고있었다.보안때문에 s3 주소를 그대로 보여주면 안된다고 들어서 .encodeURI, encodeURIComponentdecodeURI, decodeURIComponent별의 별 방법을 사용해봤지만 시뮬레이터에서는 정상적인게이상하게도 실제 디바이스로만 가면 이미지가 안나왔다 ..챗지피티도 .. 블로그도 .. 스택오버플로우도 .. 어떤것도도움이 되지 않았는데 주소를 유심히 보다보니 http 로 이미지 주소가 나오고 있었다...

[RN] 이미지 불러오기 ( 외부, 내부 )

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"이미지를 호출하는 방식이 2개인데하나는 외부 URL 링크를 통해서 호출하는 방법이고하나는 내부 이미지를 호출 하는 방법이다.나는 이미지를 /assets/img 폴더에 모아놓기 때문에경로는 자기에 맞게 수정하면된다.1. 내부이미지 호출하는 방법이런식으로 source 안에 require 를 이용하여 내부 이미지를 호출한다.2. 외부이미지 호출하는 방법내부이미지 호출방법과 다른 점은 source 안에 중괄호가 하나 더 들어간다는 점과uri 를 통해 이미지를 호출한다는 것이다.이미지를 호출하는 방식이 다르다 보니 한번씩 햇갈릴때가 있는데이번기회에 햇갈리지 않도록 기억해두자 ..

[RN] 외부 폰트 적용하기

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"역시 사람의 뇌는 믿을게 안된다 .. 한달전에 한 세팅이 기억이 안나서전에 했던 설정을 다시 살펴보는 지경 .. ㅠ설정하는 방법을 기록하면서 다시한번 새기기 위해서 작성한다.1. 외부 폰트 파일 ( .ttf .otf ) 파일을 다운받는다.2. 다운받은 파일을 /assets/fonts 폴더에 저장한다.3.react-native.config.js 파일을 수정한다. ( 없으면 생성 )module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts'],};4. npx react-native-asset 명령어를 입력해주면 끝난다.5...

[RN] 스크린 이동하기

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"Nuxt 에서 사용하던 Router.push() 나React 에서 사용하던 navigate 를 사용하고있었다.간단하게 사용할 순 있는데 자꾸 까먹게되서 설정하는 방법을 기록하려고 한다.const TestCalcScreen = ({navigation}: NavigateProps) => { return (...)}export default TextScreen해당 컴포넌트를 생성할때 호출해주면된다.NavigateProps 타입은 만들어서 사용해주면되는데// types.tsximport {NativeStackScreenProps} from '@react-navigation/native-stack';import {RootS..

[RN] Button 만들기

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React 에서 사용하던 을 사용하려고 보니 당연히 안됐고 ..이게 몇개있는데 사용방법은 다른 글을 확인해보면 좋다. [RN] Input 사용하기📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React 와 React-Native 가 같다고 하니Input 도 당연히 이렇게 쓰려고 하니 당연히 안됐고 ^^ ..React Native 에서 Input 을 사용하는 방법은 다음과 같다.import { T8735.tistory.com   [RN] Alert 사용하는 방법📱테스트 환경"react": "18.2.0""react-native": "0.74.2"버튼을 눌렀을 때 API 사용후..

[RN] Alert 사용하는 방법

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"버튼을 눌렀을 때 API 사용후에 '소중한 한표 감사합니다❤️' 창을 띄워주고 싶었는데React 나 다른 JS 에서 alert('소중한 한표 감사합니다❤️') 이렇게 썼으니까 ..어차피 RN 도 React 기반이니까 똑같거니 했더니 역시 안됐다 ^^React Native 에서 Alert 를 사용하는 방법은 다음과같다.import { Alert } from 'react-native';Alert.alert('소중한 한표 감사합니다❤️')이렇게 아주 간단하게 사용할 수 있다.더 자세한 사용방법은 공식문서에서 확인해볼 수 있는데확인누르고 콜백받아서 처리를 하거나,타이틀이나 텍스트도 정해줄 수 있다. Alert · React ..

[Kotlin] WebView 보이기 전 검정화면 안보이게 하는 방법

📱테스트 환경Medium Phoen API 35 ( Android Simulator )테스트 기기를 다른 분 빌려줘서 오랜만에 시뮬레이터를 썼다 ㅎ아무튼 유지보수 할 일이 생겨서 코드를 보는데 마지막 커밋이 3년전 크 ~진짜 손대기 싫었지만 이젠 더이상 미룰 수 없다 .. 라서유지보수를 진행하는데 먼저 targetSdkVersion 을 34 로 올려달라고 하셔서( 원래는 21 이였다 ㅎ )올리려고 보니 ~ 에러가 굉장해 엄청나 ~아무튼 열심히 에러를 고치고 보니 WebView 가 호출되기 전 검정화면이 보이게 됐다.처음엔 스플래시화면 오류인가 싶었지만 웹뷰 호출전 에러라는걸 확인했고사용자가 보기에는 놀랄만한 요소이기 때문에해당배경을 투명하게 적용해주도록 해서 흰색배경에 로딩바가 돌아갈 수 있도록 했다..

Android/Kotlin 2024.09.25

[RN] React Native Admob 설치

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"광고를 붙여야 돈을 벌 수 있으니 광고를 붙여보려고 한다.근데 Android 는 좀해봤어도 IOS 개발은 안해봐서 설정에 좀 애먹다보니해당 설정하는 내용을 기록하려고 한다!Podfile 에pod 'Google-Mobile-Ads-SDK'해당 내용 추가해당 내용은target 'ProjectName' do안에 넣어주면 된다.그다음 Xcode 에서File > Add Package Dependencies... 에서https://github.com/googleads/swift-package-manager-google-mobile-ads.git추가해주면 끝!면 좋겠지만 .. 진짜 프로젝트 생성할때마다 에러를 겪어서 해당 방법을 ..

[Android] Key 분실 시 해결 방법

PC 를 변경하면서 키도 같이 잃어버렸다 ㅎ저장해놓고 잃어버리면안되는데 참 멍청하게 바로 잃어버려서 ..업로드를 하려고 하니 당연히 에러가 발생했다.android studio Android App Bundle이 잘못된 키로 서명되었습니다. 제대로 된 서명 키로 App Bundle에 서명한 다음 다시 시도해 보세요.Build > Generate Signed App Bundle/App... > Android App Bundle > Create new...를 통해서 키를 새롭게 만들어주고keytool -export -alias -keystore -rfc -file .pem입력해주면 .pem 파일이 생성되면 준비는 끝났다.Google Play Console 로 이동 후 설정 > 앱 서명 > 업로드 키 재설정..

Android 2024.09.09