인프런 커뮤니티 질문&답변
작성한 질문수
id 값 문제인데 해결을 못하겠습니다.
작성
·
202
1
local host 로 들어가서 축구공위에 마우스를 올리면 아래 products/0 으로 나옵니다.. 물론 클린하면 아무데이터도 나오지 않고 2번쨰 그림을 클릭하면 1번째 상세 정보가 표출됩니다.
db값은 id:1 2 3 으로 되어 있으나, localhost 상에는 0, 1, 2 로 표기되있는듯 합니다.
왜 값을 일치 시키지 못하는지 강의를 다시 보면서 문제를 찾아봐도 잘 해결이 되지 않습니다. ㅠ 아직 이해가 많이 부족한듯 합니다. 설명 부탁드립니다.
<Switch>
<Route exact={true} path={"/"}>
<MainPageComponent/>
</Route>
<Route exact={true} path="/products/:id">
<ProductPage/>
</Route>
<Route exact={true} path="/upload">
<UploadPage/>
</Route>
</Switch>
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("에러 발생");
})
});
답변 2
1
sg HYUN
질문자
네!! 우선 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"/>
</div>
<h1>퍈매되는 상품들</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>
<div className="product-contents">
<span className="product-name">
{product.name}
</span>
<span className="product-price">
{product.price}원
</span>
<div className="product-seller">
<img className="product-avatar" src="images/icons/avatar.png"/>
<span>{product.seller}</span>
</div>
</div>
</Link>
</div>
);
})}
</div>
</div>
추가적으로
아래의 최 상단 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;
}
0
웹 쪽 코드를 보면 to 속성값으로 ${index}가 들어가 있네요!! product.id로 바꿔보시겠어요~?
<Link className="product-link" to={`/products/${index}`}>