본문 바로가기

프로그래밍/오픈 소스

velog 분석

※ 2021년 11월 18일에 작성된 글입니다.

구조 분석

Open Source

velog는 오픈 소스로 공개되어 있다.

Tech Stacks

GitHub 저장소 README.md를 참고했다.

velog-client

  • React
  • React Router
  • TypeScript
  • Redux
  • Apollo GraphQL
  • Styled Components
  • Remark
  • Codemirror
  • Serverless Framework
  • AWS Lambda

velog-server

  • Node.js
  • TypeScript
  • Apollo GraphQL
  • PostgreSQL
  • TypeORM
  • Redis
  • ElasticSearch
  • Koa
  • Serverless
  • AWS
    • Lambda
    • SES
    • API Gateway
    • S3
    • Cloudfront

대략적인 구조?

  • Koa 프레임워크 백엔드
  • React 프론트엔드
  • S3에 이미지 저장
  • Cloudfront + Cloudflare 이중 CDN?
    • 글 작성 화면에서는 images.velog.io(Cloudfront)
    • 작성 완료된 글에서는 media.vlpt.us(Cloudflare)

Cloudflare가 S3에서 바로 연결된 건지, Cloudfront에 이중으로 적용된 건지는 모르겠다.

프로젝트 구조

velog-client

  • App.tsx에서 React Router를 이용해 라우트를 지정한다.
  • pages에서 지정된 라우트에 대한 페이지를 갖고 있다.
  • containers에서 각각의 페이지에 대한 세부 내용을 갖고 있다.
  • components 프로젝트 내에서 쓰이는 컴포넌트에 대해 정의한다.
  • types에서 프로젝트 내에서 공통적으로 쓰이는 type에 대해 정의한다.
  • modules에서 여러 기능을 하기 위한 모듈이 위치한다.
  • static에 정적 파일이 위치한다.

장단점 분석

장점

  • Markdown 문법 지원
  • 귀찮은 설정이 필요 없음
  • 자체적으로 인기글과 최신글을 메인에 띄워줌

단점

  • follow 기능 없음
  • 커스텀 도메인 연결 기능 없음
  • 데이터 내보내기 기능 없음
  • 스킨 수정 불가능
  • 개인이 운영

커스텀 도메인 연결, 데이터 내보내기가 가능하다면 개인이 운영한다고 해서 불안하지는 않을 것 같다.

'프로그래밍 > 오픈 소스' 카테고리의 다른 글

[GitHub] 기본 Label 의미  (0) 2024.09.04