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 하위 시스템을 사용하는 것이 좋습니다.

Important

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. 패키지가 설치되면 새 앱 폴더로 디렉터리를 변경한 후(cd my-gatsby-app) code .를 사용하여 VS Code에서 Gatsby 프로젝트를 엽니다. 그러면 VS Code의 파일 탐색기를 사용하여 앱에 대해 만들어진 Gatsby.js 프레임워크를 살펴볼 수 있습니다. VS Code는 VS Code 창의 왼쪽 아래에 있는 녹색 탭에 표시된 대로 WSL-Remote 환경에서 앱을 열었습니다. 즉, Windows OS에서 편집하기 위해 VS Code를 사용하지만 앱은 Linux OS에서 계속 실행됩니다.

   

6. Gatsby가 설치되면 다음 세 가지 명령을 알고 있어야 합니다.

   • gatsby develop: 핫 다시 로드를 사용하여 개발 인스턴스를 실행합니다.
   • gatsby build: 프로덕션 빌드를 만듭니다.
   • gatsby serve: 프로덕션 모드에서 앱 시작

   VS Code에서 통합된 WSL 터미널을 엽니다(보기 > 터미널). 터미널 경로가 프로젝트 디렉터리(~/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에 기본 제공되는 자체 문서화 IDE(GraphiQL)로 통합합니다. 사이트의 데이터와 스키마를 살펴보는 것 외에도 쿼리, 변경, 구독 등의 GraphQL 작업을 수행할 수 있습니다. 자세한 내용은 GraphiQL 소개를 참조하세요.

8. VS Code 편집기에서 src/pages/index.js 파일을 엽니다. <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 Code 디버깅을 참조하세요.

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