Windows에서 Gatsby.js를 시작하세요.

Gatsby.js 웹 프레임워크를 설치하고 Windows에서 실행하기 위한 가이드입니다.

Gatsby.js Next.js같이 서버 렌더링되는 것이 아니라 React.js기반으로 하는 정적 사이트 생성기 프레임워크입니다. 정적 사이트 생성기는 빌드 시간에 정적 HTML을 생성합니다. 서버가 필요하지 않습니다. Next.js는 실행 시간에(새로운 요청이 들어올 때마다) HTML을 생성하며, 이를 위해 서버가 실행되어야 합니다. Gatsby는 앱에서 데이터를 처리하는 방법(GraphQL 사용)도 지시하는 반면, Next.js 해당 결정을 사용자에게 맡깁니다.

React를 기반으로 하는 React 및 기타 JavaScript 프레임워크에 대한 자세한 내용은 React 개요 페이지를 참조하세요.

필수 조건

이 가이드에서는 다음을 포함하여 Node.js 개발 환경을 설정하는 단계를 이미 완료한 것으로 가정합니다.

• 최신 버전의 Windows 10(버전 1903 이상, 빌드 18362 이상) 또는 Windows 11 설치
• Linux 배포판(예: Ubuntu)을 포함하여 WSL(Linux용 Windows 하위 시스템)설치하고 WSL 2 모드에서 실행 중인지 확인합니다. PowerShell을 열고 wsl -l -v를 입력하여 확인할 수 있습니다.
• WSL 2에 Node.js 설치: 여기에는 버전 관리자, 패키지 관리자, Visual Studio Code 및 원격 개발 확장이 포함됩니다.

Linux 서버 또는 Docker 컨테이너를 실행할 때 성능 향상, 시스템 호출 호환성 및 패러디를 위해 NodeJS 앱으로 작업할 때 Linux용 Windows 하위 시스템을 사용하는 것이 좋습니다.

중요합니다

WSL에 Linux 배포를 설치하면 파일을 저장할 수 있는 디렉터리가 생성됩니다(\\wsl\Ubuntu-20.04)(Ubuntu-20.04를 사용 중인 Linux 배포로 대체). Windows 파일 탐색기에서 이 디렉터리를 열려면 WSL 명령줄을 열고 cd ~를 사용하여 홈 디렉터리를 선택한 후 explorer.exe . 명령을 입력합니다. 이때 탑재된 C 드라이브(/mnt/c/Users/yourname$)에 NodeJS를 설치하거나 작업할 파일을 저장하지 않도록 주의하세요. 이렇게 하면 설치 및 빌드 시간이 크게 느려집니다.

설치 Gatsby.js

Gatsby.js 프로젝트를 만들려면 다음을 수행합니다.

1. WSL 터미널을 엽니다(예: Ubuntu).

2. 새 프로젝트 폴더 mkdir GatsbyProjects 를 만들고 해당 디렉터리를 입력합니다. cd GatsbyProjects

3. npm을 사용하여 Gatsby CLI npm install -g gatsby-cli를 설치합니다. 설치되면 gatsby --version를 이용해 버전을 확인합니다.

4. Gatsby.js 프로젝트를 만듭니다. gatsby new my-gatsby-app

5. 패키지가 설치된 후 새 앱 폴더로 디렉터리를 변경하고, VS Code에서 Gatsby 프로젝트를 열려면 cd my-gatsby-app, code .를 사용하십시오. 이렇게 하면 VS Code의 파일 탐색기를 사용하여 앱에 대해 만들어진 Gatsby.js 프레임워크를 볼 수 있습니다. VS Code가 VS Code 창의 왼쪽 아래에 있는 녹색 탭에 표시된 대로 WSL-Remote 환경에서 앱을 열었습니다. 즉, Windows OS에서 편집하기 위해 VS Code를 사용하는 동안 Linux OS에서 앱을 계속 실행하고 있습니다.

   

6. Gatsby가 설치되면 알아야 할 3가지 명령이 있습니다.

   • 핫 다시 로드를 사용하여 개발 인스턴스를 실행하기 위한 gatsby develop.
   • 프로덕션 빌드를 만들기 위한 gatsby build.
   • 프로덕션 모드에서 앱을 시작하려면 gatsby serve을 사용하세요.

   VS Code에 통합된 WSL 터미널을 엽니다(View > Terminal). 터미널 경로가 프로젝트 디렉터리(예: ~/GatsbyProjects/my-gatsby-app$)를 가리키는지 확인합니다. 그런 다음, 다음을 사용하여 새 앱의 개발 인스턴스를 실행해 봅니다. gatsby develop

7. 새 Gatsby 프로젝트의 컴파일이 완료되면 터미널이 표시됩니다You can now view gatsby-starter-default in the browser. http://localhost:8000/. 웹 브라우저에서 빌드된 새 프로젝트를 보려면 이 localhost 링크를 선택합니다.

비고

터미널 출력에서 "브라우저 내 IDE인 GraphiQL을 보고 사이트의 데이터 및 스키마 http://localhost:8000/___graphql를 탐색할 수 있습니다." GraphQL은 API를 Gatsby에 기본 제공되는 GraphiQL(자체 문서화 IDE)로 통합합니다. 사이트의 데이터 및 스키마를 탐색하는 것 외에도 쿼리, 변형 및 구독과 같은 GraphQL 작업을 수행할 수 있습니다. 자세한 내용은 GraphiQL 소개를 참조하세요.

8. src/pages/index.js VS Code 편집기에서 파일을 엽니다. 페이지 제목 <h1>Welcome to <b>Gatsby!</b></h1>를 찾아서 <h1>Hello <b>World!</b></h1>로 변경하십시오. 웹 브라우저가 http://localhost:8000에서 계속 열려 있는 상태에서 변경 내용을 저장하면 핫 리로딩 기능이 브라우저에서 변경 내용을 자동으로 컴파일하고 업데이트하는 것을 확인할 수 있습니다.

   

F5 키를 선택하거나 메뉴 모음에서 디버그 보기(Ctrl+Shift+D) 및 디버그 콘솔 보기 >> (Ctrl+Shift+Y)로 이동하여 Gatsby 앱에서 VS Code의 디버거를 사용할 수 있습니다. 디버그 창에서 기어 아이콘을 선택하면 디버깅 설정 세부 정보를 저장할 수 있도록 시작 구성(launch.json) 파일이 만들어집니다. 자세한 내용은 VS 코드 디버깅을 참조하세요.

Gatsby에 대한 자세한 내용은 Gatsby.js 문서를 참조하세요.