55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트 A-Z
디비 api 사이트 회원가입 문제
디비 api 사이트 회원가입이 안됩니다
- 미해결따라하며 배우는 리액트 A-Z
./하고 . 중에 ./가 좋은 방법인 이유는 무엇인가요?
강의 중에 docker build ./ 하고 docker build . 둘다 현재 디렉토리에 있는 도커 파일을 이미지로 만들어주는 명령어라고 하셧는데 docker build ./ 가 더 좋은 방법이라고 하신 이유가 무엇인가요 ? . 보다는 ./ 로 표현하는게 더 확실한 표현이라 그런가요?
- 미해결따라하며 배우는 리액트 A-Z
다운받아도 볼수도 없고, pdf는 어디 있나요?
다운받아도 볼수도 없고, pdf는 어디 있나요?
- 미해결따라하며 배우는 리액트 A-Z
React CSS 적용
안녕하세요. 강사님 무료강의가 너무 좋아서 이번 강의도 수강하게 되었습니다. 좋은 강의 만들어주셔서 감사합니다. TodoApp 프로젝트에 적용될 CSS로 TailWindCSS와 그 외 CSS Framework 종류도 알려주셨습니다. (Material UI , React Bootstrap,...) 강사님이 실제 업무에서 추천하시는 CSS 프레임워크가 있을까요? TailWindCSS 사용 시 어느정도 구조를 잡기위한 CSS 기본지식이 있어야 하는게 맞을까요? 그렇다면 어느정도 지식이 있으면 좋을까요? 추천하시는 책이나 강의 있으시면 부탁드립니다. 감사합니다.
- 미해결따라하며 배우는 리액트 A-Z
test 수행 시간이 오래 걸리는 것 같아요
안녕하세요. TDD 강의 수강중에 선생님과의 test수행 시간과 제가 한 test 수행시간의 차이가 꽤 크게 나서 질문을 올립니다. 앞선 강의에서 만든 프로젝트(ESLint설정까지 마친 TDD기본 강의)에 해당 강의 영상에 적힌 테스트 코드를 그대로 실행시켰는데 수행시간이 26초 정도로 꽤 오래 걸리는 것 같아요. 이건 실행되는 컴퓨터마다 차이가 있는건가요? 아니면 다른 문제점이 있는걸까요? 가운데 빨간선을 기준으로, 왼쪽은 강의에서 보여주신 선생님의 터미널창이고, 오른쪽은 제 vscode의 터미널 창 입니다.
- 미해결따라하며 배우는 리액트 A-Z
설치에러
읽어보니 16.8.5에 의존한다고 나오는거 같은데 설치과정에서부터 막혔는데 혹시 해결방법이 있을까요..
- 미해결따라하며 배우는 리액트 A-Z
movie 모달 ui 생성하기 팝업 이미지 안나오
각 이미지를 클릭하면 팝업 이미지가 나오게 하는 부분인데 이미지가 엑박이 떠서 질문 드립니다. 어느부분을 수정하면 될까요 ?? row.js ------ import React, { useEffect, useState } from 'react' import axios from "../api/axios" import MovieModal from './MovieModal' import "./Row.css" const Row = ({ title, fetchURL, id, isLargeRow}) => { const [movies, setMovies] = useState([]) const [modalOpen, setModalOpen] = useState(false) const [movieSelected, setMovieSelected] = useState({}) useEffect(()=> { fetchMovieData() },[]) const fetchMovieData = async ()=> { const request = await axios.get(fetchURL) setMovies(request.data.results) } const handleClick = (movie) => { setModalOpen(true) setMovieSelected(movie) } return ( <section> <h2>{title}</h2> <div className="slider"> <div className="slider__arrow-left"> <span className="arrow" onClick={() => {document.getElementById(id).scrollLeft -= window.innerWidth - 80}}> {"<"} </span> </div> <div id={id} className="row__posters" > {movies.map((movie) =>( <img key={movie.id} className={`row__poster ${isLargeRow && "row__posterLarge"}`} src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path : movie.backdrop_path}`} loading="lazy" alt={movie.name} onClick={()=> handleClick(movie)} /> ))} </div> <div className="slider__arrow-right"> <span className="arrow" onClick={() => {document.getElementById(id).scrollLeft += window.innerWidth - 80}}> {">"} </span> </div> </div> { modalOpen && (<MovieModal {...setMovieSelected} setModalOpen={setModalOpen} />) } </section> ) } export default Row moviemodal.js ------ import React from 'react' import "./MovieModal.css" const MovieModal = ({ backdrop_path, title, overview, name, release_date, first_air_date, vote_average, setModalOpen}) => { return ( <div className="presendation"> <div className="wrapper-modal"> <div className="modal"> <span className="modal-close" onClick={()=> setModalOpen(false)}>X</span> <img className='modal__poster-img' src={`https://image.tmdb.org/t/p/original/${backdrop_path}`} alt='moviemodal' /> <div className="modal__content"> <p className="modal__details"> <span className="modal__user_perc">100% for you</span> {release_date ? release_date : first_air_date} </p> <h2 className="modal__title">{title ? title : name}</h2> <p className="modal__overvie">평점: {vote_average}</p> <p className="modal__overview">{overview}</p> </div> </div> </div> </div> ) } export default MovieModal
- 미해결따라하며 배우는 리액트 A-Z
build path를 못찾는데 이유가 뭘까요
빌드는 되는 거 같은데 왜 패스를 못읽을까요
- 미해결따라하며 배우는 리액트 A-Z
params : { append_to_response : "videos"},
강의 잘 보고 많이 배우고 있습니다 ! "append_to_response"는 사용자가 다르게 바꿀 수 있는 부분인가요 ? 아니면 axios 속성인가요 ?
- 미해결따라하며 배우는 리액트 A-Z
state is assigned a value but never used
이렇게 오류가 뜨는데 실행은 됩니다 이건 어떠한 경우인가요?
- 미해결따라하며 배우는 리액트 A-Z
코드를 동일하게 한 것 같은데, 드래그 기능 작동이 안됩니다. 이유가 궁금합니다.
코드를 동일하게 한 것 같은데, 드래그 기능 작동이 안됩니다. 이유가 궁금합니다. import React from "react"; import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; export default function List({ todoData, setTodoData }) { 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.complited = !data.complited; } return data; }); //this.setState({ todoData: newTodoData }); setTodoData(newTodoData); }; return ( <div> <DragDropContext> <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) => ( <div key={data.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 border rounded`} > <div className="items-center"> <input type="checkbox" defaultChecked={data.complited} onChange={() => handleCompleteChange(data.id)} />{" "} <span className={ data.complited ? "line-through" : undefined } > {data.title} </span> </div> <div className="items-center"> <button className="px-4 py-2 float-right" onClick={() => handleClick(data.id)} > x </button> </div> </div> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div> ); }
- 미해결따라하며 배우는 리액트 A-Z
npm run start으로 실행이 안됩니다.
npx로 리액트앱 설치 후 바로 실행해보려 했는데 작동이 되지 않는 군요.어떻게 해결하면 좋을까요. 처음부터 막하니 굉장히 당황스럽습니다.
- 해결됨따라하며 배우는 리액트 A-Z
11:58 질문입니다. ㅠㅠ
안녕하세요 선생님... 아래 부분 이해를 못했는데 다시 한 번 설명 가능하신가요? ㅠㅠ const { data: movieDetail } = await axios.get(`movie/${movieId}`, { params: { append_to_response: "videos" }
- 해결됨따라하며 배우는 리액트 A-Z
13:00 return() => {} 부분
안녕하세요. 13:00에서, useEffect 클린업 부분에 '스크롤 하면 이벤트리스너가 제거' 된다고 해석하면 될까요? window.removeEventListener("scroll", () => {})
- 해결됨따라하며 배우는 리액트 A-Z
vscode formatter 질문입니다.
formatter로 무엇을 사용하시는지요? html 태그의 property가 자동으로 줄바꿈 되는 기능을 사용하고 싶습니다.
- 미해결따라하며 배우는 리액트 A-Z
클래스형 컴포넌트에 관한 질문
강의 잘 듣고 있습니다. 예전에 강사님 강의 중에 페이팔 결제가 클래스형의 컴포넌트로 카트 페이지에 버튼형식으로 보여져서버튼을 클릭하면 페이팔 결제가 가능하게 하는 기능이 있었는데 결제금액이 숫자로 되어 있는지등의 결제 전의 검사를 하는 기능을 추가하려고 페이팔 클래스의 생성자에 금액을 체크하는 메소드를 호출하는 식으로 해 봤는데 결제가 되버리더라고요 라이프 사이클에서 생성자가 제일 먼저 호출되니까 생성자에서 뭔가 체크해서 랜더링이 되지 않게 할수 있을줄 알았는데.....방법이 틀렸는지 아니면 다른 방법이 있는지 조언을 부탁드립니다.
- 미해결따라하며 배우는 리액트 A-Z
Date.now() 질문2 입니다
먼저 답변 감사합니다. 강의 열심히 듣고 있습니다.아래 답변에 대한 인라인의로 재 질문 드립니다. >서버에서 서버 시간을 이용해서 저장을 해주고 그>걸 클라이언트에서 보여줄 때 각 나라에 따라서 보>여주시면 됩니다. → 여기서 서버시간이라는건 UTC시간을 말씀하시는 건가요? 아니면 그냥 서버의 타임존을 의식하지 않고 서버시간을 저장하라는 말씀이신가요? → 각나라에 따라서 보여주라는 말씀은 서버에 저장한 시간을 가지고와서 화면에 보여줄때 new Date(서버에 저장한 시간) 이렇게 하면 된다는 말씀이신지요? >클라이언트에서 따로 시간을 서버에 넘겨주시지 않>아도 서버에서 현재 시간을 가질 수 있습니다. 그래>서 서버에 있는 시간을 저장하시고 그걸 보여주시는 >클라이언트에서만 dayjs나 momentjs에 있는 기능>을 이용해서 보여주시면 됩니다. →클라이언트가 한국이고 서버는 미국에 있다면 미국의 타임존으로 서버에 저장이 될것이고 클라이언트에서 보여줄때는 days, momentsjs에 있는 기능을 사용하면 한국이나 중국등의 나라에서 보여지는 시간으로 표시할수 있다는 말씀이신가요?강사님이 말씀하시는 days, momentsjs의 기능을 알려주시면 감사하겠습니다. 날짜로 검색을 할때는 클라이언트의 날짜를 가져와서 서버에서 new Date(시간)으로 서버 타임존 시간으로 변경을 해서 디비에 들어있는 시간대를 검색하면 되는거지요?
- 미해결따라하며 배우는 리액트 A-Z
슬라이더 부분 오류입니다! (재질문)
https://github.com/zlx454545/react 깃헙 사용법이 정확하지 않아서 일단 주소 복사했습니다. 슬라이더가 부드럽게 안넘어가는 문제점이 있는데 어디서 문제인지 찾아내지 못하고 있습니다. 확인해주시면 정말 감사드리겠습니다..!
- 미해결따라하며 배우는 리액트 A-Z
매우 기초적인 질문이지만 ㅜㅠㅜㅠㅜ
str?.length > n ? str.substr(0, n - 1) + "..." : str; 이부분을 (str.length > n) ? str.substr(0, n - 1) + "..." : str; 썼더니 에러가 납니다.. (Cannot read properties of undefined (reading 'length')) str? -->> 삼항연산자의 시작이라는 건 알겠는데 .. .length의 의미는 뭔가요
- 미해결따라하며 배우는 리액트 A-Z
슬라이더 부분 오류입니다
넷플릭스 슬라이더 부분 만들기 강의 진행중입니다. 슬라이더가 작동하긴 하는데.. CSS부분이 문제인지 부드럽게 넘어가는 것이 아닌 툭툭 끊겨서 넘어갑니다. (onClick이벤트를 slider__arrow-left에 넣은 것은 클릭 편하라고.. 입니다. arrow에 onClick이벤트를 설정해도 동일한 문제가 발생합니다.) CSS 파일의 경우는 강의에서 제공해주신거 복사해서 사용했는데 혹시 이유를 알 수 있을까요? Row.js부분의 코드입니다. import axios from "../api/axios"; import React, { useEffect, useState } from "react"; import "./Row.css"; export default function Row({ isLargeRow, title, id, fetchUrl }) { const [movies, setMovies] = useState([]); useEffect(() => { fetchMovieData(); }, []); const fetchMovieData = async () => { const request = await axios.get(fetchUrl); setMovies(request.data.results); }; return ( <section className="row"> <h2>{title}</h2> <div className="slider"> <div className="slider__arrow-left" onClick={() => { document.getElementById(id).scrollLeft -= window.innerWidth - 80; }} > <span className="arrow">{"<"}</span> </div> <div id={id} className="row__posters"> {movies.map((movie) => ( <img key={movie.id} className={`row__poster ${isLargeRow && "row__posterLarge"}`} src={`https://image.tmdb.org/t/p/original/${ isLargeRow ? movie.poster_path : movie.backdrop_path } `} alt={movie.name} /> ))} </div> <div className="slider__arrow-right" onClick={() => { document.getElementById(id).scrollLeft += window.innerWidth - 80; }} > <span className="arrow">{">"}</span> </div> </div> </section> ); }