무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 만난 리액트(React)
book.jsx library.jsx 실행 안 됨
실습 코드 그대로 진행한 것 같은데 npm start를 치면 오류는 안 나지만 화면에 아무 내용도 출력되지 않습니다 ㅜㅜ.. 어떤 부분에서 잘 못 된 것인지 여러 번 봐도 모르겠어서 질문 남깁니다
- 미해결처음 만난 리액트(React)
미니 블로그 질문입니다.
미니블로그를 실행시키면 아래와 같은 에러가 브라우저 콘솔에 찍힙니다.소스는 몇 번을 확인해서 잘 못 된 부분이 없다고 생각합니다.MainPage.jsx 부터 불러오질 못하네요.뭐가 잘 못 됐는지 찾아주시면 고맙겠습니다.아래는 App.js 에 PostWritePage, PostViewPage 를 빼고 실행했을 경우 브라우저 페이지 자체에 나오는 에러입니다. function App(props) { return ( <BrowserRouter> <MainTitleText>제플리카의 미니 블로그</MainTitleText> <Routes> <Route index element={<MainPage />} /> </Routes> </BrowserRouter> ); } Uncaught runtime errors:×ERRORElement type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:36883:21) at createFiberFromElement (http://localhost:3000/static/js/bundle.js:36904:19) at createChild (http://localhost:3000/static/js/bundle.js:25473:32) at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:25713:29) at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:26055:20) at reconcileChildren (http://localhost:3000/static/js/bundle.js:28987:32) at updateHostComponent (http://localhost:3000/static/js/bundle.js:29631:7) at beginWork (http://localhost:3000/static/js/bundle.js:31076:18) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16062:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16106:20)ERRORElement type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:36883:21) at createFiberFromElement (http://localhost:3000/static/js/bundle.js:36904:19) at createChild (http://localhost:3000/static/js/bundle.js:25473:32) at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:25713:29) at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:26055:20) at reconcileChildren (http://localhost:3000/static/js/bundle.js:28987:32) at updateHostComponent (http://localhost:3000/static/js/bundle.js:29631:7) at beginWork (http://localhost:3000/static/js/bundle.js:31076:18) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16062:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16106:20)ERRORElement type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage. at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:36883:21) at createFiberFromElement (http://localhost:3000/static/js/bundle.js:36904:19) at createChild (http://localhost:3000/static/js/bundle.js:25473:32) at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:25713:29) at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:26055:20) at reconcileChildren (http://localhost:3000/static/js/bundle.js:28987:32) at updateHostComponent (http://localhost:3000/static/js/bundle.js:29631:7) at beginWork (http://localhost:3000/static/js/bundle.js:31076:18) at beginWork$1 (http://localhost:3000/static/js/bundle.js:36015:18) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:35284:16)
- 미해결처음 만난 리액트(React)
이게 왜 안될까요? 변수가 안먹어요
import React from "react"; function Book(props) { return ( <div> <h1>{'이 책의 이름은 ${props.name}입니다'}</h1> <h2>{'이 책은 총 ${props.numOfPage} 페이지로 이뤄져 있습니다.'}</h2> </div> ); } export default Book;
- 미해결처음 만난 리액트(React)
실습 강의 미니프로젝트 const {} = props ;
function MainPage(props) {const {} = props ;props 에다 중괄호에 아무것도 없이 쓰는 건 객체를 선언하기 위함인가요? 무슨 기능을 하는지 모르겠어요 이 코딩 한 줄 쓰는 이유가 뭔가요?
- 미해결처음 만난 리액트(React)
7강 실습
react-create-app이 안돼서 vite를 사용해서 실습하고 있는데 코드를 똑같이 작성했지만 빈화면만 뜹니다. 무엇이 문제인지 모르겠어요
- 미해결처음 만난 리액트(React)
(실습) 직접 리액트 연동하기 js 질문
안녕하세요. 리액트 연동하기 강의에서 MyButton.js 의 적용이 안 되어 페이지에 버튼이 나타나지 않습니다. 다른 분들 질문도 보고 @17에서 @17.0.0 으로도 해보고 버전의 문제인가 싶어 18.2.0 으로도 해 봤는데 안 되네요... 어떤 점이 문제인지 알려주시면 감사하겠습니다!
- 미해결처음 만난 리액트(React)
코드 에러입니다.
안녕하세요. 혹시 이 부분에서 어떤 에러가 있는지 알 수 있을까요?
- 미해결처음 만난 리액트(React)
Component 만들때 괄호로 묶는 어떤 의미가 있을까요?
Component 만들때 괄호로 묶는 어떤 의미가 있을까요?괄호를 따로 안써도 되는것 같은데, 어떤 의미인지가 궁금합니다.
- 미해결처음 만난 리액트(React)
chapter 05. 댓글 컴포넌트 만들기 오류 질문
댓글 컴포넌트 만들기를 하는데 왜 이렇게 오류가 생기는 건지 잘 모르겠습니다ㅜㅜ..
- 미해결처음 만난 리액트(React)
빌드 후 serve가 안됩니다!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 유사한 질문이 있어서 권한 설정도 확인해봤는데 문제없었습니다.문제가 뭘까요?참고로 저는 패키지 매니저를 npm대신에 yarn을 사용했습니다!yarn global add serve 까지 해둔 상태입니다!
- 미해결처음 만난 리액트(React)
(실습) JSX 코드 작성해보기
이 화면이 나오게 하고 싶습니다. npm start 엔터 이후로 어떻게 해야 하는지 모르겠습니다
- 미해결처음 만난 리액트(React)
섹션 2 create-react-app
npx create-react-app my-app이라고 작성했는데 오류가 나타납니다. node.js와 npm버전은 모두 14.0과 6.14 이상입니다PS C:\Users\이민준> npx create-react-app my-app npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\이민준\AppData\Roaming\npm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\이민준\AppData\Roaming\npm' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\이민준\AppData\Local\npm-cache\_logs\2023-08-02T12_46_01_759Z-debug-0.log PS C:\Users\이민준>
- 미해결처음 만난 리액트(React)
섹션 2 리액트 시작하기 (실습) 직접 리액트 연동하기
click 버튼이 나타나지 않습니다.코드는 정상적으로 오타가 없는지 여러 번 확인했습니다.function MyButton(props){ const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', {onClick: () => setIsClicked(true)}, isClicked ? 'Clicked!' : 'Click here!' ) } <html> <head> <title>민준의 블로그</title> <link rel="stylesheet" href="sylesj.css"> </head> <body> <h1>민준의 블로그에 오신 여러분들 환영합니다</h1> <div id="root"></div> <!--리액트 가져오기--> <script src="https://unpkg.com/react@17/umd/react.decelopment.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react.decelopment.js" crossorigin></script> <!--리액트 컴포넌트 가져오기--> <script src="MyButtonj.js"></script> </body> </html>
- 미해결처음 만난 리액트(React)
npm start해도 안됩니다.
index.jsLibrary.jsxBook.jsx
- 미해결처음 만난 리액트(React)
npm start
npm start를 하면 여기서 멈추고 원하는 화면이 안나오는데 어떻게 해야하나요?
- 미해결처음 만난 리액트(React)
(실습_리액트18)시계만들기_코드_index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_03/Library'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(() => { root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); },1000);
- 미해결처음 만난 리액트(React)
미니블러그 질문
Button(props) 에서 props로 받은 title이 버튼 목록에 표시하고props로 받은 onClick은 <StyleButton>에 onClick에 넣어 주므로써 <질문> onClick이벤트를 상위 컴포넌트에서 받을수 있도록 해 주었다고 설명하셨는데~질문입니다? onClick={onClick} 이벤트를 상위 컴포넌트에서 받을수 있도록 해 주었다라고위에서 설명 하셨는데, 이해가 잘 안되어서 질문합니다onClickItem(post)도 같은 맥락인것 같은데 이해가 안됩니다
- 미해결처음 만난 리액트(React)
Notification 생명주기 출력에 대한 질문
안녕하세요, Notification 예제를 풀다가 질문이 생겨 질문드립니다. 다른 수강생분께서 올려주신 질문에 대한 답을 읽고 제 코드가 잘못된거 같아서 질문드립니다!소플님께서 설명해주신 것에 따르면, 1번과 2번이 mount가 되면, 재랜더링이 일어나면서 1번이 update가 된다. 또한 1, 2번이 mount된 시점에 3번이 마운트가 되면 1, 2번이 재랜더링이 일어나면서 update하며, 1, 2, 3번이 모두 마운트 된 이후에는 재랜더링이 아닌 unmount가 실행되는 순서라고 봤습니다.하지만 제 코드의 로그를 보면 이 순서가 아닙니다, 혹시 mount-update-unmount의 실행되는 순서가 임의로 바뀔수가 있는지 아니면 단순히 제 코드의 문제인건지 궁금합니다.또한 else{} 구문에 배열을 초기화 시켜주는 코드를 넣으면 Notification3번은 실행되지도 않은채 배열이 초기화 되어버립니다. 이건 왜 그런건지 궁금합니다.
- 미해결처음 만난 리액트(React)
3강 JSX 코드 작성 에러
안녕하세요, 강의 영상을 토대로 .jsx 파일을 chapter_03 폴더에 생성했는데요 영상 속 코드 사진과 다르게 파일을 인식하지 못하는것 같습니다. 이건 어떻게 해결해야할까요?
- 미해결처음 만난 리액트(React)
2강 (실습) style.css를 index.html에 연동하기
안녕하세요! 이제 막 리액트를 배우기 시작한 학생입니다. 다름이 아니라 아주 기초적인 부분인데 .css 파일이 html에 적용되지 않아서요. 이미 질문하기 전에 찾아본 방법으로, 캐시 삭제하기 및 강력 새로고침하는 방법과 herf="styles.css?ver=2"이렇게 새로운 파일임을 인식시켜주는 방법도 사용해보았지만 적용이 되지않습니다. 혹시 이럴땐 어떻게 해야할까요?