[React] 과제: React Twittler Intro

Bare minimum requirement

Sidebar 컴포넌트 기술 요구사항
- App 컴포넌트의 후손 컴포넌트로 Sidebar 컴포넌트가 있어야 합니다.Font Awesome을 활용하여 트윗 메시지 아이콘이 있어야 합니다. (className : "far fa-comment-dots").
튜토리얼1을 먼저 학습하고 진행해 보세요.

Counter 컴포넌트 기술 요구사항
- Feature 컴포넌트의 후손 컴포넌트로 Counter 컴포넌트가 있어야 합니다.dummyTweet로 전달되는 트윗 개수와 카운트가 일치해야 합니다. ex) total : 5total과 숫자가 콘텐츠에 포함되어 있어야 합니다.

Footer 컴포넌트 기술 요구사항
- Features 컴포넌트의 후손 컴포넌트로 Footer 컴포넌트가 있어야 합니다.Footer 컴포넌트의 후손 엘리먼트로 시멘틱 엘리먼트 footer가 있어야 합니다.시멘틱 엘리먼트 <footer>가 포함되어야 합니다.

Tweets 컴포넌트 기술 요구사항
- 트윗 저자의 프로필 사진이 있어야 합니다.
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 엘리먼트의 후손 엘리먼트로 <div> 엘리먼트를 생성하고 dummyTweets의 트윗 내용을 <div> 의 텍스트 콘텐츠로 넣습니다.클래스 이름은 tweet__message으로 지정합니다.트윗이 dummyTweets의 길이만큼 있어야 합니다.dummyTweets에 트윗이 n개 전달되면, 화면에 트윗이 n개가 보여야 합니다.

조건부 렌더링 기술 요구사항
- 조건부 렌더링을 활용해서 여러 트윗 중 유저 이름이 parkhacker인 배경색이 var(--point-color-tint-2)가 되도록 클래스(tweet__username--purple)를 지정해야 합니다.
(tweet__username tweet__username--purple)‘src/App.css’에 클래스가 미리 준비되어 있습니다. (className : 'tweet__username--purple')
튜토리얼2를 먼저 학습하고 진행해 보세요.

 

Sidebar 

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

 

Counter

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

React 로 처음 실습해보는 입장에서 <> () {} 등등 없는 맨? 바탕에 total: 이라고 썼더니 바로 브라우저에 찍히는 기적을 맛봄. .. 

 

 

Footer

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

 

Tweets

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        const isParkHacker = tweet.username === "parkhacker";
        const tweetUserNameClass = isParkHacker
          ? "tweet__username tweet__username--purple"
          : "tweet__username";
        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={tweetUserNameClass}>{tweet.username}</span>
                {/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
                <span className="tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <span className="tweet__message">{tweet.content}</span>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

React에서 조건문은 삼항연산자를 사용. className에 {}을 써서 손쉽게 설정 가능한 점. 

처음이라 익숙치않아 그렇지 굉장히 편리하다고 느낌

 

 

ETC

페어분의 굉장한 도움으로 순조롭게 진행했는데, 과제가 테스트 통과가 안됨.

아래와 같은 에러 메시지가 계속 떴다.

에러 메시지를 읽어보면 알 수 있듯이 정확히 뭐 때문에 에러가 났는지 제대로 서술이 안 됨. 나의 절친한 친구 chatGPT 에게도 물어봤지만 log 전문을 보여달라기에 복사해서 그것도 떠먹여줘도 자기도 모르겠단다. 

페어분이 계속 자기일처럼 챙겨주셔서 내 코드 -> 페어분이 가져가서 테스트, 페어분 코드 -> 내가 가져와서 테스트 해봤는데, 내 코드를 페어분에게 옮겨갔을 시 통과, 페어분 코드를 내가 가져왔을시 똑같은 에러메시지 발생. 

코드가 아닌 다른 문제겠구나 해서 파일을 다시 지우고 clone 해오기도 하고, 설치 경로를 바꿔 진행을 해봐도 똑같았다.

 

과제를 풀던 도중, 내가 유어클래스에서 수업실습을 따라하느라 node 를 업뎃 했는데, 그게 영향이 있는건지 걸리기 시작했다. 

그래서 node 캐시를 싹 지우고, npm cashe clean --force

버전을 lts로 업데이트 했다. nvm use --lts

역시 node 문제 였던건지 그러자 테스트가 진행되더라.