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 밑줄에 위 코드를 추가해주면 해결된다.
◼ 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을 개발할 때, 주로 Window 환경에서 Android로 개발한 후 디버깅 단계에서 iOS의 UI 등을 확인하곤 하는데, iOS의 노치 부분을 제어하기 위해 SafeAreaView로 감싼 Component임에도 노치 부분을 제어할 수 없는 몇몇 컴포넌트가 존재하곤 한다. 그래서 요즘 아주 흥미가 생긴 chatGPT에게 노치 부분을 제어하는 방법에 대해 물어봤다. https://k-taeyang.tistory.com/43 Controlling the Notch in React Native The notch is a feature on certain devices, such as the iPhone X and later, which contains the front-facing camera and..
React is a popular JavaScript library for building user interfaces, and its popularity has only increased with the rise of single-page applications (SPAs). One of the main challenges when building SPAs is managing data effectively, and the user query hook is an excellent solution for this problem. UseQuery is a hook provided by the React Apollo library, which is a popular library for integrating..
데이터를 받아오기도 전에 화면이 렌더링되는 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 를 눌러주면 하단 이..
fetch를 이용하여 API를 사용할 때, GET 함수를 불러올 경우 위와 같은 에러를 마주할 때가 있다. 예를 들면, fetch(`${IP}/users/${props.id}/1`) .then(response => response.json()) .then(data => console.log(data)) 이런 식으로 GET 호출하였다 치면 거의 100% 위와 같은 에러를 마주할 것이다. 해결 방법은 아주 간단하다. fetch(`${IP}/users/${props.id}/1`) .then(response => response.json()) .then(data => console.log(data)) .catch(error => {console.log(error)}) 이런식으로 .catch 만 붙여주면 아주 간..
https://k-taeyang.tistory.com/11 [React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 2 UseState https://k-taeyang.tistory.com/9 [React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 1 React에서 말하는 Hook은, React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하면, 기존 Clas.. k-taeyang.tistory.com 오늘은 React Hooks의 useEffect에 대해 중점적으로 알아보자. 우선, useEffect 함수는 리액트 컴포넌트가 랜더링 될때마다, 특정 작업을 실행할 수 있도록 하는 Hook이다. 앞선 시간에 배..
https://k-taeyang.tistory.com/9 [React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 1 React에서 말하는 Hook은, React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하면, 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. // 그렇다고 Reac k-taeyang.tistory.com 지난 시간에 이어서, 이번에는 리액트 훅에서 UseState에 대해 중점적으로 다뤄보자. 먼저, 리액트 컴포넌트에서 동적인 값을 상태(State) 라고 부른다. 사용자 인터랙션(User Interaction)을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는..
- Total
- Today
- Yesterday
- vscode
- Mac
- 앱개발
- JavaScript
- Ai
- app
- Firebase
- React Hooks
- Xcode
- vsC
- IMAGE
- ReactNative
- It
- React Native
- 스파르타코딩클럽
- 영종도데이트
- typeScript
- CSS
- build
- TS
- ChatGPT
- FlatList
- REACT
- 코린이
- rn
- useState
- ios
- useEffect
- gradle
- Android
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |