velog 분석

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

구조 분석

Open Source

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

• velog-client
• velog-server

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 기능 없음
• 커스텀 도메인 연결 기능 없음
• 데이터 내보내기 기능 없음
• 스킨 수정 불가능
• 개인이 운영

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