소개

안녕하세요.

Gatsby 템플릿에서 이 웹사이트를 시작하고 2주 정도가 지나려고 합니다만, 나는 있는 것을 깨달았습니다. 그것은...

코드 거의 만지지 않는 야케! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! 11

맞습니다. 템플릿은 여기입니다만, 지금까지 변경을 한 것은

샘플 기사 삭제

About Me 업데이트

Twitter 및 Github 계정의 방향 변경

README 업데이트

. . . . . . . . . . . . . . . . . . . . . . . .

프로그래머 같은 것 아무것도하지 않는다! ! ! ! ! ! ! ! !

그래서 이번에는 모처럼 GatsbyJS에 접할 기회이므로이 템플릿에 하나의 요소를 추가하여 배열을하고 싶습니다.

완성도

이번에는 블로그 제목을 톱 페이지에 h1 태그로 추가하는 수정을 실시했습니다.

Before

After

구현

이번 구현의 흐름으로서는,

Header 컴포넌트의 작성 (지금 생각하면 Header는 이름 다양하다.)

작성한 Header 컴퍼넌트를 index 템플릿에 추가

입니다.

먼저 Header 컴포넌트를 만듭니다.

우선 h1 태그로 제목만 표시합니다.

재사용 가능한 UI 컴퍼넌트 로 하기 위해서(때문에) , 이러한 쓰는 방법을 합니다.

import React from "react"

const Header = props => (
    <div className="header">
        <h1>{props.title}</h1>
    </div>
)

export default Header;

Gatsby-starter-lumen 에서는 톱 페이지의 컴포넌트 는 Layout 추가합니다.

<Layout title={pageTitle} description={siteSubtitle}>
      <Header title="快速スーパーエンジニア行き" />
      <Sidebar isIndex />

결론

코드 수정량은 그리 많지 않지만, React를 지금까지 만진 적이 없었기 때문에, 컴퍼넌트나 CSS Molude의 개념을 이해하고 있지 않았기 때문에 기존의 코드를 읽고 이해하는데 압도적으로 시간 걸렸습니다.

이번에는 h1 태그로 적당히 블로그의 타이틀을 추가했을 뿐입니다만, 앞으로도 Gatsby Tutorial 등을 진행하면서 프런트의 세계를 이해하면서 이 블로그를 모던하게 업데이트 할 수 있으면 좋겠습니다((꜆꜄ ˙꒳ ˙)꜆꜄꜆팥

블로그 에도 같은 내용의 기사를 투고하고 있으므로, 좋으면 그쪽도 봐 주세요(｀･ω･´)ゞ비싯!!