id 값 문제인데 해결을 못하겠습니다.

Question

local host 로 들어가서 축구공위에 마우스를 올리면 아래 products/0 으로 나옵니다.. 물론 클린하면 아무데이터도 나오지 않고 2번쨰 그림을 클릭하면 1번째 상세 정보가 표출됩니다. db값은 id:1 2 3 으로 되어 있으나, localhost 상에는 0, 1, 2 로 표기되있는듯 합니다. 왜 값을 일치 시키지 못하는지 강의를 다시 보면서 문제를 찾아봐도 잘 해결이 되지 않습니다. ㅠ 아직 이해가 많이 부족한듯 합니다. 설명 부탁드립니다. < Switch > < Route exact = {true} path = { "/" } > < MainPageComponent /> < Route exact = {true} path = "/products/:id" > < ProductPage /> < Route exact = {true} path = "/upload" > < UploadPage /> app . get ( "/products/:id" , ( req , res ) => { const params = req . params ; const { id } = params ; models . Product . findOne ({ where : { id : id , }, }). then (( result ) => { console . log ( "PRODUCT : " , result ); res . send ({ product : result }); }). catch (( error ) => { console . error ( error ); res . send ( "상품 조회에 에러가 발생했습니다." ); }); }); 그리고... 해당 강의 전의 SQLite 데이터 순서와 현재강의의 데이터 순서가 선생님은 바뀌었는데... 저는 그렇지 않습니다.. ㅠㅠ 이것까지만의 드립니다. app . get ( "/products" , ( req , res ) => { models . Product . findAll ({ order : [[ "createdAt" , "DESC" ]], attributes : [ 'id' , 'name' , 'price' , 'createdAt' , 'seller' , 'imageUrl' ], }) . then (( result ) => { console . log ( "PRODUCTS : " , result ); res . send ({ products : result }); }). catch (( error ) => { console . error ( error ); res . send ( "에러 발생" ); }) });

sg HYUN · Answer

네!! 우선 web부분 function MainPage (){ const [ products , setProducts ]= React . useState ([]); React . useEffect ( function (){ axios . get ( "http://localhost:8080/products" ) . then ( function ( result ){ const products = result . data . products ; setProducts ( products ); }). catch ( function ( error ){ console . error ( '에러 발생 : ' , error ); }); },[]) return ( < div > < div id = "banner" > < img src = "images/banners/banner1.png" /> < h1 > 퍈매되는 상품들 < div id = "product-list" > { products . map ( function ( product , index ){ return ( < div className = "product-card" > < Link className = "product-link" to = { `/products/ ${ index } ` } > { /* to={"/products/"+index} 를 위에 es6 문법으로 */ } < div > < img className = "product-img" src = { product . imageUrl } /> < div className = "product-contents" > < span className = "product-name" > { product . name } < span className = "product-price" > { product . price } 원 < div className = "product-seller" > < img className = "product-avatar" src = "images/icons/avatar.png" /> < span > { product . seller } ); }) } 추가적으로 아래의 최 상단 2줄은 자동으로 추가되어 제가 주석처리했습니다. // const { DataTypes } = require("sequelize/types") // const { sequelize } = require(".") module . exports = function ( sequelize , DataTypes ){ const product = sequelize . define ( 'Product' ,{ name : { type : DataTypes . STRING ( 20 ), allowNull : false }, price : { type : DataTypes . INTEGER ( 10 ), allowNull : false }, seller : { type : DataTypes . STRING ( 30 ), allowNull : false }, description : { type : DataTypes . STRING ( 300 ), allowNull : false }, imageUrl : { type : DataTypes . STRING ( 300 ), allowNull : true } }); return product ; }

grab · Answer

안녕하세요~! ProductPage 코드를 보여주실 수 있으실까요~?