저 문제가 좀 많더라고요 ㅠㅠ
1번 문제
왜 제가 dayjs를 적용하면
아예 사라지더라고요! ㅠㅠ
2번 문제!
src\product\index.js
Line 42:6: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src\upload\index.js
Line 3:10: 'ForkOutlined' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
라고 터미널에 써졌더라고요 ㅠ
그런데 막상 React App을 실행하면
메인도 잘 나오고, 상품을 클릭해도 잘 나오는데 뭐가 문제인지
모르겠습니다
//CSS를 적용하려면,
import "./index.css"
import {useParams} from 'react-router-dom';
import axios from 'axios';
import { useEffect, useState } from 'react';
function ProductPage(){
//const prams = useParams();
// console.log(prams); //이제 상품을 선택을 할 때 콘솔창에 id: 0, 1, 2.. 상품 숫자가 나온다.
//const params = useParams();
//console.log(params); //id를 출력하는 것을 확인할 수 있다. >> 콘솔창에 {id : 2} 이런식으로!
const {id} = useParams();
const [product, setProduct] = useState(null);
//처음엔 null이 나타나고 렌더링이 되고 나서 서버에서 상품을 받아오고 호출됨.
//useState는 데이터를 받아주는 역할인데 쉽게 말을 하면 네트워크를 받아 상품을 보여줄 때 쓰임
// 콜백 함수
useEffect(function(){
// useEffect를 통해 1번만 통신해 네트워크를 호출을 해준다. << 쉽게 말을 하면 1f의 형식이다.
// axios.get('https://4326fdea-003a-4291-b8b3-b8e47b10723c.mock.pstmn.io/products'+ id)
// axios.get(`https://4326fdea-003a-4291-b8b3-b8e47b10723c.mock.pstmn.io/products/${id}`)
axios.get(
`http://localhost:8080/products/${id}`
)
// 프로미스(promise)
.then(function(result){
// 익명함수에 result의 인자를 넣는다.
// setProduct(result.data); postman을 통한 작업을 했을때는 이렇게 간편했지만
// 이제는 server.js > product에서 데이터를 받아야 하기 때문에 작성을 조금 더 추가해야 함.
setProduct(result.data.products);
// console.log(result);
})
// 프로미스(promise)
.catch(function(error){
console.log(error);
})
},[]);
// console.log(product);
// return <h1>상품 상세 페이지{id} 상품</h1> //js문법
if(product == null){
return <h1>상품 정보를 받고 있습니다...</h1>
}
// {/* const [product, setProduct] = useState(null); 를 비동기 처리방식으로 작동이 되기 때문에 당연히 product.imageUrl은 null로 처리가 된다. 따라서 오류가 발생이 되는 것은 당연한 원리이다. */}
return(
<div>
<div id="image-box">
<img src={"/"+product.imageUrl} alt=""/>
</div>
<div id="profile-box">
<img src="/images/icons/avatar.png" alt=""/>
<span>{product.seller}</span>
</div>
<div id="contents-box">
<div id="name">{product.name}</div>
<div id="price">{product.price}원</div>
<div id="createdAt">2021년 06월 15일</div>
<div id="description">{product.description}</div>
</div>
</div>
);
}
export default ProductPage;
import { Form, Divider, Input, InputNumber, Button } from "antd";
import "./index.css";
import { ForkOutlined } from "@ant-design/icons";
function UploadPage() {
// return <h1>업로드 화면</h1>;
// const onSubmit = function(){//평상시 함수 표현식이다.
// 이것을 람다함수 표현식으로 바꾸도록 하자
const onSubmit = (values) => { //이것이 람다 함수 표현식!
console.log(values);
};
return(
<div id="upload-container">
<Form name="상품 업로드" onFinish={onSubmit}>
{/* 익명함수를 넣은 것과 동일하다. onFinish={onSubmit} */}
<Form.Item
name="upload"
label={<div className="upload-label">상품 사진</div>}
>
<div id="upload-img-placeholder">
<img src="/images/icons/camera.png" alt="" />
<span>이미지를 업로드해주세요.</span>
</div>
</Form.Item>
<Divider />
{/* Divider는 콘텐츠의 영역을 나누는 컴포넌트이다. >> 선을 그어준다. <hr> 태그와 비슷하지만 다른 속성이다. */}
<Form.Item
label={<div className="upload-label">판매자 명</div>}
name="seller"
rules={[{ required: true, message: "판매자 이름을 입력해주세요" }]}
// rules이라는 프롭이 있는데 여기에는 {}안에서 배열[{}]로 작업해야 한다.
>
<Input
className="upload-name"
size="large"
placeholder="이름을 입력해주세요."
/>
</Form.Item>
<Divider />
<Form.Item
name="name"
label={<div className="upload-label">상품 이름</div>}
rules={[{ required: true, message: "상품 이름을 입력해주세요" }]}
>
<Input
className="upload-name"
size="large"
placeholder="상품 이름을 입력해주세요"
/>
</Form.Item>
<Divider />
<Form.Item
name="price"
label={<div className="upload-label">상품 가격</div>}
rules={[{ required: true, message: "상품 가격을 입력해주세요" }]}
>
<InputNumber defaultValue={0} className="upload-price" size="large" />
{/* 숫자형 input */}
</Form.Item>
<Divider />
<Form.Item
name="description"
label={<div className="upload-label">상품 소개</div>}
rules={[{ required: true, message: "상품 소개를 입력해주세요." }]}
>
<Input.TextArea
size="large"
id="product-description"
//showCount={true} << react에서 기본형이다. 이것을 아래와 같이 생략할 수 있다.
showCount
maxLength={300}
placeholder="상품 소개를 적어주세요."
/>
</Form.Item>
<Form.Item>
<Button id="submit-button" size="large" htmlType="submit">
문제 등록하기
</Button>
</Form.Item>
</Form>
</div>
);
}
export default UploadPage;
답변 1