[이승현] Sprint9

[leesh7048]

요구사항

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

기본

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

심화

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

스크린샷

멘토에게

• 아직 검색기능과 드롭다운버튼 구현이 안됬습니다.
• 심화 부분도 아직 구현이 되지않았습니다.
• 주말에 완성시켜보겠습니다.!
• merge 좀만 천천히 해주시면 감사하겠습니다 ㅎㅎ

[201steve]

• 함수 하나당 한가지 동작만 하도록 고민해보시면, 나중에 재사용하기 편할꺼에요!
• 이미 만들어져있는 함수는 반복해서 만들지 않아도 됩니다 :-) 다만, 처음부터 추출하지 않아도 되고 똑같은 함수를 두번만들어서 쓰는 시점에 미리 만들어둔 함수를 재사용해도 됩니다.
• HTTP request는 항상 resolve만 있는건 아니어서, reject 되었을떄는 어떻게 처리할 수 있을지 고민해보시는것도 도움이 될꺼에요!
• 수고많으셨습니다! :-)

[201steve]

Suggested change

	const handleSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
	const query = { ...router.query };
	if (e.key === "Enter") {
	if (searchKeyword.trim()) {
	query.keyword = searchKeyword;
	} else {
	delete query.keyword;
	}
	router.replace({
	pathname: router.pathname,
	query: query,
	});
	}
	};
	const updateRouterQuery = (query)=>{
	router.replace({
	pathname: router.pathname,
	query: query,
	});
	}
	const handleSearchKeyword = (e: React.KeyboardEvent<HTMLInputElement>) => {
	const query = { ...router.query };
	if (e.key === "Enter") {
	if (searchKeyword.trim()) {
	query.keyword = searchKeyword;
	} else {
	delete query.keyword;
	}
	}
	updateRouterQuery(query)
	};

• 함수 하나에 2가지 일을 하고 있어서 2개로 분리하는건 어떨까요?
• 분리하면 검색어를 업데이트 하는 함수, 그리고 라우터 쿼리를 업데이트 하는 함수 이렇게 2개로 나눌 수 있을것같아요.

[201steve]

AllArticles에도 같은 함수가 있는것같아요.
만들어져 있는 함수를 재사용해보는건 어떨까요? :-)

[201steve]

9999 같은 숫자는 의미가 불분명해서

const MAX_COUNT = 9999

처럼 변수에 담아주면 의미 파악하기가 더 쉽습니다 :-)

[201steve]

fetch가 무조건 성공한다는 가정으로 만들어진 코드같아요

실패의 경우엔 어떻게 핸들링 할지 try,catch 구문으로 에러 핸들링 코드도 적용해보시면 좋을것같아요!