그랩님, 강의 잘 듣고 있습니다. 다름이 아니라, 상품 상세 페이지 에러와 의문점이 있어서 어떻게 해결해야 하는지 궁금한 사항이 있어 질문 드리게 되었습니다. 일단 src/main/index.js 소스 코드를 첨부합니다. import './index.css'; import axios from "axios"; import React from 'react'; import {Link} from 'react-router-dom'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("제 mock 서버 주소 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <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> <div id="footer"></div> </div> ); } export default MainPage; 2.src/product/index.js 소스 첨부합니다. import {useParams} from 'react-router-dom'; import axios from "axios"; import { useEffect, useState } from 'react'; function ProductPage(){ // const params=useParams(); const {id} = useParams(); const [product, setProduct] = useState(null); useEffect(function(){ axios.get('제 mock 서버 주소 넣었습니다/products/${id}' ) .then(function (result) { setProduct(result.data); // console.log(result); }).catch(function(error){ console.error(error); } ); },[]); console.log(product); // console.log(params); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; -->여기서부터 의문점과 문제점이 발생하게 되니 읽어주시고 해결할 수 있는 방법을 알려주시면 좋겠습니다. 위 소스에서 axios.get('제 mock 서버 주소 넣었습니다/products/ ${id}') 처럼 소스를 달러 중괄호 아이디 입력하면 , 아래와 같은 첨부 사진처럼 에러 가 납니다. --> 위 에러 첨부 사진은 어떻게 해결해야 할까요? 3. 하지만, 위 소스대로 입력 안하면 axios.get('제 mock 서버 주소 넣었습니다 /products/1 ') 하면 제대로 데이터를 오류 없이 아래 첨부 사진처럼 받아 오는 것 을 알 수 있습니다. 3-1. 그랩님, 강의 소스에서 처럼 axios.get('제 mock 서버 주소 넣었습니다/products/ ${id} ')해서 하면 위 첨부 사진 처럼 에러가 나는데요, 성공적으로 오류 없이 불러오고 싶은데요 , 어떻게 해야 하나요? 단계별로 어떻게 소스를 수정해야하는지 알려주시면 좋겠습니다. 확인하시면 답변 부탁 드립니다.
강사님! 질문이 있습니다. 질문이 좀 길어요. 죄송합니다. 커뮤니티에도 질문을 올렸는데 휴가 중이신지 답변이 없어서 여기에도 남겨봅니다. Vue3 모든 과정을 수강하고 덕분에 프로젝트도 수행을 잘 했습니다. 그런데 프로젝트 할 때 quasar와 사용자 css 적용 문제로 퍼블리셔들이 고생을 많이 했습니다. 저는 PM 역할을 수행합니다. quasar의 css가 사용자가 정의한 css를 덮어 쓰는 경향이 있어 처리한다고 퍼블리셔 분들이 고생들을 많이 했어요. 그래서 다시 프로젝트를 곧 수행할 것 같은데 이번에는 tailwind를 적용해 볼려고 해요. 그러면 nuxt3 + vue3 + quasar + tailwind로 생각하고 있는데 그런데 저희는 포털은 웹 접근성 심사를 받아야 해서 이 조합이 맞는지가 궁금합니다. quasar가 다른 css를 덮어 쓰는 문제가 발생해서 tailwind로 작성한 css도 무용지물이 될까 심히 걱정스럽습니다.
73강 7분 50초 내용입니다. 투두리스트 프로젝트의 List.jsx에서 TodoItem.jsx로 prop을 넘길 때 강의에서는 todos.map((todo) => {return (<TodoItem key={todo.id} {...todo} />;} 위 처럼 작성하고 있습니다. 저는 props를 spread syntax가 아닌 객체 자체로 한 번에 전달해보려고 아래와 같이 작성했습니다. todos.map((todo) => {return <TodoItem key={todo.id} todo={todo} />;} 그런데 이렇게 작성하면 다음과 같은 에러가 발생합니다: Each child in a list should have a unique "key" prop. todos 배열의 각 요소에는 고유한 id가 있다는 것을 확인했고, 동일한 코드에서 todo={todo}를 {...todo}로 변경하면 경고 없이 정상적으로 동작합니다. 저는 단순히 {...todo}는 객체 속성을 각각 개별 props로 넘기고, {todo}는 하나의 객체로 넘기는 차이만 있다고 생각했는데, 이 두 방식의 어떤 차이로 인해 이런 경고가 발생하는지 궁금합니다.
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
포스트멘 > /posts api 요청 > response 값의 next 값 클릭시 > 새로운 api 생성후 Auth에 자동으로 토큰이 설정되게 하는 방법을 알고싶습니다. 새로 생성되면 저는 수동으로 breaer 토큰 선택(토큰 설정시 access token은 자동으로 설정되긴 합니다.)해야 되는데 강의에서는 따로 설정되지 않는것 같아 질문 드립니다.
강의에서 function Header () {} 와 const Header = () => {} 이 식이 똑같다고 하셔서 function Header () {} 이 식으로 컴포넌트 header.jsx파일에 붙혀넣었더니 페이지오류가 나오더라구요 import로 연결할땐 차이가 있는걸까요?
