안녕하세요 슬로워크 데이터랩의 프로그래머 벤입니다. 2020년부터 데이터랩은 기술 블로그를 운영하기로 했어요. 앞으로 저희는 이 ‘데이터랩 블로그’를 통해서 다양한 데이터분석 기술을 활용해 사회를 바라보는 시도를 이어나갈 예정입니다.
데이터랩 블로그는 팀 블로그이기도 하지만, 저희의 기술을 녹여낼 수 있는 포트폴리오이기도 합니다. 앞서 발행한 첫번째 리포트에서 다양한 차트 라이브러리들이 활용되는 방식을 보여줬던 것 처럼요. 이처럼 데이터랩 블로그는 앞으로 다양한 데이터소스와 컴포넌트를 활용하게 될텐데, Gatsby는 이런 확장성을 염두했을 때 적절한 프레임워크라는 판단이 들었습니다. 물론 최근에 주목받고 있는 이 힙한(!) 프로젝트에 대한 호기심도 있었어요.
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-20194author: Datalab5date: 2020-02-076hero: ./IMG_9421.PNG7excerpt: 슬로워크 데이터랩에서는 국내에서도 점점 관심이 높아지고 있는 소셜섹터의 일자리는 어떠한지 2019년 한 해동안 발행된 오렌지레터의 '채용 정보'를 바탕으로 분석하고 정리해봤습니다.8---910import {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"161718## 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';56const 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];1415export 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를 이용할 수 있었어요. 배포 방법과 도메인 설정에 대한 가이드를 개츠비와 깃헙에서도 이렇게 친절하게 제공하고 있어서 참고했습니다.
- https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/
- https://help.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site
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도 언젠가 도입해볼 생각을 하고 있어요. 적절한 쓰임새가 있으면 도입해보고 그때 다시 블로그 글로 찾아 오겠습니다. 🐻