$$config title: 클래스 - Gatsby로 정적 블로그 구현 keywords: - IT - 웹 개발 개요 $$ # 수업 : Gatsby로 정적 블로그 구현 - [주소 : https://slog.gg/p/6457](https://slog.gg/p/6457) # ?️ 챕터 1 : Gatsby 개요 ## ? 1-1 : Gatsby 개요 ?️ 그림 1-1-A : Gatsby 개요 ![Gatsby 개요](https://www.gatsbyjs.com/static/e45422900475b86807bc002fb6863b85/321ea/data-layer.png) - 이미지 출처 : [https://www.gatsbyjs.com/docs/tutorial](https://www.gatsbyjs.com/docs/tutorial) ### 핵심 - 리액트 + GraphQL + 기타 플러그인 - 정적사이트 생성에 특화된 프레임워크 # ?️ 챕터 2 : React 개요 ## ? 2-1 : React 개요 ### 필수개념 - [https://ko.reactjs.org/](https://ko.reactjs.org/) - [CODEPEN - 예시](https://codepen.io/jangka44/pen/eYVMmRK?editors=0010) # ?️ 챕터 3 : GraphQL 개요 ## ? 3-1 : GraphQL 개요 ### 필수개념 - [https://graphql-kr.github.io/](https://graphql-kr.github.io/) ### GraphQL 서버 실행 - mkdir exam - cd exam - npm install express express-graphql graphql - npm install -g nodemon ```js // server.js var express = require("express"); var { graphqlHTTP } = require("express-graphql"); var { buildSchema } = require("graphql"); var schema = buildSchema(` type Query { hello(lang: String): String bye(lang: String): String } `); var root = { hello: ({ lang }) => "Hello world! " + lang, bye: ({ lang }) => "Bye! " + lang, }; var app = express(); app.use( "/graphql", graphqlHTTP({ schema: schema, rootValue: root, graphiql: true, }) ); app.listen(4000, () => console.log("Now browse to localhost:4000/graphql")); ``` - nodemon server.js ### GraphQL 클라이언트 - [https://www.postman.com/ 접속](https://www.postman.com/) - 혹은 설치해서 사용해도 됩니다. - 로그인 - 워크스페이스 선택(없으면 생성) - 콜렉션 생성 : graphql_test - 요청 - 메소드 : POST - 주소 : http://localhost:4000/graphql - BODY TYPE : GraphQL - BODY ```graphql query { bye(lang: "kor") hello(lang: "kor") } ``` # ?️ 챕터 4 : Gatsby로 사이트 배포 ## ? 4-1 : Gatsby로 사이트 배포 ?️ 그림 4-1-A : Gatsby로 사이트 배포 ![Gatsby로 사이트 배포](https://www.gatsbyjs.com/static/0fd27b745c1de708f034eaf97c4416e0/321ea/deployment-workflow.png) - 이미지 출처 : [https://www.gatsbyjs.com/docs/tutorial](https://www.gatsbyjs.com/docs/tutorial) ### 핵심 - Gatsby Cloud Free Plan을 이용하면, 사이트를 5개 서비스할 수 있다. - GITHUB 리포지터리에 푸시하기만 하면, 자동으로 Gatsby Cloud에서 해당 커밋을 받아간 후 재배포가 이루어 진다. # ?️ 챕터 5 : 마크다운 개요 ## ? 5-1 : 마크다운 개요 ### 개요 - Markdown은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. - 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. - 마크다운이 최근 각광받기 시작한 이유는 깃헙(https://github.com) 덕분이다. - 깃헙의 저장소Repository에 관한 정보를 기록하는 README.md는 깃헙을 사용하는 사람이라면 누구나 가장 먼저 접하게 되는 마크다운 문서였다. - 마크다운을 통해서 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되면서 점점 여러 곳으로 퍼져가게 된다. - [설명출처](https://gist.github.com/ihoneymon/652be052a0727ad59601) ### 마크다운 코드 ```md # This is a H1 ## This is a H2 ### This is a H3 #### This is a H4 ##### This is a H5 ###### This is a H6 1. 첫번째 1. 두번째 1. 세번째 - 내용 1 - 내용 2 - 내용 3 ``` ### 마크다운 결과 --- # This is a H1 ## This is a H2 ### This is a H3 #### This is a H4 ##### This is a H5 ###### This is a H6 1. 첫번째 1. 두번째 1. 세번째 - 내용 1 - 내용 2 - 내용 3 --- # ?️ 챕터 6 : JSX 개요 ## ? 6-1 : JSX 개요 ```js // NO JSX 예시 const name = 'Josh Perez'; const element = "

