[항해99 19일차] 2022.03.25 TIL /숙련주차 과제시작

기본주차가 끝나고 숙련 주차가 시작되었다.

나 기본도 안된 것 같은데.. 숙련이라니

이번에는 과제 소스코드 참조만 하고..

나 스스로 코드를 작성하도록 노력해야겠다 !!!

 

<오늘 할 일>

1. 숙련 과제 들여다보기

2. 일단 구조 만들어서 화면에 뿌리기 !

3. 파이어베이스 강의 다시 듣기 

4. 알고리즘 1문제 풀기

 

숙련 과제는 이러하다.

 

게시글 목록 페이지

• 게시글 목록을 화면에 그리기 (각각 뷰는 카드 뷰로 만들기)
• 게시글 내의 예시는 파란 글씨로 보여주기
• 게시글 목록을 리덕스에서 관리하기
• 게시글 목록을 파이어스토어에서 가져오기

게시글 작성 페이지

• 게시글 작성에 필요한 input 3개를 ref로 관리하기
• 작성한 게시글을 리덕스 내 게시글 목록에 추가하기
• 게시글 목록을 파이어스토어에 저장하기

+ 추가로 해보면 좋을 기능 (필수 ❌)

• 무한 스크롤
• 게시글 수정

 

정말 정말 궁금했던 무한 스크롤 구현이다 !!!

근데..난 필수요구 사항도 하기 벅차다.ㅠㅠ

 

뚜둥..우와.. 내가 할 수 있을까 ?

해보자 일단 !!!

과제 예시 사이트

컴포넌트를 분리해서 헤더까지는 만들었다..

나도 도트로.. 하고싶은데 ? 이미지 추가해야겠다!!

 

차츰 차츰.. 채워가보자..배운것을 토대로 ㅠㅠ

리덕스랑 파이어베이스 어렵던데 다시 들어봐야겠당.

 

만들다가 멘붕와서 결국 다시 2-4 강의 듣는중이다.

듣다가 팀원분이 리덕스 쉽게 알려주는 유튭 주소 알려주셔서 보는중이다 !

 

리덕스를 쓰는 이유 

1. props 문법 귀찮을때

2. state 변경 관리할 때

 

파이어베이스부터 다시 공부하자!

이러고 4-7부터 찬찬히 보았다.

우선 파이어베이스...에 있는 데이터를 사용하기 위해선..

파이어베이스.js파일을 만든다.

그리고 안에 아래 내용을 복붙해주고, 

 

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  개인키
};
initializeApp(firebaseConfig);

export const db = getFirestore();

 

 

저 db를 사용할 곳에 임포트해준다 !

어떻게 ?이렇게 ~

import {db} from "./firebase";
import {collection,getDoc, getDocs} from "firebase/firestore";

React.useEffect(()=>{
    console.log(db)
  },[]);

그리고 콘솔에 찍어보면 데이터를 아주 잘 가져왔다 !!!

데이터를 가지고 오는데에는 순서가 있다.

먼저 컬렉션을 가지고 오는 것이다. !!!

collection(db,"word")//"word" => 컬렉션 이름

그리고 getDocs안에 넣어준다.

이 getDocs안에는 어떤 컬렉션 의미가 들어간다고 한다.

 React.useEffect(()=>{
    console.log(db)
     
    const query =getDocs(collection(db,"word")); //"word" => 컬렉션 이름
  },[]);

이렇게 !!!

하면 컬렉션 안에 있는 모든 정보를 가지고 올 수 있다고 한다.

콘솔에 찍어보면 promise라는게 넘어온다고 한다.

이것을 우리가 어떻게 확인을 할 수가 있을까? ? ?

async await로 확인해줄 수 있다 !!

작업이 끝나고 데이터를 가지고 올때까지 기다리는 아이라고 생각하면 된다.

 

  React.useEffect(async ()=>{
    
     
    const query =await getDocs(collection(db,"word"));
    console.log(query)
  },[]);

쿼리를 찍어보면 데이터가 보기 불편하다. forEach를 사용하면,,

내가 넣었던 데이터를 콘솔에서 볼 수 있게 되었다 !!!!

React.useEffect(async ()=>{
    
     
    const query =await getDocs(collection(db,"word")); //"word" => 콜렉션 이름
    
    query.forEach((doc)=>{
      console.log(doc.id, doc.data());
    })
  },[]);

이제 데이터를 추가할때이다 !!

import {collection,getDoc, getDocs, addDoc} from "firebase/firestore";

임포트에 addDoc을 추가해준다.

 React.useEffect(async ()=>{
    
     
    addDoc(collection(db,"word"),{
      //어떤아이를 추가할래?
      word: "new", 
      desc: "new",
      example:"new"
    }); 
    
  },[]);

이렇게 하면 !!내 파이어베이스에 아주 잘 입력된 것을 확인 할 수 있다.

 

수정할 때 필요한 친구는 updateDoc / doc 이 두가지가 필요하다.

임포트

import {doc,collection,getDoc, getDocs, addDoc, updateDoc} from "firebase/firestore";

React.useEffect(async ()=> { 
    
   const docRef =doc(db, "word", "Wwy9CewKV2c0uHSkJzmL") //수정할 아이 넣는 곳 doc정보
   updateDoc(docRef,{word:"sksksk"})
    
  },[]);

이렇게하면 수정도 할 수 있다 !!!!

이제 삭제하기 !!

import {collection,getDoc, getDocs, addDoc,doc,updateDoc,deleteDoc} from "firebase/firestore";

deleteDoc을 임포트해준다.

React.useEffect(async ()=> { 
    
   const docRef =doc(db, "word", "Wwy9CewKV2c0uHSkJzmL") //수정할 아이 넣는 곳 doc정보
   deleteDoc(docRef)
    
  },[]);

이렇게 데이터가 지워진다 !!!!

두번째로 강의를 들으니 슬슬 이해가 가기 시작한다. 💤

 

강의를 듣고 나의 과제에 옮겼다.ㅠㅠ

와 ㅠㅠ데이터 가져와졌다. 만세 !!!!!!!

 

강의를 여러번 들은 것이..꽤나 효과적이었다 !!!!

이제 저 플러스 버튼 클릭하고,, 단어 추가하는 것도 해봐야지 !

솔직히 리액트 입문주차에는 너무너무 어렵고 생소하고,, 힘들었는데

이해가 되니까 재미있다. 😭  

.. 포기하고 싶었지만, 견딘 보람이 있다.

앞으로 더 어려워지더라도,,더 새로워지더라도 이런 보람을 위해 견디고 공부하자 !

노력은 배신하지 않는구나..🤪

 

 

이제 내일은 ..화면에 붙을때 3개 붙으면 아래로 떨어지게 수정한다음에...

삭제버튼도 추가해봐야겠다 !!!

5-2강의 19:41부터 다시 보자 ~

오늘은 여기까지

 

<내일 할 일 >

1. 무한스크롤 연구해보기

2. 삭제버튼 만들기

3. 과제 디자인 좀 더 다듬기