gatsby 심플 Gatsby 사이트에 건간 기능 추가 (전편) 에서 만든 사이트를 업그레이드합니다. 결론부터 말하면 플러그인을 넣거나 graphql을 궁리하거나 하면 비교적 빨리 기능 추가는 가능했습니다. 전회 작성해 업한 사이트는 이런 느낌의 심플한 블로그였습니다. 이번에 작성한 것이 이것입니다. 비교적 노력했다! 이번에 이하 기능을 추가했습니다. 반응형 대응 마크 다운 기사를 블로그 워크로 구분하여 각각을 다른 카테고리로 표시 (BLOG와 WORKS... React자바스크립트개발JSXgatsby gatsby 시작하기 자습서 5. 소스 플러그인과 쿼리 된 데이터 렌더링 이번에 실시하는 gatsby의 튜토리얼은 이쪽 GraphQL과 소스 플러그인을 사용하여 Gatsby 사이트로 데이터를 캡처하는 방법을 이해할 수 있습니다. 그러고 보니 GraphQL에 대해 그다지 잘 이해할 수 없었구나. 글쎄요. 아무것도 돌진한 뒤에 이해하고 있다. 그것이 내 방식. 솔레가 올레노야 리카타. 소레카오레노리타카타. 빨리 가자. 소스는 만든 사람을 사용합니다. GraphiQL은... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역 이번에 실시하는 gatsby의 튜토리얼은 이쪽 튜토리얼의 시작 부분에 이렇게 썼습니다. 이 중요 이전 튜토리얼에서는 소스 플러그인이 데이터를 개츠비 데이터 시스템에 어떻게 캡처하는지 보여주었습니다. 이 튜토리얼에서는 변환 플러그인이 소스 플러그인이 가져온 원시 콘텐츠를 변환하는 방법을 배웁니다. 소스 플러그인과 트랜스포머 플러그인의 조합은 Gatsby 사이트를 구축할 때 필요할 수 있는 모든... 자바스크립트gatsbyReactJSX gatsby 입문 자습서 2. 개츠비 스타일링 개요 이번에 실시하는 gatsby의 튜토리얼은 이쪽 개츠비 스타일링의 개요를 알 수 있는 것 같습니다. Create a new Gatsby site 새로운 gatsby 사이트를 만듭니다. 다음을 실행gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-worldcd tutorial-part-two Add styl... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (2) 튜토리얼의 1.Get to Know Gatsby Building Blocks의 계속 에서 튜토리얼을 해 나갑니다. 구성 요소를 사용한 구축 components는 사용하는 느낌의 UI 부속이라고 하는 감각? Using page components src/pages/about.js를 만들어 다음을 설명 src/pages/about.js 만든 후 액세스http://localhost:8000/abo... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1) 이번에 실시하는 gatsby의 튜토리얼은 이쪽 개츠비 빌딩 블록이라는 것을 알 수 있는 것 같습니다. , hello-world 사이트를 명령으로 만든 것처럼 다음 명령으로 gatsby 사이트를 만들 수 있습니다.gatsby new [サイトのディレクトリ名] [ベースとなるgatsbyサイトのリポジトリURL(Github)]리포지토리 URL을 생략하면 다음이 기본입니다. VS Code로 만든 hell... 자바스크립트gatsbyReactJSX gatsby 입문 자습서를 다루는 0. 개발 환경 설정 무언가와 셋업 슈퍼 귀찮아. 대체품이 없을까라고 생각해 검색을 쵸코쵸코 HTML 생성 도구라는 것이 왠지 알았다. 우선 로컬로 환경을 만들어 보자. (서버리스로 작성하는 것이 주류와 같기 때문에 GCP에 세운 VM을 어떻게 할지는 별도 검토) gatsby라는 것이 유행 같다. 유행에 따라, gatsby를 로컬에 도입해 본다. 튜토리얼에 따라 소개합시다. 설치 노드 (Windows) 12.18... 자바스크립트gatsbyReactJSX Gatsby에서 Font Awesome을 사용하고 싶습니다. Gatsby 정말 편리합니다. 이번에는 Gatsby에서 FontAwesome을 사용하는 방법에 대해 설치에서 글꼴 아이콘을 표시하는 곳까지 설명 Gatsby.js v2.18.4 react-fontawesome v0.1.7 (Font Awesome 5) 그건 그렇고, Gatsby는 다음 스타터를 사용하여 빌드했습니다 ↓ 또한이 기사에서는 위의 스타터로 빌드 한 Gatsby 프로젝트의 bio.j... gatsbyReactFontAwesome Gatsby에 TableOfContents(목차)를 추가 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번에는 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 나가려고 합니다. 전회는 태그 일람과 기사 일람의 컴퍼넌트를 동시에 내는 GrapuQL 쿼리의 응용까지 실시했습니다. 이번은 블로그에서 빠뜨릴 수 없는 TableOfContents(목차)의 구현 방법의 소개입니... CMS자바스크립트gatsbyTOC Gatsby에 공유 기능, OGP 태그 추가 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번은 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 가려고 생각합니다. 이번에는 WordPress의 공유 버튼 뭔가 자주 SNS에 공유 버튼과 OGP 설정 태그를 추가하는 방법을 설명합니다. 설정할 수 있으면 OK입니다. Slack의 채팅 등에 게시해도 확인할 수... 트위터자바스크립트OGPCMSgatsby Gatby.js+Netlify로 LightHouse 만점의 사이트를 하루에 만든 이야기 Qiita 이외에 잡기 블로그적인 것을 해본 기분이 된다 친구 엔지니어에게 추천된 Gatsby.js에서 블로그를 개설해 보았습니다. 이번에는 Gatby.js+Netlify로 가기로 했습니다. 일부 Gatsby의 스타터를 복제하고 시도했지만 이 스타터가 제일 그대로 블로그로서 사용할 수 있을 것 같았습니다. Gatsby는 정적 사이트 생성기이므로 빠릅니다 React는별로 만지지 않았기 때문에이... ReactNetlify자바스크립트CMSgatsby Gatsby에서 SCSS를 Mixin하는 방법 Gatsby.js를 사용하여 SCSS를 Mixin 할 때 설정 한 메모 Scoped Style에 mixin으로 정의한 CSS를 include로 읽고 싶었습니다. src/assets/scss/foundation/_mixin.scss gatsby-config.js 다음은 gatsby-starter-default를 사용하여 프로젝트를 만든 것에 대해 index.js에서 Scoped Style을 사... Sassscssgatsbymixin Gatsby 노트 5 (Contentful-1) Contentful을 사용하여 블로그 목록의 정보를 업데이트합니다. Try for free를 누르십시오 Sign up 왼쪽 I create content 선택 Get started 를 누릅니다 The example project가 생성된다 (여기서는 사용하지 않는다) 왼쪽 상단 메뉴에서 "+Create space"를 누릅니다 커뮤니티 선택 1.Content modal => Add conten... GraphQLgatsby Gatsby 노트 4 (상세 페이지) slag에 묶는 data를 얻는다 블로그 세부 정보 페이지의 콘텐츠보기 (html보기) QUERY VARIABLES에서 변수를 입력하고 시도하십시오 src/templates/blogDetail.js... GraphQLgatsby Gatsby 노트 2(Markdown/GraphQL Playground) 1. Markdown을 이용할 준비 2.GraphQL Playground 도입 3.Markdown을 데이터로 사용 플러그인 설치(3개) ⑴ gatsby-transformer-remark ⑵ gatsby-remark-images ⑶ gatsby-remark-relative-images gatsby.config.js에 추가 (플러그인 3 분) gatsby-source-filesystem의 opt... GraphQLgatsby IntelliJ에서 Gatsby의 GraphQL 스키마를 인식하여 쿼리 완성을 활성화합니다. 이 게시물에서는 IntelliJ IDE 에서 Gatsby의 GraphQL 스키마를 인식하고 JS 코드에서 GraphQL 쿼리를 완성하는 방법을 보여줍니다. IDE에 JS GraphQL 설치 먼저 IDE에 플러그인을 설치합니다. Preferences → Plugins → Marketplace를 열고 GraphQL에서 검색하여 JS GraphQL을 설치합니다. IDE를 다시 시작합니다. Gats... IntelliJGraphQLgatsby Gatsby에 DarkMode를 켜기 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번에는 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 나가려고 합니다. (본 기사) DarkMode 멋지네요. 대부분의 앱 테마를 DarkMode로 사용하고 있습니다. 여러분은 어떻습니까? 이런 내용이 되고 있습니다. Gatsby Plugin에서 적용 기본 CSS... DarkModescss자바스크립트CSSgatsby Gatsby에 Twitter 멘션 버튼 포함 Twitter 공유 버튼에 대해서는 잘 나오지만, 멘션 버튼의 경우의 방법이 좀처럼 발견되지 않는다. 팔로워 수를 표시하고 싶었을 뿐이므로 우선 팔로우 버튼으로 어떻게 든 비망록. 멘션 버튼↓ 먼저 플러그인 설치 gatsby-config.js gatsby-config.js에 다음과 같이 설명. Twitter 사이트에서 내장 코드 생성 에 간다. Enter your Twitter URL에 트위... 트위터TwitterAPISNSgatsby Gatsbyjs를 GitLab의 CI/CD로 자동으로 렌탈 서버에 배포해 본 설정 저는 초보자입니다. 움직이면서 움직이는 설정이므로주의하십시오. 참고 : 에서 사이트가 시작되었으므로 이것을 GitLab의 CI/CD로 대여 서버로 ftp 전송해 보겠습니다. GitLab의 왼쪽 메뉴에서 Settings > CI/CD > Variables를 선택하고 Key HOST "hogefugaxxx.sakura.ne.jp" USERNAME "yourName" PASSWORD "yourPa... GitLab-CI시렌탈 서버GitLabgatsby Invalid hook call warning에 대처 (중복을 줄이기/gatsby와의 궁합) 몇 번, 뒤틀릴 것 같았는가 ... React Hooks를 사용하기 시작했을 무렵, CRA 등으로 만든 사이트는 어쨌든 Gatsby를 사용했을 때 등 상당한 빈도로 Invalid hook call warning에 휩쓸려 최악의 생각을 한 사람도 적지 않을 것입니다. 이 기사에서는 Invalid hook call warning과 잘 어울리는 "일부 규칙"을 가르칩니다. ※ 원인은, 이쪽을 읽어... ReactYARN버그errorgatsby
심플 Gatsby 사이트에 건간 기능 추가 (전편) 에서 만든 사이트를 업그레이드합니다. 결론부터 말하면 플러그인을 넣거나 graphql을 궁리하거나 하면 비교적 빨리 기능 추가는 가능했습니다. 전회 작성해 업한 사이트는 이런 느낌의 심플한 블로그였습니다. 이번에 작성한 것이 이것입니다. 비교적 노력했다! 이번에 이하 기능을 추가했습니다. 반응형 대응 마크 다운 기사를 블로그 워크로 구분하여 각각을 다른 카테고리로 표시 (BLOG와 WORKS... React자바스크립트개발JSXgatsby gatsby 시작하기 자습서 5. 소스 플러그인과 쿼리 된 데이터 렌더링 이번에 실시하는 gatsby의 튜토리얼은 이쪽 GraphQL과 소스 플러그인을 사용하여 Gatsby 사이트로 데이터를 캡처하는 방법을 이해할 수 있습니다. 그러고 보니 GraphQL에 대해 그다지 잘 이해할 수 없었구나. 글쎄요. 아무것도 돌진한 뒤에 이해하고 있다. 그것이 내 방식. 솔레가 올레노야 리카타. 소레카오레노리타카타. 빨리 가자. 소스는 만든 사람을 사용합니다. GraphiQL은... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역 이번에 실시하는 gatsby의 튜토리얼은 이쪽 튜토리얼의 시작 부분에 이렇게 썼습니다. 이 중요 이전 튜토리얼에서는 소스 플러그인이 데이터를 개츠비 데이터 시스템에 어떻게 캡처하는지 보여주었습니다. 이 튜토리얼에서는 변환 플러그인이 소스 플러그인이 가져온 원시 콘텐츠를 변환하는 방법을 배웁니다. 소스 플러그인과 트랜스포머 플러그인의 조합은 Gatsby 사이트를 구축할 때 필요할 수 있는 모든... 자바스크립트gatsbyReactJSX gatsby 입문 자습서 2. 개츠비 스타일링 개요 이번에 실시하는 gatsby의 튜토리얼은 이쪽 개츠비 스타일링의 개요를 알 수 있는 것 같습니다. Create a new Gatsby site 새로운 gatsby 사이트를 만듭니다. 다음을 실행gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-worldcd tutorial-part-two Add styl... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (2) 튜토리얼의 1.Get to Know Gatsby Building Blocks의 계속 에서 튜토리얼을 해 나갑니다. 구성 요소를 사용한 구축 components는 사용하는 느낌의 UI 부속이라고 하는 감각? Using page components src/pages/about.js를 만들어 다음을 설명 src/pages/about.js 만든 후 액세스http://localhost:8000/abo... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1) 이번에 실시하는 gatsby의 튜토리얼은 이쪽 개츠비 빌딩 블록이라는 것을 알 수 있는 것 같습니다. , hello-world 사이트를 명령으로 만든 것처럼 다음 명령으로 gatsby 사이트를 만들 수 있습니다.gatsby new [サイトのディレクトリ名] [ベースとなるgatsbyサイトのリポジトリURL(Github)]리포지토리 URL을 생략하면 다음이 기본입니다. VS Code로 만든 hell... 자바스크립트gatsbyReactJSX gatsby 입문 자습서를 다루는 0. 개발 환경 설정 무언가와 셋업 슈퍼 귀찮아. 대체품이 없을까라고 생각해 검색을 쵸코쵸코 HTML 생성 도구라는 것이 왠지 알았다. 우선 로컬로 환경을 만들어 보자. (서버리스로 작성하는 것이 주류와 같기 때문에 GCP에 세운 VM을 어떻게 할지는 별도 검토) gatsby라는 것이 유행 같다. 유행에 따라, gatsby를 로컬에 도입해 본다. 튜토리얼에 따라 소개합시다. 설치 노드 (Windows) 12.18... 자바스크립트gatsbyReactJSX Gatsby에서 Font Awesome을 사용하고 싶습니다. Gatsby 정말 편리합니다. 이번에는 Gatsby에서 FontAwesome을 사용하는 방법에 대해 설치에서 글꼴 아이콘을 표시하는 곳까지 설명 Gatsby.js v2.18.4 react-fontawesome v0.1.7 (Font Awesome 5) 그건 그렇고, Gatsby는 다음 스타터를 사용하여 빌드했습니다 ↓ 또한이 기사에서는 위의 스타터로 빌드 한 Gatsby 프로젝트의 bio.j... gatsbyReactFontAwesome Gatsby에 TableOfContents(목차)를 추가 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번에는 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 나가려고 합니다. 전회는 태그 일람과 기사 일람의 컴퍼넌트를 동시에 내는 GrapuQL 쿼리의 응용까지 실시했습니다. 이번은 블로그에서 빠뜨릴 수 없는 TableOfContents(목차)의 구현 방법의 소개입니... CMS자바스크립트gatsbyTOC Gatsby에 공유 기능, OGP 태그 추가 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번은 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 가려고 생각합니다. 이번에는 WordPress의 공유 버튼 뭔가 자주 SNS에 공유 버튼과 OGP 설정 태그를 추가하는 방법을 설명합니다. 설정할 수 있으면 OK입니다. Slack의 채팅 등에 게시해도 확인할 수... 트위터자바스크립트OGPCMSgatsby Gatby.js+Netlify로 LightHouse 만점의 사이트를 하루에 만든 이야기 Qiita 이외에 잡기 블로그적인 것을 해본 기분이 된다 친구 엔지니어에게 추천된 Gatsby.js에서 블로그를 개설해 보았습니다. 이번에는 Gatby.js+Netlify로 가기로 했습니다. 일부 Gatsby의 스타터를 복제하고 시도했지만 이 스타터가 제일 그대로 블로그로서 사용할 수 있을 것 같았습니다. Gatsby는 정적 사이트 생성기이므로 빠릅니다 React는별로 만지지 않았기 때문에이... ReactNetlify자바스크립트CMSgatsby Gatsby에서 SCSS를 Mixin하는 방법 Gatsby.js를 사용하여 SCSS를 Mixin 할 때 설정 한 메모 Scoped Style에 mixin으로 정의한 CSS를 include로 읽고 싶었습니다. src/assets/scss/foundation/_mixin.scss gatsby-config.js 다음은 gatsby-starter-default를 사용하여 프로젝트를 만든 것에 대해 index.js에서 Scoped Style을 사... Sassscssgatsbymixin Gatsby 노트 5 (Contentful-1) Contentful을 사용하여 블로그 목록의 정보를 업데이트합니다. Try for free를 누르십시오 Sign up 왼쪽 I create content 선택 Get started 를 누릅니다 The example project가 생성된다 (여기서는 사용하지 않는다) 왼쪽 상단 메뉴에서 "+Create space"를 누릅니다 커뮤니티 선택 1.Content modal => Add conten... GraphQLgatsby Gatsby 노트 4 (상세 페이지) slag에 묶는 data를 얻는다 블로그 세부 정보 페이지의 콘텐츠보기 (html보기) QUERY VARIABLES에서 변수를 입력하고 시도하십시오 src/templates/blogDetail.js... GraphQLgatsby Gatsby 노트 2(Markdown/GraphQL Playground) 1. Markdown을 이용할 준비 2.GraphQL Playground 도입 3.Markdown을 데이터로 사용 플러그인 설치(3개) ⑴ gatsby-transformer-remark ⑵ gatsby-remark-images ⑶ gatsby-remark-relative-images gatsby.config.js에 추가 (플러그인 3 분) gatsby-source-filesystem의 opt... GraphQLgatsby IntelliJ에서 Gatsby의 GraphQL 스키마를 인식하여 쿼리 완성을 활성화합니다. 이 게시물에서는 IntelliJ IDE 에서 Gatsby의 GraphQL 스키마를 인식하고 JS 코드에서 GraphQL 쿼리를 완성하는 방법을 보여줍니다. IDE에 JS GraphQL 설치 먼저 IDE에 플러그인을 설치합니다. Preferences → Plugins → Marketplace를 열고 GraphQL에서 검색하여 JS GraphQL을 설치합니다. IDE를 다시 시작합니다. Gats... IntelliJGraphQLgatsby Gatsby에 DarkMode를 켜기 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번에는 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 나가려고 합니다. (본 기사) DarkMode 멋지네요. 대부분의 앱 테마를 DarkMode로 사용하고 있습니다. 여러분은 어떻습니까? 이런 내용이 되고 있습니다. Gatsby Plugin에서 적용 기본 CSS... DarkModescss자바스크립트CSSgatsby Gatsby에 Twitter 멘션 버튼 포함 Twitter 공유 버튼에 대해서는 잘 나오지만, 멘션 버튼의 경우의 방법이 좀처럼 발견되지 않는다. 팔로워 수를 표시하고 싶었을 뿐이므로 우선 팔로우 버튼으로 어떻게 든 비망록. 멘션 버튼↓ 먼저 플러그인 설치 gatsby-config.js gatsby-config.js에 다음과 같이 설명. Twitter 사이트에서 내장 코드 생성 에 간다. Enter your Twitter URL에 트위... 트위터TwitterAPISNSgatsby Gatsbyjs를 GitLab의 CI/CD로 자동으로 렌탈 서버에 배포해 본 설정 저는 초보자입니다. 움직이면서 움직이는 설정이므로주의하십시오. 참고 : 에서 사이트가 시작되었으므로 이것을 GitLab의 CI/CD로 대여 서버로 ftp 전송해 보겠습니다. GitLab의 왼쪽 메뉴에서 Settings > CI/CD > Variables를 선택하고 Key HOST "hogefugaxxx.sakura.ne.jp" USERNAME "yourName" PASSWORD "yourPa... GitLab-CI시렌탈 서버GitLabgatsby Invalid hook call warning에 대처 (중복을 줄이기/gatsby와의 궁합) 몇 번, 뒤틀릴 것 같았는가 ... React Hooks를 사용하기 시작했을 무렵, CRA 등으로 만든 사이트는 어쨌든 Gatsby를 사용했을 때 등 상당한 빈도로 Invalid hook call warning에 휩쓸려 최악의 생각을 한 사람도 적지 않을 것입니다. 이 기사에서는 Invalid hook call warning과 잘 어울리는 "일부 규칙"을 가르칩니다. ※ 원인은, 이쪽을 읽어... ReactYARN버그errorgatsby