S2 . 과제 React Twittler Intro

- react 주석 처리 : {/**/}

- 리액트 관련 사이트 
1. 벨로퍼트 https://react.vlpt.us/basic/05-props.html
2. 리액트 공식 사이트 https://ko.reactjs.org/docs/hello-world.html

1. Sidebar

1. 메세지 아이콘을 작성합니다
- className : "far fa-comment-dots

const Sidebar = () => {
  return (
    <section className="sidebar">
      **<i className= "far fa-comment-dots></i>**
    </section>
  );
};

<i className= "far fa-comment-dots></i>

‘fontawesome’에서 가져오고 싶은 아이콘 클릭 후 → HTML 형식 그대로 가져온다.

2. Counter

1. dummyTweet로 전달되는 데이터의 갯수를 보여줍니다.
- dummyTweet로 전달되는 트윗 개수와 카운트가 일치하고 total과 숫자가 포함되어야 한다.ex)total :5

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

3. Footer

1. Footer 컴포넌트의 후손 엘리먼트로 시맨틱 엘리먼트 footer가 있어야 합니다.
- 시멘틱 엘리먼트 <footer>가 포함되어야 합니다.

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

시맨틱 엘리먼트(요소)란?
시맨틱 엘리먼트는 ‘의미있는 요소’라는 의미를 가지며, 브라우저와 개발자 모두에게 요소 스스로 자신이 사용된 의미를 명확히 전달하는 요소를 말한다. 대표적인 예로, h1태그, div태그, span , p태그 등이 있다.

시맨틱 엘리먼트를 왜 사용하는가?
문서에 의미를 가진 태그, 즉 시멘틱 엘리먼트를 추가하면 브자우저와 개발자들은 해당 페이지의 내용과 의미를 보다 명확하게 파악할 수 있다. 따라서 시맨틱 엘리먼트를 사용하는 것만으로도 불필요한 의사소통을 줄일 수 있다.

4. Tweets

**1. 트윗 저자의 프로필 사진이 있어야 합니다** 
- li.tweet 엘리먼트의 후손 엘리먼트로 <img> 엘리먼트를 생성하고 dummyTweets의 이미지 주소 정보를 찾아서 <src> 속성을 지정
**2. 유져 이름이 있어야 합니다**
- li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고 dummyTweets의 유저 이름을 <span>의 텍스트 콘텐츠로 지정.
- 클래스 이름은 tweet__username으로 지정
**2-1. 유저이름의 조건부 렌더링**
- 조건부 렌더링을 활용해서 여러 트윗 중 유저 이름이 parkhacker인 배경색이 var(--point-color-tint-2)가 되도록 클래스를 지정(tweet__username tweet__username--purple)
- 클래스 tweet__username tweet__username--purple에 대한 CSS는 이미 지정되어 있다.
**3. 트윗 생성 일자(yyyy. m. d.) 가 있어야 합니다.**
- li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고 dummyTweets의 트윗 생성 일자를 <span>의 텍스트 콘텐츠로 넣습니다.
- 클래스 이름은 tweet__createdAt으로 지정합니다
- 트윗 생성 일자는 yyyy. m. d. 형식으로 표시되어야 합니다. (’static/dummyTweets.js’ 파일을 잘 읽어보세요.)
**4. 트윗 메시지가 있어야 합니다.**
- li.tweet 엘리먼트의 후손 엘리먼트로 <div> 엘리먼트를 생성하고 dummyTweets의 트윗 내용을 <div> 의 텍스트 콘텐츠로 넣습니다.
- 클래스 이름은 tweet__message으로 지정합니다.
**5. 조건부 렌터링**
되어 있다.

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.**map((tweet)** => {
        return (
          <li className="tweet" **key={tweet.id}>**
            <div className="tweet__profile">
              **<img src={tweet.picture}></img>**
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                **{tweet.username === "parkhacker" ? <span className="tweet__username tweet__username--purple">{tweet.username}</span> : <span className="tweet__username">{tweet.username}</span>**
                **<span className="tweet__createdAt">{tweet.createdAt}</span>**
              </div>
                **<span className="tweet__message">{tweet.content}</span>**
            </div>
          </li>
        );
      })}
    </ul>
  );
};

5. Features

1. Footer 컴포넌트를 작성합니다.

const Features = () => {
  return (
    <section className="features">
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile"></div>
          <Counter />
        </div>
      </div>
      <Tweets />
      **< Fotter />**
    </section>
  );
};

6. App

1. Sidebar 컴포넌트를 작성합니다.

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