이러한 이유로 solmee.xyz를 갈아엎고 2.0.0을 만들기로 했다.
데이터베이스: Postgres
이유는 Postgres 한 번 써봤고, managed postgres를 쓰지 않는 이상, 즉 내 서버에서 실행한다고 가정했을 때 무료기 때문이다. 그냥 내 서버를 돌릴 VPS 돈만 5유로쯤 내면 되는 거다. 그럼 아무 제약도 없다. 내 데이터베이스고, 백업도 언제든지 가능하다.
postgres는 관계형 데이터베이스다. 이거를 API로 갖다쓰기 위해 JSON 객체로 만들어주는 ORM이 필요하다. 그걸 나 대신 해주는 CMS를 사용하면 되겠지. MongoDB는 데이터를 JSON으로 저장한다길래, 그러면 API랑 데이터베이스랑 데이터 구조가 똑같으니까 더 좋은거 아니야? 하고 mongoDB를 쓰려고도 했었다. 근데 스키마가 없어서 데이터베이스에 들어가는 JSON의 구조랑 타입 같은걸 체크 안한다는게 좀 불안정하다고 느껴졌고, 무료버전에 제한이 있어서 나중에 이걸로 템플릿까지 만들지 못할 것 같아 접었다.
근데 API로 오는 객체들 보면 막 중첩돼 있던데 테이블 형식인 관계형 데이터베이스로 어떻게 이렇게 했냐? 가 궁금했는데 Strapi가 여러가지 테이블을 연결해서 만들어줬던 거라고. CMS가 진짜 보이지 않게 많은 일을 하는구나. 관계형 데이터베이스도 JSONB라는 필드를 사용해서 JSON을 통째로 담을 수는 있다고 한다. 내가 쓸 텍스트 에디터에서 포맷팅을 할 때 사용할 것 같다. 마크다운에서는 신택스로 담기던 정보가 JSON으로 담긴다.
데이터베이스 서버: DigitalOcrean Droplet
VPS에 DigitalOcean, Vultr, Hetzner, Oracle 등 여러가지 옵션이 있었는데 아직 서버만드는 방법도, 도커 쓰는 법도 하나도 모르기때문에 이거 정하는 건 나중으로 미뤄뒀다. 근데 첫인상이 DigitalOcean이 UI가 상큼해서 끌린다. 가격 저렴하고, 한국 근처에 서버가 있고, 복수의 도커 컨테이너를 띄울 수 있어야 한다.
프론트엔드 배포: Netlify
Netlify가 Vercel보다 빠른 것 같다. 배포해야 할 프론트엔드 앱은 아마 2개다. CMS 어드민 UI와 진짜 웹사이트.
CMS: KeystoneJS
챗지피티와 함께 다음 조건을 충족하는 Headless CMS를 찾아보았다.
- 빌트인 프론트엔드가 없거나, 또는 있다면 커스텀 완전 자유롭게 가능해야 함. 특히 텍스트 에디터를 뜯어고칠 수 있어야 함. 노션처럼 ’/’ 같은거 치면 내가 만든 리액트 컴포넌트들이 쫙 떠서 클릭 삽입할 수 있게 해야 함.
- 역할 기반 권한 컨트롤(RBAC) 제공해야 함.
- API endpoint 제공해야 하고 GraphQL로 쿼리할 수 있어야 함.
- Postgres 데이터베이스 지원해야 하고, self host할 수 있어야 함.
- 무료, 가벼움
Keystone과 비슷한 걸로는 Directus와 Payload가 있었는데 Payload는 MongoDB만 된다는 것 같고 Directus는 텍스트 에디터 커스터마이징이 뭔가 덜 자유로워 보여서 Keystone으로 정함, 여기서 더 프론트엔드를 제거해서 Hasura 같은 것도 있었는데 생각해 보니 아예 프론트엔드가 없는 거는 어려울 것 같아서 안했다. Keystone의 텍스트 에디터 샘플을 보니까 괜찮고 원하는 기능이 다 있는 것 같다.
Directus vs KeystoneJS
Strapi vs KeystoneJS
쿼리 언어: GraphQL
사실 내 블로그가 복잡하거나 사용자에 따라 다른 화면을 보여줘야하는 것도 아니고 RestAPI로 충분하긴 한데 그냥 써보고 싶어서 써보기로 했다. 예를 들어 메타데이터를 이용해 글들을 필터링할 때 쓸 수 있고, 글들 안에 들어있는 특정 컴포넌트만 골라서 불러오는 식으로 쓸 수도 있을 것 같다. 후자는 특히 네트워크 그래프 만들때 용이할 것 같다.
아 그러고보니 이 블로그 네트워크 그래프 만들 때 상태관리 어려웠는데 새로만들때는 Zustand 쓰면 되겠다! 모달 띄우는것도 어려웠는데 Nextjs Parallel route쓰면 되고!
디자인과 스타일: Figma, Tailwind
맨 위에 링크된 글에서 말했듯이 Figma를 내 작업과정의 일부로 편입시켜 보고 싶고, Tailwind도 계속 쓰고 싶다. Figma로 한 디자인과 tailwind 코드를 뭔가 편하게 연결할 수 있는 방법이 있나 찾아볼 예정이다.
이미지 스토리지: Cloudinary
Cloudinary에서 불러온 이미지와 api에서 불러온 글들로 빌드 시점에 HTML페이지들을 찍어낼 것이다. Cloudinary의 캐싱, url을 이용한 최적화와 효과넣기도 사용해 보고 싶다.
프론트엔드 프레임워크: Nextjs
Nextjs의 다양한 렌더링 옵션들이 좋다. 이번엔 스켈레톤 UI도 구현해 보고 싶다.