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 #644

Merged

Conversation

hnitam
Copy link
Collaborator

@hnitam hnitam commented Jun 7, 2024

요구사항

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

기본

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

심화

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

주요 변경사항

  • api 연동만 했습니다.

스크린샷

image

멘토에게

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

@hnitam hnitam requested a review from jyh0521 June 7, 2024 13:41
@hnitam hnitam added the 미완성🫠 죄송합니다.. label Jun 7, 2024
Copy link
Collaborator

@jyh0521 jyh0521 left a comment

Choose a reason for hiding this comment

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

과제 하느라 고생하셨습니다. 클래스명 잘 변경 해주셨고, next/router도 잘 활용해주셨네요!

Copy link
Collaborator

Choose a reason for hiding this comment

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

.env 적용해주신 점 좋습니다. 다만, .env의 목적은 보안 목적으로 해당 변수들을 깃허브에 올리지 않기 위함이라서 .gitignore에 추가해주시고 올리시지 않아주시면 됩니다.

@@ -7,15 +7,14 @@ function formatDate(value) {
}

export default function ArticleList({ articles = [] }) {
console.log(articles.writer);
Copy link
Collaborator

Choose a reason for hiding this comment

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

console.log 잘 지워주셨네요!

text-Decoration: none;
padding: 24px 23px;
color: #4b5563;
color: #4B5563;
Copy link
Collaborator

Choose a reason for hiding this comment

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

color에 컬러 변수를 활용해보시는 것도 추천드립니다! 나중에 유지보수 할때, 색상이 변경되면, 컬러 변수의 값 하나만 변경하면 되기 때문입니다.

const res = await axios.get(`/articles`);
console.log(res);
const router = useRouter();
const { keyword } = router.query;
Copy link
Collaborator

Choose a reason for hiding this comment

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

구조 분해 할당으로 query만 잘 꺼내서 사용해주셨네요!

@jyh0521 jyh0521 merged commit e23d388 into codeit-bootcamp-frontend:Next.js-장혜민 Jun 8, 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