강의 대시보드 Gatsby 프로젝트 생성하기
Gatsby 프로젝트 생성하기
강의명 : React 기반 Gatsby로 기술 블로그 개발하기
수강 기한 : 무제한
진도율 : 0강/37강 (0%) | 시간 : 0분/0분
나가기
미수강
이전수업
다음수업



기본 개발 환경 구성하기

기본적으로 React를 실행하기 위한 환경을 구성하기 위해서는 자바스크립트 런타임인 Node.js와 패키지 매니저인 Yarn을 설치해야 합니다.

또, 이번 프로젝트를 진행하면서 Git을 꼭 사용해야하니 필수적으로 설치해주셔야 합니다.

그리고 저희는 Git을 사용하기 위한 원격 저장소가 필요합니다.

이를 위해 Git 웹 호스팅 서비스인 GitHub를 사용할 것인데, 만약 계정이 없다면 새로 생성해주세요.



Gatsby 프로젝트 생성하기

이렇게 기본적인 개발 환경 구성을 마쳤다면 이제 Gatsby 프로젝트를 만들어봅시다.

npx를 통해 gatsby-cli 라이브러리로 새로운 프로젝트를 생성해줍시다.

npx gatsby-cli new "[프로젝트 명]"


프로젝트 생성 과정이 마무리 되었다면 프로젝트명의 디렉토리가 하나 있을 것입니다.

아래 커맨드와 같이 해당 디렉토리 이동 후, 로컬 서버를 실행해봅시다.

cd "[프로젝트 명]"
gatsby develop
# yarn develop 도 마찬가지로 가능


아래와 같이 성공적으로 서버가 실행되는지 확인해보세요.

You can now view gatsby-starter-default in the browser.
⠀
  <http://localhost:8000/>
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  <http://localhost:8000/___graphql>
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build


두 번째 문장에 로컬 프로젝트 링크가 있을텐데, 해당 링크를 열어보면 다음과 같이 기본적으로 설정되어 있는 메인 페이지를 확인할 수 있습니다.

프로젝트가 잘 동작하는 것을 확인했으니 이제 디렉토리 구조를 잡아봅시다.

디렉토리 구조를 변경하기 전에 현재 실행 중인 로컬 서버를 멈춰주세요.

그 다음으로 src 디렉토리 내의 모든 파일들을 지우고, 다음과 같이 디렉토리를 생성해주세요.

각 디렉토리의 역할은 이름 아래 설명을 참고해주세요.

  • Root Directory
    • contents

      블로그 포스트 관련 파일들을 저장하기 위한 디렉토리입니다.

    • src

      • components

        React Component를 저장하기 위한 디렉토리입니다.

      • hooks

        Custom Hooks을 저장하기 위한 디렉토리입니다.

      • pages

        페이지의 역할을 하는 컴포넌트를 저장하기 위한 디렉토리입니다.

        기본적으로 브라우저에서 pages 디렉토리에 있는 파일의 이름을 통해 페이지에 접근할 수 있기 때문에 페이지의 역할이 아닌 컴포넌트들은 해당 디렉토리에 절대 저장하면 안 됩니다.

      • templates

        게시글 페이지와 같이 페이지의 역할을 하면서 같은 형식의 여러 콘텐츠를 보여주는 컴포넌트를 저장하기 위한 디렉토리입니다.

        Gatsby에서 제공하는 API를 통해 이 디렉토리에 저장된 템플릿 컴포넌트로 여러 페이지를 만들 수 있습니다.

        pages 디렉토리와는 다르게 파일명으로 페이지에 접근이 불가능합니다.


이제 마지막으로 사용하지 않는 라이브러리를 삭제해주겠습니다.

이 강의에서 다루지 않는 PWA(Progressive Web Application)을 위한 라이브러리인 gatsby-plugin-manifest와 Gatsby Cloud를 위한 라이브러리인 gatsby-plugin-gatsby-cloud를 삭제해주세요.

yarn remove gatsby-plugin-manifest gatsby-plugin-gatsby-cloud
    목차 커뮤니티