App

...

import { BrowserRouter, Routes, Route } from "react-router-dom";

...

import MyPage from "./Pages/MyPage";
import About from "./Pages/About";

...

return (
      <BrowserRouter>
        <div className="App">
          <main>
            <Sidebar />
            <section className="features">
              <Routes>
                <Route path="/" element={<Tweets />} />
                <Route path="/mypage" element={<MyPage />} />
                <Route path="/about" element={<About />} />
              </Routes>
            </section>
          </main>
        </div>
      </BrowserRouter>
  );

Sidebar

import { Link } from "react-router-dom";

...

<section className="sidebar">
        <Link to="/">
          <i className="far fa-comment-dots"></i>
        </Link>
        <Link to="/about">
          <i className="far fa-question-circle"></i>
        </Link>
        <Link to="/mypage">
        <i className="far fa-user"></i> {/* 순서 틀리면 테스트 통과 안 됨, 아이콘도 주의 */}
        </Link>
    </section>

Tweets

...

<ul className="tweets">
        {dummyTweets.map((tweet) => {
          return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src={tweet.picture} />
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                <span className="tweet__username">{tweet.username}</span>
                <span className="tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <div className="tweet__message">{tweet.content}</div>
            </div>
          </li>
          )
        })}
      </ul>

...

MyPage

...

const filteredTweets = dummyTweets.filter(
    (tweet) => tweet.username === "kimcoding"
  );

...

{filteredTweets.map((tweet) => (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src={tweet.picture} />
            </div>

...

checkpoint

4. fill the blank

function App() {
  return (
    <1._________>
      <div>
        <nav>
          <ul>
            <li>
              <2._________ to="/">Home</2._________>
            </li>
          </ul>
        </nav>

         <3._________>
          <4._________ path="/" element={<Home />} /> 
        </3._________>
      </div>
    </1._________>
  );
}

function Home() {
  return <h1>Home</h1>;
}