https://github.com/tolfromj/react-basic파이팅~!! (vite 사용해서 환경설정이 조금 다릅니다.강의 수강하면서 직접 타이핑해서 오타나 오류 있을 수 있습니다. )    

이미지 파일이라던지 json 파일이라던지.. 다운받아서 쓰라고 하셨는데 어디있는지 못찾겠어요...

// MyClock.js import MyClockImage from "./MyClockImage"; import MyClockTime from "./MyClockTime"; import './MyClock.css'; function MyClock() { return( <div className="c1"> <MyClockImage/> <MyClockTime/> </div> ); } export default MyClock; MyClockImage.jsimport clock from './clock.png' function MyClockImage() { return( <div className="c2"> <img src={clock} alt='clock'/> </div> ); } export default MyClockImage; MyClockTime.js function MyClockTime() { return( <div className="c3"> 현재 시각 : {new Date().toLocaleTimeString() } </div> ); } export default MyClockTime;  MyClock.css// c1 클래스의 스타일 .c1 { width: 100% ; height: 100% ; display: flex; flex-direction:column; justify-content: center; align-items: center; background-color: #282c34; } .c2, .c3 { display:flex; justify-content:center; align-items:center; } // 이미지 .c2 { width: 100%; height: 60%; } // 글자 .c3 { width: 100%; height: 40%; color:white; }  App.jsimport logo from './logo.svg'; // svg image file import './App.css'; // 전역 css (모듈 css는 import styles ... module.css) import { FaMapMarked } from "react-icons/fa"; // icon import MapView from './MapView'; import Hello from './01_Hello_Component/Hello'; import MyClock from './02_MyClock/MyClock'; import { BiHomeHeart } from "react-icons/bi"; import MyDiv1 from './03_Probs/MyDiv1'; import MyList from './04_Probs_Advanced/MyList'; import Lotto from './05_Lottery_UseState_Hook/Lotto'; // flex-col : 수직 배치 // w-full : 화면 전체 너비 // h-screen : 화면 전체 높이 // mx-auto : 컴포넌트 내부 수평 중앙 정렬 // justify-between : flex 컨테이너 안 항목 양끝 정렬 + 사이 공간 자동 설정 // text-xl : 텍스트 크기 XL // p-10 : padding, bg: background color // grow : 헤더, 푸터 사용하고 남은 너비를 main이 사용하겠다. // overflow-y-auto: 수직으로 내용 많아지면, 자동 스크롤 생성된다. function App() { return ( <div className="flex flex-col w-full h-screen mx-auto"> <header className='flex justify-between items-center text-xl font-bold h-20 p-10 bg-slate-200'> <p>리액트 기초 : probs</p> <p><BiHomeHeart/></p> </header> <main className='grow w-full flex justify-center items-center overflow-y-auto'> <MyClock/> {/* <MyDiv1/> */} {/* <MyList/> */} {/* <Lotto/> */} </main> <footer className='flex justify-center items-center h-20 bg-black text-slate-100'> ⓒ Joo </footer> {/* <MapView/> */} </div> // <div className="App" style={{height: '100vh'}}><MapView/></div> ); } export default App; // 외부에서 import할 수 있도록, 무료 양질의 강의에 감사드립니다.

안녕하세요!다음과 같이 hook이 선언되기 전에 if조건문이 위치하여 오류가 발생하였습니다. useMutation은 조건문이 실행되기 전에 선언해주면 해결되었는데 useQuery는 router를 사용하기 때문에 조건문보다 먼저 선언이 될 수 없었습니다.그래서 조건문을 없애기 위해서 router.query.boardId 를 string타입으로 변환하여도 상관이 없나요?1차 오류 발생if (!router || typeof router.query.boardId !== "string") return <></>; const { data } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs >(FETCH_BOARD_COMMENTS, { variables: { boardId: router.query.boardId }, }); const [deleteBoardComment] = useMutation< Pick<IMutation, "deleteBoardComment">, IMutationDeleteBoardCommentArgs >(DELETE_BOARD_COMMENT);//오류 원인 React Hook "useMutation" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? const { data } = useQuery<//string으로 변환 const { data } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs>(FETCH_BOARD_COMMENTS, { variables: { boardId: String(router.query.boardId) }, });

안녕하세요 강사님 책도 가지고 있는데 책읽을 시간이 없어 강의로 필요한 부분만 보았는데요 useEffect로 onMounted됐을때 실행시킬 함수들을 빈배열을 넣고 사용하는 것보다,  useOnMounted라는 훅으로 만들어서 실행시키는게 더 낫다고 하셨는데요, 이유가 무엇인가요? 저는 mounted직후는 빈배열을 useEffect에 넘겨주면서 사용했었고 딱히 불편함을 느낀적이 없어서 이해가 잘안갑니다😭 왜 그게 더 나은지 설명이 부족한것 같아서 여쭤봅니다😭  단순히 가독성 때문인가요? 자세히 알고싶어요! 감사합니다.

import React ,{useEffect, useState} from 'react' import axios from 'axios'; import ProductImage from './Sections/ProductImage'; import ProductInfo from './Sections/ProductInfo'; import {Row, Col} from 'antd'; function DetailProductPage(props) { const productId = props.match.params.productId const [Product, setProduct] = useState({}) useEffect(() => { axios.get(`/api/product/products_by_id?id=${productId}&type=single`) .then(response =>{ if(response.data.success){ setProduct(response.data.product[0]) }else { alert('상세 정보 가져오기를 실패했습니다.') } }) }, []) return ( <div style={{widht: '100%', padding : '3rem 4rem'}}> <div style = {{display : 'flex', justifyContent:'center'}}> <h1>{Product.title}</h1> </div> <br /> <Row gutter={[16,16]}> <Col lg={12} sm= {24}> {/* Product image */} <ProductImage detail={Product} /> </Col> <Col lg={12} sm= {24}> {/* Product Info */} <ProductInfo detail={Product} /> </Col> </Row> </div> ) } export default DetailProductPage 우선 상세페이지 버튼 눌렀을때 나는 에러입니다,,, 뭔가 터미널에 찍히는것도 그렇고 hook에 관한 내용이 나오는 것 같은데 ..