시리즈 페이지 구현

• 시리즈 리스트 페이지
• 해당 시리즈에 대한 포스트 나열
• 다른 페이지에서도 시리즈에 대한 컨텐츠가 있으면 클릭시 해당 시리즈에 대한 페이지로 이동

전체적인 디자인 개선 및
디자인 관련 코드 리팩토링

• 전체적인 UI/UX 개선
• 아이콘 만들기
• 모바일 대응

각 포스트의 맨 밑에 깃헙 댓글다는 칸을 마련해 보자

태그를 검색하면 그 태그에 관련된 포스트 리스트를 출력하는 페이지 구현

제목이 곧 내용입니다.

디자인적 오류 해결

• 모바일 모드에서 사이드바를 닫을 수 없음 -> 사이드바에 x마크 추가
• 사이드에서 검색 시 엔터해도 작동되게 수정

빌드를 위한 디버깅

문서작성

각 포스트마다 방문자수를 보여주는 기능 추가
Firebase의 Realtime Database를 활용할 예정

글자 크기가 작고 화면 너비가 너무 넓어 글자 보기가 불편한 감이 있다
글자를 줄이던가 폰트 크기를 크게 키워던가 아니면 둘다 수정해야 할 필요가 있다

개요

소셜 아이콘을 세팅할 수 있는 기능 제공

상세

• 아이콘 위치
  • Footer 정중앙
  • 소개 페이지 상단
• 소셜 리스트
  • 깃허브
  • 인스타그램
  • 페이스북
  • 트위터(엑스)
  • 링크드인
  • 유튜브
  • 사운드클라우드
  • 벨로그
  • 티스토리
  • 네이버블로그
  • 사용자 커스텀 블로그
  • 사용자 커스텀 이력서
  • 사용자 이메일

Production Server에서 Post 및 Post List 페이지 접속 시, 갑자기 알수없는 태그 페이지 접속을 하는 문제

• 기존의 라이트 모드의 메인 색상은 진한 파랑색이었으나, 다음 버전 (0.4.0) 부터는 붉은색과 자주색 사이의 색상으로 변경
  • [2024-06-04] 메인 색상을 빨강이 아닌 검정으로 변경해야 하며 부색상이 빨강색이어야 한다.
• 그리고 메인 색상에 변경에 의해 사이드 이펙트 발생시, 추가적으로 색상 변경

• 각 시리즈 리스트 아이템 디자인 개선
• 시리즈 마다 이미지를 추가해서 리스트에서 출력
• width가 변경될 때마다 한줄에 출력되는 아이템 갯수 조절

수학수식 작성가능하게 하기

배포 프로세스 구축

포스트 상세페이지 들어가고 스크롤을 내릴 때
읽음 진행도를 네비바 바로 밑에 게이지 형태로 구현

SkyWINZ Devlog

https://devlog.skywinz.kr/posts/20230924_markdown-test

• 소개

전부다 리팩토링

포스트 검색 기능 추가

• 연관검색어

• 시리즈 리스트 페이지
• 해당 시리즈에 대한 포스트 나열
• 다른 페이지에서도 시리즈에 대한 컨텐츠가 있으면 클릭시 해당 시리즈에 대한 페이지로 이동

포스트 리스트 페이지 작성

• 최신순으로 나열해야 한다
• 커서 기반의 페이지네이션으로 작성

• 지금 까지 해당 프로젝트를 블로그 배포용으로 사용
• 이젠 해당 프로젝트를 배포용이 아닌 블로그 템플릿을 상품화를 하고
• 배포용 블로그 리포지토를 해당 리포지토리로부터 Fork받아서 사용하는 방식으로 진행 예정

다크모드 구현

북마크달은 포스트 관련 기능

• 각 포스트에 별표 버튼이 있어야 하며 눌러서 북마크 등록을 하거나 해제가 가능하다.
• 북마크 리스트를 메인 페이지나 따로 새 페이지를 파서 구현

