55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트 A-Z
create-react-app 관련
npx create-react-app 이렇게 만들면 src폴더 없이 만들어지더라구요 그래서 그냥 npx 없이 만드니까 정상적으로 잘 만들어지는데 npx가 있는거와 없는거의 차이점이 뭔지 궁금합니다
- 미해결따라하며 배우는 리액트 A-Z
css를 불러오지 않아도 클래스 이름을 부여하여 스타일이 가능한가요?
useParams를 이용한 영화 상세 페이지 구현 파트8분 45초에서 css 파일을 불러오지 않고도modal__poster-img 클래스 이름을 부여하자 스타일이 반영되는 것을 확인할 수 있었습니다왜 이렇게 되는 걸까요?
- 미해결따라하며 배우는 리액트 A-Z
todoData.map 화살표 함수 질문
[JSX Key 속성 이해하기] 파트에서는 todoData에 map 메서드를 사용할 때 this.todoData.map((value) => ( <div style={this.getStsyle()} key={value.id}> <input type="checkbox" defaultChecked={false} /> {value.title} <button style={this.btnStyle}>X</button> </div> ))로 return 없이 사용하셨는데 전 기존에는 this.todoData.map((value) => { return ( <div style={this.getStsyle()} key={value.id}> <input type="checkbox" defaultChecked={false} /> {value.title} <button style={this.btnStyle}>X</button> </div> ) })이렇게 사용했습니다 둘다 정상 동작하는데 차이점이 뭔지 궁금합니다
- 미해결따라하며 배우는 리액트 A-Z
PostDetailPage params 이 어디서 온건가요?
async function PostDetailPage({ params }: any) { const post = await getPost(params.id); return ( <div> <h1>Posts/{post.id}</h1> <div> <h3>{post.title}</h3> <p>{post.created}</p> </div> </div> ); }PostDetailPage 에서 params을 콘솔에 출력하면 id값이 나오는거는 주소에서 받아오는건가요?
- 미해결따라하며 배우는 리액트 A-Z
netlify를 배포를 했는데 문제 생겼습니다
netlify를 배포 했는데 경고와 빌드 문제 인 것 같습니다 어떻게 하면 될까요?
- 미해결따라하며 배우는 리액트 A-Z
Netlify 배포 가능할까요?
혹시 넷플릭스로 Netlify 배포 가능할까요?
- 미해결따라하며 배우는 리액트 A-Z
process.env.REACT_APP_MOVIE_DB_API_KEY를 찾지 못하고 있어요
.env 생성하고 axios.js에서 process.env.REACT_APP_MOVIE_DB_API_KEY를 찾지 못하고 있어요process.env.REACT_APP_MOVIE_DB_API_KEY=00000000
- 미해결따라하며 배우는 리액트 A-Z
폐쇄망에서 package 추가
구글링을 해서 폐쇄망에 react 프로젝트를 어찌어찌 설치를 했습니다.정상적으로 실행도 되고 프로그래밍도 가능합니다.근데, 중간에 패키지를 추가하려고 인터넷이 가능한 곳에서 패키지를 추가해서옮겨보려 했으나 잘 안되더군요.폐쇄망에서 패키지 추가는 어떻게 해야 하는지 도움 부탁드립니다.
- 해결됨따라하며 배우는 리액트 A-Z
NestJS 13에서의 컴포넌트 관리
안녕하세요! NextJS 13 강의를 듣는 과정에서 궁금증이 생겨 질문 드립니다.기존의 React 같은 경우에는 컴포넌트에 path를 지정하여 라우팅하는 방식으로 코드를 작성해나갔었던 것 같은데요,NextJS의 경우 about 페이지를 만들기 위해 about.tsx를 작성함으로써 라우팅을 구현하고, NextJS 13의 경우 디렉토리를 path 구조로 작성하여 라우팅을 구현하는 것으로 이해했습니다.React에서는 컴포넌트에 일일이 라우팅 path를 정해주기 때문에, 재사용 가능한 컴포넌트로 독립적으로 사용할 수 있었던 것 같은데 NextJS의 경우 재사용 컴포넌트를 어떻게 관리하는지 궁금하여 질문 드립니다.또한 리액트 version 18에서 Suspense를 통한 서버사이드렌더링이 SEO에 영향을 미치는지, 혹시나 SEO를 개선할 수 있다면 NextJS를 사용하지 않고 React 만으로 최적화된 앱을 만들 수 있는지 추가적으로 질문 드립니다.좋은 강의 덕에 열심히 듣고 있습니다. 질문 읽어주셔서 감사합니다!
- 해결됨따라하며 배우는 리액트 A-Z
react-netflix-clone 작성 후 github에 배포 후 브라우저 접속 시 콘솔 에러입니다.
https://metlin-72.github.io/react-netflix/ 접속 시 아래와 같이 에러가 납니다.===========================================================metlin-72.github.io/:1 GET https://metlin-72.github.io/static/js/main.5bcb49d4.js net::ERR_ABORTED 404metlin-72.github.io/:1 GET https://metlin-72.github.io/static/css/main.10fc3cf1.css net::ERR_ABORTED 404manifest.json:1 GET https://metlin-72.github.io/manifest.json 404manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.===========================================================뭘까요? 여러번 반복해서 똑같이 따라했는데 안되네요.도움 부탁드립니다.
- 미해결따라하며 배우는 리액트 A-Z
컴파일 에러
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. const movieId = request.data.result[Math.floor(Math.random() * request.data.results.length)].id; 부분 작성 후 컴파일 시 리액트에서 Cannot read properties of undefined 에러가 발생합니다. 하나가 아니라 여러개 발생하는데 조치방법이 있을까요?
- 미해결따라하며 배우는 리액트 A-Z
리액트가 계속 로딩만되고 창이안떠요
강의 다잘따라왔는데 ㅠㅠ 왜이러죠 ? 컴퓨터를껏다켜도이래요 파일에 에러는 없습니다
- 미해결따라하며 배우는 리액트 A-Z
Banner.css가 안보이네요!
css가 전체적으로 안보여줘서 작성을 못했네요ㅜㅜ 파일 부탁드립니다.
- 미해결따라하며 배우는 리액트 A-Z
setValue가 함수가 아니라는 오류 발생
TailwindCss 적용하기 실습 중 발생한 문제입니다.setValue is not a function TypeError: setValue is not a function at handleChange (http://localhost:3000/static/js/bundle.js:167:5) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:11038:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:11082:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:11139:35) at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:11153:29) at executeDispatch (http://localhost:3000/static/js/bundle.js:15297:7) at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:15323:11) at processDispatchQueue (http://localhost:3000/static/js/bundle.js:15334:9) at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:15343:7) at http://localhost:3000/static/js/bundle.js:15503:16이러한 오류가 발생하였습니다.아래는 코드입니다.지난 시간에서 딱히 바꾼게 없는데 오류의 원인을 잘 모르겠어서 질문드립니다.App.jsimport React, {useState} from "react"; import "./App.css"; import List from "./components/List"; import Form from "./components/Form" export default function App (){ const [todoData, setTodoData] = useState([]); const [value,setValue] = useState(""); const handleSubmit = (e) =>{ e.preventDefault(); // 전송시 페이지 새로고침 방지 함수 let newTodo = { id : Date.now(), title: value, completed : false }; // 새로운 할 일 데이터의 형성 setTodoData(prev => [...prev,newTodo] ) setValue("") // 원래 할 일에 새로운 할 일 데이터의 update 해주는 setState 함수 } const btnStyle = { color: "#fff", border: "none", padding : "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } return( <div className="container"> <div className='todoBlock'> <div className="title"> <h1>To do list</h1> </div> <h1 className='text-3xl font-bold underline'>Hello world!</h1> <List todoData= {todoData} setTodoData = {setTodoData}/> <Form handleSubmit = {handleSubmit} value ={value} setValue = {setValue}/> </div> </div> ); }list.jsimport React from 'react' export default function List({todoData , setTodoData}) { const btnStyle = { color: "#fff", border: "none", padding : "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } const handleClick = (id) => { let newTodoData = todoData.filter(data => data.id !== id) console.log('newTodoData',newTodoData); setTodoData(newTodoData); } const getStyle = (completed) => { return { padding : "10px", borderBottom: "1px #ccc solid", textDecoration: completed ? 'line-through' : 'none', } } const handleCompleteChange = (id) => { let newTodoData = todoData.map(data => { if (data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData); }; return ( <div> {todoData.map((data)=>( <div style = {getStyle(data.completed)} key = {data.id}> <input type = "checkbox" defaultChecked = {false} onChange = {() => handleCompleteChange(data.id)}/> {data.title} <button style = {btnStyle} onClick = {() => handleClick(data.id)}>X</button> </div> ))} </div> ) }form.jsimport React from 'react' export default function Form(handleSubmit,value,setValue) { const handleChange = (e) =>{ setValue(e.target.value); } return ( <form style = {{display:"flex"}} onSubmit = {handleSubmit}> <input type = "text" name = "value" style = {{flex: '10', padding :'5px'}} placeholder = "해야 할 일을 입력하세요." value ={value} onChange ={handleChange} /> <input type = "submit" value = "입력" className="btn" style ={{flex:'1'}} /> </form> ) }
- 미해결따라하며 배우는 리액트 A-Z
영상에서 사용하신 커맨드가 궁금합니다.
섹션 2 할 일 목록 추가하기 영상 3분 4초 부분에서Ctrl + K + F가 아니라면 어떤 커맨드 사용하신 건지 알 수 있을까요?
- 미해결따라하며 배우는 리액트 A-Z
데이터가 2번 호출되는 문제
동일하게 코드를 작성해보았는데 fetchPosts 함수가 2번 실행되어 포스트 리스트에 데이터가 2번 중복으로 들어갑니다.강의에서도 19분 12초를 보니 2번 호출이 되는 것으로 보입니다. useEffect(() => { dispatch(fetchPosts()); }, [dispatch]);이 부분이 2번 실행되는 문제 같아서 버튼 클릭할 때 fetchPosts 함수를 dispatch하는 방식으로 바꾸었더니 데이터가 1번만 요청됩니다. const handleClick = () => { dispatch(fetchPosts()); };useEffect를 사용해서 페이지 접속 시 자동으로 데이터가 1번만 호출되게 하고 싶은데 어떻게 수정해야 할까요? useEffect(() => { dispatch(fetchPosts()); }, []);이렇게 수정해도 2번 실행됩니다..ㅠㅠ
- 미해결따라하며 배우는 리액트 A-Z
axios 설치 오류
안녕하세요!npm install axios --save 명령어로 axios를 설치하였는데이런 문구가 나왔습니다. 혹시 설치가 안된것인가요? 그 이후에 수업을 진행하여"이미지 배너 만들기" 수업을 듣고 코드를작성 후 실행을 하니 영화에 정보가 나오지 않고이런 오류들이 나옵니다.api 키도 사이트에서 잘 가져왔는데.. 혹시 axios 설치가 안되어서 나오는 오류 일까요?
- 미해결따라하며 배우는 리액트 A-Z
window.removeEventListener("scroll", () => {});
안녕하세요 강사님🙇♀️다름이 아니라, removeEventListener와 관련되어 질문이 있습니다. 1. window.removeEventListener("scroll", () => {});에서 함수 부분에 아무것도 적어주지 않았는데, 빈 함수를 전달한다면 어떤걸 의미하는건가요? addEventListener과 같은 함수를 적어줘야 하지 않나요?처음 리액트를 공부하는 거라, 많이 부족합니다ㅠㅠ 바쁘시겠지만 도움주시면 감사하겠습니다!(아래는 참고자료 겸 전체코드 첨부드립니다.)import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import "./Nav.css"; export default function Nav() { const [show, setShow] = useState(false); const [searchValue, setSearchValue] = useState(""); const navigate = useNavigate(); useEffect(() => { window.addEventListener("scroll", () => { console.log("window.scrollY", window.scrollY); if (window.scrollY > 50) { setShow(true); } else { setShow(false); } }); return () => { window.removeEventListener("scroll", () => {}); }; }, []); const handleChange = (e) => { setSearchValue(e.target.value); navigate(`/search?q=${e.target.value}`); }; return ( <nav className={`nav ${show && "nav__black"} `}> <img alt="Netflix logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/170px-Netflix_2015_logo.svg.png" className="nav__logo" onClick={() => (window.location.href = "/")} /> <input value={searchValue} onChange={handleChange} className="nav__input" type="text" placeholder="영화를 검색해주세요." /> <img alt="User logged" src="https://occ-0-4796-988.1.nflxso.net/dnm/api/v6/K6hjPJd6cR6FpVELC5Pd6ovHRSk/AAAABbme8JMz4rEKFJhtzpOKWFJ_6qX-0y5wwWyYvBhWS0VKFLa289dZ5zvRBggmFVWVPL2AAYE8xevD4jjLZjWumNo.png?r=a41" className="nav__avatar" /> </nav> ); }
- 미해결따라하며 배우는 리액트 A-Z
useParams를 이용한 영화 상세 페이지 구현하기
useParams를 이용한 영화 상세 페이지 구현하기에서 가져올 useParams에 파라미터 값이 movieId인 것을 어떻게 확인할 수 있을까요 ?
- 미해결따라하며 배우는 리액트 A-Z
react18 종속성 에러
강사님 안녕하세요~@[참조] 리액트 모듈 설치 시 나는 종속성(dependency) 에러 해결 방법 에서 강사님이 알려주신 방법으로 했는데도 npm audit fix 관련 에러가 자꾸 떠서 질문 드립니다.제가 시도해본 방법은 1. 리액트 버전 낮추기npm install react@^17.0.1 react-dom@17.0.1 --legacy-peer-depsnode_modules, package-lock.json 삭제 후 재설치 해보았으나 그래도 npm audit fix 발생, npm audit fix --force입력해보았으나 동일한 에러 발생yarn install 설치해보았으나 실패아래 시도 또한 실패npm install module --save -f -f어떻게 해야 이 문제에서 벗어날 수 있을까요 강사님...node_modules, package-lock.json 삭제 후 재설치를 해봐도 자꾸 에러가 발생해서요ㅠ 구글링을 해봐도 모르겠습니다 뭘 빼먹은 걸까요... 자세히 알려주실 수 있을까요.....혹시 강의 버전 정보가 따로 기재되어 있을까요..?