uniQ 개발 노트
Dev note는 정식 회고록이 아닌 draft 입니다.
📆 25-05-20
기획
내용 보기
📌 Opened Issues
📌 프로젝트 기획
티스토리 -> 네이버 -> velog 로 유목민 생활을 해본 결과, 각자 하나씩은 아쉬움이 있어 그냥 자체 블로그 프레임워크를 만들기로 했다.
FE 지식이 많진 않은데 당장 목표하는 기본 기능만 구상해서 맨땅에 헤딩하려 한다.
우선 다음의 원칙은 지켜야 한다.
기능 측면
- 글 작성이 빠르고 쉬우면서 결과물이 이쁘게 나올 것
- 보호, 비공개 글 기능이 있을 것
관리 측면
- 기본 언어는 영어 (나중에 i18n으로 한국어 넣음)
- 주석 포함 모든 문서화는 영어로 작성되어야 함
따라서 JAMstack 기반의 정적 페이지는 사실상 불가능하고, 애초에 정적 페이지로 블로그 운영할거였으면 기존에 널린거 주워다 썼을 것이다.
보호/비공개 기능 때문에 글 원본은 접근이 제한되는 영역에 있어야 하고, 이는 self-host 또는 private repo 형식으로 관리되는 방식이 될 것 같다.
📌 기술 스택
- [FE] React.js
- [BE] Node.js / Express
- [DB] MongoDB
검색은 algolia로 고민중이다. ES까진 오버엔지니어링이라고 생각.
나중에 알았는데 이걸 MERN 스택이라고 하더라
📆 25-05-21
MDX renderer 구현
내용 보기
📌 프로젝트 세팅
Node.js를 오랫동안 업데이트하지 않았었는데 디펜던시 warning이 뜨길래 최신 LTS로 바꿔줬다. 16 -> 22로 올렸으니 진짜 징하게 안바꾸긴 함.
프로젝트는 CRA로 init 했다.
📌 padding이 width, height를 건드리는 문제
EditorSideBar에 padding 넣는데 넣은 만큼 width, height가 늘어나는 문제가 있었다.
스택오버플로를 참고해서 고쳤다.
📌 MDX 로드하기
쌩 CRA로는 MDX 로딩이 안되고, CRA의 Webpack 설정을 건드려야 한다고 한다.
하지만 Webpack 설정이 기본적으로 숨겨져있기 때문에 Eject 하거나 craco를 써야 했고, 나는 craco 방식을 선택했다.
Webpack이 하는 일
모든 FE 리소스(JS, CSS, 이미지, 폰트 등)를 하나의 JS 번들로 변환하는 빌드 도구이다.
MDX같이 브라우저가 이해할 수 없는 파일을 JS 코드로 변환해준다.