프로그래머스 데브코스 80일차 with. TS 웹 풀스택

📚요약

지난 시간까지 회고에서 부족한 부분을 찾고 구현했습니다. 이번 시간에는 메인 화면을 만들고 모바일 대응을 해보겠습니다.

 

📖Book Store 프로젝트

📄메인 화면

메인 화면에서는 크게 배너, 추천 도서, 신간 도서, 댓글 정보를 제공해 줍니다.

 

📑배너

배너는 기존 리액트에서 제공해 주는 기능을 활용해 슬라이드가 되도록 만들어 보겠습니다. 다양한 방식이 있겠지만 css의 transform: translate()와 화면에 보여줄 배너 데이터의 인덱스를 이용하면 옆으로 이동시킬 수 있습니다. 해당 방식은 Styled Components처럼 CSS in JS 방식을 사용할 때 사용할 수 있습니다.

🍯tip! 배너는 오른쪽 버튼을 클릭하면 왼쪽으로 움직이기 때문에 translate 시 -를 붙여야 한다.

 

배너 API는 리뷰처럼 백엔드에서 구현되지 않았기 때문에 MSW를 사용해서 만들어서 이용했습니다.

 

📑추천 도서

기존에 사용하던 BookItem 컴포넌트를 활용하는 방법으로 진행했는데, Styled Components를 사용하면 컴포넌트를 export 하면 해당 style에 접근할 수 있는 것을 활용했습니다. 해당 기능을 이용해 BookItem에서 필요하지 않은 summary, price, likes 부분을 보이지 않게 했습니다.

import { Book } from "@/models/book.model";
import React from "react";
import styled from "styled-components";
import BookItem, { BookItemStyle } from "./BookItem";

const BookBestItem = ({ book, itemIndex }: Props) => {
  return (
    <BookBestItemStyle>
      <BookItem book={book} view="grid" />
      <div className="rank">{itemIndex + 1}</div>
    </BookBestItemStyle>
  );
};

const BookBestItemStyle = styled.div`
  ${BookItemStyle} {
    .summary,
    .price,
    .likes {
      display: none;
    }
    h2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  ...
`;

export default BookBestItem;

 

추천 도서 API도 MSW를 사용해서 만들어서 이용했습니다.

 

📑신간 도서

기존 데이터에서 신간 도서를 가져오는 것을 활용해 화면에 그려줬습니다.

 

📑리뷰 캐러셀(Carousel)로 보여주기

위 배너에서는 직접 슬라이드를 구현했다면 이번에는 react slick, slick carousel 라이브러리를 활용해 리뷰를 캐러셀로 보여주겠습니다.

캐러셀(Carousel)이란 하나의 콘텐츠 영역 안에 여러 개의 서로 다른 콘텐츠를 표시할 수 있는 컴포넌트입니다. 배너에서 구현한 슬라이더라고 생각하셔도 됩니다.

캐러셀 - KRDS

라이브러리에 대한 자세한 내용은 react slick, slick carousel 각 사이트에서 확인할 수 있습니다.

 

📄모바일 대응(반응형 웹)

모바일에서도 웹을 많이 이용하기 때문에 프론트 개발자라면 반응형 디자인을 적용할 필요가 있습니다. 반응형 웹이란 기기의 크기가 다양해진 오늘날 다양한 화면 크기에 맞춰 최적화된 화면을 보여주는 것을 말합니다.

 

중요한 점

• viewport: meta 태그를 통해 적용할 수 있는 메타.
• 상대값을 가진 레이아웃: 고정된 크기가 아니고 % 나 vw, vh와 같이 변화하는 단위를 사용해야 한다.
• 화면 너비 감지(mediaquery): 미디어쿼리를 사용하면 미디어의 상태를 관리할 수 있다.

🍯tip! input 태그의 속성인 inpu-mode를 활용하면 모바일에서 키보드의 모양이 달라진다. 이를 잘 활용하면 UX측면에서 좋다.

 

자세한 코드는 Github에 올라가 있습니다.

ProgrammersSchool/FE-BOOKSTORE/bookstore at main · nulzi/ProgrammersSchool

 

❔▪❓

Q. 미디어 쿼리를 사용해서 화면의 사이즈를 감지하는 부분에서 styled components를 이용해 js를 넣으니 에러는 아니지만 빨간 줄이 그어진다. 어떻게 해결해야 할까?

A.

 

다음 시간에 계속...

 

출처 & 참고

문윤기 강사님의 강의