Azubik

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

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