강사님 궁금한 것이 있습니다!

저 문제가 좀 많더라고요 ㅠㅠ

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;
 

인프런 커뮤니티 질문&답변