리액트 react-twittler-intro

명언앱에서 한단계더나아가 간단한 Twittler를 만들어보자.

 

일단 Twittler를 fork하고, glt clone으로 가져온다.

npm install로 필요한 모듈을 설치.

 

vs코드를 열어확인해보면, 아직 우리가 서버와 통신을해서 트윗 데이터를 받아올수 없기에

더미데이터라는 몇개의 트윗이 작성되어있다. 이 트윗을 불러오는 연습을 하면된다.

 

Bare Minimum Requirement

완성된 모습

이러한 모습을 만드는게 최종목표인데, npm run start를 이용해 현재 상태를 확인해보면

현재상태

이렇게 생겼다. 하나하나 만들어보자..

---

Sidebar 컴포넌트 기술 요구사항

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

하위 컴포넌트로 넣기위해서 App내부에 <Sidebar /> 를 입력.

• Font Awesome을 활용하여 트윗 메세지 아이콘이 있어야 합니다.

html에서는<i class="far fa-comment-dots"></i> 이런식으로 사용했지만

리액트에서는 JSX문법을 지켜 

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

으로 작성해준다. 

(사이드바안에 작성)

그리고 리액트 화면을 확인하면 사이드바는 완성! 

 

Counter 컴포넌트 기술 요구사항

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

Feature 내부에 <Counter />를 작성하고,

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

count 컴포넌트의 현재 dummyTweet로 전달되는 데이터의 갯수를 보여줍니다. 부분을 수정하여

트윗 갯수가 표시되게 한다. 

 

갯수 => 더미트윗의 길이  

total : {dummyTweets.length} 

이렇게 작성하고 리액트 창을 확인하면, 카운트 부분까지 완성!

 

Footer 컴포넌트 기술 요구사항

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

TODO자리에 <Footer /> 작성.

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

시맨틱태그 <footer></footer>를 작성해준다. 

Tweets 컴포넌트 기술 요구사항

이부분은 리액트에 map함수를 적용하여 작성

• 트윗 저자의 프로필 사진이 있어야 합니다.
  • li.tweet 엘리먼트의 후손 엘리먼트로 <img> 엘리먼트를 생성하고 dummyTweets의 이미지 주소 정보를 찾아서 <src> 속성을 지정합니다.

dummyTweets를 보면 저자의 사진은 picture에 주소가 나와있음. 이주소를 img태그의 src속성에 넣으면된다.

 

• 유저 이름이 있어야 합니다.
  • li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고 dummyTweets의 유저 이름을 <span>의 텍스트 콘텐츠로 넣습니다.
  • 클래스 이름은 tweet__username으로 지정합니다

더미데이터를 보면 저자의 이름은 username에 담겨있고, dummyTweets라는 객체안에 담겨있기때문에

dummyTweets.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개가 보여야 합니다.

이부분은 다 비슷비슷해서 한번에 작성. 더미트윗을 보고 끌어오면된다. 

그러면 이렇게 거의다 완성이됨!

이제 가장 마지막

핵심 기능 구현하기

조건부 렌더링 기술 요구사항

• 조건부 렌더링을 활용해서 여러 트윗 중 username "parkhacker"인 경우 연보라색으로 칠한다.
  • src/App.css에 클래스가 미리 준비되어 있습니다. (className : 'tweet__username--purple')

일반적인 경우라면 if(username === "parkhacker"){

return ~~~)  이렇게 되겠지만 리액트에서는 삼항연산자를 사용해야한다.

 

삼항연산자사용법 - 조건문 ? 정답일때값 : 틀렸을때값

 

클래스네임이 박해커일때를 변수에 담아주고

const isParkHacker = tweet.username === "parkhacker"

삼항연산자를 변수에 담아 활용 >>이 변수를 기존에 username을 불러왔던 클래스 네임에 넣어준다.

const tweetUserNameClass = isParkHacker ? "tweet.username tweet__username--purple" : "tweet.username"

 

리액트 창을 확인하면 박해커만 연보라색이 칠해진걸 확인할수 있다. 끝!!

---

다른 실습을 하려고했으나.. 어드밴스드가있네.. 그냥넘어가면 찝찝하지..

Advanced Challenge

• 지금은 Font Awesome을 페이지 렌더링을 할 때마다 서버로 요청을 보내서 받아오고 있습니다. npm을 통해서 Font Awesome을 설치하면 굳이 받아올 필요가 없습니다. npm으로 Font Awesome을 설치하고 스스로 적용해봅시다.

자 폰트어썸을 설치하기위해서 구글링을 시작한다..

 

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

요게 기본이고 본인이 사용할 종류에 따라 @뒷부분이 달라진다.

 

내가사용할것은 말풍선, 종모양 두가지 /

폰트어썸 사이트에서 이두가지가 어디에 해당되는지 찾아보니 둘다 레귤러였다.

 

Regular 다운받기

npm i -S @fortawesome/free-regular-svg-icons

 

다른종류를 받으려면 내가 지금참고하고있는 이블로그를 보시길..

https://jae04099.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90-font-awesome-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

 

그리고 다운받은 폰트어썸을 파일에 연결시키기위해서 

상단에 import를 해준다.

 

import열심히 하고 결과를 봤는데.. ㅎ..뭐가잘못된걸까왜 찾으실수없을까요

 

아..이유를 알았다. 블로그 작성자분이 solid 아이콘사용하신걸 그대로 복사해서내 regular를 당연히..찾을수 없지

이렇게 import를 해주고, i태그대신 폰트어썸을 이용하면 아이콘사이즈가 너무작아졌길래size를 이용해서 적어주었다. 그리고 css파일로 패딩값수정.

참고: https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react

How To Use Font Awesome 5 with React | DigitalOcean

 

• static/dummyData.js 파일에는 dummyData만 있는 것이 아니고, dummyNotice도 있습니다. 이것 또한 보여줄 수 있어야겠죠?
• sidebar에 알림 아이콘(.far .fa-bell)을 넣고, 그 아이콘을 클릭하면 dummyNotice의 내용이 보이게 만드세요.
• 물론, 트윗 아이콘을 누르면 다시 dummyTweets 또한 볼 수 있어야 합니다.
• 이를 구현하기 위해 state, state hooks, props에 대해서 스스로 공부하고, 테스트 케이스를 통과하세요.

>> 다음 포스팅에서 state, props을 공부하고 포스팅.