kimwash/my-own-blog

my-own-blog

---

https://my-own-blog-xi.vercel.app/ 에서 진행 현황 지켜보기 Vercel은 내렸어요.

여기에서 (거의) 매일 올리는 일지를 확인해보세요.

Next.js를 이용한 마크다운 기반 블로그를 만들어 보고 있어요.

이딴거 왜함? 그냥 있던거 쓰지

음.. vuepress로 기존에 이용하던 블로그의 디자인을 바꿔보려다가 썸네일 등 한계에 부딪혔어요. 그래서 좀 갈아엎어보려고요.

아.. 그냥 상용 블로그를 쓰면 되지 않냐고요..? 재미 없잖아요! 실력 안 녹슬 겸 토이 느낌으로 계속 들고 가보려고요.

개발 계획

기존에 마크다운으로 작성된 글을 모두 안전하게 이전할 수 있도록 준비중이에요. 그리고 순수 Static Page로 관리 되던 기존의 블로그와 다르게 아마 글을 저장하는 서버가 있긴 해야할 것 같아요.

그리고 에디터도 만들어서 넣어볼 생각입니다.

개발 얘기가 아닌 사적인 얘기들도 담아보기 위해서 비밀글 기능 등도 생각중이고요.

전역할때쯤이면.. 완성되어 있지 않을까요..?

지금까지 적용해본 것들 (03.28)

• Next.js + Prisma + MySQL 조합
• CI 파이프라인 구축 과정
  1. 환경변수 주입
  2. Prisma Client 생성 및 DB에 반영
  3. ghcr.io에 배포
• 리액트에서 마크다운 렌더링 (toast 규격으로 변경)
  • 코드 하이라이터
• (04.21) Toast UI Editor 를 이용한 마크다운 에디터 구현
• (04.21) PreSigned URL을 이용한 이미지 업로드
• (04.21) 모노레포 적용
• (04.21) 쌈@뽕한 테이블 구현
• 오브젝트 스토리지와의 조합으로 미디어 스트리밍

my-own-blog's Issues

FEAT: 푸터 개발

• 사이트맵
• 간략한 자기소개

FEAT: About ME 페이지 개발

FEAT: 글 상세 페이지 개발

• 글 정보 부분 개발
• 글 내용 부분 개발
  • react markdown renderer
• 댓글 연결 (disqus)
• 좋아요 기능?

FEAT: 사이드바 메뉴 애니메이션 개발

리서치

• Styled Component를 이용하는 경우
  • https://velog.io/@minsu2344/React-Sidebar-%EB%B6%80%EB%93%9C%EB%9F%BD%EA%B2%8C-%EB%B3%B4%EC%9D%B4%EA%B8%B0-%EB%B6%80%EB%93%9C%EB%9F%BD%EA%B2%8C-%EB%82%B4%EB%A0%A4%EC%98%A4%EA%B8%B0
• translateX와 React Transition Group을 이용
  • https://reactcommunity.org/react-transition-group/css-transition

FEAT: 글 작성 에디터 개발

• 이미지 업로드
• 마크다운 기반 에디팅
• 마크다운 분석/이미지 리스트 생성
• 업로드된 이미지/새로업로드해서 썸네일 선택

FEAT: 홈화면 개발

• pagination 개발
• dummy api 연동

FEAT: 공통 레이아웃 설계 및 개발

• 헤더 분리
• 푸터 분리
• 사이드바 처리 고민

FIX: 검색바 수정

• 검색버튼 동작 수정

  • Hydration 이전 form action이 있는 채로 SSR 된 페이지에서 검색 버튼을 누르면 바로 get 요청 날아가버림
  • 수정하다 보니 구조 자체를 바꿔야겠다는 생각이 들음. 따라서 폼을 하나로 두고, 검색 버튼은 클라이언트 이벤트로만 처리해야겠다.

• PC 모드에서 검색바 테두리 사라지는 문제 수정