수업을 계속 듣다보니 복습도 하며 각각 개념을 정리할 때는 이해가 되는데 이렇게 유형 2번과 같은 문제를 풀다보니 상속과 업캐스팅이 헷갈려서 문의드립니다. 유형 2번처럼 Parent obj = new Child(); Parent와 Child 클래스명이 다르기에 업캐스팅이니까 위에서 자식클래스에서 Child: 20만 출력하는 것일까요? 만약 유형 2번 문제가 상속문제였다면 부모클래스에서 Parent: 10과 Child: 20을 모두 출력하는 건가요? 이처럼 업캐스팅은 자식클래스만 출력하는 것이고 상속은 부모클래스 먼저 그리고 자식클래스를 출력하는 것인가요?
현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요 , 1. 그랩 선생님 소스 코드와 동일 하게 아래 작성한 index.js 소스 첨부 하는데요, 실행 하면 , 1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다. 이 에러는 어떻게 해결 할 수 있을까요? -------- 2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; 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"> <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> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다. 현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지 하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁 드립니다.
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용]
안녕하세요~ 강의 내용 중 궁금한게 있는데요 layout에선 usepathname, usesearchparams 와 같은 값에 접근할 수 없기 때문에 'use client' 지시어를 활용해 클라이언트 컴포넌트를 통해 해당 값에 접근해야한다 라고 말씀해주셨는데 이 개념은 단순 서버 컴포넌트와 클라이언트 컴포넌트에 따른 차이점과 동일한 의미 아닌가요?? next.js 자체가 서버컴포넌트 일 경우 usepathname, usesearchparams 와 같은 훅을 사용할 수 없는데 Page.tsx 컴포넌트도 마찬가지 아닌가요?? 'layout에선' usepathname, usesearchparams 와 같은 값에 접근할 수 없기 때문에 'use client' 지시어를 활용해 클라이언트 컴포넌트를 통해 해당 값에 접근해야한다. 라는 말씀이 Page.tsx 에서의 사용법과 어떤 차이점이 있는지 잘 이해가 가질 않습니다... 아 참고로 next 클라이언트 페이지 라우팅 시 layout영역은 리렌더링 되지 않고 page.tsx 영역만 렌더링된다라는 partial rendering 개념은 이해했습니다. 강의랑 유튜브 항상 잘 보고있습니다. 양질의 영상 제공해주셔서 감사합니다!