GatsbyJS에서 포트폴리오 사이트 구축

포트폴리오 사이트가 필요한 이유는 무엇입니까?



새로운 기술을 실험하고 최근에 작업한 내용을 보여줄 수 있는 포트폴리오 사이트를 만들고 싶었습니다. 이 외에도 새로운 기술로 변경 사항을 깨는 것에 대한 두려움 없이 기술을 계속 연마하고 새로운 구축 방법을 테스트할 수 있습니다.

개츠비란?



나는 Gatsby에 대한 소문을 많이 들었지만 그것이 무엇인지 완전히 이해하지는 못했습니다. 그것은 꽤 강력하고 사용하기 정말 간단합니다. NextJS로 작업하는 즐거움을 느껴본 적이 있다면 이는 상당히 유사한 개념입니다.

Gatsby는 다음과 같은 최신 자바스크립트 도구/유틸리티/프레임워크를 사용하여 웹사이트와 프로그레시브 웹 앱을 구축할 수 있는 정적 사이트 생성기입니다.
  • ReactJS
  • 웹팩
  • GraphQL

  • 왜 개츠비인가?



    포트폴리오 웹 사이트를 구축하고 싶었기 때문에 사용자의 로드 시간을 최적화하고 싶습니다. 따라서 이것을 제공하기 위해 전통적인 React 웹 앱을 갖는 것은 의미가 없었습니다. 그러나 나는 또한 전통적인 html/css/js 경로가 유리하지 않다는 것을 의미하는 React 생태계에서 개발하는 이점을 원했습니다. Gatsby가 React 앱을 정적 자산으로 컴파일하면 로드 시간이 사용하지 않을 때보다 훨씬 빨라집니다. 나에게 중요한 판매 요소.

    어떻게 되었나요?



    몇 가지 기사와 Gatsby에 대한 문서를 읽은 후에 그것이 얼마나 깔끔한지 확실히 알 수 있었습니다. CLI가 Gatsby에 대해 얼마나 개발자 친화적인지 좋아합니다. 시작하려면 다음 명령을 실행해야 합니다.

    npm i -g gatsby --save
    


    Gatsby를 설치했으면 다음을 실행하여 새로운 프로젝트를 시작할 수 있습니다.

    gatsby new my-brand-new-website
    


    그런 다음 설치 및 구성이 완료되면 다음을 실행할 수 있습니다.

    cd my-brand-new-website
    npm run develop
    


    그런 다음 Gatsby에서 구축하는 방법에 대한 모든 설정과 예제를 탐색하여 성공을 위한 설정을 제공하는 템플릿 웹 사이트를 방문해야 합니다!

    저에게 눈에 띄는 것은 그들이 상자에서 제공하는 기능이 얼마나 좋은지였습니다. 모든 페이지에 구현하기만 하면 되며 매우 확장 가능한 SEO 구성 요소가 생성됩니다. 개발자를 프레임워크에 온보딩할 때 이러한 종류의 도움이 경쟁을 제쳐두는 것입니다.

    플러그인은 Gatsby의 생태계가 실제로 의존하는 것입니다. Gatsby 세계에서 웹사이트에 필요한 모든 작업을 수행할 수 있는 플러그인이 꽤 많이 있습니다. 예를 들어 웹사이트에 콘텐츠를 로드하는 방법을 최적화하고 싶었습니다. 그래서 저는 마크다운 파일을 '컨텐츠' 폴더의 일부로 추가하고 컨텐츠를 구성 요소나 페이지에 하드 코딩하지 않고도 구성 요소에서 읽을 수 있기를 원했습니다. 이렇게 하려면 gatsby-transformer-remark라는 플러그인을 설치하기만 하면 됩니다. 그런 다음 Gatsby 설정에 약간의 구성을 추가합니다.

    plugins: [
      {
        resolve: `gatsby-transformer-remark`,
        options: {
          // CommonMark mode (default: true)
          commonmark: true,
          // Footnotes mode (default: true)
          footnotes: true,
          // Pedantic mode (default: true)
          pedantic: true,
          // GitHub Flavored Markdown mode (default: true)
          gfm: true,
          // Plugins configs
          plugins: [],
        },
      },
    ],
    


    이제 내 구성 요소 또는 페이지 내의 GraphQL 쿼리에서 내 마크다운 파일을 호출할 수 있습니다.

    일을 한다는 개념을 이해하자 개츠비의 힘을 깨달았습니다.

    닫는 생각...



    전반적으로 나는 Gatsby를 사용하여 내 포트폴리오 사이트를 구축하는 것을 정말 즐겼습니다. 사용하기에 재미있고 강력한 도구이기 때문에 시간이 지남에 따라 업그레이드하고 더 많이 참여할 것입니다. 나는 그것을 사용하는 데 방해가되는 것을 경험하지 못했습니다. 그래서 나를 위해 그것은 앞으로 가득 차 있습니다!

    전에 개츠비를 사용해 본 적이 있습니까? 그렇다면 그것을 사용하여 어떻게 찾았습니까?

    아래 의견에 알려주십시오! 👇

    좋은 웹페이지 즐겨찾기