개발/React Native
-
React Native | Youtube Video 정보 가져오기개발/React Native 2021. 8. 20. 20:04
React Native에서 react-native-youtube 패키지를 사용하면 Youtube 영상을 앱 내에서 재생하는 것은 가능하지만 재생하는 Video의 제목과 재생시간, 채널명과 같은 기본정보는 가져오지 못한다. Google API 활용하면 Video의 기본정보를 가져올 수 있다. 어딘가 이를 처리해주는 패키지가 있을 것 같은데, 찾을 수가 없어서 필요한 모듈을 직접 만들어 보기로 했다. 제일 먼저 해야 할 일은 Youtube Data API 이용 권한을 획득하는 것이다. 방법은 간단하다 아래 주소로 이동하여 프로젝트를 생성하고 API Key를 발급 받으면 된다. https://console.developers.google.com/apis/dashboard Google Cloud Platform..
-
iOS용 App으로 배포하기개발/React Native 2020. 2. 16. 12:18
1. Info.plist 파일 편집 : 개발을 위해 내부 네트워크로 설정되어 있는 부분 업데이트 2. Xcode에서 버전 업데이트 프로젝트 선택 > General > Version 변경 ** 이전 버전과 동일할 경우, Distribute App에서 실패하게 됨. 3. Xcode 에서 Release로 스키마 변경 Product > Schema > Edit Schema > Debug모드를 Release로 변경 4. Xode에서 Archive 실행 Product > Archive 5. Distribute App 실행 6. App Store Connect 에서 확인 (https://appstoreconnect.apple.com/) Distribute한 결과물은 AppStore Connect에서 확인할 수 있음...
-
React native 빌드 환경 설정 (No Expo)개발/React Native 2019. 9. 3. 23:25
아놔.. 다 썼는데.. 날아갔다. 그냥 링크로 대체한다. 흑.. https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment React Native · A framework for building native apps using React A framework for building native apps using React facebook.github.io 시스템 환경 변수 업데이트 필요. 1. Android SDK - Android Studio 설정에서 설치위치 확인 가능 2. JAVA - JDK 설치 위치 정의 필요. 3. JRE - Android SDK 설치 위치 찾아보면 있음. 그 ..
-
Node.js 개발 환경 구축 및 프로젝트 생성 (Backend)개발/React Native 2019. 8. 28. 23:20
Node.js 프로젝트 생성을 위해서는 아래와 같은 환경 구성이 필요하다. 1. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Yarn 설치 Yarn Fast, reliable, and secure dependency management. yarnpkg.com Mac의 경우, Yarn 설치 전 Brew 설치가 필요하며 관련 내용은 아래에서 확인할 수 있다. https://whitepaek.tistory.com/3 Homebrew(홈브류) 설치 및 사용법, MacOS에서 프로그램을 쉽게 다운로드 및 삭제할 수 있는 패키지 관리자 Homebrew 설치 및 사용법 ma..
-
SVG 파일을 PNG로 변환하기개발/React Native 2019. 8. 27. 23:39
무료 아이콘팩을 제공하는 Ionicons의 경우, 따로 아이콘을 위한 리소스 관리가 필요 없다는 점에서 웹 혹은 앱 개발 시, 자주 사용되고 왠만한 기본 아이콘이 제공되고 있어서 자주 사용되고 있다. https://ionicons.com/ Ionicons: The premium icon pack for Ionic Framework Ionicons is an open-sourced and MIT licensed icon pack. ionicons.com 하지만 SVG 파일만 제공하고 있기 때문에 UX 디자인 과정에서는 SVG 파일 사용이 불가능하기 때문에 PNG, JPG 파일이 필요한데, SVG 파일에서 편리하게 PNG 파일을 추출할 수 있는 사이트가 있어 공유한다. 추가로 해당 사이트의 경우에는 SVG ..
-
(React Native) Expo-Facebook/Google 계정 연동개발/React Native 2019. 7. 7. 22:00
Expo는 Facebook, Google 계정과 연동할 수 있는 패키지를 제공하고 있음. 이를 위해서는 Facebook, Google 개발자 사이트에 접속하여 권한을 등록한 후 Expo 코드에서는 고유ID를 통해 계정 정보에 접속하면 됨. Facebook - Expo Documentation behavior (string) -- The type of login prompt to show. Must be one of the following values: 'system' (iOS default) -- Attempts to log in through the Facebook account currently signed in through the device Settings. This will fallback ..
-
Node.js 의 모듈 가져오기 (Import/Export)개발/React Native 2019. 6. 8. 11:50
자바스크립트는 웹 브라우저에서 실행되는 언어로 외부 모듈을 가져오는 기능을 지원하지 않았으며 Node.js 또한 이를 지원하지 않았습니다. 하지만 개발 효율성 향상을 위해 ES2015에서 외부모듈을 가져오기 위한 import, export를 지원하였고 Noje.js에서도 이를 지원하게 되었습니다. 외부 모듈 로드 방식은 간단합니다. 외부에 공개할 함수는 함수명 앞에 export를 붙이고 모듈을 불러오는 곳에서는 파일 상단에 import 키워드를 사용하면 됩니다. // export_module.js export function add (a, b) { return a + b } export function mul (a, b) { return a * b } // main.js import { add, mul ..