Gatsby블로그를 만들기! :DAY3

DIDI( 지수)·2022년 6월 23일

gatsby 다크모드 블로그

블로그를 만들자

목록 보기

2/4

오늘의 목표

🌟 메인페이지 상, 중단을 만들어요!

🌟 다크모드를 1차적으로 마무리합니다: 다크모드가 유지되도록!

메인페이지

상단 HTML 구조 변경

최종적으로 정해진 블로그 상단의 모습입니다. 진행을 하며 문제가 되었던 부분은 div를 쓸데 없이 많이 만들어 이용해 주었던 부분이었습니다

이전에는 아래와 같은 모습의 코드였습니다

<section>
 <div>
   <img alt="이미지 들어갈 예정" />
   </div>
 <div>
   <h1>DIDI</h1>
   <div>
      <p>간단한 자기소개가 들어갈거에요!</p>
      <p>꾸준함을 노력하고자하는 프론트엔드 개발자 디디에요</p>
      <p>어디에서라도 긍정적인면을 발견하는 것을 좋아합니다😊</p>
    </div>
 </div>
 </section>

그런데 이제 연락처 부분이 들어가게 되면서, 아래와 같이 변경을 해줘야 하는 상황이 되었습니다

<section>
  <div>
    <img alt="이미지 들어갈 예정" />
  </div>
  <div>
    <div>
      <h1>DIDI</h1>
      <div>
        <p>간단한 자기소개가 들어갈거에요!</p>
        <p>꾸준함을 노력하고자하는 프론트엔드 개발자 디디에요</p>
        <p>어디에서라도 긍정적인면을 발견하는 것을 좋아합니다😊</p>
      </div>
    </div>
    <div>
      <ul>
        <li>연락처</li>
      </ul>
    </div>
  </div>
</section>

이런 상황에서 스타일드 컴포넌트를 이용하면서, 중복되는 부분의 관리를 제대로 못해준 상황이었기 때문에, 컴포넌트들이 점점 늘어나 뭐가 무엇인지 관리가 어려워졌습니다.

그래서 상단의 배치를 다시 해주기로 결정해주었습니다

flex 를 적용해도 크게 상관 없고, 공통된 컴포넌트를 만들어 주었습니다
이후 내부 역시 동일하다는 생각이 들어 공통 div컴포넌트로 나누어 주었습니다
마지막으로 내부 컨텐츠를 감싸줄 div를 만들어 진행해 주었습니다

🤔 그런데 지금보니 결국 감싸줄 div의 경우에는 공통 컴포넌트로 진행해도 되었을 것 같다는 생각이 들어 변경을 다시 해야할 것 같슴니다🙃

상단 아이콘 FONT AWSOME으로 변경

GATSTBY FONTAWSOME 적용 이야기

배경

다크모드로 적용했을 때 일반 이미지 아이콘의 경우 혼자 색이 튀는 경우가 있어서, 사용가능한 아이콘의 경우 일단 폰트어썸을 사용해 보는 것이 좋다는 생각이 들어 진행하게 되었습니다!

방법

필요한 라이브러리를 설치해 줍니다 . 그런데 갯츠비 내의 라이브러리도 존재해 그것을 포함해서 설치해 주었습니다

$npm i --save @fortawesome/react-fontawesome
$npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
$npm i --save gatsby-plugin-fontawesome-css

이전에 아이콘을 사용해 주기위해서, 해시맵을 만들어 주었기 때문에. 이를 활용하기 위해 별개의 icon.js 파일을 만들어 아래와 같이 진행해 주었습니다

import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
import { faGithubSquare } from "@fortawesome/free-brands-svg-icons";
import { faCircleCheck } from "@fortawesome/free-solid-svg-icons";
import Styled from "../assets/icon/styled.svg";
import css from "../assets/icon/css.svg";
import LogoReact from "../assets/icon/react.svg";
import LogoHTML from "../assets/icon/html.svg";
import LogoJS from "../assets/icon/js.svg";

const ICON = [
  { name: "react", value: LogoReact },
  { name: "js", value: LogoJS },
  { name: "html5", value: LogoHTML },
  { name: "css", value: css },
  { name: "styled", value: Styled },
  { name: "email", value: faEnvelope },
  { name: "github", value: faGithubSquare },
  { name: "letterV", value: faCircleCheck },
];
export const ICON_MAP = new Map(ICON.map((icon) => [icon.name, icon.value]));

key는 email이고 value는 아이콘의 값이 되기 때문에, 아래와 같이 컴포넌트 내에서 이용해 줄 수있게 되었습니다

<FontAwesomeIcon icon={ICON_MAP.get("github")} />

다크모드 수정

배경

새로고침을 할때마다, 다크모드가 유지되는 것이 아니라 다시 라이트 모드로 돌아오는 상황이 발생했습니다.

시도

다행히 이전에 다크 모드를 진행해 주기 위해 찾아 놓았던 자료가 있어 보면서 진행해 주었습니다

Dark Theme with Styled Components

결과

오늘의 퀴즈

클라우드에서 배포시에 문제 발생했습니다. 왜..그런걸까용…. 에러메세지는 아래와 같습니다.

Page data from page-data.json for the failed page /main/: { "componentChunkName": "component---src-pages-main-js", "path": /main/, "result": { "pageContext": {} }, "staticQueryHashes": [] }