무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 만난 리액트(React)
chapter_04 시계만들기에서 오류가 납니다ㅠㅠ
설명보고 따라하였는데 시계가 아닌 오류문구만 뜹니다..무엇이 문제일까요?ㅠㅠ
- 해결됨처음 만난 리액트(React)
context 질문 드립니다
안녕하세요 소플님1 context가 여러 컴포넌트에 접근을 할 수 있다고 하셨는데context는 상태 관리인건가요? 2 현업에서는 스타일 컴포넌트와 scss 중 어느걸 어 많이 사용 하나요?
- 해결됨처음 만난 리액트(React)
미니블로그
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 마지막 미니블로그 테스트만 남았는데코드를 깃헙에서 그대로 가져와 복붙을 하고 실행해도 사파리에서는 null is not an object크롬에서는 Cannot read properties of null (reading 'useContext') TypeError: Cannot read properties of null (reading 'useContext') 오류가 뜹니다 어떻게 해야 할까요?
- 해결됨처음 만난 리액트(React)
useEffect() 안에 함수를 정의하는 이유가 무엇인가요?
안녕하세요, 소플님.챕터 7 나만의 훅 만들기를 공부하다가 궁금한 점이 있어서 질문드립니다. 228쪽 커스텀 훅 추출하기 예제 코드에서function useUserStatus(userId) { //... useEffect(() => { function handleStatusChange(status) { //... } //... }) //... }이런 식으로 useEffect 안에 handleStatusChange 함수를 정의하셨는데,useUserStatus 바로 아래에 정의하지 않고 useEffect 안에 정의하신 이유가 있을까요?어떤 상황에서 useEffect 안에 함수를 정의해야 하는 것인지 궁금합니다. 감사합니다.
- 미해결처음 만난 리액트(React)
섹션0의 3번째, 자바스크립트의 연산자 강의 내용에 오류가 있습니다.
이 부분에서 a -= b와a /= b 부분의 정답을 보여주는 주석에 오류가 있어 문의드립니다. 각각 -2와 0.5가 맞는 답일까요?답변 부탁드립니다!!:)
- 미해결처음 만난 리액트(React)
미니 프로제트에서 map의 요소를 왜 찾지 못하는지 모르겠습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 미니 블로그 실습을 진행하던 중 위와 같은 오류를 발견하였습니다. commentList 파일의 map함수를 보았는데, 분명 배열이여서 map함수가 실행이 되어야 하는데 찾이 못하더라구요 import React from "react"; import styled from "styled-components"; import CommentListItem from "./CommentListItem"; const Wrapper = styled.div` display: flex; flex-direction: column; align-item: flex-start; justify-content: center; & > * { :not(:last-child){ margin-bottom: 16px; } } `; function CommentList(props){ const { comments } = props; return ( <Wrapper> {comments.map((comment, index) => { return <CommentListItem key={comment.id} comment= {comment}/> })} </Wrapper> ) } export default CommentList;혹시 힌트를 알 수 있을까요?
- 해결됨처음 만난 리액트(React)
변경된 input 값이 텍스트로 보이지 않습니다.
개발자 도구로 보면 섭씨에 값 입력 시 화씨 input에도 값이 담기고 변하는데 텍스트는 보이지 않습니다...찾아보니 <input value="{props.temperature}"> 대신 <input defaultValue="{props.temperature}"> 를 쓰면 된대서 defaultValue를 쓰면 텍스트가 잘 나옵니다...아래 사진은 <input defaultValue={props.temperature}>으로 수정했을 때 입니다. 왜 <input value=""> 대신 <input defaultValue="">를 사용해야 정상적으로 나오는지 궁금합니다. TemperatureInput.jsxconst scaleNames = { c: "섭씨", f: "화씨", }; function TemperatureInput(props) { const handleChange = (event) => { props.onTemperatureChange(event.target.value); }; return ( <fieldset> <legend>온도를 입력해주세요(단위: {scaleNames[props.scale]})</legend> <input vaule={props.temperature} onChange={handleChange} /> </fieldset> ); } export default TemperatureInput; Calculator.jsximport React, { useState } from "react"; import TemperatureInput from "./TemperatureInput"; function BoilingVerdict(props) { //물 끓음 감지 if (props.celsius >= 100) { return <p>물이 끓습니다.</p>; } return <p>물이 끓지 않습니다.</p>; } function toCelsius(fahrenheit) { //화씨 계산 함수 return ((fahrenheit - 32) * 5) / 9; } function toFahrenheit(celsius) { //섭씨 계산 함수 return (celsius * 9) / 5 + 32; } function tryConvert(temperature, convert) { const input = parseFloat(temperature); if (Number.isNaN(input)) { return ""; } const output = convert(input); //섭씨 or 화씨로 변환 const rounded = Math.round(output * 1000) / 1000; return rounded.toString(); } function Calculator(props) { const [temperature, setTemperature] = useState(""); const [scale, setScale] = useState("c"); const handleCelsiusChange = (temperature) => { setTemperature(temperature); setScale("c"); }; const handleFahrenheitChange = (temperature) => { setTemperature(temperature); setScale("f"); }; const celsius = scale === "f" ? tryConvert(temperature, toCelsius) : temperature; const fahrenheit = scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature; return ( <div> <TemperatureInput scale="c" temperature={celsius} onTemperatureChange={handleCelsiusChange} /> <TemperatureInput scale="f" temperature={fahrenheit} onTemperatureChange={handleFahrenheitChange} /> <BoilingVerdict celsius={parseFloat(celsius)} /> </div> ); } export default Calculator;
- 미해결처음 만난 리액트(React)
스타일콤포넌트 스크립트의 색상 다르게 보이는 부분 문의 드립니다.
스타일콤포넌트 작성 부분에 백틱 다음 문자열 작성에 소플님의 VS 화면의 css 스타일 코드 부분이 하늘색(?)과 노랑색, 갈색으로 보여서 가독성이 좋아 보입니다.그런데 저는 백틱 다음의 문자열이 모두 갈색으로 보이는데 VS환경설정 기능에 뭔가 있는 건가요?다른 부분은 색깔 구분에 잘되어져 보이는데, 유독 스타일콤포넌트의 백틱 부부분만 색상 구분이 안됩니다.
- 미해결처음 만난 리액트(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\이민준>