명령어
npm run clean
npm run start
.gitignore에 node_modules, public, cache가 있지만
npm install 명령어를 치면 package.json을 읽어서 설치할 때 생성된다.
GNB: global navigation bar
코드에서 ctrl+space+enter → import가 됨
Gatsby는 모든 페이지를 한 번에 다 받는다.
그래서 LINK로 이동할 때 빠르게 이동할 수 있다.
import { Link } from "gatsby";
•
일반 HTML에서는 a로 링크이동을 한다.
•
개츠비에서는 Link로 링크이동을 한다.
◦
페이지간 이동속도가 빨라짐
•
a 엘리먼트는 href 속성을 사용한다.
•
Link 엘리먼트는 to 속성을사용한다.
React에서 component는 함수명과 파일명을 맞추는 것이 관례
예외적으로 page에는 뒤에 Page를 붙임
React Layout
선언예시
const Layout = ({msg, msg2}) ⇒ {
return (
<span style={{color:”red”}}>{msg}</span>
);
}
사용예시
<Layout>하하하</Layout>
Container
보통 container라는 class를 만들어서 화면 크기를 제한하는 코드를 작성한다.
graphQL
→ query Language
예제)
query {
site {
id
}
file {
absolutePath
}
}
SQL
복사
•
Ctrl + Space : 자동완성
•
Ctrl + Enter : 실행
react map 사용법
{data.allFile.nodes.map((node) => (
<li key={node.name}>{node.name}</li>
))}
JavaScript
복사
ex) 1,2,3 → 4,5,6 으로 mapping
