55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트 A-Z
John Ahn님 요 아래 질문 게시글 확인 좀 부탁드립니다~
9/13 에 질문을 남겨놓았습니다.계속 다음 단계로 못넘어 가고 있는데... 한번 확인 해봐주시면 감사하겠습니다~~!
- 미해결따라하며 배우는 리액트 A-Z
form태그의 필요성
form을 왜쓰는지 잘 모르겠어서 질문 남겼습니다 ㅠ save 버튼에 클릭이벤트만 있으면 되는거 아닌가요?... form에도 왜 handleSubmit을 하는지 잘 모르겠어요
- 미해결따라하며 배우는 리액트 A-Z
클래스 안에서는 변수 선언 키워드를 쓰지 않아도 값을 할당할 수 있나요?
클래스 App 안에서 todoData = [ ... ] 이런 식으로 todoData에 값을 바로 할당하시는 걸 보고 궁금해서 질문 올립니다.let이나 const와 같은 변수 선언 키워드를 사용한 적이 없는데 어떻게 todoData 라는 변수에 바로 배열 데이터를 할당 가능한 건가요?const todoData = [ ... ] 원래 이런식으로 변수를 선언한 후에 값을 할당해야 하는 거 아닌가요?
- 미해결따라하며 배우는 리액트 A-Z
하나의 파일만 테스트
질문있습니다. 해당강의 에서는 테스트 코드가 적기에 전체 테스트를 돌리는데 만약 큰 프로젝트에서 내가 만든 하나의 파일만 테스트를 해보고싶다면 커맨드 명령어에 어떤식으로 입력을 하면될까요~?
- 미해결따라하며 배우는 리액트 A-Z
Swiper 적용시 에러가 발생합니다.
Swiper 적용시 에러가 나오는데 구글에 검색해도 나오지 않습니다.강의소스코드 제공 해주신걸로 복붙해서 적용해도 똑같은 에러가 발생합니다.. 도와주세요 ㅠㅠ
- 미해결따라하며 배우는 리액트 A-Z
Uncaught TypeError: Assignment to constant variable 에러 문의
안녕하세요. 할 일 리스트 모두 지우기 버튼 생성 강의를 따라하고 있었는데요. const handleRemoveClick함수에 setTodoData=([]); 이걸 넣고 실행하면 Uncaught TypeError: Assignment to constant variable 이 에러가 발생합니다. 강사님과 소스가 똑같은데 어떤 원인인지 알 수 있을까요?
- 미해결따라하며 배우는 리액트 A-Z
클래스 컴포넌트 -> 함수형 컴포넌트 바꾸기 에러 ㅠㅠ
안녕하세요 현재 <To-Do 앱을 클래스 컴포넌트에서 함수형 컴포넌트로 바꾸기> 까지진도를 따라가고 있는 수강생입니다.클래스 컴포넌트-> 함수형으로 변경하고 있는데아래 에러가 계속 뜨고 있습니다.ㅠㅠ 원인을 모르겠어서 맨 하단에 코드를 전부 복사해놓았습니다.확인해봐주시면 감사하겠습니다 : ) import React, { useState } from "react"; import "./App.css"; // 함수형 component로 작업한 todoList export default function App() { const btnStyle = { color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float: "right", } const getStyle = (completed) => { return { padding: "10px", borderBottom: "1px dotted #ccc", textDecoration: completed ? "line-through" : "none" } }; const {todoData, setTodoData} = useState([]); const {value, setValue} = useState(""); // 할일 삭제 const handleDelete = (id) => { let newTodoData = todoData.filter((data) => data.id !== id); setTodoData(newTodoData); }; // 할일 input text에 입력 const handleChange = (e) => { setValue(e.target.value) }; // 입력된 value 목록에 추가 const handleSubmit = (e) => { e.preventDefault(); let newTodo = { id: Date.now(), title: value, completed: false, }; // 원래 있던 할 일에 새로운 할 일 더해주기 setTodoData((prev) => [...prev, newTodo]); setValue(""); }; // 완료된 내용 체크하여 상태 변경 해주기 const handleCompleteChange = (id) => { 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,index)=> ( <div style={getStyle(data.completed)} key={data.id}> <input type="checkbox" id={data.id} onChange={() => handleCompleteChange(data.id)} defaultChecked={false}/> <label htmlFor={data.id}>{data.title}</label> <button style={btnStyle} onClick={() => handleDelete(data.id)}> x </button> </div> ))} <form style={{display:'flex', marginTop: '20px'}} 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> </div> </div> ) }
- 미해결따라하며 배우는 리액트 A-Z
TypeError
현재 구름 IDE를 사용하여 작업중입니다.그런데 영상과 똑같이 따라했음에도 불구하고 실행시키면 Uncaught TypeError: Cannot read properties of undefined (reading 'draggableProps')라고 콘솔에 뜨며 화면에 있던 UI가 다 사라집니다.. 혹시 어떻게 고치면 좋을까요?
- 미해결따라하며 배우는 리액트 A-Z
Netflix nav.js useEffect에 관한 질문이 있습니다.
안녕하세요.useEffect에 관한 질문이 있습니다.import React, { useState, useEffect } from "react"; import "./Nav.css"; const Nav = () => { const [show, setShow] = useState(false); useEffect(() => { window.addEventListener("scroll", () => { console.log(window.scrollY); if (window.scrollY > 50) { setShow(true); } else { setShow(false); } }); return () => { window.removeEventListener("scroll", () => {}); }; }, []); return ( <nav className={`nav ${show && "nav__black"}`}> <img alt="Neflix logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTs-jOdZ58Y8HbxPbaUxxaUyGMqu3zvtO8frCdL_3MzPE6cOB5ZAV5TqwRIjJ6sdTl-_A&usqp=CAU" className="nav__logo" onClick={() => window.location.reload()} /> <img alt="user logged" src="http://zoeice.com/assets/img/uploads/profile.png" className="nav__avatar" /> </nav> ); }; export default Nav;질문 1.useEffect 내부의 return은 컴포넌트를 사용하지 않을때 실행되는 코드를 넣는것 같은데이점이 조금 이해하기 어려워서 질문드립니다. useEffect안의 return의 역할이 정확히 무엇인가요? 질문 2.useEffect의 두번째 인자로 빈 배열을 받을 경우, 처음 컴포넌트가 처음 렌더링 될때만 실행된다고 알고 있습니다.그런데 nav는 스크롤 상태에 따라서 계속 이벤트가 실행되는데 빈 배열을 넣어도 잘 작동이 되고 있습니다.빈 배열을 넣어도 잘 작동되는 이유가 궁금합니다. 답변부탁드리겠습니다.감사합니다.
- 미해결따라하며 배우는 리액트 A-Z
Form 부분을 위한 컴포넌트 생성하기 강의에서 질문
강의에서는 소스 저장 시 오류가 나는 부분이 빨간색 밑줄이 표시가 되는데 로컬pc에서 테스트 시에는 오류나는 부분이 표시되지 않습니다. es7처럼 추가해야 할 게 있을까요? 마찬가지로 같은 부분에서 저장 버튼 클릭 시 return() 뒤에 ; 세미콜론이 자동으로 생성되는데 이것도 궁금합니다.강의 : Form 부분을 위한 컴포넌트 생성하기 1:23초 부분
- 미해결따라하며 배우는 리액트 A-Z
API 호출 관련
안녕하세요배너를 만들 던 도중 movie.overview에 대한 length를 구하던 와중에 오류가 발생해서 확인 해 보니까 axios를 통해서 movie데이터가 받아지지 못한 것 같습니다.잘 되다가 안되는 걸보니 호출에 대한 제한이 걸린 것 같은데 호출 관련한 정보들은 어디서 볼 수 있을까여? 예를 들어 호출 수 제한 같은거요!
- 미해결따라하며 배우는 리액트 A-Z
this
코드를 작성할 때 this.getStyle() 형식으로 작성하는데this가 의미하는 것이 무엇인가요?
- 미해결따라하며 배우는 리액트 A-Z
css
안녕하세요 강사님!!항상 궁금했던점인데css는 외워야하는건가요?
- 미해결따라하며 배우는 리액트 A-Z
수정
지금 배포를 한상태에서 제가 파비콘과 타이틀을 바꾸고 싶은데 수정후에 다시 배포를 하려면 어떻게해야하나요
- 미해결따라하며 배우는 리액트 A-Z
API_URL
이러한 API_URL은 어떻게 알 수 있을까요 ? https://www.themoviedb.org 사이트에 정보가 나와있는 걸까요 ?
- 미해결따라하며 배우는 리액트 A-Z
로컬스토리지에서 값 가져올 때 App 함수블럭 밖에서 하는 이유가 따로 있나요?
localStorage에 있는 todoData를 가져올 때 App 밖에서 하는 이유가 있나요?
- 미해결따라하며 배우는 리액트 A-Z
react.memo 컴포넌트 질문이요
강의대로 따라하는중인데요 Lists, List 둘다 애로우 펑션 컴포넌트로 바꾸고 React.memo로 감싸니까 기존앱이 동작이 안되더라구요. 그래서 소스코드보니까 Lists는 기존 함수형으로 되어있어서 저도 따라서 바꿔보니까 동작을 하네요. 왜 그렇게 동작하는지 질문드려도 될까요? 단지 react.memo 를 적용하면 안되는 곳에 메모기능을 써서 렌더링이 이뤄지지 않은걸까요?
- 미해결따라하며 배우는 리액트 A-Z
스타일관련문의드립니다
선생님 강좌 하다보니까 스타일 관련이 좀어려운 부분이 있는데요혹시 스타일 쉽게 구현하는 법이 있나요? 미디어쿼리 z인덱스니 포지션 이런거 한번에 해결해주는 툴은없는지요?
- 미해결따라하며 배우는 리액트 A-Z
특정 영화의 더 상세한 정보가져오기
const {data:moviedetail} = await axios.get(`movie/${movieId}`,{params:{append_to_reponse:'videos'}}) setmovie(moviedetail)`movie/${movieId}`,{<---------- 이부분이요 params:{append_to_reponse:'videos'}});선생님 저 윗 부분은1. 중괄호로 params를 묶으신건 어떤걸 의미하는건가요?2.append_to_response:'videos' 이부분은 문법인가요?감사합니다
- 미해결따라하며 배우는 리액트 A-Z
동영상이 없을 경우 오류
선생님 안녕하세요? 강의 잘 듣고 있습니다.Styled Component를 이용한 비디오 배너 만들기에서iframe에서 src에 movie.videos.results가 없을 경우 오류가 생깁니다.저는 여기에 옵셔널 체이닝(?.)을 걸어 만약에 movie.videos.results이 없을 경우 undefined를 반환하게 하는 방식으로 해결했습니다. 이렇게 한 경우 오류 페이지가 보이는 대신 동영상을 재생할 수 없다고 뜹니다.이렇게 하는 방법도 괜찮은지, 혹시 더 좋은 방법이 있다면 가르쳐 주세요.감사합니다.src={`https://www.youtube.com/embed/${movie.videos.results[0]?.key}?controls=0&autoplay=1&loop=1&playlist=${movie.videos.results[0]?.key}`}