Azubik

삽질도 많이 하고 여러 블로그를 참고해서 우여곡절 끝에 레이아웃을 만들고 이제 Markdown을 작성해서 포스팅만 하면 될것같은데 graphql을 통해 md파일을 조회하고 템플릿을 만들어서 gatsby-node로 어떻게 손을 좀 보면 될것같은데 아무리 해봐도 안된다. 만지면 만질수록 개발자도구 콘솔에서는 빨간 글자만 늘어나고 답답하기만 하다. 결국 나는 기본적인 구성이 되어있는 템플릿을 사용하기로 마음먹었다 Gatsby Starter Theme를 netlify로 배포했고 이제 하나하나씩 커스텀해가면서 사용할 것이다. 지금은 누군가가 만든 테마를 빌려다 쓰지만 언젠간 내가 직접 테마를 만들어서 쓰고 배포할 것이다.

개츠비로 개발 블로그를 직접 만드는 중인데 기본 테마에서 레이아웃 수정을 마치고 마크다운 파일로 포스팅을 만드는데 graphql로 md파일 내용을 조회하는 것 까지는 했으나 템플릿을 만들고 포스팅이 어떻게 되는지 암만 찾아도 이해가 잘 안된다.. 그래서 기본 템플릿보다 어느정도 틀이 있는 gatsby-starter 테마를 커스텀 하면서 다시 만들어보려 한다. 계속 결과는 없고 끈기없이 삽질만 하는 기분이 든다. 그래도 열심히 해보자

Gatsby를 통해 블로그를 만드는중인데 footer를 bottom:0; 으로 설정해도 자꾸 위로 올라온다 body에 height를 100으로 설정해도 아무런 변화가 없다 개발자 도구를 통해 확인해보면 #___gatsby, #gatsby-focus-wrapper에 이미 height가 컨텐츠에 맞춰서 설정되어있다. global style에서 별도로 height를 적용해주면 해결 된다. // globalStyle.js import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` * { margin: 0; padding: 0; box-sizing: border-box; } #___gatsby, #gats..

스크롤을 내리면 상단바도 같이 올라가서 고정 시켜보려 한다. CSS 의 position 속성중 fixed를 사용할 것이다 fixed로 설정하면 부모 엘리먼트로부터 독립되어 내가 위치에 자유롭게 배치시킬 수 있게 되고 브라우저 화면을 스크롤 해도 영향을 받지 않는다. 우선 styled를 import 해주고 import styled from "styled-components" 스타일을 지정할 컴포넌트를 만들고 position 속성을 추가한다 const HeaderStyle = styled.header` position: fixed; `; 내가 원하는 위치까지 설정을 해주고 상단 메뉴바를 지금 만든 컴포넌트로 만들어주면 스크롤을 내려도 상단 메뉴바는 고정되어있는것을 확인할 수 있다. import * as Re..

개발 블로그 테마를 다운받아 간단한 부분만 수정하고 사용해보려고 했다. 블로그 타이틀, 프로필, 카테고리 등 기본적인것만 수정하고 이제 배포를 할 차례인데 github page를 이용하는 것은 이것저것 신경쓸 것도 많고 복잡해서 netlify를 통해 배포하려 하는데 계속 실패한다. 로컬에서는 페이지가 잘 나오는데 배포만 하려 하면 오류가 난다. 구글에 아무리 찾아도 해결이 안된다.. 다시 직접 만들기로 했다. 새롭게 프로젝트를 만들고 바로 netlify에 배포했다. 우선 페이지 타이틀이랑 폰트를 바꿔봤다. 열심히 만들어야지 끝까지 열심히 해내면 좋겠다

styled-component 설치가 안되어있으면 2021.11.10 - [Gatsby] - Gatsby Styled Components 사용하기 설치를 완료한 상태라면 우선 사용할 파일을 새로 만들어준다 globalStyle.js 파일에서 createGlobalStyle 을 import 해준다 import { createGlobalStyle } from "styled-components"; createGlobalStyle을 함수에 할당해주고 원하는 스타일을 지정해서 사용하면 된다 import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { margin: 0; } a { text-dec..

Gatby 스타일링 방법은 여러가지가 있는데 그중 Styled Component를 사용하려 한다. npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components gatsby 디렉토리에 설치하고 gatsby-config.js파일에 Styled Component 플러그인을 추가한다. Copygatsby-config.js module.exports = { plugins: [`gatsby-plugin-styled-components`], } 이제 js파일에서 import 하고 원하는 스타일로 꾸미면 되겠다 import React from "react" import styled from "styled-compo..

개인 개발 블로그를 만들고 싶어서 이것저것 많이 찾아보고 있다. jekyll을 사용해 만들까 했지만 react에 대해 많이 배울 수 있을 것 같아 Gatsby로 공부 중이다. 기존에 만들어진 테마를 사용하는 건 velog나 tstory를 사용하는 것과 큰 차이가 없을 것 같다는 생각에 직접 블로그를 만들고 싶었고, Default 테마를 받아 Layout을 제작하고 있던 중 내 눈을 사로잡는 테마를 발견했다. JaeYeopHan 님의 gatsby-starter-bee 테마였고 이 테마를 커스텀해서 사용하고 싶어졌다 마음에 갈등이 생겼다. 블로그 만들면서 삽질하지 말고 미리 만들어진 블로그 테마를 사용해 시간을 아껴서 다른 걸 공부하는 게 더 좋지 않을까? 지금 하는 삽질도 지나고 보면 경험일 텐데 꾸준히 ..

1. Set Up Node.js version 14.15 이상 Git Gatsby commandline interface(CLI) version 3 이상 VS Code 2. 프로젝트 생성 Create Gatsby Project 터미널에 gatsby new 명령을 입력한다 원하는 프로젝트 명을 입력한 뒤 엔터를 누르고 기타 설정은 no> no> done으로 넘어간다 생성이 잘 되면 디렉토리로 진입 후 gatsby develop 혹은 npm run develop 명령을 실행한다 localhost:8000 으로 접속하면 정상적으로 개설된 것을 확인할 수 있다. gatsby new gatsby new 명령어 뒤에 프로젝트 이름을 입력하면 기타 설정 없이 바로 패키지가 설치되는데 이 경우 gatsby-starte..

배열 순서가 있는 값 순서 = 인덱스(index) / 값 = 요소(element) let myNumber = [22,38,16,51,86]; 배열 메소드 대괄호 (square bracket)를 이용해 배열을 만들고 각각 원소(element)는 쉼표(comma)로 구분하며 첫번째 원소부터 0으로 번호를 매긴다. 배열 요소(element)의 조회, 추가, 삭제, 복사, 분리 하는 방법 arr[0], push, pop, unshift, shift, slice, length 배열의 2번째 인덱스를 조회하려면? 순서가 있는 값 순서 = 인덱스(index) / 값 = 요소(element) let myNumber = [22,38,16,51,86]; 대괄호 (square bracket)를 이용해 배열을 만들고 각각 원..