55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트 A-Z
rows 까지 생성했는데 랜더링 되다가 모든게 사라져요.
rows 까지 따라했는데 새로고침할때 화면이 잠깐 나오다 사라져요. 화면이 아무것도 나오지 않네요.
- 미해결따라하며 배우는 리액트 A-Z
Drag and Drop 잘 따라했는데... 작동이 안됩니다.
index.js에서 React.StrictMode를 제거를 하여도 작동이 안됩니다...ㅠㅠㅠ 그래서 그냥 넘어가면서 공부하자 해서 handleEnd도 동일하게 작성한거 같은데 이제는 화면에 보이지도 않습니다... 혹시 문제가 무엇일까요...ㅠㅠㅠ import React from 'react';import {DragDropContext,Draggable,Droppable} from "react-beautiful-dnd";export default function list({todoData,setTodoData}) { const handComplete =(id)=>{ let newTododata = todoData.map(data => { if(data.id ===id){ data.completed = !data.completed; } return data; }) setTodoData(newTododata); } const handClick=(id)=>{ let newTododata = todoData.filter((data) => data.id !== id) setTodoData(newTododata); } const handleEnd=(result)=>{ if(!result.destination) return; //리액트 불변성을 지켜주기 위해 새로운 todoData 생성 const newTododata = todoData //1. 변경시키는 아이템을 배열에서 지워줍니다. //2. return 갑으로 지워진 아이템을 잡아줍니다. const [reorderedItem] = newTododata.splice(result.source.index,1); //원하는 자리에 reorderedItem을 insert 해줍니다. newTododata.splice(result.destination.index,0,reorderedItem); setTodoData(newTododata); } return ( <div> <DragDropContext onDragEnd={handleEnd()}> <Droppable droppableId="todo"> {(provided) => ( <div {...provided.droppableProbs} ref={provided.innerRef}> {todoData.map((data,index) =>( <Draggable key={data.id} draggableId={data.id.toString()} index={index} > {(provided, snapshot)=>( <div key={data.id} {...provided.droppableProbs} ref={provided.innerRef} {...provided.dragHandleProps} className={`${ snapshot.isDragging ? "bg-gray-400" : "bg-gray-100"} flex items-center justify-between w-full px-4 my-2 text-gray-600 border rounded `} > <div className='items-center'> <input type="checkbox" defaultChecked={false} onChange={()=> handComplete(data.id)}/>{" "} <span className={data.completed ? "line-through" : undefined}>{data.title} </span> </div> <div> <button className='px-4 py-2 float-right' onClick={()=>handClick(data.id)}>x</button> </div> </div> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div> ); }
- 해결됨따라하며 배우는 리액트 A-Z
nextJS typescript 부분 메인페이지 ui
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.이 부분에서 저는 npm 설치 후에 index.tsx파일이 아래와 같은 형식으로 자동생성 되는데 강의영상에는 다르게 나오더라구요.. 혹시 이 부분이 어떤 차이인지 다름으로 인해서 문제가 되는지 알 수 있을까요??강의 영상 부분
- 미해결따라하며 배우는 리액트 A-Z
s3 배포시 Re-run all jobs 버튼 부재
Re-run all jobs 버튼이 없어서 node.js에서 오류가 발생하는데 혹시 어떻게 해야할까요?
- 해결됨따라하며 배우는 리액트 A-Z
넷플릭스 강의를 다듣고 궁금한점이있어 질문드립니다!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 넷플릭스 로고를 누르면 새로고침이 아닌 검색페이지와 같은 다른 페이지에서 메인페이지로 다시오게 하려면 어떻게 해야할까요?? (제가 react-router-dom에 아직 이해를 못한거 같습니다.)검색페이지에서 검색을 하고 뒤로가기버튼을 누르면 타이핑한 글자 하나 하나씩 뒤로가기가 되는데 이걸 뒤로가기 했을때 바로 그 뒤에 페이지인(현재는 메인페이지로) 이동을 하려면 어떻게 해야 할까요?
- 미해결따라하며 배우는 리액트 A-Z
혹시 이러한 오류들이 왜 뜨는지 알 수 있을까요??
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.위와 같은 오류와위 오류는 swiper 강의를 듣고 소스를 추가하니까 생겼습니다.기존의 소스로 하면 저 오류가 안뜨는데 단지 swiper 소스를 추가하니까 위와 같은 오류가 뜹니다..ㅠ이러한 오류들이 뜨는데 시스템에는 지장이 없는 상황이라 뇁두고 있습니다.혹시 이유를 알 수 있을까요??
- 해결됨따라하며 배우는 리액트 A-Z
navigte 질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 항상 답변해주셔서 감사합니다.다름이 아니라 혹시 강의에서이 부분에서 꼭 /search?q= 의 형식으로 해야하는 건가요? 어떠한 정해진 양식인건가요??뒷부분에서 useLocation으로 해당 값을 확인하고 search부분을 가져와 search부분에서 q= 다음의 값을 가져오기 위해 query.get("q")를 하셨는데handleChange에서 저희가 만든 /search?q=에 의해서 값을 저런 형식으로 가져온건가요?? 어떻게 navigate에서 저 위의 경로로 저희가 만든 searchPage의 컴포넌트로 이동하는지 부터 제가 이해를 잘 못한 것 같습니다.navigate(`/search?q= 부분을 설명해주시면 감사드리겠습니다 ㅠㅠ
- 미해결따라하며 배우는 리액트 A-Z
jest-dom 플러그인이 추천을 안 해 줍니다......
expect(lintTest.textContent).toBe("lintTest");영상 놓치지 않고 시청하고 위 코드도 똑같이 작성했는데,위 강의 영상 스크린샷처럼 추천해 주는 것이 안 뜹니다 ㅠ무슨 문제일까요??
- 미해결따라하며 배우는 리액트 A-Z
도커 허브
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 도커 허브라는 것은..?예를 들어 로컬의 node의 npm registry가 외부 https://www.npmjs.com/ (정확한 사이트x)에 연결되어 필요한 모듈을 받아오는 것처럼 도커 허브도 로컬 내에 없으면 위와 같은 npm 모듈을 찾는 것처럼 가져온다고 생각하면 되나요?그럼 만약 맞다면 verdaccio 처럼 private한 registry를 구성하고 해당 registry에 없을 시, npmjs.com에서 찾도록 하는 환경을 구성할 수도 있겠네요.?
- 해결됨따라하며 배우는 리액트 A-Z
PDF에서 Movie 모달에서 트레일러 보여주기 강의는 없는건가요??
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. PDF에는 있길래 혹시 이 부분은 없어진건가요??
- 해결됨따라하며 배우는 리액트 A-Z
궁금한점을 모아봤습니다..ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.이 부분에서 끝부분에 useState({}) 와useState([]) 차이가 어떻게 되는지 정확히 알 수 있을까요? 둘다 movie의 정보를 가져오는 배열인줄 알았는데 달라서요..onClick에서 ArrowFunction을 사용하는데 그냥 onclick={handleClick(movie)} 하면 안될까요?위 사진처럼 arrow Function을 사용하지도 handleChange() 처럼 빈괄호를 넣지도않을 때가 있는데어떤 경우에서 어떤 형식을 써야하는 건가요??제가 자바스크립트를 제대로 못배워서..죄송합니다..ㅠㅠ3.세미콜론을 붙이건 안붙이건 오류가 안보여서 잘 작동이 되는건지 세미콜론을 무조건 붙이는게 맞다고 생각했는데가끔 자동완성기능을 사용하면 리액트 자체에서 세미콜론을 안붙이더라구요.. 그래서 리액트는 세미콜론이 상관없는건지 잘 모르겠어요..ㅠㅠ 이 강의에서 자동완성 [ rfce ]로 한 이유와 index.js파일에 function이름을 MovieModal로 한 이유가 있을까요?? 뒤에 강의에서도 설명하실 수도 있지만 혹시 알려주실 수 있으면 감사드립니다!
- 미해결따라하며 배우는 리액트 A-Z
이벤트리스너 제거 부분
return () => {document.addEventListener("mousedown",listener)}이부분을 const listner = (e) => { if (!ref.current || ref.current.contains(e.target)) { return; } handler(); document.removeEventListener("mousedown", listner); document.removeEventListener("touchstart", listner); }; 이렇게 써도 될까요? 같은 맥락으로 이해한 것이 맞을까요?
- 미해결따라하며 배우는 리액트 A-Z
tailwindcss 적용이 안 됩니다
따라 치면서 실습하는데 적용이 안 되길래 삽질 하다가혹시나 싶어서 강의 자료를 다운 받아 npm run start 해 보았는데요그것도 이렇게 적용이 안 되게 보이네요...뭐가 문제일까요? ㅜ.ㅜ
- 해결됨따라하며 배우는 리액트 A-Z
rafc를 이용해 바꾸는 부분에서
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Lists.js에서 rafc룰 입력해 바꾸기전에 export default function Lists (~~~)이였는데 rafc를 입력해서 자도완성하면이렇게 나옵니다. 근데 기존에 소스와 오류가 생기는데이러한 오류가 생겨서 아래에 export default Lists; 를 넣어줘야하는데 이건 따로 알아서 해줘야하는 것인가요??저는 const앞에 export 만 삽입이 되고강의에서는 자동으로 밑에 삽입해주는 거 같습니다...구글링해서 검색해봤는데app.js에서 import할때 모듈하나에 하나의 개체만 있다는 의미로 받아들여져서 원하는 이름으로 import가 불가능하다고 하다는데..-> 불가->가능Form.js는 export default function Form (~~~)이고Lists.js는 export cont Lists 후 import를 바꾸거나 or 아래 export default ~~ 삽입어떤게 기준이고 맞는지를 모르겠어서..다 통일 시키는게 맞을까요????
- 미해결따라하며 배우는 리액트 A-Z
spread oparator ...가 deep copy 맞을까요?
spread oparator ... 가 deep copy 맞을까요?
- 미해결따라하며 배우는 리액트 A-Z
yarn 으로 진행해도 문제 없을까요?
안녕하세요.저는 개인 플젝에 yarn을 써왔어서 그런데 문제없을까요?
- 미해결따라하며 배우는 리액트 A-Z
Row 컴포넌트 슬라이드 기능
슬라이드 기능에서 span 태그의 onClick 이벤트 함수 부분document.getElementById(id).scrollLeft -= window.innerWidth - 80;여기서 80이라는 값은 반응형 구현을 위해 전체 브라우저 너비에서 Row section의 양 옆 margin 40px과 row__posters div의 양 옆 padding 40px을 계산한 값인가요?
- 미해결따라하며 배우는 리액트 A-Z
key를 props를 하는 이유
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 강의 잘 듣고 있습니다. 강의를 보면서 구현하다가 질문이 생겨 이렇게 남겨봅니다.처음에 강의를 보고 List() 함수형 컴포넌트에서 key만 매개변수로 사용하지 않아서 props를 하지 않아도 되지 않을까 싶었지만 react-beautilful-dnd 관련하여 에러가 나더라구요. 함수형 컴포넌트에서 매개변수를 통해 직접적으로 가져오지 않음에도 key가 어떤 역할을 가지고 있는지 궁금합니다.감사합니다<List key={data.id} //props 안하면 에러 id={data.id} completed={data.completed} title={data.title} provided={provided} snapshot={snapshot} todoData={todoData} setTodoData={setTodoData} />
- 미해결따라하며 배우는 리액트 A-Z
비슷한질문.. mousedown을 click으로 바꾸면 왜안되나요?
선생님 비슷한 질문인데 궁금점이 해결이 안되서 여쭤봅니다useEffect( () => { const listener = (event) => { console.log('ref', ref) if (!ref.current || ref.current.contains(event.target)) { return; } handler(); }; document.addEventListener("mousedown", listener); return () => { document.removeEventListener("mousedown", listener); }; }, []); 마우스다운이랑 클릭이랑 다른점은 배웠는데모달창 밖을 클릭하는데 왜안되는지 모르겠습니다click 이 mousedown이랑 mouseup 두가지 행위가 아닌지..모르겠네요 ㅠ
- 해결됨따라하며 배우는 리액트 A-Z
안녕하세요 이번 강좌와 리액트 테스트강좌질문입니다
안녕하세요. 처음 강좌 신청할 때 tdd도 있길래 넷플릭스 강좌에서 이어 진행하시는 줄 알았는데, 이번 강좌에 test는 가볍게 다루셨군요..ㅠㅠ 예전 react test(jest) 강좌를 들었어서, 이번 netflix강의에도 혼자 tdd를 진행하려 하는데, 조금 궁금한 점이 생겼습니다. 테스트를 진행할 때 props를 사용하는 컴포넌트에 대해서는 어떻게 하나요?(이전 react-test강좌에서는 contextAPI를 사용하셨는데, 그때 props로 내린 데이터를 가진 컴포넌트에 대해서는 테스트를 진행하지 않으셔서 여쭤봅니다.) netflix클론 정도의 규모만 해도 api가 많아 생각보다 까다로운 것 같습니다. 어떤 기능에 대해서 테스트를 집중적으로 하는지 방법? 이나 강사님의 조언을 듣고 싶습니다. (하나하나 단위 테스트를 실제로 진행하는 게 맞을까요? 아직 test는 익숙치 않네요..)