유저 피드백을 받기 위해 팀원들 모두가 dev브랜치에서 작업했던 것을 main으로 push해주고 vercel을 통해 배포를 해줬다. 많은 피드백이 올 것이라 예상했지만, 뜻 밖의 경우에서 피드백이 왔다. 로컬에서는 한번도 에러가 뜨지 않았던 소셜로그인에서 문제가 나타난 것이다. 로컬에서는 분명히 잘되는데 왜 배포된 사이트에서는 안될까 코드를 보고 고민했지만 답을 찾을 수 없어, 구글에 검색한 결과 나와 같은 상황을 겪은 분의 글을 볼 수 있었다. 에러의 원인은 파이어베이스에서 도메인 주소를 등록해줘야 소셜로그인이 가능했던 것이다. > ### Authentication => settings => 승인된 도메인 => 도메인 추가 이 순서로만 해주면 배포된 사이트에서도 기존 로컬에서와 하는 것과 똑같이 사용할 수 있다.

우리가 기획한 것은 모각코 ( 모여서 각자 코딩 )에서 뜻을 반영해 모코라는 이름으로 사이트를 기획했다. 주 기능은 매칭기능으로써 코딩을 하려는 사람이 대상이다. 코딩을 하려는데 주변에 마땅히 같이 할 사람이 없을 시 이 사이트를 유용하게 사용할 수 있는데, 프로젝트, 스터디 등 코딩 관련되어서 본인이 모집하고 싶은 분야를 정해서 방을 만들 수 있다. 👧🧒👦👩💻 🔸방장이 방을 생성하면 팀 전용 페이지가 생성이 된다. 🔸방에 들어오고자 하는 팀원은 방에 신청을 하면 된다. ![](h

Firebase에서 Auth 서비스로 간편하게 소셜 로그인을 할 수 있게 제공해준다. 그 중 Google과 GitHub로 로그인을 할 수 있는 서비스를 기획하였다. 기존 깃헙 로그인 코드 기존 구글 로그인 코드 ⛔⛔ FireBase에서 제공하는 서비스로 간편하게 로그인 할 수 있지만, 문제는 이게 회원가입 따로, 로그인 따로가 아니라 동시에 하는 것이기 때문에 로그인 할 때마다 초기화 된 정보가 DB에 들어가는 것이다 ⭐⭐ 해결방법 Auth 서비스에 providerId가 구글인지, 깃헙인지 알 수 있어서, 그것을 이용해보기로 했다. ⭐**로그아웃 할 때 기존에 있던 정보를 새로운 google과 github이라는 새로운 컬렉션에 해준다

💻💻 실시간 채팅 기능을 맡게 되어 구글링도 해보고, 유튜브도 검색해 본 결과 많은 분들이 FireBase의 realtimebase를 이용해서 실시간 채팅을 구현한 것을 볼 수 있었다. 하지만 내가 realtimebase에서 firestore로 바꾼 이유는 이것이다. > 1. 대부분 옛날 글들이었다. > > 2. firebase 문서에서도 realtimebase보다 firestore에 대해 더 자세하게 나와있다. > > * 3. 비교적 최신버전이다.* > > 4. 용량도 훨씬 크게 사용할 수 있다. > > 5. collection 관리를 쉽게 할 수 있다 메시지 전송 📣📣 > > 메시지 화면에 보여주기 🔔🔔 > 메시지 데이터 받아오기 > ** 화면에 보여주기** >

댓글 등록을 하고 싶을때는 파이버에이스의 데이터 추가할 수 있는 API를 이용해야 한다. 그중에서 나는 addDoc( ) 이라는 함수를 사용해서 내가 원하는 key : value 값을 데이터 베이스에 객체로 저장해줄 것이다. 댓글 등록 onClick 이벤트로 AddCommentButton 함수를 실행시켜 준다 ** 내가 필요한 정보를 newComment 라는 변수를 만들어 준 뒤, (뒤에 타입은 일단 신경X)** ![](https://velog.velcdn.com/images/kminu0819/po

어제에 이어서 회원가입 로직을 구현하고 유효성 검사를 해줘서 사용자가 꼼꼼하게 회원가입을 할 수 있게 해준다. 먼저 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

댓글 창에 수정, 삭제 부분을 구현했다. > #### 수정 부분 > > #### 삭제 부분 >

오늘은 firebase에서 제공하는 데이터베이스를 이용하여 button을 클릭했을때 데이터 정보들을 저장하는 것을 해봤다. 기본적으로 firebase를 이용하기 위해서는 firebase에서 제공하는 api를 import를 해야한다. > import를 통하여 User Id, 수정, 삭제, 업데이트 등 각종 기능을 구현하게 해준다. > Html에서 button onclick = save_list(event); 라는 함수을 실행시켜서 위와 같이 text, creatAt, creatorId, profileImg, nickname을 저장할 수 있다. 만약 에러가 뜰 경우 catch로 error를 잡아서 alert으로 알려주게 했다.

🧯Firebase🧯 ❗글로벌 앱을 위해 빌드된 NoSQL 데이터베이스 Cloud Firestore는 글로벌 규모의 모바일 및 웹 앱용 데이터를 쉽게 저장, 동기화, 쿼리할 수 있게 해주는 NoSQL 문서 데이터베이스이다. ❗원하는 대로 데이터 쿼리 및 구조화 컬렉션 및 문서를 사용하여 데이터를 쉽게 구조화할 수 있다. 계층 구조를 만들어 관련 데이터를 저장하고 명시적인 쿼리를 사용해서 필요한 데이터를 쉽게 검색할 수 있다. 모든 쿼리는 데이터 세트가 아닌 결과 세트 크기에 맞게 확장되므로 첫 날부터 앱 확장 준비가 완료된다. ❗진정한 서버리스 앱 빌드 Cloud Firestore에는 사용자가 직접 서버를 구성할 필요 없이 데이터베이스에 액세스할 수 있도록 모바일 및 웹 SDK와 종합적인 보안 규칙 세트가 포함되어 있다. 서버리스 컴퓨팅 제품인 Cloud Functions를 사용하면 데이터베이스의 데이터 변화에 대응하는 호스팅된