55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트 A-Z
async await
안녕하세요. banner.js에서 질문이 있습니다이 부분에서 왜 async await를 사용하셨는지 궁금합니다!const fetchData = async () => { // 현재 상영중인 영화 정보를 가져오기(여러 영화) const request = await axios.get(requests.fetchNowPlaying); // 여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; // 특정 영화의 더 상세한 정보를 가져오기(비디오 정보도 포함) const { data : movieDetail } = await axios.get(`movie/${movieId}`, { params: {append_to_response: "videos"}, }); setMovie(movieDetail); }
- 미해결따라하며 배우는 리액트 A-Z
클래스형과 함수형 컴포넌트
안녕하세요 선생님현재 섹션2까지 수강하였는데요 이후에는 전부 함수형 컴포넌트로 강의 해주시는 건가요?클래스형 컴포넌트 기초적인 내용 학습 병행해야 할지 고민이되서 질문드립니다!
- 미해결따라하며 배우는 리액트 A-Z
수정 시 전체 수정되는 오류 OTL
복습하면서 강의를 보지 않고 저 혼자 다시 만들어보고 있는 중입니다. 그래서 드래그 라이브러리나 React.memo 같은 기능은 우선 차치하고 CRUD 기능만 해보려고 하는데요.edit을 위한 💬 버튼을 누를 경우 다른 할 일들도 editing... 으로 전체 수정되는 오류가 있습니다 ㅠㅠ 어디가 꼬였는지 알 수 없어 몇 시간 째 헤매고 있는데, 어느 부분이 문제인지 알 수 있을까요? Lists 컴포넌트에서 문제가 발생하고 있습니다. App.jsimport React, { useState } from "react"; import Form from "./components/Form"; import Lists from "./components/Lists"; function App() { const today = new Date(); const month = today.getMonth() + 1; const day = today.getDate(); const [value, setValue] = useState(""); const [todoData, setTodoData] = useState([]); const handleSubmit = (event) => { event.preventDefault(); let newTodo = { id: Date.now(), title: value, done: false, }; setTodoData([...todoData, newTodo]); setValue(""); }; const handleClear = () => { setTodoData([]); }; return ( <div className="flex justify-center items-center min-h-screen w-screen bg-purple-100"> <div className="w-full lg:max-w-lg lg:max-w-3/4 p-6 m-4 bg-white rounded shadow"> <div className="flex justify-between pb-2"> <h1> 📌 {month}월 {day}일 오늘의 할 일 </h1> <button onClick={handleClear}>🧹 전체 삭제</button> </div> <Lists todoData={todoData} setTodoData={setTodoData} /> <Form handleSubmit={handleSubmit} value={value} setValue={setValue} /> </div> </div> ); } export default App; Lists.jsimport React, { useState } from "react"; const Lists = ({ todoData, setTodoData, title, id }) => { const [isEditing, setIsEditing] = useState(false); const [editedTitle, setEditedTitle] = useState(title); const handleDelete = (id) => { let newTodoData = todoData.filter((data) => data.id !== id); setTodoData(newTodoData); }; const handleDone = (id) => { let newTodoData = todoData.map((data) => { if (data.id === id) { data.done = !data.done; } return data; }); setTodoData(newTodoData); }; if (isEditing) { return <div>Editing...</div>; } else { return ( <div> {todoData.map((data) => ( <div className="flex py-2 my-2 justify-between items-center border rounded bg-purple-50" key={data.id} > <div className="mr-2 p-2"> <input className="mr-2" type="checkbox" defaultChecked={data.done} onChange={() => handleDone(data.id)} ></input> <span className={data.done ? "line-through" : undefined}> {data.title} </span> </div> <div className="pr-2"> <button className="mr-2" onClick={() => setIsEditing(true)}> 💬 //오류 발생 </button> <button className="mr-2" onClick={() => handleDelete(id)}> ❌ </button> </div> </div> ))} </div> ); } }; export default Lists; Form.jsimport React from "react"; const Form = ({ handleSubmit, value, setValue }) => { const handleChange = (event) => { setValue(event.target.value); }; return ( <div> <form className="flex justify-between pt-2" onSubmit={handleSubmit}> <input className="p-2 mr-2 border-2 rounded shadow w-full" type="text" placeholder="할 일을 입력하세요" value={value} onChange={handleChange} /> <input className="p-2 border-2 rounded bg-purple-200 text-white hover:bg-purple-300" type="submit" value="입력" /> </form> </div> ); }; export default Form;
- 미해결따라하며 배우는 리액트 A-Z
git 배포!!!!!!
동일한 질문이 있는데 답변을 이해하지 못해서 질문합니다. 저는 [깃허브아이디]/상위폴더/하위폴더/하위폴더2 에 지금까지 만든 넷플릭스 파일들이 있습니다.이 경우에 package.json의 homepage 부분과 index.js의 basename은 어떻게 설정해야 하는 것인지요? 아까까지 전체 주소(하위폴더2까지) homepage, basename을 작성하여 배포했는데 완성된 주소는 상위폴더까지만 적혀 있습니다.지금은 [깃허브아이디].github.io/[상위폴더]/로 다시 배포했는데 상위폴더 안의 Read.me만 나오고 있습니다. (캐시 삭제 및 20분 정도 기다림)ㅠㅠ 왜 이러는지 알고 싶습니다.
- 미해결따라하며 배우는 리액트 A-Z
React -Router 사용에 관해서
안녕하세요 선생님! netflix 강의 너무 잘들었습니다! 듣고나서 혼자 이것저것 만들어보는데 , react router 사용을 하다보니 1. index.js 에서 App 을 BrowserRouter로 래핑하는 방법2. 특정 컴포넌트에서 BrowserRouter로 감싸서 따로 쓰는경우가 있는 것 같더라고요. 두가지 차이점을 정확히 모르겠습니다. chat gpt는 개발자가 개발하는 과정에서 선택하는 부분이라고 되어 있는데, 그 선택하는 이유를 잘 모르겠습니다. 하지만 <App> 컴포넌트를 감싸지 않고 다른 컴포넌트에서 <BrowserRouter>를 사용하는 것은 특정 컴포넌트 또는 컴포넌트 그룹에 대한 라우팅을 독립적으로 구성하고 싶을 때 사용될 수 있습니다. 이렇게 하면 라우팅 로직이 특정 컴포넌트에 한정되며, 애플리케이션의 다른 부분과 격리될 수 있습니다. 예를 들어, <App> 컴포넌트의 하위 컴포넌트 중에서만 특정 라우팅이 필요한 경우 해당 컴포넌트 내에서 <BrowserRouter>를 사용하여 독립적인 라우팅을 구성할 수 있습니다.이런식으로 대답이 오는데 이해가 잘 가질 않네요. 혹시 검색 키워드나, 참고할만한 글이 있을까 해서 글 남깁니다. 감사합니다~
- 미해결따라하며 배우는 리액트 A-Z
배너 Iframe 디자인 시 가상 요소
여기서 &를 써서 스타일을 추가하는 이유가 무엇인가요?그냥 위에 있는 Iframe에 적용하면 안되는 건가요?이 부분을 Iframe에 포함시키니 오류가 나서 왜인지 궁금합니다.const Iframe = styled.iframe` width: 100%; height: 100%; z-index: -1; opacity: 0.65; border: none; &: :after { content: ""; position: absolute; top: 0; left: 0; width: 100% height: 100% } `;
- 미해결따라하며 배우는 리액트 A-Z
axios 401 오류
axios 코드입니다.import axios from "axios"; const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", params: { api_key: "895e2a24f997d16a2490bcfddde450c28", language: "ko-kr", }, }); export default instance;requests 코드입니다.const requests = { fetchNowPlaying: "movie/now_playing", fetchNetflixOriginals: "/discover/tv?with_networks=213", fetchTrending: "/trending/all/week", fetchTopRated: "/movie/top_rated", fetchActionMoives: "/discover/movie?with_genres=28", fetchComedyMovies: "/discover/movies?with_genres=35", fetchHorrorMovies: "/discover/movies?with_genres=27", fetchRomanceMovies: "/discover/movies?with_genres=10749", fetchDocumentarues: "/discover/movies?with_genres=99", }; export default requests; App 코드입니다.import "./App.css"; import Nav from "./components/Nav"; import Banner from "./components/Banner"; function App() { return ( <div className="App"> <Nav /> <Banner /> </div> ); } export default App; Banner 코드입니다.import axios from "../api/axios"; import React, { useState, useEffect } from "react"; import requests from "../api/requests"; function Banner() { const [movie, setMovie] = useState([]); useEffect(() => { fetchData(); }, []); const fetchData = async () => { // 현재 상영중인 여러 편의 영화 정보 가져오기 const request = await axios.get(requests.fetchNowPlaying); // 여러 편의 영화 중 하나의 영화 ID 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; // 특정 영화의 상세 정보 가져오기 const results = await axios.get(`movie/${movieId}`, { params: { append_to_response: "videos" }, }); console.log("results", results); console.log(movieId); }; return <div></div>; } export default Banner; 확인해봤을 때는 틀린 부분이 없는데 아래와 같은 오류가 발생합니다. ㅠㅠ 어디 잘못 작성한 게 있을까요?
- 미해결따라하며 배우는 리액트 A-Z
nextjs 폴더구조 다르신분(pages/, styles/ 없는분)
혹시나 모르실분들이 있을거 같아서 남깁니다.영상에 보이는 구조로 받으시려면npx create-next-app@12.1.0 --typescript ./ 로 하면됩니다. 꽤나 당황했네요 ㅎㅎ
- 미해결따라하며 배우는 리액트 A-Z
styled-components 설치 에러
styled-components version 6 이후로 강의에 나오는 npm install styled-components --save 명령어로 설치하면 에러가 발생해요npm install styled-components@5.3.10으로 5버전대로 설치했습니다//Use V5, npm install styled-components@5.3.10 //Use yarn yarn install styled-components //To use the beta version npm install styled-components@latest
- 미해결따라하며 배우는 리액트 A-Z
tailwind css가 적용이 안돼요
강의 보고 따라했는데 tailwind가 적용이 안되네요 뭐가 문제일까요? Hello world!에 밑줄이 그어져야 하는데 그대로예요.다른분이 하신 질문보고 거기 답변달린 방법들 해봤는데 계속 해결이 안되네요..시도한 방법tailwind.config.js 파일의 content 확인터미널에서 pakage.json에 dependencies 최신버전으로 업그레이드하기App.css 확인npm run start했던거 껐다가 다시켜기아래는 해당하는 파일들이예요.App.css에서 [Unknown at rule @tailwindcss (unknownAtRules)] 경고가 떴었어요 이게 문제일까요?근데 저 오류로 검색해보면 죄다 그냥 경고 무시하기 설정방법만 나오던데 다른 해결방법이 있는건가요?tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }app.css@tailwind base; @tailwind components; @tailwind utilities; /*아래는 생략*/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(""); }; return ( <div className="container"> <div className="todoBlock"> <div className="title"> <h1>할 일 목록</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> ) }
- 해결됨따라하며 배우는 리액트 A-Z
오늘 조금 전 부터 강의 재생이 안되는데 해결방법 아시는 분 계신가요.
이어보기로 강의 들어갔는데 이 화면에서 재생이 안돼요.시도한 방법다른강의 넘어갔다오기 --> 이전강의 / 다음강의도 똑같은 상황이 발생했어요강력 새로고침최근에 설치됐다고 뜨는 크롬 확장 프로그램 제거하기로그아웃 했다가 다시 로그인하기사용중인 다른 확장프로그램 끄기열려있는 브라우저 창 다 껐다가 다시 접속하기다 안되네요....개발자 도구로 보니까 403에러라고 뜨길래 해결방법 검색해서 한건데 이거말고 다른방법 있을까요?+ 크롬 시크릿모드로 들어가니까 그건 제대로 나오더라구요. 시크릿 모드랑 일반 창에서 다른점이 뭔지 모르겠어요. 확장 프로그램 다 껐는데....+ 다른 강의도 똑같은지 확인하려고 재생해봤는데 잘 되네요. 지금 듣는 강의만 안나오는거 같아요.
- 미해결따라하며 배우는 리액트 A-Z
react-beautiful-dnd 드래그 기능 구현중 에러
먼저 제가 작성한 Lists.js의 소스코드는 아래와 같습니다. import React from 'react' import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; export default function Lists({ todoData, setTodoData }) { //todo Checkbox 클릭했을때 실행되는 함수 const handleCompletedChange = (id) =>{ let newTodoData = todoData.map((data) =>{ if(data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData); }; //X버튼 클릭시 실행되는 함수 const handleClick = (id) => { let newTodoData = todoData.filter((data) => data.id !== id); console.log("newTodoData",newTodoData); setTodoData(newTodoData); }; //Drag가 끝날때 실행되는 함수 const onDragEnd = (result) =>{ console.log("result", result) } return ( <div> <DragDropContext onDragEnd={onDragEnd}> <Droppable droppableId='todo'> {(provided) => ( <div ref={provided.innerRef} {...provided.droppableProps} > {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-300": "bg-gray-200"} flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 rounded bg-gray-200`} > <div className='items-center'> {/* Checkbox */} <input className='mr-3' type="checkbox" defaultChecked={data.completed} onChange={()=>handleCompletedChange(data.id)} /> {/* Todo Contents */} <span className={data.completed ? "line-through":"none"}>{data.title}</span> </div> {/* + Button */} <div> <button className='px-4 py-2 float-right text-white' onClick={()=>handleClick(data.id)}>X</button> </div> </div> }} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div> ); } 스타일 관련부분 말고는 강사님이 작성하신 소스코드와 일치합니다. 그런데 실행하면 위와 같은 오류가 발생합니다. 질문 게시판에서 유사한 사례가 있나 싶어서 찾아봤습니다. index.js 파일에서 Restrict 모드를 제거하면 충돌에러를 없앤다고 하는데 지워도 바뀌는게 없습니다. 무엇이 원인인지 github이나 stackoverflow를 찾아봤는데두 마땅히 나오는게 없네요 ref 라는 이름이 문제일 수도 있다는 글을 보고 innerRef라고 변경해서 작성했는데도 똑같은 에러가 발생했습니다. 이유가 뭔지 알려주시면 감사하겠습니다. 혹시 몰라 App.js 의 소스코드는 아래와 같고,import React, { useState } from "react"; import "./App.css"; import List from "./components/Lists"; import Form from "./components/Form"; function App(){ const [todoData, setTodoData] = useState([]); const [value, setValue] = useState(""); //+ 버튼을 눌렀을때 실행되는 함수 const handleSubmit = (e) =>{ //form 안의 input에 값을 입력했을때 페이지 리로드 되는걸 막아줌 e.preventDefault(); //new todo data let newTodo = { id:Date.now(), title:value, completed: false, }; //add new todo data on to the original todo list setTodoData((prev) =>[...prev, newTodo]); setValue(""); } return( <div className="flex items-center justify-center w-screen h-screen bg-blue-100"> <div className="w-full p-6 m-4 bg-white rounded-lg shadow-md lg:w-3/4 lg:max-w-lg"> <div className="flex justify-between mb-3"> <h1 className="text-xl font-mono">Todo-List</h1> </div> {/* Todo List */} <List todoData={todoData} setTodoData={setTodoData}/> {/* Todo List add button*/} <Form handleSubmit={handleSubmit} value={value} setValue={setValue}/> </div> </div> ) } export default App;제가 사용한 react와 react-beautiful-dnd의 버전은 { "name": "todoapp", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "autoprefixer": "^10.4.14", "postcss": "^8.4.23", "tailwindcss": "^3.3.2" } } 입니다.
- 미해결따라하며 배우는 리액트 A-Z
쇼핑몰,도커강의 질문
안녕하세요 선생님 이번에 쇼핑몰 강의가 업데이트가 되었길래 강의를 들어보려고 합니다그런데 제가 도커 강의도 한번 들어보고 싶은데 도커에 도자도 모르는 상태인데 수업을 따라갈만 할까요?? 항상 좋은 강의 감사합니다
- 미해결따라하며 배우는 리액트 A-Z
선생님 일단 강의 너무 만족하고 잘 듣고있습니다.
혼자 미니 프로젝트하면서 선생님 수업에서 배운 github를 통한 배포를 했는데, 어째서인지 Readme로 연결이 되네요. index.html도 정상적으로 있는데 왜그런지 이해가 잘안갑니다.구글링을 했을때도 index.html의 위치를 확인하라고 써있는데 해결이 안되네요. 답변 부탁드려요!
- 해결됨따라하며 배우는 리액트 A-Z
background white 문제
안녕하세요. 선생님.강의에서 보이는 페이지랑 다르게 제껀App 컴포넌트의 div 색깔이 흰색이더라구요.혹시나 싶어 강의 소스 코드를 전부 확인해봐도 검정색으로 App 컴포넌트의div background 컬러를 지정해주는 부분이 없는 것 같은데어떤 차이가 있길래 제껀 흰색 배경이고 선생님껀 검정색 배경인지 알 수 있을까요?소스코드 첨부합니다. https://github.com/edd1e-dev/react-netflix-clone요약) 배경이 흰색인데 검정색 부분으로 바꿔주는 부분을 못찾겠습니다.
- 미해결따라하며 배우는 리액트 A-Z
isLargeRow에 관한 질문입니다.
강의 열심히 듣고 있습니다.Row.js에서 사용하고 있는 isLargeRow에 관해 질문드립니다. isLargeRow는 부모 컴포넌트에서 boolean값을 설정하지 않고 단지 문자열로 props로 보내지는데 Rows.js에서는 true 값을 가지게 되는게 잘 이해가 안가네요props로 문자열을 내려주면 자식 컴포넌트에서는 그 문자열이 내려오면 true로 없으면 false로 인식을 하는건가요?바쁘시겠지만 답변 부탁 드리겠습니다.
- 미해결따라하며 배우는 리액트 A-Z
폴더 속 폴더에 있는 소스 배포
강사님 제가 넷플릭스 소스를 [git아이디/Repositories폴더/하위a폴더/하위b폴더]b폴더에 저장을 했다면homepage경로와 base경로를 어떻게 설정해야하나요?혹시 배포를 할땐 Repositories 폴더에 있는 소스들만 배포가 가능한건가요?
- 미해결따라하며 배우는 리액트 A-Z
선생님 Props내려줄때
data 프롭의 경우는 이미 id ,title, completed 같은 정보들이 다 들어있는거니까 data프롭만 내려받아서 List.js에서 .id, .title, .completed로 써도 문제가 없는거죠?
- 해결됨따라하며 배우는 리액트 A-Z
handleSubmit을 useCallback으로
handleSubmit를 useCallback으로 감싸서 만들어봤는데const handleSubmit = useCallback( (e) => { e.preventDefault(); let newTodoData = todoData.map((data) => { if (data.id === id) { data.title = editedTitle; } return data; }); console.log(newTodoData); setTodoData(newTodoData); setIsEditing(false); }, [todoData, setTodoData, id, editedTitle] );의존성배열에 setTodoData 를 넣지않으면 아래오류가 나면서 handleSubmit 함수가 실행되지 않더라구요React Hook useCallback has a missing dependency: 'setTodoData'. Either include it or remove the dependency array. If 'setTodoData' changes too often, find the parent component that defines it and wrap that definition in useCallback제 지식으론 의존성배열에 todoData만 넣으면 될줄 알았는데 왜 setTodoData 까지 같이 넣어야하는지 궁금합니다!
- 미해결따라하며 배우는 리액트 A-Z
axios.js 에 인스턴스를 만든 후 Banner.js 에 import 할 때 문의
안녕하세요!axios.js 에 인스턴스를 만들고 그 인스턴스를 export default instance; 로 export 해줬는데그렇다면 Banner.js 에서 가져와서 사용할 때import instance from "../api/axios"; 라고 가져와서 instance.get(requests.fetchNowPlaying);이런 식으로 사용하는게 맞지 않나 생각이 들어서 질문 드립니다.