Slowalk Datalab

Navigate back to the homepage

기술 블로그 개츠비로 개발하고 깃헙에 배포하기

Ben
February 25th, 2020 · 2 min read

안녕하세요 슬로워크 데이터랩의 프로그래머 벤입니다. 2020년부터 데이터랩은 기술 블로그를 운영하기로 했어요. 앞으로 저희는 이 ‘데이터랩 블로그’를 통해서 다양한 데이터분석 기술을 활용해 사회를 바라보는 시도를 이어나갈 예정입니다.

데이터랩 블로그는 팀 블로그이기도 하지만, 저희의 기술을 녹여낼 수 있는 포트폴리오이기도 합니다. 앞서 발행한 첫번째 리포트에서 다양한 차트 라이브러리들이 활용되는 방식을 보여줬던 것 처럼요. 이처럼 데이터랩 블로그는 앞으로 다양한 데이터소스와 컴포넌트를 활용하게 될텐데, Gatsby는 이런 확장성을 염두했을 때 적절한 프레임워크라는 판단이 들었습니다. 물론 최근에 주목받고 있는 이 힙한(!) 프로젝트에 대한 호기심도 있었어요.

How Gatsby Works
gatsbyjs.org

TDD (Theme Driven Developement)

혼자서 새로운 프로젝트를 시작할 때면 늘 테마(theme)부터 찾는 편입니다. 일단 저의 프론트엔드 개발 경험이 적은 편이기도 하고, 누군가 이미 만들어놓은 걸 잘 찾아 쓰기만 해도 많은 수고를 덜 수 있더라고요. ‘Don’t reinvent the wheel’ 원칙으로 불리기도 하죠. 좋은 패키지를 가져다 쓰면서 조금씩 뜯어 고치는 과정은 잘 디자인된 방법론을 익히는 계기가 되기도 합니다.

개츠비 홈페이지(www.gatsbyjs.org/docs/themes)에서 테마에 대한 소개와 함께 다양한 테마 목록을 확인할 수 있어요. Jekyll이나 HUGO를 사용해본 분이라면 낯설지 않은 개념이에요. 이 블로그는 gatsby-theme-novela의 스타터 프로젝트를 기반으로 개발되었습니다. 많은 다른 테마들을 비교해보면서 골랐고, 아래 옵션들이 먼저 눈에 들어왔어요.

  • 다크모드, 리딩 프로그레스, 미디어쿼리, 코드 스니펫
  • theme 섀도잉
  • author 템플릿
  • MDX 플러그인

MDX

개츠비같은 ‘스태틱 웹 제너레이터’가 블로그 포스트를 관리할 때 거의 항상 MD(마크다운) 문법이 쓰입니다. 그리고 이 블로그의 테마는 그 마크다운 문법과 리액트의 JSX 문법을 함께 쓸 수 있도록 개발된 MDX를 활용합니다. 데이터랩 블로그처럼 본문 텍스트에 다양한 모듈을 연동할 때 유용해요. 앞선 리포트에서는 시범삼아 4가지 차트/시각화 라이브러리를 붙여봤어요(chartjs, recharts, google-charts, d3-geo).

아래 코드는 첫 리포트의 원고가 담긴 MDX 파일의 일부입니다. 컴포넌트들을 별도의 파일로 구성하니까 원고 작성(mdx)과 차트 작성(js)을 분리해서 진행하기에 좋았어요.

1---
2title: 2019 채용 데이터로 알아보는 소셜섹터 일자리
3slug: 2020-02-07-social-jobs-2019
4author: Datalab
5date: 2020-02-07
6hero: ./IMG_9421.PNG
7excerpt: 슬로워크 데이터랩에서는 국내에서도 점점 관심이 높아지고 있는 소셜섹터의 일자리는 어떠한지 2019년 한 해동안 발행된 오렌지레터의 '채용 정보'를 바탕으로 분석하고 정리해봤습니다.
8---
9
10import {Bar, Line} from 'react-chartjs-2';
11import MonthlyAreaChart from "./MonthlyAreaChart.js";
12import SeoulMap from "./SeoulMap.js"
13import KoreaBarChart from "./KoreaBarChart.js"
14import JobTreeMap from "./JobTreeMap.js"
15import JobBarChart from "./JobBarChart.js"
16
17
18## 04 소셜섹터는 어느 시기에 많이 채용을 할까요?
19소셜섹터의 채용 공고는 짧게는 1주이내 길게는 2주 이상 공고가 계속 되는 경우도 있으나, 첫 공고를 기준으로 산정하였습니다. 월별로는 7월이 가장 많았으며, 1월, 6월, 3월이 뒤를 이었습니다. 이는 이직 시즌과 조직내에서 프로젝트를 시작하는 시점인 연초 혹은 하반기를 앞두는 시점에 채용공고가 많은 것으로 보입니다.
20<MonthlyAreaChart></MonthlyAreaChart>

