kasumil의 코딩 공작소

.env에 접근하는 방법은 process.env.REACT_APP_DOMAIN은 리액트의 경우였다. RN의 경우 좀 까다롭다.ios, android 둘다 설정해줘야하기때문에..https://www.npmjs.com/package/react-native-config react-native-configExpose config variables to React Native apps. Latest version: 1.5.3, last published: 6 months ago. Start using react-native-config in your project by running `npm i react-native-config`. There are 221 other projects in the npm regi..

다른 설정 다했는데, 지도가 렌더링이 되지 않는다.정확히는 블랭크...신기하게도 ios는 되네? provider 속성을 제거하니 안되더라.왜지? 버근가? 그랬는데, 그냥 설정문제였다. 나와 동일한 문제를 갖는 사람이 많아서 뭐지했는데,읽어보니 해당 api키에 권한부여를 안해서 그렇다.https://stackoverflow.com/questions/67713881/react-native-mapview-not-showing-on-ios-standalone-build React Native MapView not showing on iOS standalone buildI am using MapView from react-native-maps. I've gone ahead and built standalone a..

본 내용은 RN 0.77.0 버전에서 진행되어 작성되었습니다. 공식문서에는 0.73까지만 적용되는(?) AppDelegate.m으로(오브젝트 c) 적혀있어서  라이브러리 적용이 어려웠습니다. 이거때문에 하루 날림...짜증 -_-;; 위치 전문을 공개합니다.// AppDelegate.swiftimport UIKitimport Reactimport React_RCTAppDelegateimport ReactAppDependencyProviderimport GoogleMaps // 해당 내용 추가@mainclass AppDelegate: RCTAppDelegate { override func application(_ application: UIApplication, didFinishLaunchingWithOp..

일단 딥링크와 유니버셜링크, 앱링크를 많이 들어봤을것이다. 해당 설명에 대한 자세한 내용은 하단 링크 참조 https://help.dfinery.io/hc/ko/articles/360039757433-%EB%94%A5%EB%A7%81%ED%81%AC-Deeplink-URI%EC%8A%A4%ED%82%B4-%EC%9C%A0%EB%8B%88%EB%B2%84%EC%85%9C-%EB%A7%81%ED%81%AC-%EC%95%B1%EB%A7%81%ED%81%AC-%EA%B5%AC%EB%B6%84%EA%B3%BC-%EC%9D%B4%ED%95%B4 해당 내용을 이해하고 진행하면된다. https://reactnavigation.org/docs/deep-linking/ React Navigation reactnavigat..

onEndReached 함수 호출 부분. onEndReachedThreshold FlatList의 뷰 위치 설정. 해당 내용을 분석하면 전체 크기에 80%에 도착하면 console을 찍게 해놨다. onEndReachedThreshold={0.8} onEndReached= {() => { console.log(80);} 요렇게 쓰면 해당 무한 스크롤링 이벤트 기초부분이 완성된다. 해당 코드에 도착하면 append 식으로 구현하면되니까. 하지만 animation으로 숨겨졌다 보여졌다하는 기능들은 해당 방식으로 구현이 불가능하다. onScroll을 통해서 유저가 올렸다 내렸다 하는 해당 부분을 감지하는 로직을 추가해야 해당 부분이 완성된다.

// 1. 프로젝트 생성 npx react-native init webviewtest // 2. 라이브러리 설치 yarn add react-native-webview or npm install --save react-native-webview // 3. pod install ios라면 필수 cd ios pod install // 4. android 설정 // android/gradle.properties 파일 내 하단 추가 android.useAndroidX=true android.enableJetifier=true // 5. 리액트네이티브 버전 고정 명령어. npm config set save-exact=true // 이게 기초 세팅. //App.js import React, { useRef } fro..

require_relative '../node_modules/react-native/scripts/react_native_pods' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' platform :ios, '11.0' install! 'cocoapods', :deterministic_uuids => false target 'AwesomeProject' do config = use_native_modules! # Flags change depending on the env values. flags = get_default_flags() use_react_native!( :path => con..

기존에 개발하다가 때려친 사이드 프로젝트를 진행하고자한다. 이걸 왜 하느냐? 그냥, RN으로 어플 하나 만들어서 써보려고. 일단 이전에 날 좌절시킨 이유로 UI를 만들어보기로 했다. Template을 찾아봤는데, 없네..? 왜 그런가 했더니 expo 전용으로 나왔거나 아니면 유료더라. 그래서 찾아봤더니 템플릿이 필요가 없더라. 그냥 UI를 불러서 구성하면 되는 것이었다. 설치해도 왜 안됨? 이러고 있었는데, 설치할 게 없청많더라. 4개를 기본으로 설치해야 작동. 차라리 부트스트랩이 나은 것 같은데 말이지. "react": "17.0.2", "react-native": "0.67.3", "react-native-elements": "3.4.2", "react-native-linear-gradient": "..

분명 신규프로젝트로 npx react-native init 프로젝트명 이렇게 했는데, 스튜디오에서 작동이 되지 않는다. 왜 그런것인가? 했는데, Desktop 경로인 것에는 한글이 없고, 바탕화면 폴더에서는 한글 경로가 껴버리는 바람에 이런 것이었다. 안드로이드 스튜디오에서 컴파일될때 한글이나 특수문자가 끼니 해당 문자가 컴파일 경로에서 방해되어 해당 부분이 작동되지 않던 것. 괜히 그래들 버전을 7.2에서 6.7로 변경하고 안드로이드 스튜디오 SDK 파일 날리고 뻘짓했었다. https://blog.naver.com/psjin312/222334408580 error: internal/modules/cjs/loader.js:883 다음과 같은 에러가 발생했다. Terminal에서 npm start 실행 시..

https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet React Native Snippet - Visual Studio Marketplace Extension for Visual Studio Code - React Native, Typescript React Native, StyleSheet, Redux Snippet marketplace.visualstudio.com 원래는 스니펫을 일일히 설정해줘야하는데, 귀-찮. 누가 이걸 vscode 확장 프로그램으로 만들어놨다. 이것이 누군가에게는 쓸모없을지라도여러 개의 반복되는 것을 치는 것은 매우 귀찮다. Console clg→ console.log(object) c..