WOODAELOG🚀

1. WOODAELOG URL

⭐️woodaelog

⭐️woodaelog 개발기

2. 기술 스택

3. 목표설정 및 개발기간

• 목표
  • 메인 페이지 UI 구성 : 개인 블로그의 경우 대부분 정적 웹 페이지 방식으로 운영되기 때문에 추가, 삭제, 수정 등의 작업보다는 View를 잘 만드는것이 핵심이라고 생각한다. 누군가 나의 블로그에 방문한다면 메인 페이지에서는 쉽게 글들을 구별할 수 있고 원하는 글을 찾을 수 있어야 한다고 생각한다. 그리고 이 점을 초점에 맞춰 알맞은 UI를 구성하는 것을 목표로 했다.
  • 포스트 UI 구성 : 마크다운 문서로 작성된 글들이 가독성이 좋은 크기와 글씨체로 보여지는 것을 목표로 했다.
  • 카테고리 분류 : 작성된 글의 목적 및 주제에 따라 분류하여 볼 수 있는 카테고리를 구현하는 것을 목표로 했다.
  • 태그 생성 : 특정 태그로 관련된 글들을 볼 수 있게 구현하는 것을 목표로 했다.
  • 나만의 로고 & favicon 만들기 : 나의 개인 블로그임을 가장 잘 표현할 수 있는 로고와 favicon 설정을 목표로 했다.
• 기간
  • 2022/12/27 ~ 2023/01/02
  • 나에게 주어진 시간이 그렇게 많지 않았다. 데브코스에 참여하면서 강의와 과제를 소화하고 데브코스와 별개로 리액트 공부를 하는데도 하루가 빠듯하게 흘러갔기 때문에 많은 시간을 할애하는 것이 불가능했다. 그러던 중에 데브코스의 강의와 과제가 별도로 없는 복습기간이 1주일 주어진다는 사실을 알았다. 이 시간에 어떻게 해서든 기본적인 블로그의 뼈대를 완성하고 지속적인 커스텀을 해나가야 겠다고 생각했다.

4. 커스텀 내역(2022.12.31 ~ 지속적 업데이트 중)

🐶메인페이지

• favicon 변경
• Logo 변경
• 블로그 카테고리 추가
  • 태그에 의한 분류
• Github Link 연결 및 아이콘 변경
• tistory Link 연결 및 아이콘 변경

🐱메인 페이지 포스트 리스트

• 태그 추가 및 노출
• 태그 Image 추가
• 추가된 첫 태그의 내용에 따라 이미지 자동 설정
  • 설정된 첫 태그가 Lang인 경우, 책 이미지 자동 노출
  • 설정된 첫 태그가 Project인 경우, 해 이미지 자동 노출
• 포스트 개시일 추가
• 포스트 Image 제거
• 포스트 avatar 제거
• 포스트 subTitle 제거
• 로고 이미지 리사이징 (적정 크기로 이미지 변경)
• 태그 이미지 최적화 (avif, webp로의 최적화를 통해 받아오는 메인페이지 기준 리소스 크기를 1.3MB -> 412kB)
• lightHouse 성능 점수 개선 (96점 -> 100점)

🐥포스트 페이지

• 태그 노출
• 각 HTML 태그 font-size 변경
• 포스트 개시일 노출
• CODE BLOCK 스타일 변경
• Post Image 그림자 설정
• Github utterances 댓글창 연결

블로그 개발과 관련하여 자세한 내용을 woodaelog개발기에 작성해 두었습니다.🚀

woodaelog 방문은 언제나 환영입니다.😁