어제에 이어서 회원가입 로직을 구현하고 유효성 검사를 해줘서 사용자가 꼼꼼하게 회원가입을 할 수 있게 해준다. 먼저 utils.js 파일을 따로 만들어줘서 유효성 검사에 필요한 Regex를 만들어준다. 위에 보이는 Dimensions는 리액트 네이티브에서 제공하는 기능인데, 기기마다 화면 크기가 천차만별인데 스크린 화면 설정을 도와준다 코딩을 하시는 분들은 Alret로 에러를 알려주는데 내가 생각하기에는 모바일에서는 알림창이 뜨지않고 글씨로 표현해주는 것이 사용자가 보기에 더 적합하다고 생각했다.

보통 회원가입을 하면 유효성 검사가 되어있는 경우를 많이 본다. 사용자의 회원가입을 원활하게 하기 위해 유효성 검사를 해보자 🔘우선, TextInput의 value 값을 useState로 관리해준다. 총 7개의 상태가 나온다. 🔘 email = 이메일 입력칸 🔘* password = 비밀번호 입력칸* 🔘 checkPassword = 비밀번호 재확인 🔘 nickname = 닉네임 입력칸 🔘 secureText = 눈 아이콘 모양(안보이던 비밀번호를 보이게 해줌) 🔘 touchEye = 눈 아이콘 🔘 warningText = 불일치 경고 문구 UI 로직은 바로 전에 쓴 벨로그를 보면 된다. �

파이어베이스에서 로그인을 쉽게 해주는 기능이 있다. AuthService 중 하나인 createUserWithEmailAndPassword를 이용하여 email, password를 쉽게 구현할 수 있다. emotion을 사용했기에 태그 네임이 자유롭다. UI 로직은 이렇다. 이메일 입력칸, 비밀번호, 비밀번호 확인, 닉네임, 회원가입 버튼, 로그인 화면으로 이동 라우트 **Sign Up 버튼에 handleSignUp 함수를 실행시켜줘서 앞서 말했듯이 createUserWithEma

회원가입을 하기 위해서는 파이어베이스에서 제공하는 Authentication을 이용하면 쉽게 할 수 있다. 먼저, 파이어베이스 홈페이지에서 프로젝트를 생성 후 Authentication 을 시작해준다. 시작하기를 누르면 조금의 시간이 흐른 후 이러한 화면이 나온다. 나는 이메일/비밀번호만 이용 할 것이기 때문에 첫번째 것만 클린한다. ![](https://velog.velcdn.com/images/kminu0819/post/17bf924d-120a-4798-a452-cb80d6eee127/image.png

백엔드를 대신 해줄 파이어베이스를 이용해서 간단하게 로그인, 회원가입 기능을 구현해보자🙂🙂 > Native 환경은 Expo go를 이용한다. > screen 폴더를 생성하고 그 안에 Login.jsx 파일을 만들어준다. > 로그인과 회원가입을 해줄 간단한 로직을 구현한다. > **다음은, onPress에 대한 함수와 파이어베이스의 Auth를 이용해서 구현해본다. 먼저, 파이어베이스 설정을 해줘야 한다**. > firebase.js 파일을 만들어줘서 설정 코드를 넣어주자 ![](http

추가하기 Add Todo ➕ > setTodos를 이용해서 이전 값에 newTodo를 추가해준다. 삭제하기 Delete Todo ➖ > id를 인자로 받아 filter함수를 통해 다른 값을 걸러서 필터 해준다. 수정하기 Edit Todo 🖍 > 마찬가지로 id를 인자로 받아 같은 값을 findIndex를 통해서 확인 후 text를 변경하게 해준다.

React Native 태크 종류에 대해서 알아보자😀 React Native에서 사용하는 UI 컴포넌트들은 기본적으로 import를 통해서 받아와야 한다. > ** 위쪽 코드를 살펴보면 일반적으로 React에서는 못보던 것들이 있다. 5종류의 코드를 하나씩 살펴보자** View > div 태그의 역할을 한다. 기본적으로 flex box 속성을 가지고 있다. Text > p 태그 역할을 한다. 문자열 Image > TextInput > input 속성을 가지고 있다. onChangeText, onPress, value 등 ScrollView > 기본적으로 페이지가 오버 됐을때 브라우저와 달리 스크롤이 생기지 않기 때문에 scrollView 태그로 감싸줘야한다. 추가적으로 KeyboardAvoidingView ** 키보드 창이 나와서 키보드를 입력할때 자

React Native는 무엇일까🤔 > React Native는 React를 사용해서 iOS와 Android 앱을 개발할 수 있는 프레임워크이다.(리액트로 모바일앱을 만들 수 있는 프레임워크) react Native로 만들어진 유명한 서비스들 Expo go로 시작하기 특징 > #### 쉬운 셋업 가능 native 언어는 수정 불가능 👉 Cli를 통해 모든 것을 직접 설치하면 native 언어 수정 가능. 시작하기 >#### ios 앱스토어 or google 플레이스토어에서 Expo go 앱 설치 명령어 npx create-expo-app 파일이름을 통해 환경세팅을 해준다.