블로그 페이지 제작

블로그 게시글 목록

블로그 페이지는 Velog의 디자인을 참고하여 제작하기로 했습니다. 먼저 블로그 게시글 목록 페이지를 제작하였습니다.

게시글 목록 디자인

우선 게시글 목록 페이지의 디자인을 임시로 제작하였습니다. 아래는 해당 디자인의 이미지입니다:

이 디자인을 바탕으로 게시글 데이터를 어떻게 처리할지 계획하고, Post 모델의 목(mock) 데이터를 생성하기로 했습니다. 이 과정에서 ChatGPT를 활용하여 아래와 같은 형식으로 데이터를 구성했습니다:

// data/db.json
{
  "posts": [
    {
      "id": 1,
      "coverImage": "/images/image.png",
      "category": "Technology",
      "title": "Next.js와 TypeScript의 장점",
      "content": "Next.js와 TypeScript를 사용하여 프로젝트를 효율적으로 관리하는 방법에 대해 설명합니다.",
      "tags": ["Next.js", "TypeScript", "JavaScript"],
      "createdAt": "2024-09-01T12:00:00Z",
      "comments": 5,
      "likes": 20
    },
    {
      "id": 2,
      "category": "Lifestyle",
      "title": "건강한 라이프스타일을 유지하는 방법",
      "content": "건강한 식단과 운동 루틴으로 건강한 라이프스타일을 유지하는 방법을 소개합니다.",
      "tags": ["Health", "Lifestyle"],
      "createdAt": "2024-09-02T14:30:00Z",
      "comments": 2,
      "likes": 15
    }
  ]
}

---

데이터 구조와 효율성

Post 모델의 데이터 구조는 블로그 게시글의 다양한 정보를 담을 수 있도록 설계되었습니다. 각 필드 (id, coverImage, category, title, content, tags, createdAt, comments, likes)는 블로그 페이지의 기능과 사용자 경험을 향상시키기 위해 필요한 요소들을 포함하고 있습니다.

데이터 가져오기 및 무한 스크롤 구현

임시로 목 데이터를 불러올 수 있는 데이터 fetch 함수를 만들었습니다. 이 데이터는 페이지 번호를 기반으로 5개씩 잘라서 가져오며, 무한 스크롤 기능을 구현하기 위해 React Query의 useInfiniteQuery를 사용했습니다. 이전 포스트에서도 언급했듯이 React Query를 선택한 이유는 서버 상태 관리와 캐싱, 데이터의 일관성을 유지하기에 적합하기 때문입니다.

아래는 fetchBlogs 함수와 useInfiniteQuery 훅을 사용한 코드입니다:

const fetchBlogs = async ({ pageParam = 1 }) => {
  const response = await fetch(`/data/db.json`);
  const jsonData = await response.json();

  const start = (pageParam - 1) * 5;  // 페이지 번호에 따른 시작 인덱스
  const end = start + 5;               // 5개씩 데이터를 잘라서 가져옴
  const data = jsonData.posts.slice(start, end);

  return { data, nextPage: pageParam + 1, isLast: data.length < 5 }; // 데이터가 남아있으면 다음 페이지 번호 반환
};

const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
  queryKey: ["posts"],
  queryFn: fetchBlogs,
  getNextPageParam: (lastPage) => (!lastPage.isLast ? lastPage.nextPage : undefined),
  initialPageParam: 1,
});

이 코드는 pageParam 값을 사용하여 현재 페이지 번호에 따른 start와 end 인덱스를 계산하고, 각 페이지에서 5개의 데이터를 잘라 반환하도록 설계되었습니다. 또한, 데이터가 남아 있는 경우에만 nextPage 값을 반환하여 무한 스크롤로 데이터를 이어서 불러올 수 있게 합니다.

무한 스크롤 기능 덕분에 사용자는 버튼 클릭 없이 자연스럽게 더 많은 게시글을 이어서 읽을 수 있으며, 스크롤하면서도 새로운 내용을 로드하는 방식으로 콘텐츠 탐색에 몰입할 수 있습니다.

---

검색 기능 추가

목 데이터를 기반으로 블로그 게시글 목록의 틀을 잡았으며, 이전에 구현했던 debounce 기능을 활용해 게시글 제목을 검색할 수 있는 검색 기능도 추가하였습니다. 검색 기능은 사용자가 검색어를 입력할 때마다 서버 요청을 줄이기 위해 일정 시간 지연 후에 검색하도록 구현했습니다.

debounce를 활용한 검색 기능을 추가하여 사용자가 키워드를 빠르게 타이핑할 때마다 서버에 불필요한 요청이 발생하지 않도록 합니다. 이를 통해 서버 부하를 줄이는 동시에 응답 속도를 최적화해, 검색 경험을 쾌적하게 만듭니다. 특히, 사용자가 찾고자 하는 콘텐츠를 빠르게 접근할 수 있어 탐색이 쉬워집니다.

---

초성 검색 기능 추가 계획

현재 구현된 검색 기능은 게시글 제목을 키워드로 검색할 수 있도록 구성되어 있지만, 이후에는 초성으로도 검색이 가능하도록 기능을 확장할 계획입니다. 초성 검색은 특히 한글로 작성된 제목에서 유용하게 사용할 수 있는 기능으로, 사용자가 검색어를 보다 편리하게 입력할 수 있도록 도와줍니다.

• 초성 분리 및 매칭 알고리즘
  초성 검색 기능을 위해 es-hangul 라이브러리를 활용할 계획입니다. es-hangul은 자음과 모음을 분리하고 초성 검색을 지원하는 기능이 내장되어 있어, 한국어로 작성된 제목에서 초성만을 사용하여 매칭할 수 있게 해줍니다.

추후 이 기능이 추가되면, 사용자는 한글 초성으로도 쉽게 게시글을 찾을 수 있어 검색 편의성이 크게 향상될 것입니다.