안녕하세요 강의 잘 듣고 있습니다 다름이 아니라 안 되는게 있어서 질문을 드립니다.

Question

Request URL: http://localhost:8080/products Request Method: POST Status Code: 200 OK Remote Address: [::1]:8080 Referrer Policy: strict-origin-when-cross-origin Response Headers View source Access-Control-Allow-Origin: * Connection: keep-alive Content-Length: 50 Content-Type: text/html; charset=utf-8 Date: Tue, 22 Jun 2021 07:41:03 GMT ETag: W/"32-M3FXDluQXEAVLv+t1yb0yasB290" Keep-Alive: timeout=5 X-Powered-By: Express Request Headers View source Accept: application/json, text/plain, */* Accept-Encoding: gzip, deflate, br Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7 Connection: keep-alive Content-Length: 146 Content-Type: application/json;charset=UTF-8 Host: localhost:8080 Origin: http://localhost:3000 Referer: http://localhost:3000/ sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91" sec-ch-ua-mobile: ?0 Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-site User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36 Request Payload view source {name: "키보드", description: "그랩이 사용하던 키보드입니다", seller: "그랩", price: 50000,…} description : "그랩이 사용하던 키보드입니다" imageUrl : "uploads\keyboard1.jpg" name : "키보드" price : 50000 seller : "그랩" 정상적으로 나오는거 같은데 정작 프리뷰에 가면 아래와 같이 오류가 뜹니다. 상품 업로드 중에 문제가 생겼습니다. import { Form , Divider , Input , InputNumber , Button , Upload } from 'antd' ; import axios from 'axios' ; import { useState } from 'react' ; import { API_URL } from '../config/constants' ; import './index.css' function UploadPage () { const [ imageUrl , setImageUrl ] = useState ( null ); const onSubmit = ( values ) => { axios . post ( ` ${ API_URL } /products` , { name : values . name , description : values . description , seller : values . seller , price : parseInt ( values . price ), imageUrl : imageUrl , }) . then (( result ) => { console . log ( result ); }); }; const onChangeImage = ( info ) => { if ( info . file . status === 'uploading' ) { return ; } if ( info . file . status === 'done' ) { const response = info . file . response ; const imageUrl = response . imageUrl ; setImageUrl ( imageUrl ); } } return ( < div id = "upload-container" > < Form name = "상품 업로드" onFinish = { onSubmit } > < Form.Item name = "upload" label = { < div className = "upload-label" > 상품 사진 } > < Upload name = "image" action = { ` ${ API_URL } /image` } listType = "picture" showUploadList = {false} onChange = { onChangeImage } > { imageUrl ?( < img id = "upload-img" src = { ` ${ API_URL } / ${ imageUrl } ` } alt = "image" /> ): ( < div id = "upload-img-placeholder" > < img src = "/images/icons/camera.png" alt = "이미지" /> < span > 이미지를 업로드해 주세요. ) } < Divider /> < Form.Item label = { < div className = "upload-label" > 판매자 명 } name = "seller" rules = { [{ required : true , message : "판매자 이름을 입력해 주세요." }] } > < Input className = "upload-name" size = "large" placeholder = "이름을 입력하세요" /> < Divider /> < Form.Item name = "name" label = { < div className = "upload-label" > 상품 이름 } rules = { [{ required : true , message : "상품 이름을 입력해 주세요." }] } > < input className = "upload-name" size = "large" placeholder = "상품 이름을 입력해주세요." /> < Divider /> < Form.Item name = "price" label = { < div className = "upload-label" > 상품 가격 } rules = { [{ required : true , message : "상품 가격을 입력해 주세요" }] } > < InputNumber defaultValue = { 0 } className = "upload-price" size = "large" /> < Divider /> < Form.Item name = "description" label = { < div className = "upload-label" > 상품 소개 } rules = { [{ required : true , message : "상품 소개를 입력해 주세요." }] } > < Input.TextArea size = "large" id = "product-description" showCount maxLength = { 300 } placeholder = "상품 소개를 적어주세요." /> < Form.Item > { /* htmlType은 꼭 설정을 해줘야 한다. */ } < Button id = "submit-button" size = "large" htmlType = "submit" > 문제 등록하기. ) } export default UploadPage ; 코드 입니다 시작 할 때 config라는 폴더가 없어서 따로 만들고 한거 외엔 다 똑같이 했다고 생각을 했는데 이렇게 오류가 나오네요..

Kay potato · Answer

그리고 기존에 있던 상품을 클릭하면 상세 페이지로 이동을 하게 되어있는데 거기서도 또 오류가 뜨기 시작합니다..ㅜㅜ 마지막으로 메인화면으로 돌아갈 때, 그리고 리엑트를 실행 했을 때 메인화면이 뜨면서 오류가 한가지 더 뜨고 있습니다...

Kay potato · Answer

죄송한데 한번만 더 봐주실 수 있습니까? 그 뒤로 계속 다른 오류가 나서 소스코드 올려주신 걸로 적용을 해 봤는데도 오류가 계속 떠서 대체 뭐가 원인인지 잘 모르겠네요..바쁘실텐데 죄송합니다.. 상품 등록하기를 누르면 저런 오류가 뜨고 있습니다.

