Nillk dev blog

여기선 Gatsby plugin에 대해 배우고, layout components 를 만들어볼 것! Gatsby plugins은 Gatsby 사이트에 기능을 추가할 수 있도록 도와주는 JavaScript package이다. Gatsby는 확장 가능하도록 설계되었고, 다시 말해 plugins은 Gatsby가 할 수 있는 모든 것을 확장하고 수정할 수 있다는 얘기이다. Layout components는 사이트의 여러 페이지에서 공유하려는 섹션을 위한 것이다. 예를 들어, 사이트는 일반적으로 공유된 header나 footer를 layout component로 가진다. 레이아웃에 추가할 다른 공통적인 것들은 sidebar나 navigation menu가 있다. 예를 들어 이 페이지 상단의 header는 gatsb..

이 파트에선 Gatsby 사이트를 스타일링하기 위한 옵션들과 사이트를 구성하기 위한 React components를 사용하는 방법을 더 깊이 알아볼 것 Using global styles 모든 사이트는 global style같은 것을 가지고 있는데, 이건 사이트의 typography나 배경색 같은 것을 포함한다. 그리고 이런 스타일들은 벽의 색과 질감이 방의 전반적인 느낌을 결정하는 것처럼 사이트의 전반적인 느낌을 결정한다. Creating global styles with standard css files 사이트의 global style을 추가하는 가장 간단한 방법 중 하나는 global .css stylesheet를 사용하는 것이다. Create a new Gatsby site 새로 Hello Wor..

Gatsby starter를 기반으로 한 새로운 Gatsby 사이트를 생성하기 위해 아래 커맨드를 사용할 수 있다. npx gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO] Familiarizing with Gatsby pages src/pages/index.js 파일을 열어보면, 하나의 div 안에 Hello world!텍스트를 포함하는 component를 생성하는 코드가 있다. Make changes to the "Hello World" homepage Hello world!를 변경하고 저장하면 거의 바로 브라우저의 Hello world가 다른 내용으로 바뀌는 것을 확인할 수 있다. 💡 Gatsby는 개발 작업을 빠르게 하기 위해 hot r..