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

[소혜린] Sprint 10 #629

Conversation

miraclee1226
Copy link
Collaborator

@miraclee1226 miraclee1226 commented Jun 7, 2024

요구사항

상품 등록 페이지

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

상품 상세 페이지

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

주요 변경사항

  • 게시글 상세 페이지는 SSR로 구현했고, 댓글 등록하는 기능은 CSR을 이용했습니다. 또한 저번과 마찬가지로 댓글창은 무한 스크롤을 적용했습니다.
  • axios interceptor로 access token 만료시에 refresh token 받아오도록 로직을 짰습니다. 다만 CORS 에러로 인해 잘 동작하는지 알 수 없어, 운영진께 말씀드려서 서버에서 설정해달라고 요청드렸는데 아직 답변이 안왔습니다. 그래서 일단 access token을 상수로 저장해서 구현했습니다.

스크린샷

screencapture-localhost-3000-addboard-2024-06-07-17_37_13

screencapture-localhost-3000-addboard-165-2024-06-07-17_45_06

멘토에게

  • useAxiosFetch의 axiosFetch의 타입을 지정했는데, unknown 형식은 T 형식에 할당할 수 없다. 라고 뜹니다. 일단 반환값을 Promise<T | any>으로 임시방편해놓았는데, 어떻게 해야할지 모르겠습니다.

@miraclee1226 miraclee1226 requested a review from Il9 June 7, 2024 09:12
@miraclee1226 miraclee1226 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 7, 2024
Copy link
Collaborator

@Il9 Il9 left a comment

Choose a reason for hiding this comment

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

기능 구현은 잘 하신 것 같습니다.
기능을 용도별, 레이어 별로 나눠서 관리하는 것만 더 신경써주시면 유지보수나 리뷰에도 도움이 될 것 같습니다.
수고 많으셨습니다. 👍


질문 답변

useAxiosFetch의 axiosFetch의 타입을 지정했는데, unknown 형식은 T 형식에 할당할 수 없다. 라고 뜹니다. 일단 반환값을 Promise<T | any>으로 임시방편해놓았는데, 어떻게 해야할지 모르겠습니다.

해당하는 곳에 코멘트로 남겨두었습니다.

Comment on lines 35 to 50
const formData = new FormData();
formData.append("content", content);
formData.append("title", title);
if (image) {
formData.append("image", image);
}

const res = await axiosFetch({
method: 'POST',
url: "/articles",
data: formData,
headers: {
Authorization: `Bearer ${ACCESS_TOKEN}`
},
// withCredentials: true,
});
Copy link
Collaborator

Choose a reason for hiding this comment

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

이런 api call들은 별도로 만들어서
api.createArticle 같은 형태로 인터페이스를 제공해주면 좋을 것 같습니다.
멘토링 때 말씀드린 것 처럼 역할군을 나누어서 로직을 분리하는 연습을 해보시는 걸 추천드립니다.

import { axiosRequester } from "lib/axios";
import { AxiosRequestConfig} from "axios";

type AxiosFetch = <T>(options: AxiosRequestConfig<T>) => Promise<T | any>;
Copy link
Collaborator

Choose a reason for hiding this comment

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

useAxiosFetch의 axiosFetch의 타입을 지정했는데, unknown 형식은 T 형식에 할당할 수 없다. 라고 뜹니다. 일단 반환값을 Promise<T | any>으로 임시방편해놓았는데, 어떻게 해야할지 모르겠습니다.

처음에 어떤식으로 선언하셨는지 모르겠지만, AxiosRequestConfig에서 unknown을 안받아줬다면
<T extends 어쩌고> 의 형식으로 제네릭으로 들어올 수 있는 타입을 제한시킬 수 있습니다.

@Il9 Il9 merged commit 2e47033 into codeit-bootcamp-frontend:Next.js-소혜린 Jun 10, 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