Conversation
There was a problem hiding this comment.
파일명도 같이 바꿔주시는 거 잊으신걸까요!? -> handler.ts
아, 테스트용 일까요? ㅎㅎ
There was a problem hiding this comment.
전체적으로 개선할 수 있는 방법을 코드로 보여드리자면 요런 느낌이 될 수 있겠네요!
fetchFromApi()라는 함수로 재사용성 있게 만들어서 그 뒤에 불러올 api 요청들을 함수 하나로 끝낼 수 있게 됩니다!
const API_BASE_URL = "https://panda-market-api.vercel.app";
interface FetchParams {
[key: string]: string | number | boolean;
}
async function fetchFromApi(endpoint: string, params?: FetchParams) {
const url = new URL(`${API_BASE_URL}/${endpoint}`);
if (params) {
url.search = new URLSearchParams(params).toString();
}
try {
const response = await fetch(url.toString());
if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error(`Failed to fetch from API: ${url.toString()}`, error);
throw error;
}
}
export async function getProducts(params: FetchParams = {}) {
return fetchFromApi("products", params);
}|
|
||
| try { | ||
| const response = await fetch( | ||
| `https://panda-market-api.vercel.app/products?${query}` |
There was a problem hiding this comment.
https://panda-market-api.vercel.app/처럼 계속 사용되는 도메인은 보통 상수화 시켜둡니다!
| import { Inter } from 'next/font/google' | ||
| import styles from '@/styles/Home.module.css' | ||
|
|
||
| const inter = Inter({ subsets: ['latin'] }) |
There was a problem hiding this comment.
font 들도 styles라는 폴더안에서 따로 관리해주고 css파일을 import 하는 방식을 사용해주는 것을 추천해요!
| rel="noopener noreferrer" | ||
| > | ||
| By{' '} | ||
| <Image |
There was a problem hiding this comment.
next/image 사용하신 것 너무 좋습니다!
|
|
||
| try { | ||
| const response = await fetch( | ||
| `https://panda-market-api.vercel.app/products/${productId}` |
There was a problem hiding this comment.
https://panda-market-api.vercel.app/ 요렇게 반복되는 도메인은 BASE_URL 같이 상수화 시켜두시고 사용하시면 오타날 위험도 줄고, 사용하기에도 더 편하겠죠!?
const BASE_URL = https://panda-market-api.vercel.app/
| rel="noopener noreferrer" | ||
| aria-label="판다마켓 페이스북" | ||
| > | ||
| <img src={facebookLogo} alt="페이스북" width="20" /> |
There was a problem hiding this comment.
Next.js에서는 웬만해서 로 next/image 사용해주시는 것이 좋고
svg인 경우에는 컴포넌트인 것 처럼 만들어서 사용하실 수 있습니다 :)
| {isDropdownVisible && ( | ||
| <DropdownMenuContainer> | ||
| <DropdownItem | ||
| onClick={() => { |
There was a problem hiding this comment.
onClick함수도 함수로 분리해서 공통적인 부분을 뺄 수 있을 것 같은데요!?
| setIsVisible(false); | ||
| }, minLoadTime); | ||
|
|
||
| return () => clearTimeout(timer); |
| {tags.length > 0 && ( | ||
| <TagButtonsSection> | ||
| {tags.map((tag) => ( | ||
| <Tag key={`tag-${tag}`}> |
There was a problem hiding this comment.
좋아요! 키 값은 항상 유니크해야 한다는 점만 잊지마세요 :)
요구사항
기본
주요 변경사항
스크린샷
멘토에게