썬이의 IT세상

rn 71 version 이상부터 무언가 기존 라이브러리들도 gradle들도 pods들도 다 꼬이는 느낌... 무튼 제목과 같은 could not find any matches for com.facebook.react:react-native:+ as no versions of com.facebook.react:react-native are available 에러는 android/app/build.gradle 경로에서(android/build.gradle 파일이 아님) apply plugin: "com.android.application" apply plugin: "com.facebook.react" // add this com.android.application 밑줄에 위 코드를 추가해주면 해결된다.

이번에 새로 받은 m1 mac으로 기존에 진행중이던 프로젝트를 빌드하려는데, 예전에 m1 mac에서 빌드했을 때에는 구글을 잘 따라가면 빌드가 바로 됐었는데 이번에는 만나지 못한 에러때문에 몇시간을 허비했다...ㅠㅠ gradlew not found 혹은 ./gradlew: bad interpreter: /bin/sh^m: no such file or directory 에러때문에 안드로이드 빌드를 못하고 있었는데, 아무리 검색해봐도 chmod +x gradlew , chmod 777 gradlew 명령어로 권한을 주라는 것 외에는 나오지 않았다. 머리를 식히고 다시 검색해보니 dos2unix 를 설치하고 이를 통해 해결하는 방법이 나와있었는데, 그 방법은 아래와 같다. #1 dos2unix 설치하기 bre..

◼ NPM 라이브러리 수정 방법 **npm install [패키지명]** 으로 설치한 라이브러리 모듈을 수정 후 npm install을 하게 되면 기존 설치했던 라이브러리 버전의 코드만 남게 되어 수정했던 부분은 날아가게 된다. 1) npm module의 git 저장소로 들어간다. 2) 해당 저장소를 fork 해 내 저장소로 가져온다. → fork가 완료되면 상단 좌측에 [Username]/[Packagename] 으로 변경된다. 3) npm install git+[fork한 저장소 주소] 명령어로 패키지를 설치해준다. → 예시) npm install git+https://github.com/ktaeyang/react-native-star-rating-widget 3-1) 정상적으로 fork한 저장소에서..

scrollview나 flatList 등 scrollview를 기반으로 만들어진 요소들에게 style을 주면 Invariant Violation: ScrollView child layout (["justifyContent"]) must be applied through the contentContainerStyle prop. 위와 비슷한 에러가 나는데, 'contentContainerStyle' 로 스타일을 주라는 뜻이다. 그런데 가끔 골치아픈 경우가 생기는데, justifyContent를 'center' 혹은 'flex-end' 로 줘서 UI를 그려야 할 때가 있는데 이 친구는 flex값을 주어야 동작한다. 하지만 flex값을 주게되면 스크롤이 안되는 경우가 있는데, 이럴 경우에는 flex 대신 fle..

RN으로 개발하다보면 거의 필수적으로 쓰게되는 ScrollView와 FlatList. 그중 나는 FlatList를 사용하여 스크롤이 있는 UI에 배열로 들어오는 데이터들을 화면에 그려주곤 하는데, RenderItem의 {item}에 타입을 지정해주기가 여간 까다로운게 아니다. 알고보니 이건 인수를 넣는 쪽에 타입을 지정해주려는 나의 습관과 고정관념의 문제였고 RN에서는 RenderItem에 타입을 지정해주는 아주 간단한 Type Props를 제공해준다. import {FlatList, ListRenderItem} from 'react-native'; ... type TRenderItemProps = { a : string; b : number; ... } const RenderItem : ListRend..

맡은 프로젝트에서 회원가입 UI를 만드는데, 거주지역을 선택하는 부분에서 react-native-dropdown-picker react-native-dropdown-picker A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.. Latest version: 5.4.4, last published: 2 months ago. Start using react-native-dropdown-picke www.npmjs.com 를 사용하였다. 하지만 이전 프로젝트에서도 잘 사용..

The notch is a feature on certain devices, such as the iPhone X and later, which contains the front-facing camera and speaker. The notch can obstruct parts of the screen, making it necessary to control its behavior in a mobile application. In React Native, there are several ways to control the notch and ensure that your content is not obscured by it. Method 1: Use the SafeAreaView Component The ..

요즘 핫하디 핫한 ChatGPT에게 무엇을 질문해볼까 하다가 개인적으로 집에서 심심할때 코딩하려고 사이드 프로젝트를 해보려 했는데 막상 무슨 주제로 앱을 만들어야할지 고민이라 ChatGPT에게 질문해보았다. 이런 기특한놈이 있나... 개떡같이 말해도 찰떡같이 알아듣는다는데 찰떡을 넘어 내가 원하는 답변을 미리 알고 있다는듯이 답변해준다... 나는 저중에 여행앱이 마음에 들어 새로운 질문을 해보았다. 날먹 마인드로 질문해봤는데 역시... 그러나 GPT의 답변은 실제로 앱을 빌드해준것보다 더 나를 충격적이게 만들었다. 죄송하지만 AI 언어 모델로서 물리적으로 앱을 빌드할 수 있는 능력이 없습니다. 그러나 React Native를 사용하여 여행 앱을 빌드하는 방법에 대한 몇 가지 지침을 제공할 수 있습니다. ..

데이터를 받아오기도 전에 화면이 렌더링되는 react.. 예를 들어 api를 통해 받아온 데이터를 화면에 디스플레이 해줘야 할 때, 분명 해당 데이터를 담는 state는 초기에 undefined이면 무조건 에러가 날 것이다. 그래서 데이터가 들어오면 렌더링이 되게끔 하는 가장 간단한 방법은 ... const [data, setData] = useState(); return data ? ( {data.title} ) : null ... 이런식으로 data가 들어왔을 때 렌더링이 되게끔 처리해주면 되는데, null로 처리한다면 데이터가 들어올때까지 빈 화면만 노출될 것이다. 이럴 경우엔 사용자 입장에서 움직이는 로딩 컴포넌트가 있어야 한다. 이 포스팅에서는 로딩 컴포넌트를 간단하게 만들어보는 예제를 다루려 ..

React Native로 앱을 만들고, npx react-native run-android 명령어를 통해 Android로 앱을 빌드할 때, 개발 환경도 다 조성하고 Android virtual device도 연결이 되었지만 NDK Version이 안맞다며 빌드 에러가 날 때가 있는데, 이런 경우에는 주로 Android SDK 버전 문제일 확률이 높다. 먼저, android\build.gradle 내에서 ext { ... ndkVersion = "xx.x.xxxxxx" ... } 로 되어있는 부분과 동일한 버전의 NDK를 설치해 주어야 하는데, 안드로이드 스튜디오 - Tools - SDK Manager 에서 SDK Tools 탭에 들어간 후 하단의 Show Package Details 를 눌러주면 하단 이..