55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트 A-Z
선생님, 저는 스크롤이 안생기는데 ..
저는 왜 안생기고 태그도 div가 아닌 nav로 이미 바껴있는걸까요?ㅜ
- 미해결따라하며 배우는 리액트 A-Z
searchTerm은 계속 변경되는 값인데 useState를 사용하지 않는 이유가 뭔가요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 리액트를 배우면서 변화하는 값이라면 state를 통해 관리한다고 들었는데, 여기서 searchTerm은 state가 아닌 변수로 관리하는 이유가 무엇인가요?그리고 useQuery의 경우 useLocation을 사용하는 커스텀 훅으로써 사용된 게 맞나요?
- 미해결따라하며 배우는 리액트 A-Z
Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러
import React, {useState} from "react"; import "./App.css"; export default function App () { const [todoData, setTodoData] = useState([ { id:"1", title:"공부하기", completed: false, }, { id:"2", title:"청소하기", completed: false, } ]); const [Value,setValue] = useState(""); // 첫번째 인수는 변수 두번재 인수는 state를 정하는 변수 const btnStyle ={ color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right", }; const getStyle = (completed) => { return{ padding:"10px", borderBottom:"1px #ccc dotted", textDecoration: completed ? 'line-through' : "none", }; }; const handleClick = (id) =>{ let newTodoData = todoData.filter(data => data.id !== id) console.log("newTodoData",newTodoData) setTodoData(newTodoData); }; const handleChange = (event) => { console.log("event",event.target.Value) setTodoData(event.target.Value); }; const handleSubmit = (event) =>{ console.log("event",event) event.preventDefault(); // reload를 막아줌 // 새로운 할일 데이터 let newTodo ={ id: Date.now(), title : Value, completed: false, }; // 원래 있던 할 일에 새로운 할일을 더해주기 setTodoData(prev => [...prev,newTodo]); setValue(""); }; const handleCompleteChange = (id) => { console.log("todoData",todoData) let newTodoData = todoData.map((data) =>{ if(data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData) }; return ( <div className="container"> <div className="todoBlock"> <div className="title"> <h1>할일 목록</h1> </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> ))} <form style={{display:'flex'}} onSubmit={handleSubmit}> <input type="text" name="value" style={{flex:'10', pedding:'50'}} placeholder="해야 할 일을 입력하세요." value={Value} onChange={handleChange}/> <input type="submit" value="입력" className="btn" style={{flex:'1'}} /> </form> </div> </div> ); }아래 코드에서 form에 어떠한 글자를 입력하면 Console 창에 왜 Uncaught TypeError: Cannot read properties of undefined (reading 'map')에러가 발생하는지 도저히 모르겠습니다.혹시 아시는분 답변 부탁드립니다.감사합니다.
- 미해결따라하며 배우는 리액트 A-Z
truncate에대하여
작성을 똑바로 한 것 같은데이러한 에러가 나와서 검색결과후 truncate함수위에 //eslint-disable-next-line no-unused-vars 작성을 해주었는데import { truncate } from "fs";맨위 작성되면서이러한 에러가 나와 막혀버렸습니다... 갑자기 맨위에 import fs가 나오면서 찾을수 없어 해결이 안된다 하니 어디서 잘못된것인지 잘모르겠어서 질문을 남겨봅니다..
- 미해결따라하며 배우는 리액트 A-Z
react.memo 를 했는데 안되요 오타도 아닌데 왜그럴까요?
import React from 'react' const List = React.memo (({ id, title, completed, todoData, setTodoData, provided, snapshot }) =>{ console.log('List is Rendering'); const handleClick =(id) => { let newTodoData = todoData.filter((data)=> data.id !== id) console.log ('newTodoData', newTodoData); //this.setState({todoData: newTodoData}); setTodoData(newTodoData); }; const handleCompleteChange = (id) => { let newTodoData = todoData.map(data => { if(data.id === id){ data.completed = !data.completed; } return data; }) //this.setState({ todoData : newTodoData}) setTodoData(newTodoData); }; return ( <div key={id} {...provided.draggableProps} ref={provided.innerRef} {...provided.dragHandleProps} className={`${snapshot.isDragging ? "bg-gray-400" : "bg-gray-100"} flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 bg-gray-100 rounded`}> <div className='item-center'> <input type="checkbox" defaultChecked={completed} onChange={() => handleCompleteChange(id)}/> <span className={completed ? 'line-through' : undefined}>{title}</span> </div> <div className='item-center'> <button className="px-4 py-2 float-right" onClick={()=> handleClick(id)}>x</button> </div> </div> ) }); export default List import React from 'react' import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import List from './List'; const Lists = React.memo(({ todoData,setTodoData }) => { console.log('Lists Component'); const handleEnd = (result) => { console.log('result', result); if(!result.destination) return; const newTodoData = todoData; //1. 변경시키는 아이템을 배열에서 지워줍니다. //2. return 값으로 지워진 아이템을 잡아줍니다. const [reorderedItem] = newTodoData.splice(result.source.index, 1); //3. 원하는자리에 reorderedItem을 insert 해줍니다. newTodoData.splice(result.destination.index, 0, reorderedItem); setTodoData(newTodoData); }; x return ( <div> <DragDropContext onDragEnd={handleEnd}> <Droppable droppableId='todo'> {(provided) => ( <div {...provided.droppableProps} ref={provided.innerRef}> {todoData.map((data, index) => ( <Draggable key={data.id} draggableId={data.id.toString()} index={index} > {(provided, snapshot) => ( <List key={data.id} id={data.id} title={data.title} completed={data.completed} todoData={todoData} setTodoData={setTodoData} provided={provided} snapshot={snapshot} /> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div> ); }); export default Lists
- 미해결따라하며 배우는 리액트 A-Z
getStaticProps, getStaticPaths에 대한 질문이 있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.수업 잘 듣고 있습니다. 감사합니다. 두 가지 질문이 있습니다.getStaticProps, getStaticPaths 캐싱에 대한 질문서버사이드렌더링 방식은 사용자가 페이지 접속(요청) 시, 서버는 클라이언트가 요청할 때 해당 페이지를 빌드해서 사용자에게 html 파일로 넘겨주는 방식인가요?이런 질문을 하는 이유는 getStaticProps, getStaticPaths 함수에 대한 설명에서 이해가 안 가는 부분이 있었기 때문입니다.위의 두 함수 내에서 fetch api 사용하면, 빌드 시에 해당 함수 내의 fetch api를 호출하고 그때 응답 받은 데이터를 가지고 HTML을 그리고 해당 페이지를 캐싱하고 있다라고 이해했는데요. 그렇다면 현재 서버가 가지고 있는 페이지 정보는 과거의 것이고 (일정 시간 뒤에) 기존 페이지에 표현된 (갱신된) 데이터를 표현할 수는 없는 것인가요? getStaticProps, getStaticPaths api 요청 부분에 대한 질문getStaticProps에서 post에 전체에 대해 api 요청을 하고 getStaticPaths에서 정해진 params에 대해 다시 api 요청을 하는데요. 어떻게 보면 두 번의 api 호출이 있는 것인데요. 무조건 전체 post 요청 후에 프리 렌더링을 위해 정해진 params에 대한 post를 개별적으로 또 api 요청하는 방법 밖에 없는 것인가요?
- 미해결따라하며 배우는 리액트 A-Z
도커 관련 질문
pdf 를 보며 ec2에 배포하는 부분을 보려고 하는데요,docker-compose 부분(후반) pdf가 깨진 것 같아서요!혹시 저만 깨진걸까요? 마지막 pdf 파일 마지막 부분입니다!
- 미해결따라하며 배우는 리액트 A-Z
fetchNetflixOriginals에서 with_networks의 id값은 어떻게 찾을 수 있을 까요?
안녕하세요 Docs를 보면서 같이 진행중인 학생입니다.Docs를 개인적으로 찾아봐도 제 스스로가 networks id값에 대한 리스트를 따로 찾을 수 없어서 질문드립니다.https://developers.themoviedb.org/3/networks/get-network-details 에서 network를 id값으로 어떤 네트워크인지 알려주는 API가 존재하는데, 이처럼 하나하나 넣어서 원하는 network인지를 찾아야하나요.?강사님께선 어떻게 찾았는지 궁금합니다.
- 미해결따라하며 배우는 리액트 A-Z
영화 나열 강의 css
영화 나열 부분에서 css 부분이 수업자료에 안보여서요 css 부분을 보면서 공부하고 싶은데 어디에도 없어서 문의드립니다 .(드라이브 원본에도 안보입니다 .. ㅜ)
- 미해결따라하며 배우는 리액트 A-Z
배너 관련질문
iframe 부분에서 밑에는 코드 <Iframe width="560" height="315" title="YouTube video player" frameBorder="0" src={`https://www.youtube.com/embed/${movie.videos?.key}?controls=0&autoplay=1&loop=1&playlist=${movie.videos.results[0]?.key}`} frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen /> 1. 원래 강사님이 설명하신걸로는 movie.results.videos .. 이렇게 되어있는데 콘솔에 usState의 movie 안에 results내용과 같더라구요 그안에 video 내용도 들어가있어서 저렇게 바꿨는데 가능한건가요 ? 영화에 video: false이면 비디오의 키가 없다는말인건가요 ?( 제가 받은 모든 영화가 video가 false라서 확인이 안되서요 ..)
- 미해결따라하며 배우는 리액트 A-Z
이미지 배너 만들기
이미지 배너 만들기 강의중에 배너 css 부분이 다운받은 자료에도 소개해주신 드라이브에 가서 다운받아도 그부분만 안보이는데 어디가서 볼수 있는 걸까요 ? 밑에 화면처럼 저부분만 짤려서 안보입니다
- 미해결따라하며 배우는 리액트 A-Z
Jest는 행위 또는 구현 주도 테스트 중에 어떤 것일까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.행위 또는 구현 주도 테스트의 대표적인 라이브러리를 듣고 그 뒤에 Jest 프레임워크에 대해 설명해주셨는데요.Jest는 행위 또는 구현 주도 테스트 중에 어떤 것인지 궁금합니다. 아니면 아예 다른 의도로 만들어진 프레임워크라고 생각하면 될까요?
- 미해결따라하며 배우는 리액트 A-Z
nextjs의 <Link> 관련 질문입니다.
안녕하세요.강의를 보면<Link href={`/posts/${id}`}> <a> {title} </a> </Link>이런식으로 작성되어 있는데요,에러를 확인해보면 <Link> 태그 안에 <a>태그가 포함되어 있어서라고 나오더라구요<a>태그를 지우면 되긴하는데, 혹시 nextjs 버전의 차이 때문일까요?
- 미해결따라하며 배우는 리액트 A-Z
깃허브에 배포
안녕하세요 선생님빌드 후에도 homepage나 라우터에도 잘 못작성해서 몇 번 수정하고 push한담에 다시 npm run build => npm run deploy했는데요.bulid폴더 생기고 Published도 생겼는데 url 들어가보니까 요로케 나와용...참고로 h1에 있는 글은 제가 readme.에 적었던 부분이거든요..? 빌드된 index.html도 이것뿐이더라고요 ㅠㅠㅠ<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/react_neflix/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="/react_neflix/logo192.png"/><link rel="manifest" href="/react_neflix/manifest.json"/><title>React App</title><script defer="defer" src="/react_neflix/static/js/main.822d346e.js"></script><link href="/react_neflix/static/css/main.d2a42970.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> 처음 배포 해보는건데 어떤게 잘 못된건지 감을 못잡겠습니다... 도와쥬세영
- 미해결따라하며 배우는 리액트 A-Z
안녕하세요 선생님
존안 선생님 강의를 듣고있는 학생입니다다름이 아니라 혹시 선생님의 기존강의인 보일러플레이트와 유튜브, 쇼핑몰 등등 강의는 업데이트 하실 계획이 있으신지 궁금합니다항상 좋은 강의 올려주셔셔 감사드립니다...
- 미해결따라하며 배우는 리액트 A-Z
디렉토리 구조 질문
react에서 디렉토리 이름에 2단어 이상인경우 카멜케이스로 해야 좋은지 다른 분들이 많이 사용하는 방식이 어떤건지 알고 싶습니다.SideBar가 2단어로 되어 있다고 했을때 어떤 방식을 많이 사용하는지 궁금합니다.src/components/Main/SideBar/SideBarNav.tsxsrc/components/main/sideBar/SideBarNav.tsxsrc/components/main/side-bar/SideBarNav.tsx
- 미해결따라하며 배우는 리액트 A-Z
Property '' does not exist on type 'any[]' 질문 드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. movie 데이터를 받아 오고 setMovie를 한 후에 ex)<h1 className='absolute top-10 left-10 w-10 h-10 text-white-100'>{movie.name}</h1> 와 같이 사용할 때 Property 'name' does not exist on type 'any[]'.ts(2339)와 같은 오류가 발생합니다. ts를 사용하지 않는데도 불구하고요..이런 경우 어떻게 해결 할까요?
- 해결됨따라하며 배우는 리액트 A-Z
이 강의를 듣고나서
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.이 강의를 모두 수강하고 다음 강의로 선생님이 개설하신 강의를 들으려고 하는데 이 강의를 다 듣고 아래 강의를 듣는데 혹시 순서가 괜찮을까요??? 다른 선생님의 강의를 듣고 아래 강의를 수강하는게 나을까요??
- 미해결따라하며 배우는 리액트 A-Z
슬라이드 부분에서 작동하지 않습니다...
영화를 슬라이드 부분에서 슬라이드 기능이 작동하지 않아 영상을 반복 시청과 똑같이 따라했는데도 안되어 조심스럽게 여쭈어 봅니다.... 대체 문제점이 무엇일까요??..저장소와 함께 보내드립니다.. https://github.com/ee5201/react_Nefliex/tree/main/src
- 미해결따라하며 배우는 리액트 A-Z
useState([])는 객체도 ㄱ
안녕하세요.netflix banner.js부분인데요 movieDetail는 객체인데 useState에 배열로 하는이유를 모르겠어요 ㅠㅠ