KEEP CODING

ImagePicker ImagePicker는 휴대폰 라이브러리에서 이미지와 비디오를 선택하거나 카메라로 사진을 찍기 위한 시스템 UI에 대한 액세스를 제공한다. ImagePicker 설치하기 expo install expo-image-picker 콘솔을 통해 다운받는다. Image component를 만든다. 프로필 이미지를 띄워주고, 아래의 작은 버튼을 누르면 ImagePicker를 통해 사진을 입력받는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 // Image.js import React from "react"; import * as ImagePicker from "expo-image-..

파이어베이스에서 createUserWithEmailAndPassword(auth, email, password)를 사용해 회원가입을 진행한다. 회원 가입에는 email과 password만 입력받도록 되어있다. 이름과 사진 정보를 profile에 저장하려면 가입을 진행한 후 updateProfile()을 사용해야 한다. 프로필사진은 firebase storage에 저장해서 사용하고, 나머지는 string으로 된 정보를 저장하면 된다. 회원가입시 이름, email, password, 프로필사진 정보를 모두 입력받아 저장하기 위해서 아래와 같은 순서로 회원가입을 진행한다. 1. 이름, email, password, 프로필사진 입력받는다 2. email, password로 유저를 만든다. 3. 프로필사진을 fi..

위와 같은 로그인 화면을 만들었다. 이메일과 비밀번호를 입력받아 인증받는다. 로그인과 관련해 몇 가지 규칙을 만들어 적용한다. 1. 이메일 형식에 맞는 ID를 입력해야 한다. 2. 공백은 허용되지 않는다. 3. 적절한 ID와 비밀번호를 입력한 경우에만 Sign in 버튼을 활성화시킨다. 1, 2. 이메일 형식 확인, 공백 제거 1 2 3 4 5 6 7 8 9 10 11 12 13 // util.js 에 따로 작성한다 // email형식 확인 export const validateEmail = email => { const regex = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/; return re..

Firebase를 이용하면 가입된 사용자 인증도 받을 수 있다. 파이어베이스에 임시계정 추가하기 파이어베이스 프로젝트의 Authenification 에 들어가서 임시로 사용할 사용자를 추가한다. (ID, 비밀번호 임의로 정해주면 된다) Firebase 인증 시작하기 react native에서 firebase를 사용하기 위해서는 firebase를 설치하고, firebase 앱 객체를 만들어야 한다 1. firebase를 설치하기 npm install firebase 2. 앱에서 Firebase를 초기화하고 Firebase 앱 객체를 만든다. import { initializeApp } from 'firebase/app'; import config from "../firebase.json"; const ap..

firebase firebase는 google에서 제공하는 모바일 애플리케이션 개발 플랫폼이다. 분석, 인증, 데이터베이스, 구성 설정, 파일 저장, 푸시 메시지 등 많은 기능을 제공한다. 모바일 애플리케이션 개발자는 파이어베이스를 사용하면 사용자경험(UX)개발에 더 집중할 수 있게 된다. firebase 시작하기 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 구글에서 제공하는 서비스로, 구글 아이디로 로그인하면 무료로 사용할 수 있다. 프로젝트를 만든다. 원하는 이름으로 설정해 프로젝트를 생성한다. Storage 사용하기 파이어..

"webpack"의 버전이 맞지 않는다며 아예 프로젝트가 실행되지 않는 경우가 있다. The react-scripts package provided by Create React App requires a dependency: "webpack": "4.41.5" Don't try to install it manually: your package manager does it automatically. However, a different version of webpack was detected higher up in the tree: 콘솔에 나온 대로 여러가지 방법을 사용해봤지만 해결이 안됐다. 그러던 중 인터넷에서 다른 사람이 해결했다는 것을 보고 따라했는데 해결됐다. 내가 생성한 프로젝트보다 상위 경로에..

Javascript에서 물음표를 사용하는데 왜 사용하는지 몰라서 전체적인 사용법에 대해 찾아봤다. Javascript에서의 ?(물음표) 1. 삼항 연산자 (Ternary Operator) 2. 선택적 연결 (Optional Chaining) 3. 무효화 합체 (Nullish Coalescing) 1. 삼항 연산자 (Ternary Operator / ? : ) 삼항 연산자는 if ... else를 대체하는 연산자이다. 첫 번째 항의 Condition이 True이면 두 번째 항을 실행하고, False이면 세 번째 항을 실행한다. if ... else로 작성한다면 아래와 같다. 1 2 3 4 5 if(Condition) { // True일 경우 실행 } else { // False일 경우 실행 } cs 삼항연..

Context Context를 사용하는 이유는 무엇일까? 어떤 컴포넌트에서든지 상관없이 공통된 자료를 사용하기 위함이다. Context를 통해서는 App 전체적으로 적용되어야 할 색상이나, 글씨체, size등을 공유한다. Styled Component를 사용하면 theme를 받아서 아래와 같이 사용할 수 있다. 1 2 3 const Container = styled.View` background-color: ${({ theme }) => theme.background}; `; Colored by Color Scripter cs theme.background로 어디에서나 동일한 배경색을 사용할 수 있다. Context를 사용해 Component의 style설정하기 그런데 Component에 style로 직..

React를 사용하다보면 여러 컴포넌트를 거쳐서 자료를 전달해야 하거나, 동시에 같은 자료를 사용해야 하는 경우가 생긴다. 최상위 컴포넌트에서 여러 컴포넌트를 거쳐서 자료를 전달하는 방법도 있지만 context API를 사용하면 더 쉽게 관리할 수 있다. 전역으로 상태관리를 더 쉽게 할 수 있다. Context관련 컴포넌트는 크게 두 개로 나눌 수 있다. Provider Component Context의 변화를 하위 컴포넌트에 알린다 Consumer Component 부모 Component 중 가장 가까운 Provider가 전달하는 데이터를 받아서 이용한다. 사용방법 import { createContext } from 'react'; context 사용을 위해 react에서 import한다. const..

useEffect useEffect는 컴포넌트가 랜더링 될 때 마다 원하는 동작을 수행하는 명령이다. useEffect( 함수, 배열 ); 함수 : 원하는 동작 배열 : 검사하고자 하는 특정 값, 배열 배열의 내용 빈 배열일 경우 - 마운트 될 때만 앞의 함수를 수행한다. 1 2 3 import React, { useEffect } from 'react'; useEffect(() => { console.log("mount!")}, []); cs 마운트 될 때 마다 console에 "mount!"라고 알려준다. 배열의 값을 집어넣는 경우 보통 props나 state의 변화를 감지하기 위해 배열안에 집어넣는다. (state를 배열에 넣으면 state값이 변경되어 다시 렌더링 할 때마다 앞의 함수가 실행된다...