💎[Noitter]💎
3. CRUD(1) : Create/Read/Update/Delete
CREATE !

💻Create (생성)

• 내 포스팅 : 로그인 파일/컴포넌트 설계 및 구현 에서 로그인 성공한 유저가 글을 생성하는 기능
• Noweet(노윗)이라는 submit 버튼 클릭 시 글 작성이 완료(Create)됨
• 작성한 Noweet은 firebase에 저장되어, firebase에서 확인 가능함

📂Create 파일 구성

1. Router.js

: 로그인 성공 시 Home.js로 라우팅
: state - isLoggedIn → isLoggedIn ? <Home /> : <Auth /> 성공시 Home

2. fbase.js

: firebase의 firestore기능을 사용하기 위한 파일
: dbService = firebase.firestore();
→ dbService로 다른 파일에서 firebase의 firestore기능 호출 가능
: dbService.collection("noweets").add(.....)
→ firestore의 "noweets"라는 collectsion에 내용 추가하기 (Create, Upload)

3. Home.js

: 로그인 성공 시 글 생성(Create) 기능을 사용할 수 있는 페이지
: state - noweet(생성할 글내용 저장)
: function
onChange(글 변경 시 noweet에 저장),
onSubmit(onChange()된 글 firebase에 업로드)

📝Create 기능 구현

작성한 글 저장 firebase에 저장되는 원리

firebase의 저장소 상태

내가 설정한대로 "noweet"(collection에서 지정한 저장소 이름)이라는 저장소에
createAt, createId, text요소가 저장된 것을 볼 수 있었다👍🏻
※ createAt, createId, text 요소는 firestore에 저장할 수 있는 요소 중 내가 선택한 요소들이다.

💻Source Code

Home.js의 컴포넌트 코드

💗소스코드 자세한 내용은 Github 참고💗

📚정리

1. Router.js에서 isLoggedIn으로 로그인 확인 가능하니까 라우팅 파일은 따로 만들자
2. 어떠한 글이든 작성 시 반영되게 하려면 onChange()함수 사용해야 함
3. onSubmit()은 onChange()로 작성된 글 서버에 올리는 것이므로 onChange()와 한 세트로 이해하면 편함
4. ❓동작원리❓

   1. state(noweet)으로 현재 작성중인 글 저장
   2. text 입력받을 input창에 onChange()의
      setNoweet(value)를 이용하여 글 임시저장
   3. submit버튼 input창에 onSubmit()의
      dbService.collection("noweets").add()를 이용하여 db에 업로드

👍🏻노마드 코더 무료강의 참고

https://nomadcoders.co/nwitter/lobby