first_project DAY+4

KEEP 오늘의 좋았던 경험

• BookInfoModal, BookMarkModal, BookReviewModal, Notifycation 작업 완료했다.
• React에서 font적용시키는 방법을 배웠다. 참고링크

//사용하고싶은 폰트를 다운받아서 woff파일로 변환시킨 뒤에 폴더안에 저장시켜준다.
import Qwigley from "../assets/fonts/Qwigley-Regular.woff";

//그리고 아래처럼 작성해주면 된다.
const MainLogo = styled.div`
  @font-face {
    font-family: "Qwigley";
    src: url(${Qwigley}) format("woff");
  }
  font-family: "Qwigley";
  font-size: 100px;
  font-weight: 400;
  margin-bottom: 20px;
`;

• React에서 폰트어썸 사용하는 방법을 배웠다. 아래 명령어로 npm install 해준다. 참고링크

Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지.
npm i @fortawesome/fontawesome-svg-core

Font Awesome 아이콘에 대한 패키지 설치. 무료로 제공되는 Solid, Regular, Brands 3개의 카테고리에 대한 패키지.
npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

Font Awesome을 React 컴포넌트 형태로 사용할 수 있도록 해주는 패키지.
npm i @fortawesome/react-fontawesome

//React 컴포넌트로 사용하기

import React from "react";
import { faCamera } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default () => <FontAwesomeIcon icon={faCamera} />;

• 어제까지 git PR 날릴때 마다 conflict가 계속 떳었는데 새로 클론 받아서 해주니 그런일이 발생하지 않고 깔끔하게 merge가 잘됐다.
• 같은 포지션 팀원이 완성한 것과 내가 완성한 것을 합치고 더미 데이터를 넣어서 테스트 해봤는데 생각보다 잘 나왔다.

PROBLEM 고쳐나갈 경험

• CSS작업이 너무 어렵다. 페이지 크기에 따라 내용물이 잘 보여야 하는데, 화면이 크면 잘 보이는데 작아졌을 때 제멋대로 보이는 경향이 있다.

TRY 시도해볼 일

• 메인 페이지에서 Footer와 Books가 안겹치고 잘 보이도록 만들기.
• 반응형 CSS 만드는 영상 찾아서 적용해보기.
• Footer가 페이지의 맨밑에 그냥 잘 있게 만들기.