Week03/seunghyun

[hyun907]

✨어떤 과제를 수행했나요?✨

3주차 유튜브 랜딩 페이지 클론 코딩을 진행했습니다.

✨어려웠던점, 트러블슈팅✨

리액트를 처음 사용해봤는데, 익숙하지 않아 오류도 많이 나고 기본 학습과 병행하느라 시간이 좀 걸렸습니다. 그래도 prettier, eslint, husky를 적용하여 프로젝트 기본 세팅을 직접 해보면서 도움이 많이 됐습니다. 그래서 자잘한 에러들도 만났는데 검색을 통해 해결했습니다.

📌 에러: package.json: No license field
"private": true가 추가되어 있지 않거나, 하위 폴더에서 실행해서 나오는 오류였습니다.
제 경우는 후자로 상위 폴더에서 실행했더니 해결되었습니다.

📌 에러: Parsing error Unexpected token <
eslint 에서 jsx 파일의 parser 를 제대로 인지 하지 못해서 나오는 오류였습니다.
프로젝트 폴더의 root 폴더에 있는 .eslintrc.js 파일에 parser 를 추가합니다. parser: 'babel-eslint'를 추가했습니다.

📌 map 함수 이용
처음에 영상 프리뷰 카드 컴포넌트를 만들었는데, 반복되는 컴포넌트였습니다.
그래서 더미 데이터를 생성하여 이미지, 제목, 내용 등을 저장하고 map 함수를 이용해 반복했습니다.

import React from 'react';
import dummy from '../../data/itemInfo.json';

export default function Card() {
  return (
    <div className="main">
      {dummy.cards.map(card => (
        <div className="card-frame" key={card.id}>
          <div className="card">
            <img className="card-img" src={card.img2} />
          </div>
          <div className="card-text">
            <img className="author-img" src={card.img1}></img>
            <div className="text-section">
              <p className="title">{card.title}</p>
              <p className="text-caption">{card.author}</p>
              <p className="text-caption">
                조회수 {card.views}회 ・ {card.id}년 전
              </p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

📌 아쉬웠던 점: 스타일드 컴포넌트를 사용하지 않은 것
아쉬웠던 점은 세션 때 배운 스타일드 컴포넌트를 사용하고 싶었는데, 리액트 자체가 익숙하지 않아 일단 리액트 사용법에 초점을 두고 보다 익숙한 CSS를 사용하여 완성했습니다. 다음에 더 디벨롭시킨다면 스타일드 컴포넌트를 사용해보고 싶습니다.

🤔 PR Point

검색을 통해 대부분의 문제를 해결했습니다.