2 Gatsby 알아보기 및 개발 환경 구성하기 - Gatsby 프로젝트 생성하기
source: categories/study/gatsby/gatsby_2.md
기본 개발 환경 구성하기
- 기본적으로 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