2.13) 비동기 작업 처리하기 2. Promise 강의에서, if 문을 활용한 타입 검증 시 오류인 상황(else) 에서의 reject 가 정상 동작하지 않습니다. /* Promise */ const promise = new Promise((resolve, reject) => { // 비동기 작업 실행 함수 : executor setTimeout(() => { let num = 10; num = '10'; console.log(num); if (typeof num === 'number') { // 성공일 때 호출 resolve(`${num}은 숫자입니다.`); } else { // 실패일 때 호출 reject(`${num}은 숫자가 아닙니다.`); } }, 1000 * 1); }); 위 코드에서, num 타입을 string 으로 변경했을 때 else 문이 진행되는 것으로 기대했습니다. 이때, 브라우저의 디버거에서 오류를 발생시키면서 정상 동작되지 않습니다. 터미널에서는 UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). 라는 오류가 발생됩니다. catch 문 없이 reject 를 단독으로 사용하는 것에 문제가 있는 것 같은데, 예제와는 다르게 동작하는 것 같아 문의드립니다.
안녕하세요 강사님. node.js 강의 수강을 이제 막 시작한 프론트엔드 개발자 수강생입니다. 1. 모든 강의는 node.js 14 버전 기준으로 녹화가 된게 맞나요? 맞다면 22LTS 버전으로 설치해도 강의를 수강하는데 문제는 없을까요? 2. 그리고 프로젝트 생성 처음부터 typescript 적용하고 싶은데, 초보자에게 괜찮을까요? 비추천이시라면 typescript 없이 시작하려고 합니다. 감사합니다.
리액트 실습 준비하기에서 npm install 까지 마치고 라이브 서버로 열려고 하는데 빈 공백만이 뜹니다. 브라우저의 개발자용 콘솔에는 Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec. 라고 떠있어요. 제미니한테 물어보니까 브라우저가 jsx를 못 읽어서라고 하네요. 열심히 여러가지 시도 해봤으나 잘 안되서 도움 요청드립니다ㅠㅠ
안녕하세요. 강의 잘 보고 있습니다. 웹 페이지 중 List영역의 검색창에 단어를 입럭할 때 마다 getAnalyzed() 함수가 호출되는 이유가 궁금합니다. 저의 부족한 실력으로나마 추측을 했을 때, 검색창에 해당하는<input>태그에 입력이 발생할 때 마다 search라는 내부 state의 값이 바뀌게 되어 랜더링이 다시 진행되고, 이에따라 getAnalyzed()가 실행되는 것 같습니다. 답변 기다리겠습니다. 감사합니다!
Request failed with status code 404 AxiosError: Request failed with status code 404 at settle ( http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:1702:12 ) at XMLHttpRequest.onloadend ( http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:338:66 ) at Axios.request ( http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:832:41 ) 저의 경우는, client에서 npm install http-proxy-middleware@2 로 다운로그레이드를 한 뒤 해결되었습니다. @3 버전이 깔렸는데 cra와 이게 호환성 이슈가 있는 것 같습니다.
강의에서 나온대로 다 따라 갔는데 아무것도 안됩니다. 콘솔창에서는 const [surveyData, setSurvey] = useRecoilState(surveyState).questions; 에서 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) 라는 에러 뜹니다
그랩님, 강의 잘 듣고 있습니다. 다름이 아니라, 상품 상세 페이지 에러와 의문점이 있어서 어떻게 해결해야 하는지 궁금한 사항이 있어 질문 드리게 되었습니다. 일단 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} ')해서 하면 위 첨부 사진 처럼 에러가 나는데요, 성공적으로 오류 없이 불러오고 싶은데요 , 어떻게 해야 하나요? 단계별로 어떻게 소스를 수정해야하는지 알려주시면 좋겠습니다. 확인하시면 답변 부탁 드립니다.
