블로그를 만드는 이유
최근 바닐라 js로 SPA를 만들어보거나 리액트를 접해보면서 재미를 붙여 '나만의 사이트를 만들어보고 싶다'는 생각을 하게 됐다.
개인적 용도로 꾸준히 오랫동안 사용하면서 개선해나갈 사이트를 만들고 싶었고, 블로그가 그 목적에 가장 알맞다고 생각했다.
기존에는 티스토리 블로그를 사용(거의 안했지만..)했었기 때문에 블로그를 만들면서 다시 개발내용을 차근차근 기록해나가려고 한다.
왜 깃허브, Gatsby인가?
Github Pages + SSG
결론부터 말하면 SSG로 생성한 정적 페이지를 Github Pages로 호스팅하는 방식을 사용했다.
사이트 운영 방식으로는 물론 클라우드 서비스 등으로 서버를 띄워서 배포하는 방식도 있지만, 유지 비용이라는 큰 단점이 있다. 이밖에도 서버의 안정성, https와 보안 등 백/프론트 모두 신경써줘야 할 부분이 많다.
따라서 깃허브에서 제공하는 Github Pages 서비스를 사용해 정적 페이지를 호스팅하는 방식을 선택했다.
평소에 다른 블로그들을 방문할 때 예쁜 테마로 디자인된 것을 보면 '어떻게 만들었지?' 하고 깃허브 저장소를 확인해보곤 한다.
대부분 Gatsby, Jekyll, Hugo 등을 사용한 것을 보는데, 이들은 모두 정적 사이트 생성기(Static Site Generator, SSG)이다.
사용하는 언어는 각각 다르지만 화면 구성 코드 -> 정적 사이트 생성 -> github pages로 호스팅의 과정을 거쳐 블로그를 운영할 수 있다.
JAM stack
위에서 말한 Gatsby, Jekyll, Hugo 등의 정적 사이트 생성기를 사용해 JAM(Javascript, API, Markup) stack 형식으로 웹사이트를 구성할 수 있다.
JAM stack은 웹 경험 레이어와 데이터/비즈니스 로직을 분리한 형태의 아키텍쳐 접근방식이다. - jamstack 공식문서
공식 홈페이지에서 말하듯 JAM 스택은 사용자에게 보여지는 정적인 리소스와 이외의 비즈니스 로직을 구분한 형태의 구조를 말한다. 일반적인 웹서버/웹앱서버를 사용하는 대신, 빌드된 정적 페이지 + API 요청이라는 간결한 형태의 구조를 사용하는 것이다.
정적 페이지들을 미리 생성해놓기 때문에 페이지가 빨리 표시되어 사용자 경험 측면에서 유리하고, 깃허브 페이지 뿐만 아니라 어느 호스팅 서비스든 쉽게 사용할 수 있는 등의 장점이 있다.
Javascript, API, Markup 중 SSG는 마크업에 해당한다. HTML 파일을 직접 작성해서 마크업을 할 수도 있지만, SSG는 마크다운 등의 파일을 작성하면 해당 내용을 바탕으로 HTML 파일을 빌드해주는 기능을 한다.
이밖에 JAM stack에 대한 자세한 내용은 Gatsby에서도 제공한다.
What Is The Jamstack? - Gatsby
Gatsby
Gatsby를 선택할 때 고려한 사항은 다음과 같다.
- 자바스크립트, 특히 리액트 기반으로 화면을 구성해보고 싶다.
- 블로그라는 목적에 적합해야 한다.
사실 리액트로 정적페이지를 다루는 다른 대표적인 방법으로 Next js가 존재한다. Next js는 SSR 프레임워크이며 빌드를 통한 SSG 또한 지원한다.
하지만 개인용 블로그라는 용도를 생각했을 때 사용자마다 보여주는 데이터가 다르지 않고, 데이터 변동이 필요없는 상황이기 때문에 정적 페이지만을 생성하는 Gatsby를 선택하기로 했다.
Gatsby는 npm 기준으로 165개라는 수많은 패키지를 기본적으로 내장하고 있다. 바벨, 웹팩, 데이터 쿼리에 사용하는 graphql 등 정말 필요한 건 대부분 가지고 있다고 할 정도로 많은 패키지들이 out-of-box 형태로 제공된다.
당연히 이런 디펜던시들의 설정을 커스텀할 수 있는 방법 또한 제공되며, 빌드 시 추가적으로 수행되는 작업들도 따로 설정해 줄 수 있다.
여기에 더해 추가적인 플러그인도 상당히 많아 필요한 기능은 대부분 플러그인 설치와 조금의 설정으로 만들어 줄 수 있다.
Gatsby 프로젝트 생성하기
💡 프로젝트 생성 및 배포는 가장 기본적인 부분만 서술합니다. Typescript, ESlint, Gatsby 플러그인 설정 등은 따로 해주셔야 합니다!
화면 구성을 직접 하면서 리액트, 자바스크립트를 익히는게 목표이므로 gatsby의 보일러 플레이트를 생성하고 기본적인 파일들을 모두 지워줄 것이다.
먼저 gatsby-cli로 프로젝트를 생성한다.
npm init -y
npm gatsby-cli
npx gatsby-cli new [프로젝트 이름]
설치가 끝나면 개발용 서버를 실행할 수 있다.
cd [프로젝트 이름]
gatsby develop
이후 http://localhost:8000, http://localhost:8000/___graphql에 접속해 각각 개발용 서버와 graphiql에 접속할 수 있다.
Typescript 적용하기
ts를 적용하기 위해 관련 플러그인과 설정이 필요하다.
npm i -D typescript
npm i gatsby-plugin-typescript
// gatsby-config.js
module.exports = {
// ...
plugins: [
// ...
{
resolve: 'gatsby-plugin-typescript',
options: {
isTSX: true,
allExtensions: true,
},
},
// ...
]
}
이제 타입스크립트 설정을 해야한다. 컴포넌트를 포함한 ts 파일들을 다룰 src 디렉토리를 baseUrl로 설정하고, 나머지는 원하는 설정으로 한다.
npx tsc --init
// tsconfig.json
{
"compilerOptions": {
// ...
"baseUrl": "./src",
// ...
},
"include": ["src/**/*.tsx"],
"exclude": ["node_modules"]
}
필요하다면 eslint, prettier의 설정도 해준다. 특히 타입스크립트를 사용할 땐 사실상 필수라고 생각한다. 설정 과정은 생략하겠다.
이제 기본 페이지를 직접 생성해주기 위해 src 디렉토리 아래의 모든 파일을 지운다. 그 다음 components 디렉토리를 생성해 App.tsx를, pages 디렉토리를 생성해 index.tsx를 생성한다.
// components/App.tsx
import React from 'react';
type AppProps = {
text: string,
};
const Text: React.FC<AppProps> = ({ text }) => {
return <div>{text}</div>;
};
export default Text;
// pages/index.tsx
import React from 'react';
import App from '../components/App';
const IndexPage: React.FC = () => {
return <App text="Hello, world!" />;
};
export default IndexPage;
저장한 뒤 개발서버를 실행하고 http://localhost:8000로 접속해 페이지가 정상적으로 뜨면 성공!
Github pages로 배포하기
먼저 레포지토리를 생성한다. 깃허브에 [깃허브 유저네임].github.io라는 이름으로 레포지토리를 생성하면 깃허브 페이지를 사용할 수 있다.
지금까지 작업한 gatsby 프로젝트를 develop 브랜치로 커밋하여 이후 개발용으로 사용하고, 빌드한 결과물을 github pages로 배포할 땐 master 브랜치를 사용할 것이다.
먼저 생성한 레포지토리에 develop 브랜치를 push 한다.
git remote add origin [레포지토리 클론 주소]
git branch -m develop // 현재 브랜치 이름을 develop으로 변경
git add .
git commit -m "Initial Commit"
git push -u origin develop
그 다음 배포에 필요한 패키지인 gh-pages를 설치하고 빌드 스크립트를 추가한다.
npm i -D gh-pages
// package.json
{
// ...
"scripts": {
// ...
"deploy": "gatsby build && gh-pages -d public -b master"
// ...
},
// ...
}
이후 npm run deploy로 master 브랜치로 배포를 진행한다.
깃허브를 확인해보면 master가 아닌 develop이 메인 브랜치로 설정된 경우, settings 탭을 눌러 pages 옵션에서 배포 branch를 master/root로 변경해주고 다시 배포를 실행하면 된다.
배포 실행 후 레포지토리의 actions 탭에서 github pages의 워크플로우가 완료되면 배포가 완료된 것이다. 이후 [깃허브 유저네임].github.io 주소로 접속해 페이지가 정상적으로 나오면 성공!
참고로 웹 캐시의 영향으로 배포 후 빈 화면이나 예전에 배포한 화면이 나온다면 ctrl + shift + R을 눌러 강력새로고침을 하면 캐시를 반영하지 않고 새로 페이지를 받아올 수 있다.
그 다음부터는..
지금까지의 과정으로 한 줄의 텍스트를 출력하는 페이지를 배포할 수 있게 되었다!
이제 Gatsby의 강력한 플러그인들과 리액트를 활용해 나만의 블로그를 개발 할 수 있게 된 것이다.
본격적으로 블로그의 형태로 개발하기 위해 필요한 키워드들을 나열해보면 다음과 같다.
- Gatsby에서 페이지 간 이동하기 - Gatsby Link
- 마크다운 파일을 통해 페이지를 생성하기 - gatsby-transformer-remark
- 마크다운 내의 이미지 파일 다루기 - gatsby-remark-images
- 스타일링하기 - emotion, gatsby-plugin-emotion
- slug로 게시글 페이지 링크 설정하기 - onCreateNode API, createPage API
이 밖에도 필요성을 느끼면 무한스크롤, 미디어쿼리 등 많은 기능을 추가해 볼 수도 있을 것이다.
직접 블로그를 개선해나가며 재미와 학습, 두마리 토끼를 잡아보자!
참고
https://www.gatsbyjs.com/docs/glossary/jamstack/