오늘 처음으로 야간자율학습에 걸렸다..ㅜㅠ, 수업을 이해못하거나 그런건 아니었는데 빨리 풀고 쉬려고 종합퀴즈를 너무 빨리 푼 것 같다. 어쨋든 간에 이번 야간자율학습과제는 react twitter intro의 과제를 해결한 부분의 의사코드를 작성 하는 것이다. 어떻게 써야 할지 막막하지만 과제란에 요구사항을 하나하나 해결하겠다.
-
sidebar컴포넌트는 app컴포넌트의 후손 컴포넌트로 지정이 되어야 하고, Font Awesome을 활용한 아이콘이 표시되어야 한다고 한다. 여기서 아이콘의 코드는 주어졌는데(className : "far fa-comment-dots") 이를 이용하면 된다.
해결방법 - app 컴포넌트의 태그 안에 후손 요소로
<Sidebar \>를 집어넣어 후손 컴포넌트로 만들어주고, Sidebar컴포넌트에는 아이콘을 만드는 태그인<i className="far fa-comment-dots"></i>를 넣어주면 된다. (물론 html의 태그에 해당 아이콘을 받아올수 있는 url이 필요하다.) -
counter컴포넌트는 dummy데이터의 갯수를 출력해주는 컴포넌트로 만들어주면 된다. 이것은 feature컴포넌트의 후손 컴포넌트로 지정해야 한다.
해결방법 - 이미 작성되어있는 태그의 최하층 내부에
total = {dummyTweets.length}을 이용해 dummydata의 길이를 찾아 total = 5 이렇게 출력하고, feature컴포넌트의 내부에<Counter />로 후손 컴포넌트로 지정한다. -
tweet 컴포넌트는 사진, 아이디, 생성일자, 트윗메서지가 더미데이터에 있는만큼 출력을 해줘야하고, 아이디가 'ParkHacker'일 경우 해당 아이디 부분의 배경을 연보라색? 으로 만들어야 한다.
해결방법 - 사진은 이미지 태그를 이용해 가져오고
<img src={tweet.picture}></img>아이디, 생성일자는 inline 요소로 생성해야 하니 span태그를 이용하고, 메세지는 block요소이니 div 태그를 이용해 구현해준다.아이디의 배경을 바꾸는 것은 삼항연산자를 이용해 할 수 있다.{tweet.username === "parkhacker" ? <span className="tweetusername tweetusername--purple">{tweet.username}</span> : <span className="tweet__username">{tweet.username}</span>}물론 과제에서는 부분부분을 하나의 변수로 선언하여 가독성 있게 만들었다. 어휴 길어라 -
footer컴포넌트는 feature 컴포넌트의 후손 컴포넌트로 지정해야하고, 시맨틱태그
<footer>로 구현되어야 한다.해결방법 - feature의 메인부분인
<Tweet />뒤에 위치하여<Footer />로 후손 컴포넌트로 넣어주고, footer 컴포넌트의 리턴되는 모든태그롤<footer> </footer>로 감싸준다.
생각보다 쓰다보니 너무 쓸게 많았다. 담부터는 야간자율 절때 안걸려야겠다..
