무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨처음 만난 리액트(React)
마지막 강의를 들으며 실행하는 부분에서 에러가 뜹니다.
해당 키워드에서 오류가 났다고 뜨는데 잘못된 부분이 없는것 같아 문의드립니다.
- 미해결처음 만난 리액트(React)
Error : Invaild hook call
이제 마지막 강의를 듣는 중인데..코드를 다 작성한 후 앱을 실행하니 빈 화면만 뜹니다.오류 화면은 아래와 같구요.맨 처음 나온 에러가 Invaild hook call이어서Invalid Hook Call Warning – React (reactjs.org)해당 링크로 들어가 확인해봤는데,제 생각엔 Duplicate React 에러인 것 같은데 해결 방법을 모르겠어요.
- 미해결처음 만난 리액트(React)
3000번 포트를 열면 아무것도 출력되지 않습니다.
안녕하세요. 홈페이지를 만들어 볼일이 향후 있어서 소플님의 리액트강의를 인프런에서 무료로 수강하게 되었습니다. 좋은 강의를 무료로 학습할 수 있게 해주셔서 감사드립니다. (실습) JSX코드 작성하기 부분에서 문제가 생겨서 질문을 드리게 되었습니다.(제가 작성한 코드는 다음과 같습니다.) 소플님께서는 강의를 찍으실 때 프로젝트 이름을 MY-APP이라고 하신 반면에, 저는 Practice라고 한 부분만 다르게 설정했을 뿐 나머지는 같다고 생각하는데, 혹시 제가 다르게 작성한 부분이 있을까요? (npm start)를 하기 전에 cd Practice폴더로 이동후 npm start를 하면 빈화면이 출력됩니다. Book.jsx Library.jsxindex.js자바스크립트에선 문자열 포맷팅을 할 때 `(백슬래쉬)를 사용하는 부분과 라이브러리를 불러올 때 앞글자가 대문자인 점도 잘 지켰다고 생각이 드는데, 어떠한 부분이 틀린지 잘 모르겠습니다.
- 미해결처음 만난 리액트(React)
github에 강의 보면서 만든 소스 코드 등을 올려도 괜찮나요?
강의중에 나오는 실습부분 코드들을 개인 깃허브에 업로드 해도 괜찮을까요?
- 미해결처음 만난 리액트(React)
chapter-15 질문입니다
npm strat를 했는데 이렇게 뜹니다. 몇번을 코드를 고쳐봤는데도 이렇게 떠서 질문남깁니다. 코드도 올려놓겠습니다.import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey; `; const Block = styled.div ` padding: ${(props) => props.padding}; border: 1px solid black; border-radius: 1rem; background-color: ${(props) => props.backgroundColor}; color: white; font-size: 2rem; font-weight: bold; text-align: center; `; const blockItems = [ { label: "1", padding: "1rem", backgroundColor: "red", }, { label: "2", padding: "3rem", backgroundColor: "green", }, { label: "3", padding: "2rem", backgroundColor: "blue", }, ]; function Blocks(props) { return ( <Wrapper> {blockItems.map((blockItem) => { return ( <Block padding={blockItem.padding} backgroundColor={blockItem.backgroundColor} > {blockItem.label} </Block> ); })} </Wrapper> ); } export default Blocks;
- 미해결처음 만난 리액트(React)
List and Key
실습을 하고 전부 확인을 해보니 warning이 하나가 남아있는데 이건 아무리 잡아도 사라지지를 않아서 질문 남겨봅니다.
- 미해결처음 만난 리액트(React)
리액트 시작하기 부분에서 계속 막히네요 코드는 제대로 입력한거같은데 버튼이 생성이 안되고있습니다.
<html> <head> <title>이규정의 블로그</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>이규정의 블로그에 오신 여러분을 환영합니다!</h1> <div id="root"></div> <!-- 리액트 가져오기 --> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <!-- 리액트 컴포넌트 가져오기 --> <script src="MyButton.js"></script> </body> </html>function MyButton(props) { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', { onClick: () => setIsClicked(true) }, isClicked ? 'Clicked!' : 'Click here' ) } const domContainer = document.querySelector('#root'); ReactDom.render(React.createElement(MyButton), domContainer);무엇이 문제인지 봐주시면 감사드리겠습니다.
- 미해결처음 만난 리액트(React)
리액트 버전 질문
state실습 편에서 timer와 reservedNotifications가 정의되지 않았닫고 오류가 뜹니다 혹시 강의에 쓰이는 리액트의 버전이 17.몇 인가요?
- 미해결처음 만난 리액트(React)
chapter 04 실습 (Clock)부분 화면이 계속 빈 화면만 나옵니다
1초마다 옆부분 오류가 늘어가는거 보면 setInterval은 제대로 작동을 하고 있는거 같긴한데 오류를 클릭해보면 아래 부분이 오류라고 나오는데 도대체 뭐가 오류인지 잘 모르겠습니다ㅠㅠ - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결처음 만난 리액트(React)
chapter 04 화면이 계속 빈 화면만 나옵니다 ㅜㅜ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.터미널 돌리면 막상 화면에 아무것도 없는 하얀색 화면만 나와서 이게 뭐가 문제인지 알고 싶습니다....
- 미해결처음 만난 리액트(React)
섹션3에서 입력한대로 출력이 안되네요
기본 화면만 뜨고 변경한 내용으로 출력이 안돼요
- 미해결처음 만난 리액트(React)
섹션3 JSX 코드 작성해보기
이곳에서 코드를 똑같이 따라했는데 아래와 같은 오류가 뜨네요 ㅜㅜ 에러가 왜 나는지 모르겠습니다.
- 미해결처음 만난 리액트(React)
에러가 나요ㅠㅠ
에러가 나서요ㅠ
- 미해결처음 만난 리액트(React)
chapter_04 시계 만들기 화면이 안뜨네요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.강의를 따라서 코드를 작성했는데 작동을 하지 않네요 .. 오타 확인도 했는데 틀린 부분은 없는 것 같은데 뭐가 문제인지 모르겠습니다.
- 미해결처음 만난 리액트(React)
7장 Accommodate에서 화면이 아무것도
- 7장 Accommodate에서 화면에 아무것도 안보이는데.. 혹 어떤 문제인지요?
- 미해결처음 만난 리액트(React)
문법질문
Accommodate.jsx 파일에서{isFull && <p style={{ color: "red" }}>정원이 가득찼습니다.</p>} 이거 동적으로 html 생성해주는 것 같은데 이거 문법 어떻게 검색해야되나요? 처음봐서./. 자바스크립트 문법인가여? {} 안에 이렇게 들어가는거 모르겟네요
- 미해결처음 만난 리액트(React)
출력 메시지 관련
정말 기초적인 질문일수도 있는데, 섭씨 온도를 아무리 올려봐도 출력되는 메시지가 '물이 끓지 않습니다'로 나옵니다.TemperatureInput.jsxconst scaleNames = { c: '섭씨', f: '화씨', } function TemperatureInput(props) { const handleChange = (event) => { props.onTemperatureChange(event.target.value); } return ( <fieldset> <legend> 온도를 입력해주세요 (단위 : {scaleNames[props.scale]}) : </legend> <input value = {props.temperature} onChange = {handleChange} /> </fieldset> ) } export default TemperatureInput;Calculator.jsximport React, {useState} from "react"; import TemperatureInput from "./TemperatureInput"; function BoilingVerdict(props) { if (props.celcius >= 100) { return <p>물이 끓습니다.</p> } return <p>물이 끓지 않습니다.</p> } function toCelsius(fahrenheit) { return ((fahrenheit - 32) * 5) / 9; } function toFahrenheit(celcius) { return (celcius * 9) / 5 + 32; } function tryConvert(temperature, convert) { const input = parseFloat(temperature); if(Number.isNaN(input)) { return ""; } const output = convert(input); 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;어디서 잘못된걸까요? 개발자 도구에서 component를 확인해봐도 scale, temperature 값은 정확하게 들어가는 것 같습니다.
- 미해결처음 만난 리액트(React)
오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.TemperatureInput.jsx 코드Calculator.jsxindex.js이렇게 했습니다. 이렇게 할 경우,이렇게 뜨고, 저기에 입력할 경우,이런 오류가 뜹니다. 오류의 부분에서 TemperatureInput.jsx 10번째 줄이 함수로 지정되어 있지 않다는 의미를 모르겠습니다. 또한 어느 부분에서 오류가 있기에 실행 화면에서 단위: " " 이 부분(" ")에 해당 문자가 뜨지 않는지 모르겠습니다.
- 해결됨처음 만난 리액트(React)
질문 있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.onClick을 했을 때, 값이 true로 반환이 안 되어서 그 부분 코드를 보았는데, 어떤 것이 오류인지 모르겠어서 질문 드립니다! (9장) Toolbar.jsxLandingPage.jsxindex.js
- 해결됨처음 만난 리액트(React)
실행이 왜 안되는지 모르겠습니다..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.syntax 에러는 안 뜨는데, app에서 error가 뜹니다. 교재랑 같은 코드인데, 어느 부분에서 오류가 나는 걸까요..? (교재 practice 6.3입니다.)Notification.jsx NotificationList.jsxindex.js 발생하는 error