React Native(14)
-
[RN 5-1 프로젝트 준비]
네비게이션 앱 리소스(앱 아이콘/스플래시 스크린 이미지) 프로젝트 생성 react-native init MovieApp 타입 스크립트, 스타일 컴포넌트, 바벨 플러그인 설치 cd MovieApp/ npm install --save styled-components npm install --save-dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import IDE 를 실행하여 프로젝트 오픈하여 타입스크립트 생성 및 설정 : tsconfig.json { "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esM..
2020.02.25 -
[부록 2] RN APK 파일 추출
1. 폴더 생성 android/app/src/main/assets/ 2. 해당 프로젝트 폴더 내에서 명령어 실행 react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 3. 안드로이드 스튜디오에서 프로젝트의 안드로이드 폴더 열기 Build > Build APK 빌드실행 후 /android/app/build/outputs/apk/debug/app-debug.apk 위의 생성된 apk 파일을 스마트폰 단말기에서 실행
2020.02.25 -
[RN 4-2 프로젝트 개발]
현재 위치 정보를 가져와 해당 위치의 날씨와 온도를 표시 1) Weather API : Fetch API 사용해서 앱 외부의 날씨 데이터 가지고 오는 API (*) 회원가입 필수 - 가입 후 발송된 이메일 확인 후 인증 https://openweathermap.org/api Weather API - OpenWeatherMap We have combined Weather services and Satellite imagery in a simple and fast Agro API. We have also launched a Dashboard for it - it is a visual service where you can easily work with satellite, weather and historic..
2020.02.24 -
[RN 4-1 프로젝트 준비]
날씨 앱 프로젝트 생성 react-native init WeatherApp 타입 스크립트, 스타일 컴포넌트, 바벨 플러그인 설치 cd WeatherApp/ npm install --save styled-components npm install --save-dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import IDE 를 실행하여 프로젝트 오픈하여 타입스크립트 생성 및 설정 : tsconfig.json 더보기 { "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true..
2020.02.24 -
[부록 1] RN 에러 발생 해결법
Error: EPERM: operation not permitted 1. CMD 관리자 모드 실행 후 창 닫기 npm config edit 2. CMD 일반사용자 모드 실행 npm -v
2020.02.22 -
[RN 3-4 프로젝트 개발 3]
11) AddTodo 컴포넌트 src/Screens/Todo/AddTodo/ index.tsx 더보기 import React, { useState } from 'react'; import AddButton from './AddButton'; import TodoInput from './TodoInput'; interface Props {} const AddTodo = ({ }: Props) => { const [showInput, setShowInput] = useState(false); return ( setShowInput(true)} /> {showInput && setShowInput(false)} />} ); }; export default AddTodo; 12) AddButton 컴포넌트 sr..
2020.02.22