Azubik

gatsby 블로그 외부 링크 클릭시 새창으로 열기 위해 _blank 태그를 추가하니 경고가 나타났다. 이게 무슨 문제인가 찾아보니 Tabnabbing 피싱 공격에 노출될 수 있기 때문이라 한다. Tabnabbing 피싱 공격이란 target_blank인 태그를 클릭하였을 때 새롭게 열린 탭에서 기존 페이지를 피싱페이지로 바꿔 정보를 탈취하는 피싱 공격인데 A 페이지에서 B 링크를 새 창으로 접속하면 탭에 있는 A 페이지가 나도 모르는 새에 C 페이지로 바뀌어 있는 것이다. 해결 방법으로는 target=”_blank” 와 rel=”noopener noreferrer”을 같이 적용한다. rel=”noopener noreferrer”는 rel=noopener 속성이 부여된 링크를 통해 열린 페이지에서 자바스..

카테고리 목록을 화면에 출력시키긴 했지만 아무 동작도 하지 않는다 우선 카테고리에 클릭 이벤트를 추가해주자 //categories.js const Categories = ({ data, onChangeCat }) => { const { group } = data.allMarkdownRemark const clickHandler = event => { console.log(event.target.innerText) } return ( All {group.map(prop => { const { fieldValue } = prop return ( {fieldValue} ) })} ) } /* 여기서 onKeyPress={clickHandler} 와 role="presentation"를 추가한 이유는 비대화형 ..

개츠비 블로그를 커스텀하다보니 개시물을 카테고리별로 분류하고 싶어졌다. 처음부터 카테고리가 있는 테마를 쓰면 편하지만 불편한게 끌리는건 왜인지 모르겠다. 좌측 배너 중간쯤에 카테고리들을 나열하고 카테고리를 클릭하면 해당 카테고리에 해당하는 포스트만 나타낼것이다. 다른 블로그를 찾아보니 page에 새로운 것을 추가하고 gatsby-node를 설정하는등 여러 방법이 있는듯 하나 나는 그냥 조건문을 이용해 렌더링 할것이다. 우선 카테고리를 표시하기 위해 새로운 컴포넌트를 만들었다 이름은 categories.js import React from "react" import { graphql } from "gatsby" const Categories = ({ data }) => { const { group } = ..

https://www.gatsbyjs.com/docs/using-typography-js/ 문서를 정리한 글 입니다. gatsby-starter 테마를 통해 블로그를 만들었는데 글꼴이 상당히 마음에 들지 않는다. 한글 영어는 괜찮은데 한글을 지원하지 않아 얼른 바꾸고싶은 마음이 든다. 글꼴 바꾸는 방법을 찾아보다가 gatsby 공식 문서에 나와있는 방법을 적용하니 간단하게 적용이 잘 되어 공유하고자 한다. 우선 Typography를 설치하고 gatsbt-config 에 추가해준다. npm install gatsby-plugin-typography react-typography typography gatsby-config module.exports = { plugins: [ { resolve: `gatsb..

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..

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..