[TIL] 내일배움캠프 React 과정 2022.12.31

Today I Learned

• React Native Firebase와 연결하기

 

---

React Native에서 Firebase 데이터 가져오기

// firebaseConfig.js

import { initializeApp } from 'firebase/app';

// Optionally import the services that you want to use
// import {...} from "firebase/auth";
// import {...} from "firebase/database";
// import {...} from "firebase/firestore";
// import {...} from "firebase/functions";
// import {...} from "firebase/storage";

// Initialize Firebase
const firebaseConfig = {
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
};

const app = initializeApp(firebaseConfig);

일단 expo 공식 문서를 참고해서 firebase를 연결했는데 이것만으로는 firestore데이터를 가져올 수 없었다. 계속 에러가 메시지가 떴는데 'db'를 찾을 수 없다는 것이었다.

 

const db = getFirestore(app);
export {db};

그래서 firebaseConfig.js 파일 하단에 db를 export하는 코드 두 줄을 추가했다.

 

import { db } from './firebaseConfig';

그리고 app.js에서 db를 import해야 한다.

 

import { getDocs, collection } from 'firebase/firestore';
import { db } from './firebaseConfig';

// firebase에서 데이터 가져오기
const fire = async () => {
    const docRef = collection(db, "todos");
    const docSnap = await getDocs(docRef);

    docSnap.forEach((doc) => console.log(doc.data()));
};

그리고 엄청난 시행착오 끝에 비동기 함수로 firestore에 테스트로 저장해 둔 데이터를 불러오는 데 성공했다. 주의할 점은 getDoc이 아니라 getDocs를 사용해야 한다는 것! 그리고 데이터를 불러오고 싶다면 .data()를 실행해야 한다.

 

근데 데이터를 불러와서 콘솔로 찍는 것 까지는 성공했는데 가져온 데이터를 어떤 식으로 저장해서 어떤 방식으로 화면에 뿌려줘야 할지를 모르겠다.

 

firebaseConfig.js 코드 출처 https://docs.expo.dev/guides/using-firebase/

 

firebase 관련 참고하면 좋은 블로그 링크

https://firebase.google.com/docs/firestore/quickstart?hl=ko&authuser=0#web-version-9

https://kyounghwan01.github.io/blog/etc/firebase/#firestore-database-crud

https://velog.io/@khy226/Firestore-알아보기#데이터-생성

 

 

React Native에서 Firestore에 데이터 추가하기

const neWTodo = {
    id: Date.now(),
    text,
    isDone: false,
    isEdit: false,
    category
};

await addDoc(collection(db, "todos"), neWTodo);

데이터 추가는 굉장히 간단하다. 코드 한 줄이면 된다!

 

---

Programmers 문제 풀기

점의 위치 구하기

나의 풀이

function solution(dot) {
    if (dot[0] > 0 && dot[1] > 0) return 1;
    else if (dot[0] < 0 && dot[1] > 0) return 2;
    else if (dot[0] < 0 && dot[1] < 0) return 3;
    else return 4;
}

 

 

다른 사람의 풀이

function solution(dot) {
    return dot[0] > 0 ? dot[1] > 0 ? 1 : 4 : dot[1] > 0 ? 2 : 3;
}

삼항연산자를 이용해서 풀었다. dot[0]이 양수이고 dot[1]도 양수이면 1을 return 하고, dot[0]이 양수이지만 dot[1]이 음수라면 4를 return한다. 근데 이렇게 풀면 뭐가 삼항이 어디까지 속하는지 너무 헷갈리는 거 같다.

 

---

회고

이제 내일이면 2023년이다! 올해 내 인생에서 정말 큰 도전이었던 '개발자 취업 도전하기'가 순조롭게 진행되고 있는 듯 하다. 내 생각보다도 동료들과 재밌게 코딩을 배우고 있다. 마음 맞는 팀원들과 작은 프로젝트도 진행하고 있는데 결과물이 어떻게 나올지 굉장히 기대가 된다. 

 

대학을 졸업하고 나서 하고 싶은 일이 없다는 게 가장 큰 고민이었고, 목표가 없으니까 뭘 해야 될지 모르겠어서 무기력하게 시간을 흘려보내고 있었다. 그런데 부트캠프에 들어오고 코딩 공부라는 목표가 생긴 뒤에는 훨씬 열정적이고 생산적인 시간을 보내고 있고, 하루하루를 효율적으로 사용하기 위해 노력하고 있다. 무엇보다도 내가 진심으로 재밌어서 할 수 있는, 무언가 삶의 목표를 찾았다는 점이 이번 해에 가장 큰 수확인 거 같다. 나는 목표가 있으면 그것을 이루기 위해 노력할 줄 아는 사람이었다는 점도 새삼 깨달았다.

 

2023년에는 모두가 건강하고, 노력한 만큼 좋은 결과를 얻을 수 있는 한 해가 되었으면 좋겠다. 새해 복 많이 받으세요!!