Nillk dev blog

먼 길을 왔어! 그동안 이런 것들을 배웠지: 새로운 Gatsby 사이트 생성하기 페이지와 컴포넌트 생성하기 스타일 컴포넌트 사이트에 플러그인 추가하기 source & transform data 페이지를 위한 데이터를 질의하기 위해 GraphQL을 사용하기 데이터에서 프로그램적으로 페이지 생성하기 이번 마지막 섹션에서는 Lighthouse라는 강력한 사이트 진단 도구를 도입해 사이트를 가동 준비를 위한 몇 가지 일반적인 단계를 거칠 거야. 그 도중에 Gatsby 사이트에서 사용하길 원하게 될 몇 가지 플러그인을 더 소개할거야. Audit with Lighthouse Lighthouse website에서 인용: Lighthouse는 오픈 소스로 웹 페이지의 질을 끌어올리기 위한 자동화 툴이다. 공개 또는 인..

What's in this tutorial? 이전 튜토리얼에선 마크다운 파일들을 조회하고 블로그 포스트 제목과 발췌문의 목록을 만들어내는 멋진 인덱스 페이지를 만들었다. 하지만 단지 발췌문만 보기보단, 마크다운 파일들에 대한 실제 페이지들을 원할 것이다. src/pages에 React component를 만들어서 계속해서 새로운 페이지를 만들 수 있다. 그러나 다음에는 어떻게 데이터에서 프로그램적으로 페이지를 만드는지 배울 것이다. Gatsby는 다른 정적 사이트 생성기처럼 파일들에서 페이지를 만드는 것이 제한되어 있지 않다. Gatsby는 빌드할 때 GraphQL을 사용해 데이터를 질의할 수 있게 하고, 질의 결과를 페이지와 연결한다. 이건 정말 강력한 아이디어다. 그것이 미치는 영향과 사용하는..

What's in this tutorial? 이전 튜토리얼은 어떻게 source plugin이 데이터를 Gatsby의 데이터 시스템으로 가져오는지 보여줬다. 이번 튜토리얼에서는 transformer plugin이 source plugin이 가져온 raw content를 어떻게 변환 하는지 배울 것이다. source plugins와 transformer plugins의 조합은 Gatsby 사이트를 구축할 때 필요할 수 있는 모든 데이터 sourcing과 transformation을 처리할 수 있다. Transformer plugins 종종, source plugin에서 얻은 데이터의 포맷은 당신이 웹사이트를 만드는 데 사용하길 원하는 형태가 아닐 것이다. 파일 시스템 source plugin은 파일..

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 한동안 이름이 오르내려서 보게 되었다. 깃헙 블로그도 개편할까 했지만... 게으름...... 가볍게 보려다가 그만 튜토리얼을 통으로 (내가 보기 위해서) 번역해버렸다. 내가 보던 중에도 계속해서 문서가 업데이..

분명히 알았는데, 다시 되짚어 보려니 뭔가 모호해서 generics를 정리해보기로 했다. 글로 하나씩 정리해보는 거랑 그냥 알고 있다고 생각하는 거랑 생각보다 큰 차이라는 걸 요즘 들어 느낀다. 오늘은 와 와