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

[신승헌] sprint10 #632

Conversation

AdamSeungheonShin
Copy link
Collaborator

요구사항

체크리스트 [기본]

상품 등록 페이지

  • 상품 등록 페이지 주소는 “/addboard” 입니다.
  • 게시판 이미지는 최대 한개 업로드가 가능합니다.
  • 각 input의 placeholder 값을 정확히 입력해주세요.
  • 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
  • 회원가입, 로그인 api를 사용하여 받은accessToken을 사용하여 게시물 등록을 합니다.
  • ‘등록’ 버튼을 누르면 게시물 상세 페이지로 이동합니다.

상품 상세 페이지

  • 상품 상세 페이지 주소는 “/addboard/{id}” 입니다.
  • 댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
  • 활성화된 ‘등록' 버튼을 누르면 댓글이 등록됩니다

주요 변경사항

  • 유저기능을 아직 배우지 않아서 임의로 postman 이용해서 계정 생성 후 진행하였습니다
  • 시간이 좀 부족해서 댓글 작성 기능은 완성을 못했네요..

스크린샷

sprint10

멘토에게

  • 피드백 해주신 대로 commit을 더 잘 해보려고 노력했는데 아직은 많이 부족한 것 같습니다.
  • 작업이 조금만 복잡해지면 작업 단위를 구분해서 진행하는게 조금 어렵네요 ㅜㅜ
  • 더 열심히 해보겠습니다 ㅎㅎ🫡

@AdamSeungheonShin AdamSeungheonShin self-assigned this Jun 7, 2024
@AdamSeungheonShin AdamSeungheonShin requested a review from kich555 June 7, 2024 11:28
@AdamSeungheonShin AdamSeungheonShin added enhancement New feature or request 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. labels Jun 7, 2024
@AdamSeungheonShin AdamSeungheonShin added the 미완성🫠 죄송합니다.. label Jun 7, 2024
Copy link
Collaborator

@kich555 kich555 left a comment

Choose a reason for hiding this comment

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

👍👍👍👍
커밋 정말 잘 나누셨습니다!
좋아요!! 잘하셨습니다~!! 앞으로도 계속 이렇게만 해주시면 좋을것 같습니다 ㅎ
고생 많이하셨습니다!

async function getArticlesByPageNum() {
try {
const { data } = await axios.get(pathName);
setArticles(data.list);
Copy link
Collaborator

Choose a reason for hiding this comment

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

만약 모종의 이유로 api에서 에러가 발생한다면 data 는 'undefined'가 될거에요

data.list 대신 data?.list 로 바꾸는게 좋을것 같아요 !

Copy link
Collaborator

Choose a reason for hiding this comment

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

안그러면 런타임에서 해당 api가 에러를 throw할 경우 앱 자체가 뻗어버릴거에요..!

const { data: articles } = await instance.get(
`/articles?page=1&pageSize=10&orderBy=recent`
const { data } = await instance.get(
`/articles?page=${INITIAL_PAGE_NUM}&pageSize=${INITIAL_PAGE_SIZE}&orderBy=${INITIAL_ORDER}`
);
Copy link
Collaborator

Choose a reason for hiding this comment

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

axios를 사용하신다면

  const { data } = await instance.get('/articles', { params: {
   page: INITIAL_PAGE_NUM,
   pageSize: INITIAL_PAGE_SIZE, 
   orderBy: INITIAL_ORDER
  }
  });

와 같이 searchParam들을 객체로 관리할 수 있습니다 ㅎ

);
const articles: Article[] = data.list;
Copy link
Collaborator

Choose a reason for hiding this comment

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

요기도 굳이 재할당 할 필요없이

return {
    props: {
      articles: data?.list,
    },
  };

와 같이...!
추가로 aixos의 반환값중 하나인 data는 언제나 성공 시에는 API 응답 데이터가, 실패 시에는 undefined가 올수 있다는점 꼭 명심해두세요!

<h2 className="text-xl font-bold">게시글 작성</h2>
<button className="w-20 h-10 flex justify-center items-center bg-gray-default rounded-button text-white">
등록
</button>
Copy link
Collaborator

Choose a reason for hiding this comment

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

등록버튼은

태그 안으로 들어와야 sementic적읋 맞을것 같구요!
button의 타입은 submit이어야 할 것 같습니다 !


const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
// TODO 테스트용, 삭제예정
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍👍👍👍

export default function Article() {
return (
<>
<div>hi</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

주석 남기기...!

const id = context.query.id;

const res = await instance.get(`/articles/${id}`);
const article = res.data ?? [];
Copy link
Collaborator

Choose a reason for hiding this comment

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

이렇게 처리하는것도 나쁘지 않습니다 ㅎ

<hr className="h-[1px] bg-gray-200" />
</div>
);
})}
Copy link
Collaborator

Choose a reason for hiding this comment

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

  {    comments?.map((comment) => (
            <div className="flex flex-col gap-6 mb-6" key={comment.id}>
              <div>{comment.content}</div>
              <div className="flex items-center gap-2">
                <Image
                  src={ProfileDefault}
                  width={32}
                  height={32}
                  alt="댓글프로필이미지"
                />
                <div>
                  <p className="text-gray-600">{comment.writer.nickname}</p>
                  <p className="text-gray-400">
                    {formatDate(comment.updatedAt)}
                  </p>
                </div>
              </div>
              <hr className="h-[1px] bg-gray-200" />
            </div>
          );
        )}

const articlesRes = await instance.get(`/articles/${id}`);
const commentsRes = await instance.get(
`/articles/${id}/comments?limit=${COMMENTS_MAX}`
);
Copy link
Collaborator

Choose a reason for hiding this comment

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

위와같이 async함수에 여러개의 await구문이 들어간다면 해당 함수는 await구문마다 해당 비동기 함수가 끝날때까지 기다리게 됩니다.
이는 async함수 전체의 waterfall을 초래하게 되는데요
이는 모든 await함수의 결과가 나와야 async함수가 끝나기 때문에 성능적으로 좋지 않습니다.
모든 비동기 함수가 병렬적으로 실행될 수 있게 하려면 Promise.all을 활용해보시는걸 추천드립니다 ㅎ
Promise.all
Promise.allSettled

return `${passedHours}시간 전`;
} else {
return `${passedDays}일 전`;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

switch (true) {
  case (passedSeconds < 60):
    timeDescription = `${passedSeconds}초 전`;
    break;
  case (passedMinutes < 60):
    timeDescription = `${passedMinutes}분 전`;
    break;
  case (passedHours < 24):
    timeDescription = `${passedHours}시간 전`;
    break;
  default:
    timeDescription = `${passedDays}일 전`;
}

이렇게 if else구문이 많아진다면 switch case구문을 활용해보세요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

감사합니다!!! 😇

@kich555 kich555 merged commit ab93738 into codeit-bootcamp-frontend:Next.js-신승헌 Jun 10, 2024
@AdamSeungheonShin AdamSeungheonShin deleted the Next.js-신승헌-sprint10 branch June 11, 2024 04:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다..
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants