리액트네이티브 6

[프로젝트] 꽃을 분류하고 그림으로 변환하는 애플리케이션_🌸 / Flooming

[Project_Flooming] 🌸 프로젝트 소개 🌼 소개 : 딥러닝 모델을 활용한 꽃 사진 분류, 꽃 그림 생성 모바일 앱 🌼 컨셉 : 꽃에 대한 정보 (이름, 꽃말 등)을 알려주고 그림으로 변환해 주는 애플리케이션 🌼 기능 사용자가 꽃 사진을 촬영 or 갤러리에서 불러오는 경우에 어떤 꽃인지 분류하여 이름과 꽃말을 알려줌 사용자의 꽃 사진을 그림으로 변환 변환된 그림을 개인 디바이스에 저장 '전시관'이라는 커뮤니티에 comment와 함께 업로드 다른 사용자의 꽃 사진 및 그림 관람 가능 전시관 신고 기능 🌼 개발 기간 : 약 7주 🌸 사용 기술 🌼 front Android : JavaScript, React-Native, expo-cli, Axios iOS : Swift, Alamofire, Man..

PROJECT 2022.09.16

[리액트 네이티브] 네트워크 확인하기 / NetInfo, Expo

[React Native_ NetInfo] 네트워크 연결을 확인하는 방법에 대해 알아보자 1. 라이브러리 설치 expo install '@react-native-community/netinfo' 2. 인터넷 연결 여부 확인 (재사용 가능) `````` import NetInfo from '@react-native-community/netinfo'; `````` const unsubscribe = NetInfo.addEventListener(state => { console.log(state.isConnected); return (state.isConnected); }); unsubscribe(); 💡 state.isConnected : boolean (true / false) 💡 state.type : ..

[리액트네이티브] 폰트 적용하기_✍ / 로컬 폰트 적용, expo, 안드로이드

[React Native_ Font] 리액트 네이티브 컴포넌트에 로컬 폰트 적용하는 방법에 대해 알아보자 1. expo-font 설치하기 expo install expo-font 2. 원하는 폰트 다운받기 💡 원하는 폰트를 assets 폴더에 fonts 폴더에 다운받는다. 💡 개인적으로 사용한 폰트는 무료 폰트 사이트인 산돌구름에서 다운받았습니다. 👉 https://www.sandollcloud.com/ 산돌구름 다양한 언어와 폰트를 내가 원하는 대로! 한글, 영문, 중국어 등 19,000여종의 폰트로 더 완성도 높은 디자인을 경험해보세요. www.sandollcloud.com:443 3. 폰트 사용하기 import React, { useState, useEffect } from 'react'; impo..

[리액트네이티브] ImagePicker 데이터 서버로 보내기 / expo, axios, FormData, 안드로이드

[React Native_image axios] ImagePicker로 받아온 이미지 데이터를 서버로 보내는 방법을 알아보자 1. ImagePicker 사진 가져오기 expo ImagePicker library를 이용하여 데이터를 받아오는 방법은 지난 포스팅에서 소개했다. ImagePicker 사용 방법이 궁금하다면 포스팅을 참고하면 될 것이다. 👉 [리액트네이티브] 갤러리에서 사진 가져오기-ImagePicker 2. axios import axios from 'axios'; const data = { key: value, } axios.post('url', data} .then(response => console.log) // 성공한 경우 .catch(error => console.log) // err..

[리액트네이티브] 갤러리에서 사진 가져오기_📷 / expo_ImagePicker , 안드로이드

[React Native_expo-image-picker] 갤러리에서 사진 가져오는 방법에 대해 알아보자 1. ImagePicker 설치하기 expo install expo-image-picker 2. 접근 권한 허용 const [galleryPermission, setGalleryPermission] = ImagePicker.useMediaLibraryPermissions(); // 권한이 없는경우 허용 여부 요청 if (!galleryPermission?.granted) { const permission = setGalleryPermission(); // 허용하지 않는 경우 종료 if(!permission.granted) { return null; } }; 💡 useMediaLibraryPermiss..

[리액트 네이티브] EXPO CLI 설치하기

[React Native_ EXPO CLI] 👉React Native 공식문서 바로가기👈 Introduction · React Native This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. reactnative.dev ❔ React Native - 자바스크립트를 사용하여 모바일 어플리케이션을 개발할 수 있는 프레임워크 - iOS와 Android 어플리케이션 동시에 개발 가능 - 자바스크립트로 작성된 코드를 네이티브 코드로 렌더링 - Web 과는 조금 차이가 있음 ❔expo CLI vs React-Native CLI 1. expo CLI..