이전에 만들었던 갯츠비 블로그를 조금 더 좋은 방향으로 만들고자 진행하게 되었습니다
아래의 갯츠비 공식 튜토리얼을 기반으로 진행 되었습니다
Part 1: Create and Deploy Your First Gatsby Site
⚠️ Gatsby
⚠️ styled-components
✅ 다크 모드를 추가 합니다
✅ 시멘틱을 최대한 지켜보도록 노력합니다
✅ 단기적인 블로그가 아닌 장기적인 블로그를 만들어 봅니다.
튜토리얼대로 갯츠비를 설치, 기본 파일 세팅을 진행해 주었습니다. 그런데 이전에는 튜토리얼 내에서 css 모듈을 이용해 주었으나. 사용 목적이 잘 와 닿지 않아. 새롭게 공부하게 된 styled-component
를 적용하게 되었습니다.
블로그 구조는 1차적으로는 위의 세 구조로 크게 잡게 되었습니다. 블로그의 경우에는 별도의 게시글이 들어가야 하므로, 이후로 폴더로 변경해줄 예정입니다.
이전에 styled-component
을 이용해 준 것처럼, 이번에도 글로벌 스타일과 theme
을 이용해 적용해주려 했으나. 렌더링부터 되지 않는 문제가 발생하게 되었습니다.
✅ 당시의 코드
✅ theme을 사용하기 위한 theme.js
파일 내 코드
export const theme = {
Background: "#EAE7C7",
MainColor: "#74917F",
PointColor: "#0B0D07",
TextColor: "#475135",
};
🌱 index.js
에서 사용해 주기 위한 레이아웃 파일 내 코드
import React from "react";
import { theme } from "../styles/theme";
import { ThemeProvider } from "styled-components";
import { GlobalStyles } from "../styles/global-style";
const GlobalLayout = ({ children }) => {
return (
<ThemeProvider theme={theme}>
<GlobalStyles />
{children}
</ThemeProvider>
);
};
그런데 다시 웃긴 건, 동일한 에러를 만들고자 다시 동일한 상황으로 만들었을 때 자연스럽게 나오는 게 의문스러운 것 같습니다 🤔 진짜 뭐야 …ㅋㅋㅋㅋㅋ 거의 두 시간 동안 고쳤는데 기록을 안 하니 이렇게 허망하게 지나가는 것 같습니다.. 잊지 말자 에러 기록 😉
현재는 제목과 간단히 컨텐츠가 들어갈 구역 정도로 나누어 놓은 상태 입니다. 그런데 매번 해왔던 고민은 이렇게 나누어도 괜찮을 지가 될 것 같습니다.
1차적으로는 위와 같은 모습이 될 것 같은데, 프로젝트 내용을 링크로 걸어서 깃으로 이동하게 할지 아니면, 바로 프로젝트 내용을 보여줄지 가 좀 고민이긴하지만… 약간 만들면서 고민하지 했읍니다…
항상 페이지를 만들 때 마다 article> section >div로 접근을 하는 편인데, 개인적으로 고민이 되는 지점은 여러 div를 감싸주는 것도 section으로 진행해도 되지 않을까 하는 애매함이 항상 남아있게 되는 것 같습니다 🤔
현재는 단순 레이아웃 작업을 진행해 주며, 섹션에 div를 감싸 주기 위한 div를 이용해 주고 있으나, 최근 프로젝트를 진행하며 느낀점은 너무!! 더럽다!! 라는 생각이 들었습니다.
그래서 일단은 틀을 잡아 놓고, 재 사용이 가능해 보이는 요소들을 mixin으로 만들어 이용해 주고,
2차적으로는 section내 section을 한번 더 넣는 방향으로 진행을 할까 하는 생각이 들고 있습니다.🤔
⚠️ 문제 상황
평소와 같이 리액트에서처럼 svg 파일을 받아 이용해 주려 했는데 이미지가 전혀 나오지 않는 문제가 발생했습니다
⚠️원인
처음에는 경로를 확인해 주었으나, 경로에서 문제가 없다는 것을 확인 했습니다
검색 후 나온 힌트들!
✨svg를 지원하지 않는 라이브러리를 사용하고 있을 수도 있다!.
✨별개의 설정을 해줘야지 svg를 사용 할 수 있다!
⚠️ 시도
1차적으로 라이브러리 설치
라이브러리 설치 후 진행해 주었으나 두 가지 상황이 생겼다
✨ 컴포넌트로 이용해야 한다
✨ 컴포넌트를 이용해주면 바로 에러가 발생한다
그냥 라이브러리를 사용하지 않고 진행해도 되었던거야....^^…
⚠️ 최종 코드
import LogoReact from "../assets/react.svg";
const ICON = [
{ name: "react", value: LogoReact },
{ name: "js", value: "a" },
{ name: "html5", value: "a" },
{ name: "css", value: "a" },
];
const ICON_MAP = new Map(ICON.map((icon) => [icon.name, icon.value]));
<MainContentTechImg alt="react" src={ICON_MAP.get("react")} />
위와 같이 svg파일을 별도로 import 해서 src에 넣어주면 됩니당!
🤔 svg를 사용해 주는 이유가 뭐지?. 뭐가 좋아서 그런걸까?