<div id="readability-page-1" class="page">






<nav id="global-navigation">


</nav>
<main id="wrap" aria-hidden="false">

<div>






	
<article>
<header id="global-header">



<div>
<h2>트위터 클론 코딩 #3 Nweeting</h2>
<ul>
<li role="text" aria-label="2021년 10월 01일 15시 39분에 작성된 글."><time datetime="2021-10-01T15:39">2021.10.01 15:39</time></li>
<li><a href="/category/%EB%85%B8%EB%A7%88%EB%93%9C%EC%BD%94%EB%8D%94/%ED%8A%B8%EC%9C%84%ED%84%B0%20%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9" aria-label="노마드코더/트위터 클론코딩">노마드코더/트위터 클론코딩</a></li>
</ul>
</div>


</header>
<div id="article">            <figure data-origin-width="1280" data-origin-height="720" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/d1xKeX/btrgACJKtkd/Z3tjeRKjRsK9V7Bm6VXlR0/img.jpg" data-lightbox="lightbox" data-alt="노마드 코더 트위터 클론 코딩"><img src="https://blog.kakaocdn.net/dn/d1xKeX/btrgACJKtkd/Z3tjeRKjRsK9V7Bm6VXlR0/img.jpg" data-origin-width="1280" data-origin-height="720" data-ke-mobilestyle="widthOrigin"></span><figcaption>노마드 코더 트위터 클론 코딩</figcaption></figure>
<blockquote data-ke-style="style1">
<p data-ke-size="size16">노마드 코더의 <a href="https://nomadcoders.co/nwitter">트위터 클론 코딩 강의</a>를 듣고 정리한 강의노트입니다.</p>
</blockquote>
<hr data-ke-style="style1">
<blockquote data-ke-style="style1">
<p data-ke-size="size16">3 NWEETING</p>
</blockquote>
<h2>3.0 Form and Database Setup / 양식과 데이터베이스 설정</h2>
<p data-ke-size="size16">Firebase &gt; Firestore Database</p>
<h2>3.1 Nweeting! / 느위팅!</h2>
<p data-ke-size="size16">Firebase의 Cloude Database(Firestore Database)는 NoSQL database이기 때문에 유연하고 사용하기 쉽다. NoSQL database에는 다음과 같은 분류로 나뉜다.</p>
<ul data-ke-list-type="disc">
<li>Collection : 폴더와 같은 역할, 한 데이터베이스에는 여러개의 Collection이 존재할 수 있다.</li>
<li>Document : 폴더 안에 있는 문서와 같은 역할, 한 Collection에는 여러 개의 Document가 존재할 수 있다.</li>
</ul>
<p data-ke-size="size16">결론적으로 다음과 같은 포함관계를 갖게 된다.</p>
<p data-ke-size="size16">Document ⊂ Collection ⊂ Database</p>
<blockquote data-ke-style="style1">
<p data-ke-size="size16">Firebase v9.0으로 바뀌면서 <code>firebaseConfig</code>의 값이 달라졌다. 혹시 오류가 생긴다면 <code>.env</code>의 값이 현재 <code>firebaseConfig</code>에서 원하는 값과 같은 지 확인해보자.</p>
</blockquote>
<pre><code>// Home.jsx
import React, { useState } from 'react'
import { db } from 'fbase'
import { collection, addDoc, serverTimestamp } from '@firebase/firestore'

const Home = () =&gt; {
  const [nweet, setNweet] = useState('')

  const handleOnSubmit = async (e) =&gt; {
    e.preventDefault()

    const docRef = await addDoc(collection(db, 'nweets'), {
      nweet,
      createdAt: serverTimestamp(),
    })

    console.log('Document written with ID: ', docRef.id)

    setNweet('')
  }

  const handleOnChange = (e) =&gt; {
    const {
      target: { value },
    } = e
    setNweet(value)
  }

  return (
    &lt;div&gt;
      &lt;form onSubmit={handleOnSubmit}&gt;
        &lt;input type="text" placeholder="What's on your mind?" maxLength={120} onChange={handleOnChange} value={nweet} /&gt;
        &lt;input type="submit" value="Nweet" /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  )
}
export default Home</code></pre>
<h2>3.2 Getting the Nweets / 느윗 가져오기</h2>
<pre><code>// Home.jsx
import React, { useState, useEffect } from 'react'
import { db } from 'fbase'
import { collection, addDoc, getDocs, serverTimestamp } from '@firebase/firestore'

