류림스 공간
[항해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. 과제 디자인 좀 더 다듬기
'TIL > 2022 TIL' 카테고리의 다른 글
[항해99 22일차] 2022.03.28 TIL /업데이트 기능 (0) | 2022.03.28 |
---|---|
[항해99 20일차] 2022.03.26 TIL /삭제기능 (0) | 2022.03.26 |
[항해99 18일차] 2022.03.24 TIL /리덕스 (0) | 2022.03.24 |
[항해99 17일차] 2022.03.23 TIL (0) | 2022.03.23 |
[항해99 16일차] 2022.03.22 TIL (0) | 2022.03.22 |