썬이의 IT세상

받아오는 데이터 중 백오피스에서 텍스트 편집기로 입력한 데이터는 html로 들어오게 되어 react-native-render-html 라이브러리로 앱에 디스플레이 해주고 있는데, 편집기에서 컬러를 지정하지 않으면 앱에 테마(Light Mode/Dark Mode)에 따라 텍스트 색상이 다르게 적용되어 이슈가 생겼다. 해결 방법은 다음과 같다. # solution. const spanElementModel = HTMLElementModel.fromCustomModel({ tagName: 'span', contentModel: HTMLContentModel.mixed, getUADerivedStyleFromAttributes({ face, color, size }) { let style = {}; if (fa..

프로젝트를 새로 pull 받은 후 안드로이드 빌드 시 spawn ./gradlew ENOENT 에러로 빌드가 되지 않는 경우, chmod 755 ./gradlew 등 권한 문제를 해결하라는 방안이 많은데, 애초에 나는 gradlew 파일 자체가 없어서 권한을 줄 수도 없었다. 이럴땐 안드로이드 스튜디오에서 싱크를 맞췄는지 점검해보자. 프로젝트를 새로 받았을 땐 싱크 맞춰주기 기억하자!!

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 밑줄에 위 코드를 추가해주면 해결된다.

RN 앱과 unity를 연동하기 위해 @azesmway/react-native-unity 라이브러리를 설치하고 세팅을 한 후 빌드할 때 Could not determine the dependencies of task ':notifee_react-native:compileDebugAidl'. 에러가 나면서 빌드가 되지 않는 경우가 있다. 이럴 때는 프로젝트의 gradle.properties 에 unityStreamingAssets=.unity3d 를 추가해주고, :azesmway_react-native-unity 의 build.gradle의 밑에서 dependencies { //noinspection GradleDynamicVersion implementation "com.facebook.react:rea..

◼ 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 를 사용하였다. 하지만 이전 프로젝트에서도 잘 사용..

올해 초 가장 핫한 IT 키워드는 역시 chatGPT 인 것같다. 이것을 응용한 많은 소프트웨어 역시 쏟아져 나오고 있는 상황에서, 올 2월 2일 Chrome 확장에 chatGPT for StackOverflow가 나와 이게 뭐지? 하고 적용해보았다. 전 세계 개발자들의 Q&A 플랫폼 StackOverflow는 마치 옛날 대유행했던 N사의 지식IN 같은 느낌인데, 그래서 질문자가 질문을 올리면 답변이 달리기까지 예측할 수 없는 시간을 기다려야 하며, 심지어는 질문이 밀려 답변이 달리지 않을 수도 있다. 그러나 이제는 Google Chrome에 chatGPT 확장을 설치해두면, AI가 자동으로 질문을 인식하여 답변을 도출해낸다. 사용 방법은 아래와 같다.(매우 간단하다) ➡️ ChatGPT for Stac..

나는 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..