$$config title: [Gatsby] 기초 keywords: - IT - 개츠비 $$ # Gatsby [개츠비 공식 문서](https://www.gatsbyjs.com/docs/) - React + 그래프QL을 통해 생성한 정적 사이트 생성기 - 배포되는 구조 개인 컴퓨터에서 작업 하고 push하면 github에 작업이 올라감. gatsby cloud에 github가 알아서 전송해줘서 블로그 생성. ## Gatsby 설치방법 - cmd에서 npm install -g gatsby-cli ## 블로그 생성 방법 cd c:\work mkdir gatsby_projects cd gatsby_projects gatsby new ``` What would you like to call your site? √ · My Blog 2022 05 31 What would you like to name the folder where your site will be created? √ gatsby_projects/ my-blog-2022-05-31 √ Will you be using JavaScript or TypeScript? · JavaScript √ Will you be using a CMS? · No (or I'll add it later) √ Would you like to install a styling system? · No (or I'll add it later) ``` ## 프로젝트를 개발모드로 실행 preojects 파일 안에서 cmd로 cd my-blog-2022-05-31 code . VS CODE 실행 VS CODE 터미널 진입 npm run start npm run develop 도 가능 http://localhost:8000 ## 깃허브 프로젝트 생성 - 리포지터리 명 : my-blog-2022-05-31 ## 깃허브에 push ```git init git config user.name "GITHUB 아이디" EX : git config user.name "chuchu03" git config user.email "GITHUB 이메일" EX : git config user.email "rlaxogns73@gmail.com" git remote add origin GITHUB 원격지 리포지터리 주소 EX : git remote add origin https://github.com/chuchu02/my-blog-2022-05-31 git add . git commit -m "세팅" git push origin master ``` ## 페이지 리로드가 안될 때 1.서버를 재시작 - Ctrl + c 해서 나가기, npm run start로 재시작 ## 다른곳에서 작업을 이어갈 때 ``` cmd 진입 cd c:\work mkdir gatsby_projects cd gatsby_projects git clone GITHUB_원격지_리포지터리_주소 my-blog-2022-05-31 EX : git clone https://github.com/chuchu02/my-blog-2022-05-31 my-blog-2022-05-31 cd my-blog-2022-05-31 git config user.name "GITHUB_아이디" EX : git config user.name "chuchu02" git config user.email "GITHUB_이메일" EX : git config user.email "rlaxogns73@gmail.com" code . ``` ## vscode가 자동완성이 안되고 있을 때 - f1로 명령어 창 열기 - TypeScript: Restart TS server ## import 관련 소스코드 정리 - f1로 명령어 창 열기 - Organize Imports ## Link 컴포넌트 import ```js import { Link } from "gatsby"; ``` ## Link 컴포넌트 (페이지 라우팅) html 에서는 a태그로 링크이동을 한다. => 서버로 요청을 보냄 Gatsby 에서는 Link 태그로 링크이동을 한다.(페이지 간 이동속도가 빠름) => 전부 브라우저 내부에서 React기반으로 라우팅 a 태그는 href 속성을 사용한다. Link태그는 to 속성을 사용한다. ## Layout 컴포넌트 다른 페이지에 동일한 코드들이 많을 경우 하나하나 고쳐줄 수 없다. component 파일을 새로 생성하고 Layout파일을 하나 생성. Layout 파일에 중복되는 코드를 생성해준다. ```js //layout.js import { Link } from "gatsby"; import React from "react"; function Layout({ children }) { return ( <>

홈 어바웃 테스트 테스트-스페이스!!

{children} // 나머지 js파일 사이에 들어가야할 값을 대체해준다.

); } export default Layout; ``` 나머지 파일에서 ``사이값``으로 묶어준다. ```js //index.js import * as React from "react" import Layout from "../components/layout" // markup const IndexPage = () => { return ( 홈

홈페이지

) } export default IndexPage ```