[김주은] sprint9

[marie1016]

요구사항

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• 기존의 React, Typescript로 구현한 프로젝트와 별도로 진행합니다.
• Next.js를 사용합니다.

기본

• 자유 게시판 페이지 주소는 “/boards” 입니다.
• 전체 게시글에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
• 게시글 목록 조회 api를 사용하여 베스트 게시글, 게시글을 구현합니다.
• 게시글 title에 검색어가 일부 포함되면 검색이 됩니다.

심화

• 반응형으로 보여지는 베스트 게시판 개수를 다르게 설정할 때 서버에 보내는 pageSize값을 적절하게 설정합니다.
• next의 prefetch 기능을 사용해봅니다.

주요 변경사항

• 스프린트 미션9를 진행했습니다.

스크린샷

멘토에게

• 게시글 title에서 검색어를 입력하고 엔터를 치면 검색이 되도록 구현했는데 엔터를 치지 않고 자동으로 검색되도록 하는 방법이 궁금합니다! 시도해봤는데 자음 하나만 쳐도 검색어로 인식이 되는지 검색이 제대로 되지 않았습니다ㅠ

• 드롭다운 메뉴가 내려올 때 밑에 있는 내용들도 같이 내려가는데 이동하지 않고 고정되게 하는 방법이 궁금합니다!
  

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[lisarnjs]

엔터를 치지 않고 검색할 때마다 알아서 검색되려면 onChange라는 함수를 이용해야 하고, 검색할때마다 함수가 실행되는 호출이 너무 많이 되는 부작용을 막기 위해서 디바운싱이라는 방법을 함께 사용해주면 더욱 좋습니다!

밑으로 내려가지 않게 드롭다운을 만드려면 position으로 해당 컴포넌트의 레이아웃을 띄워주면 될 것 같습니다!

주은님 이번 미션도 고생하셨습니다 :)

[lisarnjs]

next.js를 사용할 때에는 next/image를 사용해주는 것이 가장 좋아요!
next/image는 이미지를 알아서 최적화 시켜주고, lazy loading을 지원합니다

[lisarnjs]

axios를 통한 api 요청은 api파일에 따로 정리해둘 수 있어요!

export const fetchBestArticles = async (pageSize: number) => {
  try {
    const res = await axiosInstance.get('/articles', {
      params: {
        page: 1,
        pageSize,
        orderBy: 'like',
      },
    });
    return res.data.results || res.data.list || [];
  } catch (error) {
    console.error('Failed to fetch best articles:', error);
    throw error;
  }
};

// BestArticles.tsx
const res = fetchBestArticles()

[lisarnjs]

pagesize가 변경될때마다 getBestArticles함수를 요청하는 거라면 pagesize가 의존성배열에 들어가있는 useEffect에서 따로 호출해주는 것이 좋을 것같네요!

[lisarnjs]

이전 값을 반전시켜주는 경우 setIsOpen(prev => !prev) 처럼 이전 값을 콜백 함수로 가져와서 변경해줄 수 있어요. 이렇게 작성해주셔야 예상치 못한 오류를 피하실 수 있어요 :)