[최영선] sprint10

[choi-youngsun]

요구사항

기본

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

심화

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

주요 변경사항

• 게시글 목록 페이지 완성
• 검색 기능 구현
• 게시글 등록 페이지 완성

스크린샷

멘토에게

[arthurkimdev]

과제 제출하시느라 수고하셨습니다~ 👍

[arthurkimdev]

지난번 리뷰 사항 반영 굳! 👍

[arthurkimdev]

👍

[arthurkimdev]

이 부분은 아래 코드에서도 추가적으로 2번 재사용이 되더라구요~ 아래처럼 모듈로 빼면 더 좋겠어요!

async function fetchArticles(query: ArticleQuery): Promise<Article[]> {
  const queryString = new URLSearchParams({
    orderBy: query.orderBy,
    page: query.page.toString(),
    pageSize: query.pageSize.toString(),
    ...(query.keyword && { keyword: query.keyword }),
  }).toString();

  const res = await axios.get<ArticleResponse>(`/articles?${queryString}`);
  return res.data.list;
}

[arthurkimdev]

그렇다면 위에 있는 공통 모듈 가져와서 아래처럼 변경할 수 있을거예요~
에러처리는 모듈에서는 최소한만 진행하고, 각 사용하는 곳에서 구체적인 에러처리 하는 컨셉이예요.

Suggested change

	useEffect(() => {
	getProducts();
	}, []);
	useEffect(() => {
	async function getBestPosts() {
	try {
	const bestArticles = await fetchArticles({
	orderBy: "like",
	page: 1,
	pageSize: 3,
	});
	setArticles(bestArticles);
	} catch (error) {
	// 에러 처리
	}
	}
	getBestPosts();
	}, []);

[arthurkimdev]

공통 모듈 적용하면 아래처럼 getServerSideProps 에서도 동일하게 사용할 수 있어요~

try {
    const initialArticles = await fetchArticles({
      orderBy: orderBy as string,
      page: 1,
      pageSize: 30,
      keyword: keyword as string,
    });

    return {
      props: {
        initialArticles,
        initialOrderBy: orderBy,
        initialSearchQuery: keyword,
      },
    };
  } catch (error) {
    // 에러 처리
    return {
      notFound: true,
    };
  }

[arthurkimdev]

import type { GetServerSidePropsContext } from 'next';

...


export async function getServerSideProps(context: GetServerSidePropsContext) {

이렇게 타입을 지정해줄 수 있어요~