MonthlyAreaChart의 결과물과 코드입니다. Recharts라는 차트 라이브러리를 활용하면 이렇게 짧은 코드로도 간편하게 차트를 그릴 수 있어요.

1import React, { PureComponent } from 'react';
2import {
3 ResponsiveContainer, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip,
4} from 'recharts';
5
6const data = [
7 {name: 'Jan', count: 86, }, {name: 'Feb', count: 32, },
8 {name: 'Mar', count: 80, }, {name: 'Apr', count: 68, },
9 {name: 'May', count: 52, }, {name: 'Jun', count: 85, },
10 {name: 'Jul', count: 115, }, {name: 'Aug', count: 52, },
11 {name: 'Sep', count: 54, }, {name: 'Oct', count: 31, },
12 {name: 'Nov', count: 65, }, {name: 'Dec', count: 56, }
13];
14
15export default class Example extends PureComponent {
16 render() {
17 return (
18 <ResponsiveContainer width='100%' height={300}>
19 <AreaChart data={data} margin={{top: 10, right: 30, left: 0, bottom: 0,}}>
20 <CartesianGrid strokeDasharray="3 3" />
21 <XAxis dataKey="name" />
22 <YAxis />
23 <Tooltip />
24 <Area type="monotone" dataKey="count" stroke="#f15a22" fill="#f9cbbe" />
25 </AreaChart>
26 </ResponsiveContainer>
27 );
28 }
29}

GitHub Pages

깃헙은 오픈소스 프로젝트들을 위해 스태틱 사이트의 호스팅 서비스를 무료로 운영하고 있습니다. 슬로워크는 소스 저장소로 깃헙을 쓰고 있기 때문에 몇가지 설정만 추가하면 바로 이 GitHub Pages를 이용할 수 있었어요. 배포 방법과 도메인 설정에 대한 가이드를 개츠비와 깃헙에서도 이렇게 친절하게 제공하고 있어서 참고했습니다.

github.io가 아닌 별도의 도메인을 설정할 때 깃헙은 CNAME 파일을 참고합니다. 개츠비 빌드시 바로 이 CNAME 파일을 포함시키도록 설정해줘야 하는데, 플러그인을 쓰니 편리하더라고요. gatsby-plugin-cname은 메타데이터로 명시한 siteUrl을 가져다 빌드할 때 CNAME 파일에 넣어줍니다.

GA는 관련 플러그인 gatsby-plugin-google-analytics가 있어서 설정파일에 몇 줄 추가하는 걸로 해결이 됐어요. 블로그같은 스태틱 웹사이트라는게 기능이 대체로 비슷비슷하기 때문에 이미 만들어진 도구만 잘 찾으면 웬만한 품질을 빠르게 만족시킬 수 있는 것 같습니다.

위의 설정들이 반영된 이 블로그의 gatsby-config.js 파일은 이렇게 생겼습니다.

1module.exports = {
2 siteMetadata: {
3 title: `Slowalk Datalab`,
4 name: `Slowalk`,
5 siteUrl: `https://datalab.slowalk.co.kr`,
6 description: `Data Science from Society`,
7 hero: {
8 heading: `Data Science from Society`,
9 maxWidth: 652,
10 },
11 },
12 plugins: [
13 'gatsby-plugin-cname',
14 {
15 resolve: `gatsby-plugin-google-analytics`,
16 options: {
17 trackingId: "UA-158128545-1",
18 },
19 },
20 {
21 resolve: "@narative/gatsby-theme-novela",
22 options: {
23 contentPosts: "content/posts",
24 contentAuthors: "content/authors",
25 basePath: "/",
26 authorsPage: true,
27 sources: {
28 local: true,
29 // contentful: true,
30 },
31 },
32 },
33 ],
34};

깃헙을 쓰는 김에 GitHub Actions도 언젠가 도입해볼 생각을 하고 있어요. 적절한 쓰임새가 있으면 도입해보고 그때 다시 블로그 글로 찾아 오겠습니다. 🐻

© 2020 Slowalk