4-2. [React] 과제 - React Twittler Intro

# 터미널 명령어 

 

리액트 첫 시간

페어와 함께하는  'React Twittler Intro' 만들기

 

코드를 받아서 vscode 프로그램을 켜주고

명령어 npm run test - 터미널에서 테스트 통과 항목, 여부 확인가능 

명령어 npm run start - 터미널에 입력시 브라우저에서 기능구현 확인가능

 

npm run test	npm run start

 

 

 

---

 

# 과제 체크리스트

 

React 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

 

 

# Bare Minimum Requirement

 

1. Sidebar 컴포넌트 기술 요구사항
   ✔️ App 컴포넌트의 후손 컴포넌트로 Sidebar 컴포넌트가 있어야 합니다.
   ✔️ Font Awesome을 활용하여 트윗 메시지 아이콘이 있어야 합니다. (className : "far fa-comment-dots").
   
   
2. Counter 컴포넌트 기술 요구사항
   ✔️ Feature 컴포넌트의 후손 컴포넌트로 Counter 컴포넌트가 있어야 합니다.
   ✔️ dummyTweet로 전달되는 트윗 개수와 카운트가 일치해야 합니다. ex) total : 5
   ✔️ total과 숫자가 콘텐츠에 포함되어 있어야 합니다.
   
   
3. Footer 컴포넌트 기술 요구사항
   ✔️ Features 컴포넌트의 후손 컴포넌트로 Footer 컴포넌트가 있어야 합니다.
   ✔️ Footer 컴포넌트의 후손 엘리먼트로 시맨틱 엘리먼트 footer가 있어야 합니다.
   ✔️ 시멘틱 엘리먼트 <footer>가 포함되어야 합니다.
   
   
4. Tweets 컴포넌트 기술 요구사항
   ✔️ 트윗 저자의 프로필 사진이 있어야 합니다.
   ✔️ li.tweet 엘리먼트의 후손 엘리먼트로 <img> 엘리먼트를 생성하고, dummyTweets의 이미지 주소 정보를 찾아서 <src> 속성을 지정합니다.
   ✔️ 유저 이름이 있어야 합니다.
   ✔️ li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고,dummyTweets의 유저 이름을 <span>의 텍스트 콘텐츠로 넣습니다.
   ✔️ 클래스 이름은 tweet__username으로 지정합니다.
   ✔️ 트윗 생성 일자(yyyy. mm. dd.) 가 있어야 합니다.
   ✔️ li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고 dummyTweets의 트윗 생성 일자를 <span>의 텍스트 콘텐츠로 넣습니다.
   ✔️ 클래스 이름은 tweet__createdAt으로 지정합니다.
   ✔️ 트윗 생성 일자는 yyyy. mm. dd. 형식으로 표시되어야 합니다. (static/dummyTweets.js 파일을 잘 읽어보세요.)
   ✔️ 트윗 메시지가 있어야 합니다.
   ✔️ li.tweet 엘리먼트의 후손 엘리먼트로 <div> 엘리먼트를 생성하고 dummyTweets의 트윗 내용을 <div> 의 텍스트 콘텐츠로 넣습니다.
   ✔️ 클래스 이름은 tweet__message으로 지정합니다.
   ✔️ 트윗이 dummyTweets의 길이만큼 있어야 합니다.
   ✔️ dummyTweets에 트윗이 n개 전달되면, 화면에 트윗이 n개가 보여야 합니다.
   
   
5. 핵심 기능 구현하기
   ✔️ 조건부 렌더링 기술 요구사항
   ✔️ 조건부 렌더링을 활용해서 여러 트윗 중 username 배경색이 var(--point-color-tint-2)가 되도록 클래스(.tweet__username--purple)를 지정해야 합니다.

 

# npm start 초기화면

---

# 1. Sidebar 컴포넌트 기술 요구사항

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

 

---

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

Font Awesone?
Font Awesome은 자주 사용되는 아이콘을 쉽게 접근할 수 있도록 모아놓은 오픈소스 라이브러리입니다.