[💻 코드스테이츠 FE 44기] ✨반딧불이반✨ React Twittler Intro 의사코드작성

✔️ 시작

코드스테이츠에 섹션2 부터 시작하는 반딧불이반이 있다.
종합퀴즈나 과제 등을 평균 보다 낮을 경우 선정되는데..

종합퀴즈 문제를 잘못 읽어 풀어서 이번 반딧불이반에 선정 됐다.

과제는 오늘 진행한 React Twittler Intro 레퍼런스 의사코드 작성하는 것이다.

📍React Twittler Intro

오늘 학습한 내용

• JSX 문접의 규칙에 대해 이해
• 컴포넌트 개념 이해
• Creact-React-App을 통한 리액트 개발환경 구축

import { dummyTweets } from './static/dummyData';

{/* TODO : dummyTweet로 전달되는 데이터의 갯수를 보여줍니다. */}
/*
* dummyTweets는 배열안의 객체로 이루어져 있다.
* 데이터의 갯수를 보여줘야하기 때문에 arr.length를 이용해 표기한다.
*/
<p className='total__st'>total: {dummyTweets.length}</p>


{/* TODO : 유져 이름이 있어야 합니다. */ }
{/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
/*
* dummyTweets === tweet (동일함)
* 삼항 연산자 (조건 ? 참 : 거짓)을 이용해 풀어준다.
* tweet.username에 "parkhacker"이 있는지 찾는다. (tweet.username === 'parkhacker')
* 있을 경우 tweet__username--purple클래스 추가하기
*/

const isParkHacker = tweet.username === 'parkhacker';
	const tweeUserName = isParkHacker 
		? 'tweet__username tweet__username--purple'
		: 'tweet__username'

<span className={tweeUserName}>{tweet.username}</span>

잘 모르는 부분

• { } 안에 태그를 넣을 수도 있고 변수만 넣을 수 있다는 점에서 헷갈렸다.

어려웠던 부분

• 데이터의 개수를 불러와야하는 부분에서 dummyTweets 데이터를 봤을 때 유심히 안 보고 객체로 이루어진 걸로 생각해 객체의 length 구하는 방법을 찾았던거 같다. (뭐든지 끝 까지 보기로...)

느낀점

• 과제 진행 할 때 초반에 헤맸지만 한 번 초점이 잡히니 다음 부터는 문제가 술술 잘 풀렸던 거 같다.
• 컴포넌트를 추가할 땐 < 컴포넌트 이름 /> 으로 <img>, <br> 처럼 닫는 태그가 없는 거 처럼 끝에 닫을 수도 있고 우리가 흔히 아는 <컴포넌트 이름></컴포넌트 이름> 이렇게 작성할 수 있다는 것을 알게 되었다.

const App = () => {
  return (
    <컴포넌트 이름 />
	<컴포넌트 이름></컴포넌트 이름> 
  );
};

• npm run start를 통해 내용 수정 즉시 새로고침 되는 부분을 알게 되었다.

npm run start

• React는 Javascript와 달리 재사용이 높고 하나의 페이지에 HTML + Javascript를 사용할 수 있어 용이하다.

✏️ 마치며

이번 반딧불이반에 선정 되면서 내가 노쳤던 부분이나
오답노트 처럼 다시 한 번 체크하는 계기가 된거 같다.

그래도 되도록이면 반딧불인반에 선정되지 않도록
문제 내용을 꼼꼼히 보려고 노력해야겠다.