Kay potato · Answer

워..혼자 고쳐보겠다고 했었는데..저걸 확인을 못했었네요 감사드립니다!

grab · Answer

로그를 본 결과 서버 쪽에 Product model을 보시면 discription으로 설정되어있는 것 같습니다. 프론트엔드에서는 description이라는 데이터를 보내지만 서버쪽에 Product의 discription이라고 되어있어 오류가 발생하고 있네요! 서버 Product Model에서 discription을 description으로 바꿔주세요!

Kay potato · Answer

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Kay potato · Answer

\dongyoungkim\inflearn\grab-market-server
ode_modules\sequelize\lib\instance-validator.js:93:12)     at async model.save (C:\Users\kimcc\OneDrive\바탕 화면\자바\개인 웹 사이트 만들기\dongyoungkim\inflearn\grab-market-server
ode_modules\sequelize\lib\model.js:3877:7)     at async Function.create (C:\Users\kimcc\OneDrive\바탕 화면\자바\개인 웹 사이트 만들기\dongyoungkim\inflearn\grab-market-server
ode_modules\sequelize\lib\model.js:2207:12) {       errors: [     ValidationErrorItem {       message: 'Product.discription cannot be null',       type: 'notNull Violation',       path: 'discription',       value: null,       origin: 'CORE',       instance: [Product],       validatorKey: 'is_null',       validatorName: null,       validatorArgs: []     }   ] } 서버 쪽에서는 이런 오류가 뜨고 있고, Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components     at input     at http://localhost:3000/static/js/vendors~main.chunk.js:72366:23     at div     at div     at div     at http://localhost:3000/static/js/vendors~main.chunk.js:73368:75     at FormItemInput (http://localhost:3000/static/js/vendors~main.chunk.js:72687:25)     at div     at http://localhost:3000/static/js/vendors~main.chunk.js:73558:34     at Field (http://localhost:3000/static/js/vendors~main.chunk.js:113696:94)     at WrapperField (http://localhost:3000/static/js/vendors~main.chunk.js:114203:20)     at FormItem (http://localhost:3000/static/js/vendors~main.chunk.js:72381:20)     at form     at Form (http://localhost:3000/static/js/vendors~main.chunk.js:114316:19)     at SizeContextProvider (http://localhost:3000/static/js/vendors~main.chunk.js:69729:23)     at InternalForm (http://localhost:3000/static/js/vendors~main.chunk.js:72189:69)     at div     at UploadPage (http://localhost:3000/static/js/main.chunk.js:1658:89)     at Route (http://localhost:3000/static/js/vendors~main.chunk.js:185380:29)     at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:185582:29)     at div     at div     at App (http://localhost:3000/static/js/main.chunk.js:245:86)     at Router (http://localhost:3000/static/js/vendors~main.chunk.js:185015:30)     at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:184635:35) console.<computed> @ index.js:1 F12를 누르고 확인을 하니 저런 오류도 뜹니다 혹시 몰라서 둘다 올려봅니다.. { data : "상품 업로드 중에 문제가 생겼습니다." , status : 200 , statusText : "OK" , headers : {&hellip;} , config : {&hellip;} , &hellip; } config : adapter :  &fnof;  xhrAdapter(config) data :  "{"name":"키보드","description":"그랩이 사용하던 키보드","seller":"그랩","price":50000,"imageUrl":"uploads\\keyboard1.jpg"}" headers :  { Accept :  "application/json, text/plain, */*" ,  Content-Type :  "application/json;charset=utf-8" } maxBodyLength :  -1 maxContentLength :  -1 method :  "post" timeout :  0 transformRequest :  [ &fnof; ] transformResponse :  [ &fnof; ] url :  "http://localhost:8080/products" validateStatus :  &fnof;  validateStatus(status) xsrfCookieName :  "XSRF-TOKEN" xsrfHeaderName :  "X-XSRF-TOKEN" __proto__ :  Object data :  "상품 업로드 중에 문제가 생겼습니다." headers : content-length :  "50" content-type :  "text/html; charset=utf-8" __proto__ :  Object request :  XMLHttpRequest onabort :  &fnof;  handleAbort() onerror :  &fnof;  handleError() onload :  null onloadend :  null onloadstart :  null onprogress :  null onreadystatechange :  &fnof;  handleLoad() ontimeout :  &fnof;  handleTimeout() readyState :  4 response :  "상품 업로드 중에 문제가 생겼습니다." responseText :  "상품 업로드 중에 문제가 생겼습니다." responseType :  "" responseURL :  "http://localhost:8080/products" responseXML :  null status :  200 statusText :  "OK" timeout :  0 upload :  XMLHttpRequestUpload onabort :  null onerror :  null onload :  null onloadend :  null onloadstart :  null onprogress :  null ontimeout :  null __proto__ :  XMLHttpRequestUpload withCredentials :  false __proto__ :  XMLHttpRequest status :  200 statusText :  "OK" __proto__ :  Object

grab · Answer

어떤 에러가 뜨는지 올려주실 수 있으실까요~?