pair - react twittler intro

• TO DO
  • 메세지 아이콘 작성
  • dummyTweet로 전달되는 데이터의 개수 가져오기
  • 시멘틱 엘리먼트 footer 포함, Footer 함수 컴포넌트를 작성
  • 트윗 저자의 프로필 사진, 이름, 트윗 생성 일자, 내용 가져오기
  • 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 변경
  • 최소 단위 컴포넌트를 App 하위? 로 넣기? (적절한 단어 물색 중)
  • CSS에 시간을 투자해 화려한 Twittler 만들기 (최고난도)

메세지 아이콘 작성

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* TODO : 메세지 아이콘을 작성합니다. */}
      <i className="far fa-comment-dots"></i>
    </section>
  );
};

root html file head 내부에 로 font awesome 연결

dummyTweet로 전달되는 데이터의 개수 가져오기

import { dummyTweets } from "./static/dummyData";
...
const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
          total: {dummyTweets.length}
        </div>
      </div>
    </div>
  );

dummyData 배열 내 객체 개수 = 데이터 개수

Footer 함수 컴포넌트 작성

const Footer = () => {
  return (
    <footer>
      <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
      Copyright @ 2023 Code States
    </footer>
  );
};

div를 시맨틱 요소 - footer로 변경

트윗 저자 이름, 프로필, 트윗 생성일, 내용 가져오기

• 이름이 "parkhacker"인 경우, 이름 배경색 변경

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {

        { /* map 내부에서 사용되는 값을 선언해야 함 */ }

        const isParkHacker = tweet.username === "parkhacker";
        const usernameStyle = isParkHacker
          ? { backgroundColor: "var(--point-color-tint-2)" }
          : {};

        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 ${
                    isParkHacker ? "tweet__username--purple" : ""
                  }`}
                  style={usernameStyle}>
                  {tweet.username}
                </span>
                <span className="tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <div className="tweet__message">{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

나머지 끝내 놓고 여기서 좀 막혔기 때문에 의사 코드 공개. 글씨가 작지만요

리액트가 뭔지 어제 알았으니까 좀 막힐 수도 있다고 칩시다…

저 낯가려서 아직 리액트랑 어.사입니다

Footer 컴포넌트 작성

const Features = () => {
  return (
    <section className="features">
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile"></div>
          <Counter />
        </div>
      </div>
      <Tweets />
      {/* Footer 컴포넌트를 Features 컴포넌트 하위로 추가, 대소문자 주의 */}
      <Footer />
    </section>
  );
};

모든 컴포넌트는 루트 하위에서 전부 감싸져야 하니 기능별로 분리된 듯?

Sidebar 컴포넌트 작성

const App = () => {
  return (
    <div className="App">
      <main>
        <Sidebar />
        <Features />
      </main>
    </div>
  );
};

상동

---

즐거운 페어 프로그래밍이 끝나고 CSS를 좀 건드려 봤다.

슬슬 의문이 든다
나는 개발자인데 왜 CSS 할 때 즐거운 것인지
아무튼?

즐거운 것과 별개로 화려한 Twittler라니... 최고난도다.

아… simple is the best 라는 변명 좀 그만하고 싶다

아이콘 약간 촌스~ 라 바꾸고 싶은데 바꾸니까 테스트 통과 안 됨 ㅠ