Intro

7월부터 리액트, 타입스크립트로 간단한 웹 게임을 만드는 스터디 활동을 시작했었다. 이 스터디의 마지막 관문은 블로그를 만드는 팀 프로젝트였다. 그렇게 9월부터 3인이 한 팀이 되어 블로그 프로젝트를 시작했다. 블로그 사이트의 이름은 oreum이다. 팀원 중 한 분이 제주도의 오름을 생각하며 지었고, 의미를 부여하자면 위로 올라갈 것이라는 뜻으로 볼 수 있겠다.

프로젝트 키워드

블로그, 개츠비, 리액트, 타입스크립트(실패)

프로젝트의 목적은 개츠비(Gatsby)를 이용하여 블로그를 만드는 것이었다. 개츠비가 뭘까?

Gatsby는 React 및 GraphQL을 사용하여 Node.js 위에 구축된 오픈 소스 정적 사이트 생성기입니다. - 위키백과

서버 없이 블로그 사이트를 만들기 위해 Gatsby 프레임워크를 사용하기로 했다. Gatsby는 JAM Stack 기반 프레임워크이다.

우리에게 필요한 데이터인 블로그 게시물은 GraphQL에 저장되어 있고, 우리는 쿼리문을 이용해 데이터를 가져오면 되는 형식이다.

메인 기능

✔️는 내가 맡은 파트라는 뜻이다.

홈

홈 페이지이다. 카드형 디자인으로 모든 글이 보인다. 팀원 중 한 분이 구현해주셨는데 모바일 환경에서는 세로로 정렬되게끔 반응형으로 구현하셨다.

모든 글 보기 페이지

모든 글 페이지는 카테고리 별로 글을 볼 수 있게 구현되었다. 이 페이지도 홈 페이지를 구현한 팀원분께서 작업하셨다.

카테고리 페이지를 하나씩 생성해서 카테고리를 누를 때마다 이동하게 구현되었다.

---

상세 글 페이지✔️

상세 글 페이지는 목록에서 선택한 md 파일을 GraphQL에서 찾아 렌더링하는 형식이다. 카테고리 별 페이지를 각각 생성한 것과 같이 상세 글 페이지를 각각 생성했다. 글마다 댓글을 작성 할 수 있다. 이는 아래 상세 기능에서 설명할 것이다.

상세 기능

다크모드✔️

개츠비에서는 다크모드 플러그인도 지원한다. 사용하는 방법은 정말 쉬웠다. 사이트의 가이드를 따라서 구현했고, 다크모드 토글 버튼만 커스텀하였다.

댓글✔️

각 게시글마다 댓글을 작성할 수 있다. 댓글 기능은 Utterances를 사용하였다. Utterances는 Github의 issues를 기반으로 구현된 오픈소스 코드이다. Github에 Repository를 생성하면, 페이지 경로 별로 issue가 생성되어 그 밑에 comment가 달린다.

검색

검색은 모달창에서 할 수 있고, 검색 결과는 홈 화면과 같은 형식으로 나온다.

회고

먼저 새롭게 얻은 것은 정적 사이트를 생성하는 프레임워크인 개츠비를 알게 되었다는 것이다. 개인 포트폴리오와 같은 웹사이트를 개발할 때 유용하게 사용할 수 있을 것이다.

개츠비를 이번에 새로 알게 된만큼 JAM Stack에 대한 개념에 무지한 상태로 프로젝트를 시작했던 게 아쉬운 부분이다. 그만큼 삽질을 많이 하느라 시간 대비 효율적으로 프로젝트를 진행하지 못한 부분이 있었다. 가벼운 마음으로 시작했던 사이드 프로젝트였지만 생각보다는 시간을 많이 쓰게 됐다.

프론트엔드만으로 구성된 팀 프로젝트를 해본 경험도 좋았다. 3명이 각각 다른 파트를 맡아 프로젝트를 진행했지만 회의 때마다 각자 어려운 부분을 서로 도울 수 있었다.

Git Flow 방법론에 대해서 조금 알게 되었다. 완벽하진 않지만, 각자 develop_이름 브랜치에서 작업하고, develop 브랜치에 회의 때마다 합쳐갔다. 브랜치를 무지성으로 20개씩 생성하던 저번 사이드 프로젝트보다 훨씬 발전이 있었다. 다음 프로젝트에서도 git에 대해 더 발전한 상태로 협업을 할 수 있길 기대해본다.

References

Wikipedia - Gatsby
Wikipedia - Jamstack
Gatsby - GraphQL Concepts
우아한형제들 기술블로그 - 우린 Git-flow를 사용하고 있어요