Home Page

$$config title: [ 총정리 ] 개츠비 블로그 keywords: - 개츠비 블로그 제작 $$ [참고.mygithub](https://github.com/Parkseonho/2022-06-06-blog) [참고.Gatsby로 정적 블로그 구현](https://slog.gg/p/6496) [참고.Gatsby 사이트](https://www.gatsbyjs.com/docs/tutorial/) [참고.Gatsby Cloud](https://www.gatsbyjs.com/dashboard/organization/29cfe4fc-b61e-437d-b496-8ee98e99aead/sites) # 1. 전체적인 흐름 $$uml [>모든과정은 GIT에 올려두는것이 좋다.] 기초설정 -> 페이지 : 페이지추가 페이지 -> 레이아웃 : 레이아웃설정 레이아웃 -> 사진및타이틀 : 사진추가 사진및타이틀 -> BlogMax기능추가 : max 추가 및 변경 등 설정 BlogMax기능추가 -> 그외기능추가 : 폰트, 이미지관련 설정 추가 $$ --------------- [ 기초설정 ] - 각종 설치 및 설정 - 첫페이지를 위한 기초코드 제거까지 [ 페이지 추가 ] [ 레이이아웃 설정(+CSS) ] [ 사진 및 타이틀 추가(+CSS) ] [ blog max 관련 기능 추가 ] - 파일추가 - 화면표시 - 화면표시(내용까지) - 링크 걸기 - 내용, 링크, mdx 변경 - 내용, 사진 추가 [ 그외 기능 추가 ] - 이미지 없는 글에 대한 처리 - 폰트 변경 - 코드하이라이터 설치 - 외부링크 워닝제거 - 테그 노출 # 2. 흐름별 설명 ## 기초설정 【 1. 개츠비 CLI 설치 】 1. cmd에 [ npm install -g gatsby-cli ]을 입력하여 개츠비 CLI 설치 【 2. 프로젝트 생성 】 [ 1 . gatsby-cli ] 1. 프로젝트를 생성할 폴더의 cmd에 [ gatsby new ] 입력 2. 프로젝트명 임의설정 3. 언어: JS, 나머지 선택안함 [ 2 . github ] 1. github사이트에서 [리포지터리 생성](https://github.com/new) 【 3. 프로젝트 개발모드 】 1. VS CODE 실행 2. VS CODE 터미널 진입 3. [ npm run start ] 입력하여 [localhost:8000](http://localhost:8000)과 연결 【 4. GITHUB에 push 】 - git과 vs코드 연결 ``` git init git config user.name "GITHUB_아이디" git config user.email "GITHUB_이메일" git remote add origin GITHUB_원격지_리포지터리_주소 git add . git commit -m "세팅" git push origin master ``` [깃_Initial commit from gatsby](https://github.com/Parkseonho/2022-06-06-blog/commit/a3361f0b1e6f496747d7d863452bdd71afbbb768) 【 5. GITHUB와 Gatsby cloud 연결 + site 추가 후 배포 】 - 가입(github 계정) -> 로그인 [ 로그인하면 자동 연결됨 ] - site 추가 후 배포 1. Add a site 2. Click here to add an installation 3. Click here to authorize 4. 리포지터리 Import 5. Next 6. Build Site 【 6. index 페이지에서 쓸데없는 내용 지우기 】 ```java import React from "react"; const IndexPage = () => { return (

Home Page

); }; export default IndexPage; ``` [ src/pages/index.js ]에서 위의 내용 제외 지우기 [깃_시작](https://github.com/Parkseonho/2022-06-06-blog/commit/a138828b3d4cfb0a08572b7cf43761c28d1a1654) ## 페이지 추가 및 레이아웃 설정 ``` 페이지 추가 ``` 【 1. 페이지 추가 】 - [ src/pages ]에 새파일 생성하여 페이지 추가 - 내용은 index의 내용을 복붙하고, 내용을 수정해주면 된다. ------------------------------ ``` 레이아웃 ``` : 해당 레이아웃에 한가지 기본 구조를 만들어 각 페이지에 적용한다. 【 1. 레이아웃 폴더 생성 】 1. [ src ]에 [ components ] 생성 2. [ components ]에 [ Layout.js ] 생성 【 2. 레이아웃 import 설정 】 - 리액트와 링크를 사용하기 위해 아래의 코드를 첫줄에 입력하여준다. ``` import React from "react"; import { Link } from "gatsby"; ``` 【 3. 레이아웃 내용 】 - 레이아웃 내용 기초설정은 return 내용 안에만 작성됨 1. div테크로 내용을 전체 감싸준다. 2. div의 자식테그로 크게 title, link모음, main으로 나눌 수 있다. 3. title : 내용은 인자를 통해 입력 받음 4. link모음 : 항목/목록 테그 활용, 목록에 각 링크를 넣는다. 5. link 형식 : ``` 내용 ``` 6. main : 제목은 h1테그로 감싸주고, 내용은 인자를 사용 {children} 【 4. 레이아웃 내용 페이지와 연결 】 1. 레이아웃을 적용할 페이지에 ``` import Layout from "../components/Layout"; ``` 작성 2. 기존 페이지의 main 삭제 후 Layout테그 추가 3. Layout테그로 감싸고 있는 내용은 레이아웃의 {children}으로 들어간다. 4. {pagetitle}은 Layout 여는 테그에 입력 [【 5. 최종코드 】](https://github.com/Parkseonho/2022-06-06-blog/commit/634e3720b697f5bc376b667090d07996402ef9b8) --------------------------------------- ``` 레이아웃 CSS ``` 【 1. 레이아웃 CSS 모듈 추가 】 - [ components ]에 [ Layout.module.css ]추가 【 2. 레이아웃 CSS 코드 및 설명 】 ```css .container { margin: auto; max-width: 500px; font-family: sans-serif; } .heading { color: rebeccapurple; } .nav-links { display: flex; list-style: none; padding-left: 0; } .nav-link-item { padding-right: 2rem; } .nav-link-text { color: black; } ``` 1. container : 레이아웃 전체 설정 - div 겉에 있는 margin auto로 변경 - 최대 가로 크기 : 500px - 글꼴 설정 2. heading : main 내용 중 제목 css 설정 3. nav-links : 항목 노말라이즈 4. nav-link-item : 목록 안쪽 여백(우측) 2rem 설정 5. nav-link-text : text 색 변경

-------------아래 미완 ------ ## 문제발생 시 해결방안외 - 12강 / 13~15강 VS CODE가 자동완성을 잘 못하는 것 같을 때 : F1로 명령어 창 열기 / TypeScript: Restart TS server