aroundus.github.io

목차

1. 소개
2. 사용 기술
3. 설치 및 실행
4. 빌드 및 확인
5. 기능
6. 프로젝트 구조
7. 배포
8. 팀원

소개

이 블로그는 React를 지원하고 GraphQL을 공부할 수 있는 Gatsby 프레임워크로 만들었습니다. 프론트엔드 개발자의 경험과 지식을 공유하는 게시물을 작성하고 있습니다.

사용 기술

프론트엔드

• 프로그래밍 언어: TypeScript
• 프레임워크: Gatsby(개츠비)
• 라이브러리: MUI

백엔드

• 데이터베이스: GraphQL (in Gatsby)

데브옵스

• CI/CD: GitHub Actions
• 호스팅: GitHub Pages

설치 및 실행

nvm use
yarn install
yarn start

GraphQL은 특별한 설치 없이 Gatsby에서 사용할 수 있습니다. yarn start 명령어를 실행하면 스키마를 자동으로 추론하여 생성합니다. 자세한 정보는 GraphQL API 내용을 참조해 주세요.

GraphQL Explorer (예시)

빌드 및 확인

yarn build
yarn serve

테스트

yarn run test
yarn run test:watch

기능

게시물 검색

Lunr(루나)는 자바스크립트 기반의 클라이언트 측 검색 엔진입니다. 웹사이트나 웹 애플리케이션에 빠르고 효율적인 검색 기능을 추가하는 데 사용할 수 있습니다. Gatsby 플러그인을 지원합니다. (gatsby-plugin-lunr)

게시물 댓글

Gitalk(깃톡)은 GitHub 이슈 기반의 댓글 서비스입니다. 블로그의 모든 게시물을 저장소의 이슈로 생성하고 이슈의 댓글을 블로그 게시물 댓글과 연동해 줍니다. Gatsby 플러그인을 지원합니다. (gatsby-plugin-gitalk)

프로젝트 구조

FSD(Feature-Sliced Design) 아키텍처 방법론을 기반으로 구성하였습니다. 다만, pages 폴더의 경우 Next.js 15 라우팅 방식을 채택하였습니다.

.
├── articles
├── scripts
│   └── lunr.js
└── src
    ├── app
    │   └── lib
    │       ├── ArticlePageTemplate.tsx // 게시물 페이지 템플릿
    │       └── GatsbyNode.ts // 게시물 페이지를 생성하는 스크립트
    ├── features
    ├── pages
    │   └── (home)
    │       └── HomePage.tsx // 메인 페이지
    ├── shared
    └── widgets

• articles: 블로그의 게시물을 담는 폴더
• src/pages: 블로그의 페이지를 관리하는 폴더

articles

블로그의 게시물을 관리합니다.

gatsby-config.js

{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'articles',
    path: `${__dirname}/articles`,
  },
},

gatsby-node.ts

createNodeField({
  name: 'slug',
  node,
  value: `/articles${value}`,
});

scripts/lunr.js

Lunr의 한글 적용이 불가한 문제를 해결하기 위하여 @eastuni/lunr-languages-ko/lunr.ko.js 파일을 주입하는 스크립트를 작성하였습니다.

src/pages

gatsby-plugin-page-creator 플러그인이 src/pages 폴더의 모든 파일을 자동으로 페이지로 변환합니다. ArticleTemplate 컴포넌트는 게시물 페이지를 생성하는 템플릿 컴포넌트로 src/pages 폴더에 넣지 않습니다.

메인 페이지

게시물 페이지

배포

작업 내용을 main 브랜치에 병합하면 Deploy Gatsby site to Pages 워크플로를 트리거하여 CI/CD를 진행합니다.

• CI: 자동화 프로세스의 지속적인 통합(Continuous Integration)
• CD: 지속적인 서비스 제공(Continuous Delivery) 또는 지속적인 배포(Continuous Deployment)

feature 브랜치에서 배포할 경우

main 브랜치가 아닌 feature 브랜치 작업 내용을 로컬 환경에서 빠르게 배포하고 싶다면 다음 명령어를 실행합니다. 단, .env 파일에 프로덕션 환경 변수에 대한 정보가 있어야 합니다.

yarn build // CI
yarn deploy // CD

팀원

	이름	역할
	백은주	프론트엔드 개발
	진국이	프론트엔드 개발
	지니	백엔드 개발
	조이	백엔드 개발
	스토	데브옵스 개발