전체 글

BotNavi + iframe

설치 패키지 기본세팅 node.js 설치 (LTS버젼으로) npm install -g yarn npm install --global expo-cli expo login --username "Expo 사이트 가입당시 입력한 name" (CMD에서 관리자권한으로) 네비게이션 관련 yarn add @react-navigation/native expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view expo install expo-status-bar expo install react-native-..

React 오류 대처 이모저모

- 아래와 같이 expo start시 문제가 발생하면, 아래의 코드를 터미널에 입력해보자. expo doctor --fix-dependencies - node-module의 문제가 발생하면, 싹 다 지우고 node.js를 새로 설치해보자. - npm install --global expo-cli 등 설치 중 npm 오류가 나면, 1) 작업관리자 > 세부정보에서 adb.exe 실행취소 2) C:\Users\nyong\AppData\Roaming 폴더로 들어가서 npm폴더 완전삭제 3) VS code의 마켓에 들어가서 npm 삭제 후 재설치

Youtube 재생하기

설치 및 준비 1. 확장설치 기본적으로 react-native-webview가 설치되어 있어야 함 expo install react-native-youtube expo-dev-client npm install --save react-native-youtube yarn add react-youtube //유튜브 설치 npm i react-youtube npm i youtube-player //오류 발생 시, 필요에 따라 설치 2. 유튜브API key 만들기 안드로이드에서 react-native-youtube를 사용하기 위해서는 Youtube developer API key가 필요함. 아래에 링크를 통해 Youtube developer API key를 생성해야함. Youtube Developer API Ke..

iframe 적용하기

import {Alert} from 'react-native'; import {getYoutubeMeta} from 'react-native-youtube-iframe'; getYoutubeMeta('sNhhvQGsMEc').then(meta => { Alert.alert('title of the video : ' + meta.title); }); 1. 사전에 설치되어 있어야 하는 패키지 1) iframe은 기본적으로 react의 Hooks 개념을 사용한다. 따라서 webview를 설치해야함. 2) Hooks이란, 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존..

Navigation 적용하기

1. Navigation 1) 설치파일 (터미널에 입력, 이건 기본적으로 설치해야 함, Stack이냐 Botton이냐는 선택) 기본 도구 yarn add @react-navigation/native 네비게이션 추가 설치코드 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view 스테이터스바 설치 expo install expo-status-bar 2) 사용법 // App.js 코드 // 컴포넌트를 import해주고, NavigationContainer를 App이란 함수(Function)으..

초기 세팅

환경 세팅 : 1. VS Code (다운로드 링크) (VS code 이쁘게 : Material Icon Theme) 2. node.js (LTS 16.14.2 로 설치하기 >> 최신버전 미지원 우려) 1) 일반 설치 프로그램처럼 설치 2) Automatically setup 설정 후 설치 (이후 CMD와 Powershell열리고 설치진행됨) 3. Android studio (다운로드 링크) : 앱 개발 및 배포를 위함 1) 설치 후, 실행 2) ‘Do not import ‘ 선택 후 처음부터 실행. 3) Next 후 set up type은 standard 4) 화면 타입 설정 후 Next > Finish 로 설치 끝 4. Xcode (MAC 사용시) (다운로드 링크) : 앱 개발 및 배포를 위함 5. y..

11일차 - 네비게이터 페이지 만들기

페이지를 만들고 이동하는 것(스택 네비게이션) 1. 네비게이션 기본 코드 설치하기 (복사해서 터미널에 입력) : 네비게이션 기능을 사용하기위한 기본적인 설치코드. 추가적인 네비게이션 기능을 사용하기 위해선 별도의 코드들을 추가로 설치해줘야함. 1)네비게이션 설치 코드 : yarn add @react-navigation/native 2)네비게이션 추가 설치코드 : expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view 2. 스택네비게이션 : 한꺼풀 한꺼풀 벗기면 뒤로가기가 되는 거 1) 스..

3일차 - 1 (리액트 네이티브, Expo, 클라이언트, VS code 터미널 문제해결)

리액트 네이티브 1. Javascript로 만들 수 있다 2. 단, 앱 개발 중 안드로이드나 IOS 코드를 알아야 한다. 3. 안드로이드와 IOS 코드를 쓰지 않고 리액트 네이티브로만 만들 수 있도록 도와주는 것 >> Expo Expo 1. node.js 와 npm : 리액트를 사용할 때 유용한 기능들을 가져와 사용하는데 씀 2. Yarn : js 도구를 효율적으로 설치하는 애 >> cmd창에서 npm install -g yarn 치면됨 (npm을 사용하여 install하는데 컴퓨터 전역적으로(-g) yarn 설치) 3. 도구상자(패키지) 설치 : cmd에서 expo tools를 사용할 수 있게해줌. npm install -g expo-cli 4. cmd에서 expo login : expo login -..