• NextJS 디렉토리 구조 세우기
• 블로그 포스트 상세 페이지 만들기

성능 및 유지보수를 위해 포스트 및 시리즈 데이터를 순수 메모리가 아닌 SQLite로 전환
상당히 중요한 작업이므로 0.3 개발 시작시 해당 이슈부터 진행할 것

• 앱 부팅 시 모든 포스트 파일들을 긁어와 관련정보들을 데이터베이스에 저장하는 로직
• Service와 Repository단에 데이터베이스 적용
• API 테스트 코드 작성

포스트 페이지에 들어가면 일정 확률로 아래와 같은 문구가 발생

864-a9da046b8fa4c62e.js:1 ReferenceError: MathJax is not defined
    at page-a7c31fc36de9f494.js:1:4122
    at ap (fd9d1056-3f2845cc8ee98151.js:9:68405)
    at aM (fd9d1056-3f2845cc8ee98151.js:9:79901)
    at aO (fd9d1056-3f2845cc8ee98151.js:9:80539)
    at aR (fd9d1056-3f2845cc8ee98151.js:9:80423)
    at aO (fd9d1056-3f2845cc8ee98151.js:9:81484)
    at aR (fd9d1056-3f2845cc8ee98151.js:9:80423)
    at aO (fd9d1056-3f2845cc8ee98151.js:9:81484)
    at aR (fd9d1056-3f2845cc8ee98151.js:9:80423)
    at aO (fd9d1056-3f2845cc8ee98151.js:9:80519)
window.console.error @ 864-a9da046b8fa4c62e.js:1

한번더 새로고침하면 들어가짐

1차 검색 엔진 최적화

• 포스트 제목에 따라 브라우저 제목 변경
• 링크 공유시, 해당 페이지(또는 블로그)와 관련된 내용이 나오게 HTML의 meta데이터 수정

코드정리하기

• 포스트 뿐만 아니라 url을 잘못 입력하면 404페이지가 뜨게 조정
• 404이미지 업로드 개선

개요

공유하기 쉽게 공유 버튼을 추가한다

세부

공유 버튼 종류

• 카카오톡
• 페이스북
• 링크드인

다크모드 상태로 연관검색어 검색시 window.location.href로 인해 하얗게 번쩍이는 문제 해결

• 포스트에 image라는 메인 이미지를 넣을 수 있는 key를 만들었음에도 불구하고 활용하지 않고 있음
• image에 값(url)이 있으면 이미지 태그를 이용해 보여주고, 잘못된 url이나 빈 문자열이면 오류없이 깔끔하게 이미지 부착을 하지 않거나 기본 이미지로 세팅

테마 스타일이 영구적으로 저장되지 않음

스크롤바 디자인 변경

Document 업데이트

페이지 읽기 진행 프로그레스바가 이상하게 작동되고 외관에도 안좋은 상태

• 삭제 하던가 아니면 버그를 고치든가 둘중에 하나를 고르자

• 렌더링 시간 동안 로딩 화면 출력
• 데이터 출력 (ex: 포스트 리스트) 생성하는 동안 로딩 화면 출력

페이지 맨 밑 하단에, 이전 혹은 이후 시리즈에 대한 페이지로 이동하는 컴포넌트 만들기

사탕느낌으로 디자인 리뉴얼 시도

• 배포 자동화 스크립트 작성

• 404뿐만 아니라 이왕이면 모든 에러 코드에 대해 이미지 출력하기
• Dark버전과 Light버전 둘다 다르게 세팅

코드 하이라이트 설정해서 알록달록하게 보이게 하기

SkyWINZ Devlog

http://localhost:3000/posts/20231003_hello-world

백엔드(api) 및 프론트엔드 (component)에 대한 테스트 코드 작성

• 프론트엔드 테스트코드의 경우 리서치 필요
• Code Coverage
• Codecov 사용

시리즈 페이지에 있는 시리즈 아이템들을 좀더 책느낌으로 나게 디자인 수정