Javascript/React-Native 19

error Error: ENOSPC: no space left on device, copyfile

📱테스트 환경"react": "18.3.1","react-dom": "^18.3.1","react-native": "0.76.1"회사에서 지원받은 맥미니가 용량이 엄청적다 ..256GB 짜리인데 시스템만 절반을 넘게 차지하니까 .. 프로젝트 뭐 설정하고나면용량이 없어서 뭐 추가만 하려고 하면 해당 에러를 만나게 되는데해당 원인은 용량부족이다..해결방법은 아주아주 간단하다.yarn cache celan생각보다 yarn 에서 캐시로 들고있는게 많아서 클린 해주고 진행하면대부분 라이브러리 추가는 문제없이 진행될꺼다.이래도 문제가있다면 이제 저장공간가서 열심히 필요없는걸 지워주도록 하자.

[RN] Cannot remove child at index X from parent ViewGroup

📱테스트 환경"react": "18.3.1","react-dom": "^18.3.1","react-native": "0.76.1"FlatList 를 사용한뒤로 navigation 을 사용할때마다저런 에러가 뜨는데 처음에는 관련있는 에러인지도 몰랐는데UI 업데이트 되면서 충돌에러가 발생하는 것이라고 한다.해결방법은 간단한데 item[rowKey]?.toString() || Math.random().toString() } // 고유 key renderItem={({item}) => ( {renderRow(item)} )} />removeClippedSubviews={false}이거 한줄 추가해주면 해결된다.해당 줄을 추가하면 U..

[RN] React-Native-Select IOS Bug

📱테스트 환경"react": "18.3.1","react-dom": "^18.3.1","react-native": "0.76.1","@react-native-picker/picker": "^2.7.7","react-native-picker-select": "^9.2.0", Android 나 Web 에서는 잘 되는게 Ios 에서만 이상하게눌러도 반응이 없었다.ChatGPT 나 스택오버플로우 깃 이슈 뭐 안본데가 없고 ..안해본게 없었는데 ..나와같은 이슈가 없어서버전도 다운그레이드 해보고 .. 삭제했다 다시깔아보고 ..다 의미없는 짓이였다 ..해결방법은 의외로 간단했는데 setValue && setValue(v)} items={items} placeholder={{label: place..

[RN] Make sure you are using @react-native/babel-preset when building your JavaScript code.

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"와 해당 경고 때문에 진짜 정신나가는줄 알았다.ChatGPT 도 몰라 .. 스택오버플로우도 없어 ..다른 블로그에서도 찾아볼 방법이 없어 .. (NOBRIDGE) WARN Codegen didn't run for DebuggingOverlay. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code. (NOBRIDGE) WARN Codegen didn't run for SafeAreaView. This will be an error in the futu..

[RN] .env dotenv 사용하기

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React Native 에서 env 를 사용하러면 설정해야 할 값들이 좀 있어서까먹지 않기위해 작성한다.바로 레츠꼬yarn add react-native-dotenv// ts용yarn add --dev @types/react-native-dotenv필요한 모듈 설치해주고bable.config.js 로 가서plugins: [ ... [ 'module:react-native-dotenv', { moduleName: "@env", path: ".env", safe: false, // 파일에 지정되지 않은 환경 변수가 있는 경우, 오류 없이 통과하도록 설정 ..

[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..