Nillk dev blog

What's in this tutorial? 이 튜토리얼에서는 GraphQL과 source 플러그인들을 이용해 Gatsby 사이트로 데이터를 불러오는 방법을 배울 것이다. 이런 플러그인들을 배우기 전에 GraphiQL이라고 불리는 당신의 쿼리들을 올바르게 구조화할 수 있도록 도와주는 툴에 대해 알고 싶을 것이다. Introduction GraphiQL GraphiQL은 GrapheQL IDE(Integrated Development Environment)이며, Gatsby 사이트를 만들면서 자주 사용할 강력한(여러 면에서 놀라운) 툴이다. 사이트의 개발 서버가 실행되고 있는 동안에는 일반적으로 http://localhost:8000/___graphql 주소로 접속할 수 있다. 여기 내장된 site..

네번째 파트에 온 것을 환영! 🤗 절반 왔음! 편안하게 느끼기 시작했길 바래! Recap of first half of the tutorial 지금까지, React.js를 어떻게 사용하는지를 배웠다. 웹사이트를 위한 사용자 정의 building blocks같은 당신 자신만의 component를 만들 수 있다는 게 얼마나 강력한지! 그리고 또 CSS Modules로 component를 꾸미는 방법도 알아봤다. What's in this tutorial? 튜토리얼의 이 다음 네 개의 파트(현재 파트를 포함)에서는 Markdown, WordPress, headless CMSs, 그리고 어떤 다른 데이터 소스에서든 쉽게 사이트를 구성할 수 있게 해주는 Gatsby의 강력한 기능, data layer를 파볼 것!..

여기선 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..

GatsbyJS Bring your own data Gatsby’s rich data plugin ecosystem lets you build sites with the data you want — from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system, and more directly into your pages using GraphQL www.gatsbyjs.org 한동안 이름이 오르내려서 보게 되었다. 깃헙 블로그도 개편할까 했지만... 게으름...... 가볍게 보려다가 그만 튜토리얼을 통으로 (내가 보기 위해서) 번역해버렸다. 내가 보던 중에도 계속해서 문서가 업데이..