[김진희] sprint 9

[lemon1335]

요구사항

기본

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

심화

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

주요 변경사항

스크린샷

멘토에게

• 커밋을 많이 못해서 파일이 많이 올라갔습니다ㅠㅠ 죄송합니다ㅠㅠ
• 반응형 구현 예정입니다.
• 타입스크립트로 변환해서 올리겠습니다!
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[kiJu2]

수고 하셨습니다 ! 스프리트 미션 하시느라 정말 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

[kiJu2]

커밋을 많이 못해서 파일이 많이 올라갔습니다ㅠㅠ 죄송합니다ㅠㅠ

괜찮습니다 ㅎㅎㅎ 작성주신 코드 기준으로 꼼꼼히 리뷰하도록 하겠습니다 !!

반응형 구현 예정입니다.

넵넵 ! ㅎㅎ

타입스크립트로 변환해서 올리겠습니다!

👍👍

[kiJu2]

하나의 섹션이므로 h시리즈가 어떨까 싶습니다 !

Suggested change

	<div className={styles.cardHeadTitle}>Best</div>
	<h2 className={styles.cardHeadTitle}>Best</h2>

[kiJu2]

굳굳 ! 적절한 ul과 li네요.

의미론적으로 잘 작성하셨습니다 👍👍

[kiJu2]

굳굳 화이트리스트도 잘 작성하셨군요 ! 👍

[kiJu2]

getList는 useEffect 안에 넣으면 어떨까요?

Suggested change

	const getList = async ({ page = 1, pageSize = 10, orderBy = 'recent', keyword = '' }) => {
	const params = {
	page,
	pageSize,
	orderBy,
	keyword,
	};
	try {
	const { data } = await axios.get('/articles', { params });
	return data; // 데이터 반환
	} catch (error) {
	console.error('API 호출 실패:', error);
	return null; // 실패 시 null 반환
	}
	};
	const fetchBestData = async param => {
	const data = await getList(param); // 비동기 호출 후 대기
	if (data && Array.isArray(data.list)) {
	// null, array체크후 setstate
	// console.log(data.list);
	setBestList(data.list);
	} else {
	setBestList([]);
	}
	// console.log(data);
	};
	const fetchBestData = async param => {
	const getList = async ({ page = 1, pageSize = 10, orderBy = 'recent', keyword = '' }) => {
	const params = {
	page,
	pageSize,
	orderBy,
	keyword,
	};
	try {
	const { data } = await axios.get('/articles', { params });
	return data; // 데이터 반환
	} catch (error) {
	console.error('API 호출 실패:', error);
	return null; // 실패 시 null 반환
	}
	};
	const data = await getList(param); // 비동기 호출 후 대기
	if (data && Array.isArray(data.list)) {
	// null, array체크후 setstate
	// console.log(data.list);
	setBestList(data.list);
	} else {
	setBestList([]);
	}
	// console.log(data);
	};

이렇게 하면 상태의 최신값을 사용할 수 있다는 보장과 리렌더링에 의한 불필요한 재선언을 방지할 수 있습니다 👍

[kiJu2]

굳굳! try...catch도 적절히 사용되었군요 !

[kiJu2]

값이 존재하지 않을 경우도 잘 고려하셨군요 ㅎㅎㅎ

사용자 경험 고려하신게 느껴집니다 ! 👍👍

[kiJu2]

수고 정말 많으셨어요. 진희님 ㅎㅎㅎ
리뷰 중 궁금하신거 있으시면 사전 질의를 통해서 남겨주시거나 멘토링 미팅 때 질문주세요 ㅎㅎㅎ