뭘 배웠지?

개츠비 설치와 프로젝트 생성을 안했다면 -> [Gatsby] 개츠비 설치 & 기본 프로젝트 만들기 이미지 그냥 올리면 안되나? 개츠비는 기본적으로 이미지를 어떻게 처리할줄 몰라한다고 한다. 이미지를 올리고 싶으면 밑의 플러그인 4가지를 깔아줘야 한다. 비주얼 스튜디오 코드에서 밑의 명령어를 이용해 설치하면 된다. gatsby-transformer-remark: 개츠비에서 마크다운을 사용할 수 있게 해준다 [ 주인공 ] gatsby-plugin-sharp: 개츠비 플러그인으로 이미지를 처리하는데 도와준다. gatsby-remark-images: 마크다운(markdown)문서에서 이미지를 사용할 수 있게 해준다. gatsby-remark-relative-images: 파일에서 이미지 위치를 찾아준다. 이렇게..

개츠비 설치와 프로젝트 생성을 안했다면 -> [Gatsby] 개츠비 설치 & 기본 프로젝트 만들기 개츠비의 강점 개츠비의 강점 중 하는 데이터를 가져와서 사용할 수 있다는 것이다. CMS: 워드프레스, 컨텐츠풀, 두루팔 같은 컨텐츠 매니지먼트 시스템 마크다운(Markdown): 문서나 포스트 데이터(Data): API, 데이터베이스, CSV, JSON 등 이런 데이터를 가져와서 보여줄 수 있다. GraphQL 이런 데이터는 GraphQL API을 통해 볼 수 있는데 GraphQL API를 비주얼적으로 확인할 수 있는 GraphQL IDE인 GraphiQL에 접속하면 볼 수 있다. 들어가는 방법은 우선 개츠비 develop 모드로 들어가고, localhost:8000/___graphql 위의 주소로 들어가..

개츠비 설치와 프로젝트 생성을 안했다면 -> [Gatsby] 개츠비 설치 & 기본 프로젝트 만들기 CSS 적용방법 1. src폴더 안에 styles(이름은 마음대로)폴더 만들기 2. styles폴더안에 index.css 폴더 만들기 3. layout.js(원하는 곳)에 index.css 불러오기(import) 레이아웃을 관리하기 좋게 만든 layout.js 사용방법은 -> [Gatsby] 개츠비 페이지 레이아웃 만들기 이렇게 하면 기본적인 CSS가 연결됐다. 원하는 스타일을 리액트에 주면된다. 플러그인 설치하는 방법 1. 원하는 플러그인을 찾아보자 개츠비 공식홈페이지에서 수많은 플러그인을 찾아볼 수 있다. 여기서는 Scss를 사용할 수 있게 만드는 gatsby-plugin-sass를 설치하는 방법을 알아..

개츠비 설치와 기본 프로젝트 생성해야 밑의 내용을 따라할 수 있습니다. 개츠비 설치 & 프로젝트 생성 포스트 바로가기 -> 이번 포스트는 가정이 필요하다. header.js 그리고 footer.js가 src -> components(생성)에 저장되어있다. 시작! 헤더(header), 푸터(footer)를 리액트에서 사용할 때 이렇게 사용하기도 한다. 헤더와 푸터 가져와서 위와 아래에 적용시킨다. 인덱스 페이지 - 레이아웃 적용 전 import React from 'react' import Header from '../components/header' import Footer from '../components/footer' const IndexPage = () => { return( 내용 ) } expo..

개츠비 설치와 기본 프로젝트 생성방법은 전 포스트를 참고하세요-> 보통 HTML에서 페이지를 연결할 때 태그를 이용한다. 이렇게 소개 페이지 Link 사용하기 개츠비에는 Link라는 리액트 컴포넌트를 사용할 수 있다. Link는 내부 페이지간의 이동시 좋은 점을 가지고 있다. 가장 돋보이는 점은 누르는 즉시 이동되는 점이다. 어떻게 사용할까? 우선 Link를 개츠비 모듈에서 가져와야한다. import { Link } from 'gatsby' 그런다음 Link를 HTML태그를 사용하듯이 사용하면된다. 소개 페이지 끝!

0. 사전작업 개츠비를 설치하기 위해서 Node.js를 먼저 깔자. Node.js 공식사이트에서 다운 받으면 된다. nodejs.org/ 1. Node.js 터미널 실행 2. 개츠비 설치 npm install -g gatsby-cli 위의 입력하면 개츠비 설치가 시작된다. 3. 프로젝트 생성 cd "원하는 폴더 루트" 우선 프로젝트가 설치되기 원하는 폴더로 이동 gatsby new gatsby-bootcamp https://github.com/gatsbyjs/gatsby-starter-hello-world 이렇게 입력하면 프로젝트(폴더)와 필요한 파일들으 생성한다. 4. 생성된 프로젝트 불러오기 저는 에디터로 VSCode를 사용합니다. code.visualstudio.com/ 에디터에서 폴더 열기 5. ..