Notion rest API를 활용한 반응형 블로그 WEB
개발과 관련된 개인 기록, 구현하고 싶은 기능들을 담아보고자 제작한 프로젝트입니다.
Screenshots
Tech Stack
Next.js, React.js, typeScript, tailwind, zustand, aws ec2, aws s3
홈페이지 링크
https://minsunblog.com/
Github 링크
https://github.com/pminsun/MinsunBlog
아키텍처
프로젝트에서 배운 점
문제
블로그는 사용자가 불특정 환경에서 보게 되는 유형으로 모든 디바이스에서 반응형으로 제작될 필요가 있다.초기 리스트 페이지 진입 시 데이터를 가져오는 비동기 처리 과정에서 텍스트에 비해 이미지 로딩이 오래 걸려 이미지 영역의 빈 화면 보다는 해당 영역에 대해 스켈레톤 처리가 필요하다.포스팅 된 글에 대한 상세 페이지에서 보여줄 속성, 내용에 대한 api들에 대한 비동기 함수 병렬 실행 필요하다.Blog, Project 페이지의 포스트 리스트에 대한 viewStyle, sort 선택한 값을 효율적으로 관리하기 어려우며 각 페이지마다 상태 변경이 중복되어 유지보수 및 확장이 어렵다.해결
반응형을 적용하기 위해 css의 flex, grid를 활용해 pc, 테블릿, 모바일에 대응되도록 변경하였다.Next.js의 <Image /> 의 props 중 blurDataURL의 기능을 사용해 base64로 인코딩된 회색 이미지를 적용했다.Promise.all() 사용한 병렬 처리로 순차적으로 요청을 보낸 경우보다 두 배 이상 빠르게 요청을 완료했다.상태 관리를 단순화하고, 코드 중복을 줄이기위해 Zustand 라이브러리를 도입했다. persist 미들웨어를 사용해 상태를 로컬 스토리지에 저장하여 설정이 유지되도록 변경했다. 