const Home = () =&gt; {
  const [nweet, setNweet] = useState('')
  const [nweets, setNweets] = useState([])

  useEffect(() =&gt; {
    const getNweets = async () =&gt; {
      const dbNweets = await getDocs(collection(db, 'nweets'))
      dbNweets.forEach((document) =&gt; {
        const nweetObject = {
          ...document.data(),
          id: document.id,
        }
        setNweets((prev) =&gt; [nweetObject, ...prev])
      })
      // setNweets(dbNweets.map((document) =&gt; document.data()))
    }
    getNweets()
  }, [])

  const handleOnSubmit = async (e) =&gt; {
    e.preventDefault()

    const docRef = await addDoc(collection(db, 'nweets'), {
      nweet,
      createdAt: serverTimestamp(),
    })

    console.log('Document written with ID: ', docRef.id)

    setNweet('')
  }

  const handleOnChange = (e) =&gt; {
    const {
      target: { value },
    } = e
    setNweet(value)
  }

  return (
    &lt;div&gt;
      &lt;form onSubmit={handleOnSubmit}&gt;
        &lt;input type="text" placeholder="What's on your mind?" maxLength={120} onChange={handleOnChange} value={nweet} /&gt;
        &lt;input type="submit" value="Nweet" /&gt;
      &lt;/form&gt;
      &lt;div&gt;
        {nweets.map(({ id, nweet }) =&gt; (
          &lt;div key={id}&gt;
            &lt;h4&gt;{nweet}&lt;/h4&gt;
          &lt;/div&gt;
        ))}
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
export default Home</code></pre>
<h2>3.3 Realtime Nweets / 실시간 느윗</h2>
<p data-ke-size="size16">현재 구현된 건 새로고침을 해야 다시 DB에 있는 정보를 가져와서 업데이트하는 방식, 하지만 FireStore Database는 Realtime Database이기 때문에 해당 이점을 살리기 위해 리얼 타임을 구현</p>
<pre><code>// Home.jsx
import React, { useState, useEffect } from 'react'
import { db } from 'fbase'
import { collection, addDoc, query, onSnapshot, orderBy, serverTimestamp } from '@firebase/firestore'

const Home = ({ user }) =&gt; {
  const [nweet, setNweet] = useState('')
  const [nweets, setNweets] = useState([])

  useEffect(() =&gt; {
    // 실시간으로 데이터를 데이터베이스에서 가져오기

    const q = query(collection(db, 'nweets'), orderBy('createdAt', 'desc'))
    const unsubscribe = onSnapshot(q, (querySnapshot) =&gt; {
      const nextNweets = querySnapshot.docs.map((doc) =&gt; {
        return {
          id: doc.id,
          ...doc.data(),
        }
      })
      setNweets(nextNweets)
    })

    return () =&gt; {
      unsubscribe()
    }
  }, [])

  const handleOnSubmit = async (e) =&gt; {
    e.preventDefault()

    const docRef = await addDoc(collection(db, 'nweets'), {
      text: nweet,
      createdAt: serverTimestamp(),
      creatorId: user.uid,
    })

    console.log('Document written with ID: ', docRef.id)

    setNweet('')
  }

  const handleOnChange = (e) =&gt; {
    const {
      target: { value },
    } = e
    setNweet(value)
  }

  return (
    &lt;div&gt;
      &lt;form onSubmit={handleOnSubmit}&gt;
        &lt;input type="text" placeholder="What's on your mind?" maxLength={120} onChange={handleOnChange} value={nweet} /&gt;
        &lt;input type="submit" value="Nweet" /&gt;
      &lt;/form&gt;
      &lt;div&gt;
        {nweets.map(({ id, text }) =&gt; (
          &lt;div key={id}&gt;
            &lt;h4&gt;{text}&lt;/h4&gt;
          &lt;/div&gt;
        ))}
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
export default Home</code></pre>
<h2>3.4 Delete and Update / 삭제와 업데이트</h2>
<pre><code>// Nweet.jsx
import React, { useState } from 'react'
import { updateDoc, deleteDoc, doc } from '@firebase/firestore'
import { db } from 'fbase'

const Nweet = ({ nweet: { id, text }, isOwner }) =&gt; {
  const [editing, setEditing] = useState(false)
  const [newNweet, setNewNweet] = useState(text)

  const handleOnClickDelete = async () =&gt; {
    const ok = window.confirm('Are you sure you want to delete this nweet?')
    if (ok) {
      await deleteDoc(doc(db, `nweets/${id}`))
    }
  }

  const toggleEditing = () =&gt; {
    setEditing((prevEditing) =&gt; !prevEditing)
  }

  const handleOnChange = (e) =&gt; {
    const {
      target: { value },
    } = e
    setNewNweet(value)
  }

  const handleOnSubmit = async (e) =&gt; {
    e.preventDefault()
    await updateDoc(doc(db, `nweets/${id}`), {
      text: newNweet,
    })
    setEditing(false)
  }

  return (
    &lt;div&gt;
      {editing ? (
        &lt;&gt;
          &lt;form onSubmit={handleOnSubmit}&gt;
            &lt;input type="text" placeholder="Edit your nweet" value={newNweet} required onChange={handleOnChange} /&gt;
            &lt;input type="submit" value="Update Nweet" /&gt;
          &lt;/form&gt;
          &lt;button onClick={toggleEditing}&gt;Cancel&lt;/button&gt;
        &lt;/&gt;
      ) : (
        &lt;h4&gt;{text}&lt;/h4&gt;
      )}
      {isOwner &amp;&amp; (
        &lt;&gt;
          &lt;button onClick={handleOnClickDelete}&gt;Delete Nweet&lt;/button&gt;
          &lt;button onClick={toggleEditing}&gt;Edit Nweet&lt;/button&gt;
        &lt;/&gt;
      )}
    &lt;/div&gt;
  )
}

export default Nweet</code></pre>            </div>




<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>





















</article>


</div>
</main>

<nav id="pagination">

</nav>









	



	            
            
            
                        
                                
        
</div>

빠리의 택시 운전사

노마드 코더의 트위터 클론 코딩 강의를 듣고 정리한 강의노트입니다.
3 NWEETING
3.0 Form and Database Setup / 양식과 데이터베이스 설정
Firebase > Firestore Database
3.1 Nweeting! / 느위팅!
Firebase의 Cloude Database(Firestore Database)는 NoSQL database이기 때문에 유연하고 사용하기 쉽다. NoSQL database에는 다음과 같은 분류로 나뉜다.
Collection : 폴더와 같은 역할, 한 데이터베이스에는 여러개의 Collection이 존재할 수 있다.
Document : 폴더 안에 있는 문서와 같은 역할, 한 Collection에는 여러 개의 Document가 존재할 수 있다.
결론적으로 다음과 같은 포함관계를 갖게 된다.
Document ⊂ Collection ⊂ Database
Firebase v9.0으로 바뀌면서 firebaseConfig의 값이 달라졌다. 혹시 오류가 생긴다면 .env의 값이 현재 firebaseConfig에서 원하는 값과 같은 지 확인해보자.
// Home.jsx
import React, { useState } from 'react'
import { db } from 'fbase'
import { collection, addDoc, serverTimestamp } from '@firebase/firestore'
const Home = () => {
  const [nweet, setNweet] = useState('')
  const handleOnSubmit = async (e) => {
    e.preventDefault()
    const docRef = await addDoc(collection(db, 'nweets'), {
      nweet,
      createdAt: serverTimestamp(),
    })
    console.log('Document written with ID: ', docRef.id)
    setNweet('')
  }
  const handleOnChange = (e) => {
    const {
      target: { value },
    } = e
    setNweet(value)
  }
  return (
    <div>
      <form onSubmit={handleOnSubmit}>
        <input type="text" placeholder="What's on your mind?" maxLength={120} onChange={handleOnChange} value={nweet} />
        <input type="submit" value="Nweet" />
      </form>
    </div>
  )
}
export default Home
3.2 Getting the Nweets / 느윗 가져오기
// Home.jsx
import React, { useState, useEffect } from 'react'
import { db } from 'fbase'
import { collection, addDoc, getDocs, serverTimestamp } from '@firebase/firestore'
const Home = () => {
  const [nweet, setNweet] = useState('')
  const [nweets, setNweets] = useState([])
  useEffect(() => {
    const getNweets = async () => {
      const dbNweets = await getDocs(collection(db, 'nweets'))
      dbNweets.forEach((document) => {
        const nweetObject = {
          ...document.data(),
          id: document.id,
        }
        setNweets((prev) => [nweetObject, ...prev])
      })
      // setNweets(dbNweets.map((document) => document.data()))
    }
    getNweets()
  }, [])
  const handleOnSubmit = async (e) => {
    e.preventDefault()
    const docRef = await addDoc(collection(db, 'nweets'), {
      nweet,
      createdAt: serverTimestamp(),
    })
    console.log('Document written with ID: ', docRef.id)
    setNweet('')
  }
  const handleOnChange = (e) => {
    const {
      target: { value },
    } = e
    setNweet(value)
  }
  return (
    <div>
      <form onSubmit={handleOnSubmit}>
        <input type="text" placeholder="What's on your mind?" maxLength={120} onChange={handleOnChange} value={nweet} />
        <input type="submit" value="Nweet" />
      </form>
      <div>
        {nweets.map(({ id, nweet }) => (
          <div key={id}>
            <h4>{nweet}</h4>
          </div>
        ))}
      </div>
    </div>
  )
}
export default Home
3.3 Realtime Nweets / 실시간 느윗
현재 구현된 건 새로고침을 해야 다시 DB에 있는 정보를 가져와서 업데이트하는 방식, 하지만 FireStore Database는 Realtime Database이기 때문에 해당 이점을 살리기 위해 리얼 타임을 구현
// Home.jsx
import React, { useState, useEffect } from 'react'
import { db } from 'fbase'
import { collection, addDoc, query, onSnapshot, orderBy, serverTimestamp } from '@firebase/firestore'
const Home = ({ user }) => {
  const [nweet, setNweet] = useState('')
  const [nweets, setNweets] = useState([])
  useEffect(() => {
    // 실시간으로 데이터를 데이터베이스에서 가져오기
    const q = query(collection(db, 'nweets'), orderBy('createdAt', 'desc'))
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const nextNweets = querySnapshot.docs.map((doc) => {
        return {
          id: doc.id,
          ...doc.data(),
        }
      })
      setNweets(nextNweets)
    })
    return () => {
      unsubscribe()
    }
  }, [])
  const handleOnSubmit = async (e) => {
    e.preventDefault()
    const docRef = await addDoc(collection(db, 'nweets'), {
      text: nweet,
      createdAt: serverTimestamp(),
      creatorId: user.uid,
    })
    console.log('Document written with ID: ', docRef.id)
    setNweet('')
  }
  const handleOnChange = (e) => {
    const {
      target: { value },
    } = e
    setNweet(value)
  }
  return (
    <div>
      <form onSubmit={handleOnSubmit}>
        <input type="text" placeholder="What's on your mind?" maxLength={120} onChange={handleOnChange} value={nweet} />
        <input type="submit" value="Nweet" />
      </form>
      <div>
        {nweets.map(({ id, text }) => (
          <div key={id}>
            <h4>{text}</h4>
          </div>
        ))}
      </div>
    </div>
  )
}
export default Home
3.4 Delete and Update / 삭제와 업데이트
// Nweet.jsx
import React, { useState } from 'react'
import { updateDoc, deleteDoc, doc } from '@firebase/firestore'
import { db } from 'fbase'
const Nweet = ({ nweet: { id, text }, isOwner }) => {
  const [editing, setEditing] = useState(false)
  const [newNweet, setNewNweet] = useState(text)
  const handleOnClickDelete = async () => {
    const ok = window.confirm('Are you sure you want to delete this nweet?')
    if (ok) {
      await deleteDoc(doc(db, `nweets/${id}`))
    }
  }
  const toggleEditing = () => {
    setEditing((prevEditing) => !prevEditing)
  }
  const handleOnChange = (e) => {
    const {
      target: { value },
    } = e
    setNewNweet(value)
  }
  const handleOnSubmit = async (e) => {
    e.preventDefault()
    await updateDoc(doc(db, `nweets/${id}`), {
      text: newNweet,
    })
    setEditing(false)
  }
  return (
    <div>
      {editing ? (
        <>
          <form onSubmit={handleOnSubmit}>
            <input type="text" placeholder="Edit your nweet" value={newNweet} required onChange={handleOnChange} />
            <input type="submit" value="Update Nweet" />
          </form>
          <button onClick={toggleEditing}>Cancel</button>
        </>
      ) : (
        <h4>{text}</h4>
      )}
      {isOwner && (
        <>
          <button onClick={handleOnClickDelete}>Delete Nweet</button>
          <button onClick={toggleEditing}>Edit Nweet</button>
        </>
      )}
    </div>
  )
}
export default Nweet

트위터 클론 코딩 #3 Nweeting

댓글