inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

강의 내용 누락

미해결

Introduction to React Development: Build Modern Web Applications

2강과 3강 사이 강의 내용이 누락된 것 같습니다.

  • react
  • hook
  • parent-child
  • state-management
  • react-jsx
mckim2004 댓글 0 좋아요 0 조회수 30

probs(props)도 맞는 표현인가요?

미해결

리액트 기초 (Introduction to React)

제가 알기로는 props 로 알고있는데 강의에서 강사님이 props를 계속 probs 로 사용하셔서 헷갈립니다. probs 도 쓰이는 표현인가요?

  • react
  • react-router
  • hook
정보미 댓글 1 좋아요 0 조회수 132

소스 코드 공유합니다

해결됨

리액트 기초 (Introduction to React)

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

  • react
  • react-router
  • hook
qawsed 댓글 0 좋아요 5 조회수 169

강의에 필요한 소스들은 어디에 있나요?

미해결

리액트 기초 (Introduction to React)

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

  • react
  • react-router
  • hook
김민서 댓글 2 좋아요 1 조회수 180

c1, c2변경해도 이미지/텍스트 상하 위치 비율이 같아요. 해결하신 분 있나요?

미해결

리액트 기초 (Introduction to React)

// 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.js import 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.js import 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할 수 있도록, 무료 양질의 강의에 감사드립니다.

  • react
  • react-router
  • hook
댓글 1 좋아요 0 조회수 142

hooks 에러

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요! 다음과 같이 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) }, });

  • react
  • graphql
  • next.js
  • hook
  • router
반가워요 댓글 1 좋아요 0 조회수 787

useEffect 실전 활용법(1) 강의에서 질문있습니다.

미해결

실전 리액트 프로그래밍

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

  • useEffect
  • redux
  • reactjs
  • react
  • hook
슈이 댓글 1 좋아요 0 조회수 370

use effect 부분에서 에러가나는 건지요...

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

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에 관한 내용이 나오는 것 같은데 ..

  • hook
  • mongodb
  • nodejs
  • redux
  • 웹앱
  • react
장재호 댓글 3 좋아요 0 조회수 466

인기 태그

인프런 TOP Writers

주간 인기글