LIKELION🦁 TIL(2022-06-28)

Ryu·2022년 6월 30일

gatsby git github graphql

멋쟁이 사자처럼

목록 보기

10/12

Git, GitHub

git rm —cached [파일명] ⇒ git add 삭제 (index에서 그냥 지워버리는 것)
특정 파일을 제외할 때 사용하자.
git resotre a ⇒ 파일 수정되었을 때, 그 이전으로 바꾸는 코드
서버 시작하기 npm run start
- cat .gitignore 3가지 파일들이 github에 올라가지 않았다. (git이 철저하게 무시한다.)
- 실제로, node_modules 폴더는 github에 올라가지 않았다.
  → 따라서, 새로운 환경에서 git clone 받을 때는 저 node_modules를 받아야 한다.
- 그렇다면, node_modules(라이브러리) 를 왜 제외한 것일까 ?
  → package.json 파일이 있기 때문이다. (이것만 있으면, npm install로 다시 만들 수 있음.)
  만약, 설치가 진행되지 않는다면, npm install -f
- npm run start 를 하면 서버 시작!
  → 서버 종료는 ctrl + c
- localhost:8000 들어가면 홈페이지 나와야 한다.
  localhost:8000/test , localhost:8000/test-space
react
- 반드시 export default TestPage;
- className=” “ 으로 class 표시.
  style = { {color:”red”} } 안에 있는 것은 js 객체.
  
  무조건 이렇게 써야 함.

GitHub 블로그

navigation menu. → 모든 사이트들마다 비슷한 형태이다.
필요한 부분만 렌더링하면 된다.
만약 자동 import (ctrl + space) 작동 안하면?
- f1 → organize imports (imports 재구성)
- f1 → typescript restart server 하면 해결됨.
  (vscode가 프로젝트를 다시 읽는 방식)
를 사용하면, 페이지 이동 없이 순식간에 바뀐다.. 페이지가 이미 받아져 있는 상태.

💡 `Link 태그`는 `gatsby에서만 제공`하는 tag이다. (react 아님) → gatsby 는 어차피 모든 파일을 한 번에 다 받는데, 여기서 link 를 이용해서 이동하는 것이 효율적인 것이다. 실제 코드에는 a태그로 표현된다.

페이지 component 중복 (매번 나오는 패턴)

만약 삽입해야 할 gnb 가 수십개라면? 일일이 하나씩 삽입할 것인가?
만약 gnb를 수정해야 한다면, 삽입된 모든 페이지에 방문해서 수정할 것인가?

🐤 해결 : Head.js 라는 component 만들어서 중복 제거하기

src/components/Head.js 만들기.
코드 삽입하고, component 추가하고 싶은 페이지에 <Head /> 하면 끝.
react 는 component를 라는 태그로 치환하게끔 만들어준다.

Layout 컴포넌트 추가

기존에 중복된 부분에 대해 component 추가하는 방식은 1세대 방식.
최근 방식은, 위, 아래, 왼쪽 레이아웃이 다 비슷하기 때문에 이 레이아웃 틀 자체를 아예 만들어버리는 방식.
→ 만들어진 틀 위에다가 각 페이지 별로 삽입하는 식으로 작업한다.

const Layout = ({children}) => {
	return (
		<span style = {{color:"red"}}>{children}</span>
	);
}
function App() {
	return (
		<>
			<Layout>Hello World</Layout>
			<div>본문 내용입니다.</div>
		</>
	);
}

→ {children}은 Layout 태그 안의 ‘Hello World’ 를 말한다.

반응형 container , 고정형 레이아웃

/* 반응형 */
.con {
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
/* 고정형 */
.con {
  width:1200px;  
  margin-left:auto;
  margin-right:auto;
}

Layout.module.css
- react 에서만 사용 가능.
- 안에 있는 내역들을 객체처럼 불러다 사용 가능하다.

static img

설치할 때는 반드시 ctrl + c → npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem 로 설치. → package.json 에 디펜던시 추가됨.
만약, 안되면 뒤에 -f 붙여서 하기.
플러그인 까지 넣기.
만약 다운로드 이미지를 넣고 싶다면 ?
- src/images 안에다가 넣기. src =”../images/clifford.jpg” 이런 식으로.

GraphQL

💡 실제 프로젝트 하면서, 가장 많이 마주친 에러. Layout 컴포넌트를 `Layout.js` 로 저장했는데, 코드에 path가 `layout` 으로 되어 있는 경우가 많아 대소문자 오류로 인한 **런타임 에러**가 계속 발생했다. 실제로 수강생 다수가 이러한 에러가 발생했다…

GraphQL : 쿼리 language. 우리가 무언가 요청할 수 있다. 이번 강의에는 Get 방식만 사용함.
- Layout component 에서 무언가 필요하다면, GraphQL 한테 명령하면 된다.
- localhost:8000/___graphql
  - 필요한 쿼리 추가할 때는 그냥
    query MyQuery1 { // 이렇게 추가. 사용법만 익히자.
    }
  - 왼쪽 파일들은 원재료들.
    해당 재료 입력하고, ctrl + enter 로 확인 가능.
- GraphQl 로 테스트 해보기
  Ctrl + Space : 자동완성
  Ctrl + Enter : 실행
- GraphQL 에서 쿼리가 하나 일 때는 Query 만 써도 되지만, 쿼리가 2개 이상일 때는 Query query1 이런 식으로 이름 써야 함.

mdx 파일노드를 읽는 쿼리

💡 오류 발생 이유 : 동영상을 보지 않고, 글로 되어 있는 설명과 코드만으로 하려다보니 blog 폴더를 생성하는 과정을 놓쳤다. src/blog 안에 mdx 파일들이 있고, 그것들을 읽어오는 과정.

mdx : markdown 을 확장한 문법.
노드란 무엇인가 ?
- Gatsby project 에서 → file 3개를 읽어오면 → node 3개를 읽어오는 식으로 바뀜.

블로그 포스트리스트

map

변형된 버전의 복사본을 만들고 싶을 때 사용.
arr.map(함수); ⇒ 함수는 각 요소를 변화된 요소로 만드는 로직을 넣어야 한다.
map 은 일종의 mapping 의 의미.

function 함수(input) {
	return input * 2;
}
const arr = [1,2,3];
const newArr = arr.map(함수); // [2,4,6];

//참고
const newArr = arr.map((v) => v * 2);  // 이런 식으로, arrow function으로도 가능하다.

리액트에서 반복문은 무조건 map
map을 통해 만들어지는 최상위 엘리먼트에는 반드시 key를 써줘야 함. unique 한 값을 써줘야 한다.
만약 allFile.nodes 가 10개 있다? 그러면 10번 반복 → 10개의 li가 생긴다고 이해하면 됨.

MDX 플러그인

mdx 읽으려면, 플러그인 설치 해야한다.
파일 노드들 → mdx 노드들로 바뀜.

블로그 포스트페이지 추가

slug
- velog-첫-시작 ⇒ 이처럼 - 로 이어진 것을 slug 라고 한다.
blog 폴더 만들어서, blog.js 넣고, index.js 로 바꿔도 인식한다.
→ blog 폴더 안에 있으면 인식하기 때문. /blog
http://localhost:8000/blog ⇒ 접속해도 페이지가 나온다.