[React-GATSBY] 개츠비 개발 환경 구축

개츠비란?

다양한 데이터 소스를 이용하여 정적 웹사이트를 빌드하는 리액트 기반 오픈 소스 프레임워크

리액트의 장점을 그대로 가져오면서 정적 웹 사이트를 쉽게 만들 수 있다.

 

개츠비의 장점

• 정적 웹페이지 방식을 사용하기 때문에 웹사이트 운영 비용이 저렴하고 페이지 로딩 속도가 빠르다
• 리액트를 이용하여 정적 웹페이지를 개발할 수 있어 개발 생산성이 좋다

개츠비의 단점

• 웹페이지의 콘텐츠 내용이 변경될 때마다 다시 빌드하여 배포해야 하는 번거로움이 존재
• 실시간으로 변경되는 데이터나, 게시판 같이 사용자들이 동적으로 만들어내는 콘텐츠를 보여주는 데 최적화되어 있지 않음

언제 사용하면 좋을까?

콘텐츠가 자주 변경되지 않으며 변경 사항을 실시간으로 반영하지 않는 정적 웹사이트 개발에 적합하다
상황에 따라 정적 웹페이지와 동적 웹페이지를 섞어서 만들 수 있으며 정적 웹사이트에서 새로운 콘텐츠 추가 혹은 기존 콘텐츠 변경이 있을 경우 전체 웹사이트를 재빌드하여 최신으로 유지하는 방식으로 최신 데이터를 반영한다

---

개츠비 개발 환경 구축

1. 개츠비 CLI 설치

npm install -g gatsby-cli@3.10.0

• '-g' : 현재 경로의 pagckage.json과 무관하게 어느 경로에서도 사용할 수 있도록 전역 설치 수행

 

2. 개츠비가 제공하는 기본 템플릿으로 기본 프로젝트 생성

 

gatsby new [생성할 프로젝트 이름] [템플릿 프로젝트 주소]

gastby new new_project https://github.com/gatsbyjs/gatsby-starter-blog

 

3. gatsby develop 명령으로 개발용 서버 켜기

cd gatsby-node
gatsby develop

 

이렇게 뜨면 환경 구축이 완료된 것이다.

---

환경 구축 오류

1. node version문제

gatsby는 node 18버전을 요구한다.

내가 소유한 windows 데스크탑은 14버전의 node를 가지고 있고, 이미 연동되어 있는 것들이 많아 과감하게 node 버전을 18로 올릴 수 없었다. 

나만 이럴리가 없지!

https://www.lesstif.com/javascript/nvm-node-version-manager-nodejs-82214944.html

nvm (Node version Manager) 로 여러 버전의 nodejs 사용하기

nvm을 이용하여 여러 버전을 사용할 수 있다.

 

2. gatsby 명령어 인식 안됨

처음에는 powershell 문제인줄 알았는데, cmd에서 해도 관리자권한으로 해도 똑같은 오류가 났다.

gatsby --version

버전 확인도 안됐다..

그래서 이것저것 해보다가

npm gatsby --version
npx gatsby --version

이렇게 했더니 gatsby 버전이 확인됐다.

난 분명 gatsby-cli를 설치했는데,, 원래 설치하면 독립적으로 사용되는게 정상이라고 봤는데 왜 이런지는 모르겠다.

 

가장 큰 문제는 'gatsby develop' 개츠비 서버 켜는게 안되는거였다.

이것도 아래와 같은 명령어로 수행하니 'gatsby develop'동일하게 수행되었다.

npx gatsby develop

구글링을 해도 나처럼 gatsby 명령어가 안되는 사람은 드물었다..

너무 궁금해서 chatGPT에게 질문했더니 아래와 같은 답을 받았다.

gatsby develop은 전역으로 설치된 Gatsby CLI(Command Line Interface)를 사용하여 개발 서버를 실행합니다. 이 경우에는 이미 시스템에 Gatsby CLI가 설치되어 있어야 합니다. CLI를 설치하지 않은 경우에는 gatsby develop 명령어를 사용할 수 없습니다.
반면에 npx gatsby develop은 로컬에 설치된 Gatsby 패키지를 사용하여 개발 서버를 실행합니다. npx는 npm 패키지를 실행하는 도구로, 실행할 때마다 해당 패키지를 자동으로 다운로드하여 실행합니다. 따라서, npx gatsby develop는 로컬 프로젝트에 설치된 Gatsby 패키지를 사용하여 개발 서버를 실행할 수 있으므로, 별도의 CLI 설치 없이도 사용할 수 있습니다.
일반적으로, 프로젝트마다 로컬에 설치된 Gatsby 패키지를 사용하여 개발 서버를 실행하는 것이 권장됩니다. 이렇게 하면 프로젝트에 종속된 Gatsby 버전을 사용할 수 있으며, 프로젝트의 의존성과 버전 관리도 쉽게 할 수 있습니다. 따라서 npx gatsby develop를 사용하는 것이 더 안정적이고 일반적인 접근 방식입니다.

?? 오히려 좋아.

 

여담이지만 mac에서 gatsby설치를 수행할 땐 아무런 오류없이 완료했다.(macOS : Ventura 13.4, node : v16.19.1, npm : 8.19.3)