S2_U4_과제. React Twittler Intro

Judevv·2023년 5월 18일

코드스테이츠 SEB FE BOOTCAMP

목록 보기

46/55

과제. React Twittler Intro

학습 목표

리액트, JSX 기본 문법을 익힌다.

리액트, JSX로 트위틀러를 하드 코딩할 수 있다.

컴포넌트를 먼저 개발하는 Bottom-up 개발 방식에 익숙해진다.

npm script로 리액트 개발에 필요한 기본적인 툴을 사용할 수 있다.

구현 목표

유명 SNS 서비스인 Twitter와 유사한 Twittler의 컴포넌트 개발

파일 구조와 더미 데이터

파일 구조

/
├── /React Twittler State Props
│   ├── README.md
│   ├── /public                        # create-react-app이 만들어낸 파일로 yarn/npm start로 실행 시에 쓰입니다
│   └── /src                           # React 컴포넌트가 들어가는 폴더
│        ├── static                    # dummyData가 들어가는 폴더
│        │    └── dummyData.js
│        ├── App.css
│        ├── App.js                    # Twittler App이 작성되어 있습니다.
│        ├── index.js
├  package.json
└ .gitignore

더미 데이터

트윗 객체로 되어 있음

parameter	형식	설명
id	숫자	고유한 아이디
username	문자열	사용자 이름
picture	문자열	프로필 사진의 URL 주소
content	문자열	사용자가 작성한 트윗 내용
createdAt	문자열	UTC 형태의 시간 정보
updatedAt	문자열	UTC 형태의 시간 정보

구현하기

요구사항

App 컴포넌트의 후손 컴포넌트로 Sidebar 컴포넌트가 있어야 합니다.

Font Awesome을 활용하여 트윗 메시지 아이콘이 있어야 합니다. (className : "far fa-comment-dots").

Sidebar component를 정의한다.
i 요소를 사용하여 아이콘을 나타낸다.
className 속성을 사용하여, "far fa-comment-dots" 클래스를 할당한다.
Font Awesome 아이콘 라이브러리에서 제공되는 "comment-dots" 아이콘을 나타낸다.

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

Counter component

요구사항

Feature 컴포넌트의 후손 컴포넌트로 Counter 컴포넌트가 있어야 합니다.

dummyTweet로 전달되는 트윗 개수와 카운트가 일치해야 합니다. ex) total : 5

total과 숫자가 콘텐츠에 포함되어 있어야 합니다.

Counter component를 정의한다.
내부 텍스트로 배열의 길이를 나타내어, 총 트윗 개수를 표출한다.

        <div className="tweetForm__count" role="status">
          total: {dummyTweets.length}
        </div>

요구사항

Features 컴포넌트의 후손 컴포넌트로 Footer 컴포넌트가 있어야 합니다.

Footer 컴포넌트의 후손 엘리먼트로 시멘틱 엘리먼트 footer가 있어야 합니다.

시멘틱 엘리먼트 <footer>가 포함되어야 합니다.

Footer component를 정의한다.
img 요소와 텍스트를 footer 요소로 감싼다.

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

Tweet component

요구사항

트윗 저자의 프로필 사진이 있어야 합니다.

li.tweet 엘리먼트의 후손 엘리먼트로 <img> 엘리먼트를 생성하고 dummyTweets의 이미지 주소 정보를 찾아서 <src> 속성을 지정합니다.

유저 이름이 있어야 합니다.

li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고 dummyTweets의 유저 이름을 <span>의 텍스트 콘텐츠로 넣습니다.

클래스 이름은 tweet__username으로 지정합니다.
트윗 생성 일자(yyyy. m. d.)가 있어야 합니다.

li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고 dummyTweets의 트윗 생성 일자를 <span>의 텍스트 콘텐츠로 넣습니다.

클래스 이름은 tweet__createdAt으로 지정합니다.

트윗 생성 일자는 yyyy. m. d. 형식으로 표시되어야 합니다. (’static/dummyTweets.js’ 파일을 잘 읽어보세요.)

트윗 메시지가 있어야 합니다.

li.tweet 엘리먼트의 후손 엘리먼트로
엘리먼트를 생성하고 dummyTweets의 트윗 내용을
의 텍스트 콘텐츠로 넣습니다.

클래스 이름은 tweet__message으로 지정합니다.

트윗이 dummyTweets의 길이만큼 있어야 합니다.

dummyTweets에 트윗이 n개 전달되면, 화면에 트윗이 n개가 보여야 합니다.

내부에서 dummyTweets 배열의 요소를 순회하며 트윗을 생성한다.
dummyTweets.map() 함수를 사용하여 각 트윗 데이터를 가지고 li 요소로 반환한다.
li 요소에 "tweet" 클래스를 할당하고, key 속성은 tweet.id 값을 사용하여 키를 설정한다.
li 요소로 트윗 프로필을 나타내는 div 요소와 트윗 내용을 나타내는 div 요소를 감싼다.
트윗 프로필 div 요소 내부에는 img 요소를 넣고, src 속성에는 tweet.picture 값을 사용하여 이미지 경로를 설정한다.
트윗 내용 div 요소 내부에 트윗 작성자 정보와 트윗 내용을 나타내는 div 요소가 있다.
트윗 작성자 정보 div 요소 내부에는 작성자 이름(tweet.username)을 나타내는 span 요소를 넣는다.
만약 작성자 이름이 "parkhacker"인 경우에는 "tweet__username--purple" 클래스가 추가된 span 요소를 넣는다.
트윗 작성자 정보 div 요소 내부에는 작성 시간(tweet.createdAt)을 나타내는 span 요소를 넣는다.
트윗 내용 div 요소 내부에는 트윗 내용(tweet.content)을 나타내는 div 요소를 둔다.

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>
              <div className="tweet__message">{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

Feature component

footer임을 알수 있게 <Footer />를 <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>
        <Footer />
      </footer>
    </section>
  );
};