묻고 답해요

상품상세페이지에서 잘 안됩니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

보시는것과 같이 이렇게 뜹니다 혹시 몰라 제가 입력한 코드도 함께 보여드립니다 보시고 틀린 부분은 꼭 가르쳐주세요! 상품 상세 페이지구현 2에서 헤더와 바디, 푸터 외에는 css는 아직 하지 않았습니다. App.js import './App.css' ; import MainPageComponent from "./main/index.js" ; import {Switch, Route} from "react-router-dom" ; import UploadPage from './upload' ; import ProductPage from './product' ; function App () { return ( < div > < div id = "header" > < div id = "header-area" > < img src = "/images/icons/logo.png" /> </ div > </ div > < div id = "body" > < Switch > < Route exact ={ true } path = "/" > < MainPageComponent /> </ Route > < Route exact ={ true } path = "/products/:id" > < ProductPage /> </ Route > < Route exact ={ true } path = "/upload" > < UploadPage /> </ Route > </ Switch > </ div > < div id = "footer" ></ div > </ div > ); } export default App ; product/index.js import {useParams} from "react-router-dom" ; import axios from "axios" ; import { useEffect, useState } from "react" ; function ProductPage (){ const {id} = useParams (); const [product, setProduct ] = useState ( null ); useEffect ( function (){ axios. get ( `https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products/ ${ id } ` ) . then ( function ( result ){ setProduct ( result .data); }). catch ( function ( error ){ console. error ( error ); }) },[]) if (product === null ){ return < h1 >상품 정보를 받고 있습니다...</ h1 > } return ( < div > < div id = "image-box" > < img src ={ "/" + product.imageUrl } /> </ div > < div id = "profile-box" > < img src = "/images/icons/avatar.png" /> < span > { product.seller } </ span > </ div > </ div > ); } export default ProductPage ; main/index.js import React from "react" ; import "./index.css" ; import axios from "axios" ; import {Link} from "react-router-dom" ; function MainPage (){ const [products, setProducts ] = React . useState ([]); React . useEffect ( function (){ axios. get ( "https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products" ). then ( function ( result ){ console. log ( 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/ ${ product .id } ` } > < 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 >); } export default MainPage ;

• 상품상세페이지구현2
• 머신러닝 배워볼래요?
• javascript
• react-native
• express
• react
• tensorflow
• nodejs
• HTML/CSS