Hello, " + name + "

"; ``` ```jsx // JSX 예시 const name = 'Josh Perez'; const element =

Hello, {name}

; ``` ### 핵심 - 위에 희한한 태그 문법은 문자열도, HTML도 아닙니다. - JSX라 하며 JavaScript를 확장한 문법입니다. - UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. - JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. # ?️ 챕터 7 : MDX 개요 ## ? 7-1 : MDX 개요 ```jsx // MDX 예시 export const Highlight = ({children, color}) => ( {children} ); Docusaurus green and Facebook blue are my favorite colors. I can write **Markdown** alongside my _JSX_! ``` ### 핵심 - JSX + 마크다운 문법 - 리액트와 잘 어울린다. # ?️ 챕터 8 : Gatsby에서의 MDX 처리 ## ? 8-1 : Gatsby에서의 MDX 처리 ?️ 그림 8-1-A : Gatsby에서의 MDX 처리 ![Gatsby에서의 MDX 처리](https://www.gatsbyjs.com/static/04384c192391ebeac3b63ea42872f3f2/321ea/data-layer-with-nodes.png) - 이미지 출처 : [https://www.gatsbyjs.com/docs/tutorial](https://www.gatsbyjs.com/docs/tutorial) ?️ 그림 8-1-B : Gatsby에서의 MDX 처리 ![Gatsby에서의 MDX 처리](https://www.gatsbyjs.com/static/d710adc16d08d60f8919c62468ec0e8f/321ea/data-layer-with-imagesharp-nodes.png) - 이미지 출처 : [https://www.gatsbyjs.com/docs/tutorial](https://www.gatsbyjs.com/docs/tutorial) # ?️ 챕터 9 : 필수프로그램 설치 ## ? 9-1 : 필수프로그램 설치 - GIT - VS CODE - NODE 최신버전 # ?️ 챕터 10 : gatsby 프로젝트 생성 ## ? 10-1 : gatsby 프로젝트 생성 ### 프로젝트 생성 - npm init gatsby ``` What would you like to call your site? √ · MyBlog What would you like to name the folder where your site will be created? √ graphql_projects/ my-blog √ 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) √ Would you like to install additional features with other plugins?No items were selected Thanks! Here's what we'll now do: Create a new Gatsby site in the folder my-blog √ Shall we do this? (Y/n) · Yes ``` - cd my-blog - code . - vs code 터미널로 이동 - npm run start - [http://localhost:3000](http://localhost:3000) # ?️ 챕터 11 : github 프로젝트 생성 ## ? 11-1 : github 프로젝트 생성 ### github 프로젝트 생성 - [https://github.com/new](https://github.com/new) - 리포지터리 이름 : my-blog-2022 ### 내용 - [리포지터리](https://github.com/jhs512/my-blog-2022/commit/d02ccb08a836cf9273fa8a483d4b1f58b2943d82) - [GIT](https://github.com/jhs512/my-blog-2022/commit/d02ccb08a836cf9273fa8a483d4b1f58b2943d82) # ?️ 챕터 12 : 프로젝트와 GIT 연결 ## ? 12-1 : 프로젝트와 GIT 연결 ### 프로젝트와 GIT 연결 - VS CODE 터미널로 이동 - git init - git remote add origin [GITHUB 리포지터리 주소] - git add . - git commit -m "세팅" - git push origin master # ?️ 챕터 13 : Gatsby Cloud와 리포지터리 연결 ## ? 13-1 : Gatsby Cloud와 리포지터리 연결 ### Gatsby Cloud와 리포지터리 연결 - [가입 : https://www.gatsbyjs.com/dashboard/signup](https://www.gatsbyjs.com/dashboard/signup) - 꼭 GITHUB 계정으로 가입 - [로그인 : https://www.gatsbyjs.com/dashboard](https://www.gatsbyjs.com/dashboard) - add a site - Click here to add an installation - Click here to authorize - 설치 후 나오는 입력란에 `my-blog-2022` 라고 입력 후 `Import` - Next - Build Site npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem