gatsby template

개츠비 템플릿을 완성해보세요!

이 템플릿으로 프로젝트를 시작하세요. 이 런처에는 빛처럼 빠른 React용 앱 생성기를 사용하여 최고 속도로 시작하고 실행하는 데 필요할 수 있는 가장 필수적인 Gatsby 파일과 설정이 함께 제공됩니다.

빠른 시작

1. 개츠비 웹사이트를 만들어보세요.

   Gatsby CLI를 사용하여 이 템플릿을 지정하여 새 사이트를 만듭니다.

    # Crie um novo site do Gatsby usando esse Template
   gatsby new my-project https://github.com/solrachix/gatsby-template

2. 개발을 시작하세요.

   새 사이트의 디렉토리로 이동하여 실행하십시오.

    cd my-project/
   gatsby develop

3. 코드를 열고 편집을 시작하세요!

   귀하의 사이트는 이제 http://localhost:8000 에서 실행되고 있습니다!

   참고: 두 번째 링크인 http://localhost:8000/___graphql 도 표시됩니다. 이는 데이터 쿼리를 실험하는 데 사용할 수 있는 도구입니다. [Gatsby 튜토리얼](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)에서 이 도구를 사용하는 방법에 대해 자세히 알아보세요.

   선택한 코드 편집기에서 my-project 디렉토리를 열고 src/pages/index.js 편집하세요. 변경 사항을 저장하면 브라우저가 실시간으로 업데이트됩니다!

PWA

프로그레시브 웹 앱(Progressive Web App)은 새로운 소프트웨어 개발 방법론을 나타내는 데 사용되는 용어입니다. 기존 앱과 달리 프로그레시브 웹 앱은 일반 웹 페이지와 모바일 앱 간의 하이브리드 진화로 볼 수 있습니다.

매니페스트 플러그인 으로 구동되는 웹 앱 매니페스트(PWA 사양의 일부)를 사용하면 사용자가 대부분의 모바일 브라우저의 홈 화면에 웹사이트를 추가할 수 있습니다. 여기를 참조하세요. 매니페스트는 전화기에 대한 구성과 아이콘을 제공합니다.

이 플러그인은 매니페스트 구성 외에도 삶을 더 쉽게 만들어주는 여러 기능을 제공합니다.

• 자동 아이콘 생성 - 단일 소스에서 여러 아이콘 크기를 생성합니다.
• 파비콘 지원
• 레거시 아이콘 지원(iOS) 1
• 캐시 차단
• 위치 - 경로 기반 위치에 대한 고유한 매니페스트를 제공합니다(Gatsby 예).

이러한 각 기능에는 광범위한 구성이 제공되므로 항상 제어할 수 있습니다.

구현된 플러그인:

이 플러그인을 어디에서 검색할 수 있나요? 여기를 클릭해서 검색해보세요

• React-helmet : React 헬멧은 React 컴포넌트를 이용하여 문서 헤드를 제어할 수 있는 컴포넌트입니다.
• sitemap : 빌드 시 자동 사이트맵을 생성합니다.
• Transformer-remark : Markdown으로 작성된 블로그 게시물을 HTML로 변환하는 역할을 담당합니다.
• 매니페스트 : 번거롭지 않은 매니페스트를 생성합니다.
• 피드 : 웹사이트에 대한 RSS 피드를 생성합니다.
• nprogress : 페이지 상단의 진행률 표시줄(YouTube 스타일)
• google-analytics : 웹사이트 분석을 지원합니다.
• styled-comforts : CSS IN JS 스타일링 모델;
• page-creator : 지정된 디렉터리의 React 구성 요소에서 페이지를 자동으로 생성합니다.
• source-filesystem : 로컬 파일 시스템에서 Gatsby 애플리케이션으로 데이터를 가져오는 서버;
• 오프라인 : 웹사이트가 오프라인으로 작동하도록 지원합니다.

? 안에 무엇이 들어있나요?

이 Gatsby 템플릿에서 볼 수 있는 최상위 파일과 디렉터리를 간략하게 살펴보세요.

 .
├── node_modules
├── config/
│ 	└── MetaData.js
├── src/
│ 	├── assets/
│ 	│ 	└── images/
│ 	│ 		└── logo.png
│ 	├── components/
│ 	├── Pages/
|	│ 	└── index.js
│ 	├── posts/
|	│ 	└── 2020-04-08--nosso-primeiro-post/
|	│ 		└── index.md
│ 	├── styles/
│ 	|	├── themes/
│ 	|	└── GlobalStyles.js
│ 	├── templates/
│ 	|	├── post.js
│ 	|	└── tag.js
│ 	└── html.js
├── static/
│ 	├── favicon.ico
│ 	└── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

파일/폴더	설명
/노드_모듈	이 디렉터리에는 프로젝트가 의존하는 모든 코드 모듈(npm 패키지)이 포함되어 있으며 자동으로 설치됩니다.
/src	이 디렉토리에는 웹사이트 헤더나 페이지 템플릿 등 웹사이트 프런트 엔드에 표시되는 내용(브라우저에 표시되는 내용)과 관련된 모든 코드가 포함됩니다. src "소스 코드"에 대한 규칙입니다.
.gitignore	이 파일은 버전 기록을 추적하거나 유지하지 말아야 할 파일을 git에게 알려줍니다.
.prettierrc	이것은 Prettier의 구성 파일입니다. Prettier는 코드 형식을 일관되게 유지하는 데 도움이 되는 도구입니다.
* 개츠비-browser.js	Gatsby가 Gatsby 브라우저 API(존재하는 경우)의 사용을 찾을 것으로 예상하는 것은 이 파일입니다. 이를 통해 브라우저에 영향을 미치는 기본 Gatsby 설정을 사용자 정의/확장할 수 있습니다.
개츠비-config.js	이것은 Gatsby 웹사이트의 기본 구성 파일입니다. 여기에서 사이트 제목 및 설명, 포함하려는 Gatsby 플러그인 등과 같은 사이트에 대한 정보(메타데이터)를 지정할 수 있습니다. (자세한 내용은 구성 문서를 확인하세요).
개츠비-node.js	이 파일은 Gatsby가 Gatsby Node API(존재하는 경우)의 사용법을 찾을 것으로 예상하는 곳입니다. 이를 통해 사이트 생성 프로세스의 일부에 영향을 미치는 기본 Gatsby 설정을 사용자 정의/확장할 수 있습니다.
개츠비-ssr.js	Gatsby가 Gatsby 서버 렌더링 API(존재하는 경우)의 사용을 찾을 것으로 예상하는 것은 이 파일입니다. 이를 통해 서버 측 렌더링에 영향을 미치는 기본 Gatsby 설정을 사용자 정의할 수 있습니다.
특허	Gatsby는 MIT 라이선스에 따라 라이선스가 부여됩니다.
패키지-lock.json	(먼저 아래 package.json 참조하세요) 이는 프로젝트에 설치된 npm 종속성의 정확한 버전을 기반으로 자동 생성된 파일입니다. (이 파일을 직접 변경하지 마십시오.)
패키지.json	메타데이터(프로젝트 이름, 작성자 등) 등을 포함하는 Node.js 프로젝트용 매니페스트 파일입니다. 이 매니페스트는 npm이 프로젝트에 설치할 패키지를 아는 방법입니다.
읽어보기.md	프로젝트에 대한 유용한 참조 정보가 포함된 텍스트 파일입니다.
****

? 개츠비 배우기

더 많은 지침을 찾고 계십니까? 전체 Gatsby 문서는 [웹사이트](https://www.gatsbyjs.org/)에 있습니다. 다음은 시작할 수 있는 몇 가지 장소입니다.

• 대부분의 개발자에게는 [Gatsby를 사용하여 웹사이트를 만들기 위한 심층 튜토리얼](https://www.gatsbyjs.org/tutorial/)부터 시작하는 것이 좋습니다. 이는 귀하의 능력 수준에 대한 가정 없이 시작하여 프로세스의 모든 단계를 거칩니다.

• 코드 예제를 직접 살펴보려면 [문서](https://www.gatsbyjs.org/docs/)를 방문하세요. 특히 사이드바의 가이드 , API 참조 및 고급 튜토리얼 섹션을 참조하세요.

? 배포