Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[나윤주] Sprint9 #285

Conversation

naynara87
Copy link
Collaborator

@naynara87 naynara87 commented Aug 9, 2024

스프린트 9미션

요구사항

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

체크리스트 [기본]

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

심화

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

스크린샷

image image image image

멘토에게

  • 타입스크립트 작업까지 마무리 되었습니다. (아직 스프린트 8 타입스크립트 오류 개선 못함..-> 추후 넥스트로 옮기면서 다시 수정)
  • 커스텀 훅/ 컴포넌트 분리를 더 해보고 싶었으나 우선 기능 위주로 최소 단위로 정리했습니다.

@naynara87 naynara87 added the 미완성🫠 죄송합니다.. label Aug 9, 2024
@naynara87 naynara87 requested a review from lisarnjs August 9, 2024 21:35
@naynara87 naynara87 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. and removed 미완성🫠 죄송합니다.. labels Aug 10, 2024
Copy link
Collaborator

@lisarnjs lisarnjs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 윤주님!
이번 한 주도 화이팅합시다 :)

}

useEffect(() => {
const fetchArticles = async () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

try catch 문으로 감싸져있다면 조금 더 좋았을 것 같네요 👍

font-weight: 600;
color: var(--gray900);
margin-bottom: 24px;
@media (max-width: 767px) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

scss mixin 이라는 문법을 통해서 @media (max-width: 767px) {} 부분을 함수화시킬 수 있어요 :)

if (newPageSize !== pageSize) {
setPageSize(newPageSize);

const fetchBestArticles = async (size: number) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요 함수가 useEffect 외부에 위치하는 것이 가독성 측에서 더 좋을 것 같아요!

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!keyword) {
return router.push("/boards");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

push() vs replace() 둘 모두 알고 계시면 더 좋습니다 👍
router가 이동하면서 history를 남기느냐 남기지 않느냐 차이가 있습니다 :)

}, [router.query.q]);

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
setKeyword(e.target.value);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

키보드가 입력될때마다 state값이 변경되는데 debounce를 적용하면 마지막 액션만 판단하여 state를 변경할 수 있습니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

키보드가 입력될때마다 state값이 변경되는데 debounce를 적용하면 마지막 액션만 판단하여 state를 변경할 수 있습니다!

정확하게 어떻게 변경해야는지 모르겠습니다.

page = false,
children,
}: ContainerProps) {
const classNames = `${styles.container} ${
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

classnames라는 라이브러리를 사용하면 이렇게도 짜볼 수 있겠네요!

import classNames from "classnames";

const containerClass = classNames(
  styles.container,
  {
    [styles.page]: page,
  },
  className
);

return <div className={containerClass}>{children}</div>;

className={`${styles["dropdown-menu"]} ${menuOpen ? styles.open : ""}`}
>
{sortOptions.map((option) => (
<li key={option.value}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react가 key props를 쓰는 이유는 ?! ㅎㅎ

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react가 key props를 쓰는 이유는 ?!

각 요소를 식별하고 효율적으로 업데이트할 수 있도록 해줍니다.


return (
<Link href={href} legacyBehavior>
<a className={linkClass} {...props} aria-disabled={disabled}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

disabled가 true라면 onclick도 막아줘야할 것 같은데 고건 여기서 처리해야 하지 않을까요!?

const handleWindowResize = () => setWidth(window.innerWidth);
handleWindowResize();
window.addEventListener("resize", handleWindowResize);
return () => window.removeEventListener("resize", handleWindowResize);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 clean up 함수 사용 좋아요!


useEffect(() => {
const handleWindowResize = () => setWidth(window.innerWidth);
handleWindowResize();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아래에서 resize 이벤트 핸들러로 handleWindowResize()를 계속 감지하는대로 실행할 것이기 때문에 요 부분에는 함수 호출이 불필요할 수 있겠다 라는 생각이 드네요!

@lisarnjs lisarnjs merged commit b47a73e into codeit-bootcamp-frontend:Next-나윤주 Aug 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants