Gatsby.JS와의 만남 #1 개념잡기
리액트는 무엇이고, 개츠비는 무엇입니까?
내가 프로그래밍을 공부하는 이유는, 생활 속에 필요하거나 재미있을 것 같다고 생각하는 여러가지 아이디어를 ‘직접 개발하고 싶어서’다. 그중에서도 리액트를 공부하는 이유는, 언제든지 재사용 가능한 컴포넌트들의 모음인 ‘디자인 시스템’이 나의 프로젝트에 꼭 필요하기 때문이다. 생활코딩에서는 ‘직접 만들자 병’이라고 지칭하기도 하는데, 나도 갈증이 아주 많다. 리액트든 개츠비든 이름만 들어도 두렵지만, 이 벽을 뚫은 후에는 다른 세상이 열릴 거라고 확신하면서 공부를 시작하겠다.
Gatsby.js란?
Gatsbyjs는 React 기반의 정적 페이지 생성 프레임워크라고 한다. React를 공부하는데 난데없는 Gatsby 무엇. 둘의 관계는 gatsbyjs.org의 첫페이지에 인포그래픽으로 표현되어 있다. 해석을 대략 해 보면, 여러 가지 데이터들을 그래프QL이 관리하도록 가져온다. 그리고 그 데이터를 HTML, CSS, React로 만들어진 컴포넌트 UI에 뿌려준다. 이것을 사이트로 만들어 준다. 이게 개츠비의 전체 프로세스인 듯하다. 개츠비 동작 과정 안에 리액트가 포함되어 있다. 그러니 내가 공부하려는 리액트보다 개츠비의 스케일이 훨씬 더 큰 것이다. 1단계에서 2단계를 공부하다가 갑자기 한 20단계를 공부하는 어떤 그런 기분이지만, 웹 개발의 경험이 적은 사람들도 쉽게 접근할 수 있다고 하니 튜토리얼을 바탕으로 리액트의 개념을 좀 더 명확히 잡아 가려고 한다.
개츠비를 사용하기 전에 알아야 할 기술과 언어 : 5개라며 그것은 아마도 개발자 기준이 아닐까. 디자이너는 정리하면 할 수록 알아야 할 것이 늘어나고 있으며 아페로도 계속 늘어날 예정…
- HTML
- CSS
- JavaScript
- React : 개츠비가 페이지를 만들고 내용을 구조하기 위해 사용하는 코드 라이브러리. https://reactjs.org/
- GraphQL : 웹사이트에 모든 데이터를 넣을 수 있게 해 주는 프로그래밍 언어 https://graphql.org/learn/
그냥 보기에도 더 많고 복잡한 과정들을 거친 후에야 사이트가 탄생할텐데, 이 다섯개를 알면 된단 말인가? 아직 Javascript, React, GraphQL은 개념을 잡아가는 단계이지만 위 기술만 터득한다면 원하는 사이트를 만들 수 있다.
아래 항목은 개념 정도만 파악하고 있으면 될 것 같다.
- Node.js : 웹 브라우저 외부에서 JavaScript 코드를 실행할 수 있는 환경 https://nodejs.org/en/about/
- npm.js : Node 패키지를 관리해주는 것. npm이나 yarn을 사용하라고 한다. https://www.npmjs.com/
https://yarnpkg.com/lang/en/ - npx : npm 5.2.0 이후 버전 설치 시 npx라는 새로운 바이너리가 설치됨. Gatsby를 지원하는 사이트를 생성하기 위해 필요한 것. *바이너리란 실행할 수 있는 파일의 형태라고 한다.
- CLI : 커맨드라인 인터페이스로서 터미널을 통해 작업한다. 입력하면 거기에 맞는 결과가 텍스트 형태로 출력된다.
GatsbyJS를 쓰기 위해서 해야하는 일.
가장 먼저 Node.js와 Git을 설치한다. Node.js와 npm의 버전이 확인되며 설치가 완료되었다. 튜토리얼에서는 터미널을 열어 설치하라고 하나 설치파일을 다운받아서 설치하였다. 다운로드 받아 설치하는 경우에는 npm이 같이 설치된다. 다음으로, Git설치다. 개발자 분들이 사용하고 있는 것을 많이 봐 왔다. 다행히 나는 이미 설치가 되어 있다. XCode를 설치하면 Git도 같이 설치된다고 한다. Gatsby CLI툴로 Gatsby를 지원하는 사이트를 생성한다. 터미널을 열고, npx에게 아래와 같은 명령을 한다.
npx gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
//npx에게 새로운 프로젝트를 생성하라 명령함. 프로젝트의 폴더명은 hellow-world임.cd hello-world
//hellow-world폴더로 접근npm run develop
//개발서버 실행
프로젝트 생성부터 개발서버 실행까지 끝냈다. 로컬호스트로 확인도 하였다. npx는 패키지이기 때문에 다운로드부터 인스톨 까지 모든 처리를 다 해준다고 한다. 그 세부적인 것까지 들어가지는 않도록 하겠다. 이렇게 해서 나의 Gatsby 웹사이트가 생겼는지 확인 해 보았다. 아주 잘 나와서 기쁜 마음에 내이름으로 바꿔 보았다. 로컬에 설치된 내 사이트는 http://localhost:8000에서 확인 가능하며 개발서버를 실행하는 동안에는 사이트가 계속 열려 있다.
이때 8000의 의미도 모르기에, 찾아보도록 한다. 8000은 포트번호 중 하나인데, 여기서 포트(이것도 모름. 프로토콜간의 데이터가 통하는 통로라고 함. 프로토콜은 통신규약을 뜻함)는. 국제 도메인 관리기구 등에 의해 몇가지 지정된 번호가 존재한다. 그중 80이나 8000번은 개발용 웹서버에 쓰는 포트인데, 개츠비에서는 8000으로 지정해놓았다고 한다. 그 번호를 어디서 지정했는지 겨우 찾아보았다.
그것은 Nodejs의 모듈 안의 Gatsby-CLI에 숨어있었다. 이게 왜 지정이 돼 있는지 어떻게 지정하는 건지 알고싶으나 넘어가자. 홍시맛이 나서 홍시라고 생각한 것이온데 어찌 홍시라 생각했느냐 하시면…호오! 타고난 포트번호는 따로 있었구나! 8000이라서 8000이라고 한 걸 생각으로 알아내려 한 내가 어리석었다고 생각하며 패-스.
