0biglife.

블로그 개선사항과 커리어에 관한 간단한 기록 목적의 Dev Log입니다.

2025-03-28

Dev Logs 활용 목적

각 Dev Log의 제목은 구현 중인 기능을 기입하며, 목적은 다음과 같음

  • 특정 기능에 대한 설명 및 마인드맵핑 등 러프하고 사소한 내용 모두 포함

  • 부딪힌 문제와 해결과정에 대한 히스토리를 메모식으로 가볍게 남길 것

  • 게시글로 뭉쳐서 내기 전의 초안 느낌 정도

Dev Logs 업로드 예정 내역

블로그 관련

  • 내가 블로그에 활용한 SSG 방식과 문제 해결 과정

  • Scroll에 따라 Index(H2/H3) bold 처리

  • Github 감정표현 및 댓글 기능(커뮤니티처럼)

  • 조회수 연결 (Google Analytics 4 사용 예정)

  • Issue: 서빙 파일에서 webp 외 리소스 제거(추후 용량 문제)

그 외

  • CI/CD 딥다이브

  • React-Query 딥다이브

  • 효율적인 캐싱 관리

  • Nginx 리버스 프록시 정리

아이디어

  1. OpenAPI로 백엔드 프로젝트 환경 설정 및 기본 REST API 구성까지 모두 마련해주는 자동화 프로젝트

  • 예를 들어, yaml에 원하는 API endPoint 등 설정을 입력하면 API 구성 및 테스트를 모두 완성시켜주는 OpenAPI yaml

  • 이게 성공하면, 이 Open API를 prompt로 자동 생성해주는 애플리케이션

  • 또는, 선택지를 줘서 (1. User API, 2. ... ) 방식으로 생성해주는 애플리케이션

  1. Devtools에서 브라우저 모니터링을 위해 퍼포먼스 탭, Lighthouse 쓰는거를 내가 만든 서비스로 원클릭으로 전부 종합해서 제공해줄 수 있다면, 손쉽게 개선점을 모니터링할 수 있지 않을지. 즉 브라우저 모니터링 자동화 -> 예를 들어 CI로 퍼포먼스 모니터링을 자동화해서 몇 점 이하로 떨어진다면 사용자 알람을 보내는거지

  • lighthouse는 lighthouse https://example.com --output json --output-path=./report.json로 받을 수 있음

  • Puppeteer나 Playwright로 브라우저를 자동 제어하면서 네트워크, 퍼포먼스 트레이스, 콘솔 로그 등 다 뽑아낼 수 있음

  • 이미 유명한거지만 Google이 만든 web-vitals 라이브러리를 웹사이트에 삽입하면 사용자 단의 LCP, FID, CLS 같은 지표를 수집 가능

  • 위 지표들은 rechart 같은 라이브러리로 시각화, 백엔드는 로그 수집해서 DB 저장

  • 따라서, 기능은 빌드 후 Lighthouse 자동 측정(점수변화 추적),