양갱의 개발 블로그

종합프로젝트에서 ​ 엑스포를 사용하고 ​ firebase와 react native 연동하는 부분이 있었다 ​ 적어놔야 할 거 같아서 입력 ​ ​ 일단 파이어베이스와 연동하려면 ​ install 해야하는 부분이 있다 npm install --save @react-native-firebase/app npm install @react-native-firebase/database npm install @react-native-firebase/firestore 이렇게 3가지를 install해야한다 ​ yarn을 사용하면 yarn add @react-native-firebase/app yarn add @react-native-firebase/database yarn add @react-native-firebase/..

일단은 firebase와 연동 했던 부분의 ​ 코드를 가져와야겠죠? ​ firebaseConfig.js에 내 데이터베이스와 연동 되어 있을 것이다 import { db } from './firebaseConfig'; 그리고 해당 데이터 베이스에 있는 값을 읽어 와야할 것이다 //firestor 연동 const [users, setUsers] = useState(); const readfromDB = async () => { try { const data = await getDocs(collection(db, "Station")) setUsers(data.docs.map(doc => ({ ...doc.data(), id: doc.id }))) users?.map((row, idx) => { console...

firebase의 storage에 이미지를 업로드 하고 이미지의 링크로 데이터 베이스에 저장하려고 한다.. ​ 그 부분은 교수님께서 이미 하셨다 그래서 바로 바꿨는데 ​ 지금 직접 어플에서 찍은 것은 file://~~~~~.jpg로 되어 있다ㅏ ​ 이 파일 데이터 타입은 로컬에서 밖에 안되니까 storage에 올려 데이터를 가져올 것이다 ​ 그래서 실행했지만 storage에서는 읽을 수 없는 파일이라고 나왔다 ​ 이런 점을 보완하기 위해 ​ 교수님꼐서 보여주셨던 앨범에서 이미지를 업로드 하는 식을 찾아보려고 한다! 근데 업로드를 안해뒀길래ㅋㅎㅋㅎ ​ ​ ​ 참고 https://joylee-developer.tistory.com/172 [React Native] ImagePicker 사용해 사진 업로드하기..

오늘은 헤커톤 가기 전 웹 프로젝트를 생성해 볼건데 웹은 react native하기 전에 먼저 접했었다! 근데 지금 거의 까먹으려고 해서 다시 시도하려고 한다..! 왜냐하면 헤커톤에 나가면ㄴ 어플보다는 웹페이지를 더 많이 만들것 같아서이다!! 그리고 백도 공부해야하니까ㅏ 웹페이지도 함께 만들면서 일주일 개인 프로젝트를 진행할 예정이다!! 1. vscode 설치하기 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applicati..

일단 처음이기 때문에 니콜라스 쌤 수업을 들으면서 진행하려고 한다! #2.8 Weather (15:32) – 노마드 코더 Nomad Coders All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 이 영상을 보면서 따라했다! 필수!! expo install expo-location import * as Location from "expo-location"; import { StatusBar } from "expo-status-bar"; import React, { useEffect, useState } from "react"; import { View, Text, Dimensions, ActivityIndicat..

https://github.com/iamport/iamport-react-example/blob/master/manuals/CERTIFICATION.md GitHub - iamport/iamport-react-example: 리액트 환경에서 아임포트 결제 및 휴대폰 본인인증 연동을 위한 리액트 환경에서 아임포트 결제 및 휴대폰 본인인증 연동을 위한 예제입니다. Contribute to iamport/iamport-react-example development by creating an account on GitHub. github.com https://www.npmjs.com/package/iamport-react-native iamport-react-native 리액트 네이티브용 아임포트 결제/본인인증..

로그인 회원가입 UI ​ 팀원들과 같이 ui를 제작 ​ https://balsamiq.com/ react native 되면 바로 코드를 제작하려고 했는데 ​ 전 팀플이 있어서 ​ node 버전 문제로 다음으로 미뤘다 ​ UI ​ - 로그인 UI ​ 로그인과 비밀번호를 입력하면 로그인 성공 카카오톡, 네이버로 로그인 만약에 카카오톡이랑 네이버로 회원가입을 안했으면 회원가입 창으로 이동 카카오톡이랑 네이버 소셜 로그인하는 부분은 따로 포스팅하겠움!! ​ - 회원가입 아이디는 이메일 형식으로 입력 다른 부분은 모두 동일 아이디와 닉네임은 중복 검사 주소는 찾기로 찾아봄 전화번호는 인증 ​ 4,5번은 구현가능할지 모르겠다 주소와 전화번호로 인증하기가 가능한지 찾아봐함 ​ ​ ​ 지금!! >>>>다음 포스팅에서!..

expo 설치를 할건데 책은 cli라 유투브로 보기로 했다! https://www.youtube.com/watch?v=TkJtqgd1mKM 1.리액트 네이티브 페이지로 이동 https://reactnative.dev/docs/environment-setup 해당 페이지 setting페이지로 넘어간다 ​ ​ 2. expo와 react native CLI를 골라서 설치할 수 있다 cmd창에서 프로젝트를 생성할 수 있다 ​ AwesomeProject라는 이름을 가진 expo 파일을 만든다! 라는 뜻이다 ​ 나는 최종 프로젝트 이기도 하고 나중에 깃허브로 다같이 파일명이 어차피 바뀔 거니까 Final로 적기로 했다! ​ 전에 했던 react 파일과 충돌이 날까봐 무섭긴 한데 그냥하기로 했,,다! ​ 3. npx..

리액트 기반으로 앱을 개발하려면 react native를 사용할 수 있는데 대부분 사람들은 안드로이드 스튜디오를 사용한다 ​ 하지만 최종 프로젝트로는 expo를 사용하여 react-native로 개발한다ㅏ ​ react native를 개발하기 전에 프로젝트를 생성하는 것부터 시작함! ​ ​ 그전에 ​ expo cli와 react native cli가 있다 ​ 책을 보고 react native를 보면 cli를 설치했지만 유투브 강좌에서는 expo cli를 설치했다 ​ 이점에서 둘의 차이점을 살펴보게 되었다! ​ ​ Expo CLI react native 개발을 개발자가 쉽게 할 수 있도록 도와주는 툴이다 expo는 기본적인 설정이 다 구성되어 있으며 native 파일을 숨겨놓고 관리해줌 Expo CLI R..