무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 만난 리액트(React)
빨간줄이 왜 싱기는지 모르겠습니다.
빨간줄은 뜨는데 왜 빌드는 되는건가요..??
- 미해결처음 만난 리액트(React)
chapter_05 오류 질문 입니다.
안녕하세요 소플님!!좋은 강의 너무 잘 듣고 있습니다. 다름이 아니라 chapter_5에서 npm start 를 하면 다음과 같이 실행이 되고 빈 화면이 뜹니다... 어떤 오류인지 찾지 못해서 질문 드립니다..!!
- 미해결처음 만난 리액트(React)
컴포넌트 재 렌더링 과정이 궁금합니다.
안녕하세요 소플님!감사하게도 강의 너무 잘 듣고 있습니다!강의에서 알려주신 Accommodate function component 코드 제일 상단에 아래 처럼 로그를 찍도록 선언을 했는데요.function Accommodate(prop) { console.log("Accommodate created!!!") const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("======================"); console.log("useEffect() is called."); console.log(`isFull: ${isFull}`); }); //이후 생략 }최초에 화면을 그린 로그는 아래처럼 나오고 있는데Accommodate created!!! ====================== useEffect() is called. isFull: false Current count value: 0 입장 버튼을 누르고난 뒤에는 Accommodate created!!!로그가 마지막에 한번씩 더 찍히더라구요.count가 변경이 됐기 때문에 Accommdate를 재렌더링 했고 그 과정에서 1번 useEffect에 선언한 함수가 호출되고count가 변경됐기 때문에 2번 useEffect에 선언한 함수가 호출되는건 알겠는데, 최상단에 작성한 로그가 다시 찍히는 이유가 어떤거 인가요??Accommodate created!!! ====================== useEffect() is called. isFull: false Current count value: 1 Accommodate created!!!재렌더링이 또 된거라고 봐야하는걸까요..?!
- 미해결처음 만난 리액트(React)
실행이 잘 되지않습니다.
안녕하세요 import문에서 일부 입력하면 뒤에 경로가 자동으로 생성되는 부분에서 자꾸 소문자로 변하길래 수정해 주니 빨간 줄이 뜹니다. 또한 경로의 대소문자에 상관없이 실행이 어렵습니다. 확인 부탁 드립니다. 코드와 오류 나는 부분 첨부 합니다. Book.jsximport React from "react"; function Book(props){ return( <div> <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1> <h2>{`이 책은 총 ${props.numOfPage}로 이루어져 있습니다.`}</h2> </div> ); } export default Book;Library.jsximport React from "react"; import Book from "./Book"; function Library(props){ return( <div> <Book name="책 1" numOfPage ={100}/> <Book name="책 2" numOfPage ={200}/> <Book name="책 3" numOfPage ={300}/> </div> ); } export default Library;index.jsimport React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; // import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './ch03/Library'; ReactDOM.render( <React.StrictMode> <Library /> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
- 미해결처음 만난 리액트(React)
chapter5인데 왜 안되는지 모르겠습니다.
clock은 위에 app import문을 주석처리하고 cd my-app하고 npm start하니까 돌아가는데, 이거는 똑같이 해도 계속 안 돌아가고 오류메세지가 뜹니다. 어떻게 수정해야하나요?
- 미해결처음 만난 리액트(React)
그냥 npm start하면 돌아가지 않습니다.
npm ERR! Missing script: "start"npm ERR!npm ERR! Did you mean one of these?npm ERR! npm star # Mark your favorite packagesnpm ERR! npm stars # View packages marked as favoritesnpm ERR!npm ERR! To see a list of scripts, run:npm ERR! npm runnpm ERR! A complete log of this run can be found in:npm ERR! C:\Users\hhayo\AppData\Local\npm-cache\_logs\2023-04-01T13_55_50_978Z-debug-0.log이런 에러가 뜨는데 cd my-app을 해야만 돌아가는데 어떻게 바꿀 수 있나요? 그리고 이유가 뭔가요?
- 미해결처음 만난 리액트(React)
시계 만들기 실행이 안됩니다.
복붙해서 한건데, 실행이 안돼서 위에 import app 부분 주석처리하니까 돌아갑니다. 강사님은 안그러는데 제꺼에서는 왜 그런가요?
- 미해결처음 만난 리액트(React)
목소리 너무 좋습니다
마음이 안정 됩니다 너무 설명도 잘하고 쉽고 유료강의보다 5천억만배 최강으로 최고 입니다
- 미해결처음 만난 리액트(React)
== 와 ===
const post = data.find((item) => { return item.id == postId; });이 코드에서 왜 == 를 ===로 바꿔줬을 때는 data를 찾지 못하는 걸까요?postId 와 item.id 모두 int 값 아닌가요?
- 미해결처음 만난 리액트(React)
useContext hook
useContext hook 을 사용할때 만약 랜더링이 무거운 작업이라면 최적화를 시켜줘야한다고 하셨는데 여기서 말하는 최적화란 무엇일까요? 변수에 담아서 데이터를 사용하는게 최적화 일까요?
- 미해결처음 만난 리액트(React)
빌드 불가.. ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. node가 V18.14.2 버젼이고, npm이 9.5.0 버전인데 zsh: killed npx create-react-app ReactTest 라고 뜹니다 ㅠㅠ
- 미해결처음 만난 리액트(React)
(실습)댓글 컴포넌트 만들기 강의에서 props 관련 질문
<Comment name={"이인제"} comment={"안녕하세요, 스필입니다."}/> 이렇게 전달하는데 {}을 쓰거나 쓰지않거나 정상적으로 포트 화면에 출력이 되는데 둘의 차이가 무엇인지 궁금합니다.
- 미해결처음 만난 리액트(React)
npm start 후 빈화면
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. npm start 후 작성한 코드가 실행되지 않고 빈화면 띄는데 어떻게 해야할까요?구글링 해본 결과 package.json 파일에 "homepage="." 추가하면된다고하는데,,,(제가 참고한 블로그입니다.리액트 빌드 결과 빈화면만 보일때 - 상대경로 설정하기 (tistory.com))일단 index.html 파일에 있는 내용 첨부해드립니다.. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>
- 해결됨처음 만난 리액트(React)
메세지가뜨지 않습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.사진과 같이 뜨고 안에 텍스트가 뜨질 않아서 버전 문제인가 하여 깃허브에 올리신 18버전 코드를 붙여넣어도 텍스트만 안뜹니다..ㅠ...
- 미해결처음 만난 리액트(React)
useState 사용 질문
기초질문이지만 명확하게 이해가 가지 않아 질문드립니다 ..! (완전 초보입니다.. ㅠㅠ)Calculator function에서 temperature,scale 선언시에 useState()로 받는것은 재사용방지를 위한 hook을 사용하는 것인가요 ˀ̣
- 미해결처음 만난 리액트(React)
블로그 실습 빌드 시 오류
마지막 단계까지 마쳤는데요~ 빌드 폴더 생성 후 npm install -g serve 시에 오류가 납니다어떤 오류 인지 모르겠어서 소스 첨부 후 문의 드립니다 감사합니다~
- 미해결처음 만난 리액트(React)
CommentListItem의 props에 대한 질문입니다.
강의에서 CommentListItem 컴포넌트를 만든 후에CommentList 컴포넌트를 만들었는데,CommentListItem에서 comment를 props로 받는건CommentList에 map에서 comments에서 배열을 하나씩 뽑을 때 사용할 이름 comment를 생각해두고 CommentListItem가 comment로 명명한 props를 받는건가요? 그리고map에서 사용할 comment 처럼 쓰이는 것들도 그냥 변수라고 부르나요?index가 key 값으로 사용되지 않았는데 존재 이유는 무엇인가요?
- 미해결처음 만난 리액트(React)
Event handler 질문입니다.
변수 handleConfirm의 Arrow function이 실행하는 것은 어떤걸 받아서 무엇을 하는 건가요?prevIsConfirmed이 뭘 하는 녀석인지 모르겠습니다.
- 미해결처음 만난 리액트(React)
백틱 내부 색상
선생님처럼 백틱 내부 문자 색상이 원래 색처럼 나오게 하려 어떻게 해야하나요? 같은색이라 구분이 잘되게 보고 싶은데
- 미해결처음 만난 리액트(React)
코드 의미를 모르겠어요 react
const {comments} = props; 의미? {} 안에는 어떤 것을 넣는 것인지요? 각 항을 설명해 주세요 {comments.map((comments, index)=>{ return <CommentListitem key={comment.id} comment={comment} />; 리액트 진짜 어렵네요 CommentList.jsx 일부 입니다 function CommentList(props){ const {comments} = props; return( <Wrapper> {comments.map((comments, index)=>{ return <CommentListitem key={comment.id} comment={comment} />; })}</Wrapper> ); }