2차 프로젝트

To do

• 레이아웃 만들기
• 컴포넌트화 하기
• 한페이지 안에 styled-components 적용하기
• 기능 구현 craousel, category별 필터링, 더보기에서 전체보기
• 인기순 페이지 구현(랜덤 or 예약순)

Doing

• 레이아웃
• 컴포넌트화
• styled-components 적용

Blocker

• Craousel 라이브러리 적용
  slick 라이브러리 설치 후 불러 오는 것 까지 성공했으나 원하는 위치에 원하는 사이즈를 주지 못했다.
  메인파일에서 작업을 해줘야 할 지 carousel이 사용되어지는 컴포넌트에서 사용 해야하는지에 대한 고민이 있었다. 메인에 사용하면 바로 나오나 메인파일이 가독성이 안좋아지기 때문에 컴포넌트에서 작업 하는 것으로 결정했다. 얕은 지식으로 인해 export는 한 파일에서 한번 만 되는 것으로 기억하고 있어 어떡케 풀어 나가야 할 지 고민이었다. 현업에서 실제로 사용되어지는 코드를 보고 조금 이해 하게 되었다.

const CarouselBanner = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
    </Slider>
  );
};

const StyledNext = styled.span`
  position: absolute;
  right: 0;
  top: 50%;
`;

const StyledPrev = styled.span`
  position: absolute;
  left: 0;
  top: 50%;
`;

export default CarouselBanner;

컴포넌트자체를 carousel 자체로 만드는 방법이 있었다. 만들어 놓은 레이아웃을 활용하려던 생각 자체가 다음 스텝으로 넘어가는데 방해하는 요소였다.
이제 다음 스텝으로 들어갈 이미지추가와 여러 장을 한번에 보여주는 속성과 버튼의 위치를 조정해주는 작업을 하면 된다.
carousel을 넣을 태그를 만들어 준 후 그 안에 carousel이 들어 가도록 해주면 된다. width값을 줘야 원하는 사이즈를 줄 수가 있다.
한가지만 알고 있는 것이 정말 무섭다. 여러가지를 접해보고 필요한 상황에 맞게 정제해 사용하는 능력을 길러줘야 겠다.

해야 할 작업

• carousel 스타일링
• 퍼블리싱하기
• 최대한 오늘의 집 비슷하게 스타일링 하기
  오늘안에 최대한 만들어야 이번주 안에 기능구현까지 가능하다!