55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트 A-Z
Banner.css에 대해서
강사님은 내부적으로 Banner.css에 대한 내용을 복붙하셨는데,강의 영상에서 Banner.css 내에 소스가 다표기가 되지 않아서동일하게 진행하기 어려운 것 같습니다.
- 미해결따라하며 배우는 리액트 A-Z
플러그인이 추천을 안해줍니다
예전 질문글처럼처음부터 다시 설치해봐도 해결이 안되어 질문을 올립니다.
- 미해결따라하며 배우는 리액트 A-Z
마이너스버튼 테스트
test("Prevent the -,+ button from being pressed when the on/off button is clicked",()=>{ render(<App />); const onOffButtonElement = screen.getByTestId("on/off-button"); // click onOffButtonElement button fireEvent.click(onOffButtonElement); const plusButtonElement = screen.getByTestId("plus-button"); expect(plusButtonElement).toBeDisabled(); })on/off버튼을 통해 플러스와 마이너스 버튼의 클릭시 disable속성을 추가하는 과정에서 app.test.js에 테스트항목에 마이너스에 대한 내용을 안적어도 무관한가요?플러스가 잘작동하면 마이너스도 잘 작동할 것이기 때문인가요?
- 해결됨따라하며 배우는 리액트 A-Z
리액트 서버 실행 오류
리액트 설치 npx create-react-app ./ 이후리액트 최초 시작 시 npm run start가 작동하지 않습니다.위와 같은 오류가 발생하여, 아래와 같은 해결 방법들을 실행해보았습니다. 하지만, 위의 코드를 모두 실행했음에도 동일한 오류가 계속해서 발생합니다. node.js와 npm의 버전은 이러합니다. 폴더는 현재 강의자료 코드 폴더 내에 study라는 새로운 폴더를 만들어, 그 안에 리액트를 설치했습니다.프로젝트를 3번 정도 삭제하고 다시 설치했음에도 동일한 오류가 발생합니다. 어떻게 하면 좋을까요? 🥲 VSCode를 재시작하니 서버가 실행되었는데, App.js의 수정사항이 반영되지 않아 다시 VSCode를 재시작했더니 또 동일한 오류가 납니다...
- 미해결따라하며 배우는 리액트 A-Z
오류메세지는 확인했는데 어떻게 고쳐야 할지 모르겠습니다 ㅠ
TODO앱을 클래스앱에서 컴포넌트 함수형 으로 바꾸는과정에서 뭔가 문제가 생겼는지 아니면 이전부터 문제가 있었는지는 모르겠는데 이런오류가 뜨면서 되지않네요 ㅠㅠ 리액트 초짜라 뭘 어떻게 바꿔야할지 모르겠습니다 ㅠㅠ 답변부탁드립니다 감사합니다 ㅠㅠ위에 문제가 된다고 하는 6행 74행 사진입니다 ㅠㅠ
- 미해결따라하며 배우는 리액트 A-Z
creactStore질문이요
미들웨어에서 rootReducer 하나만 넣었을 땐 문제 없는데 2번째 인자 넣을때부터 에러가 계속 나는데 이유를 모르겠습니다.
- 미해결따라하며 배우는 리액트 A-Z
중첩 라우트
그럼 중첩 라우트는 인클루드 개념 인거겠네요?
- 미해결따라하며 배우는 리액트 A-Z
'List 컴포넌트 생성하기' 따라하다가 에러가 발생했습니다
List.js로 나눈 다음 data. 도 지우고 했는데 List.js에서 key={id} 부분에서 계속 오류가 발생합니다.List.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'draggableProps') at List (List.js:22:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) Lists.js 코드import React from 'react'; import { DragDropContext } from "react-beautiful-dnd"; import { Droppable } from "react-beautiful-dnd"; import { Draggable } from "react-beautiful-dnd"; import List from "./List"; export default function Lists({todoData, setTodoData}) { const handleEnd = (result) => { if(!result.destination) return; const newTodoData = todoData; const [reorderedItem] = newTodoData.splice(result.source.index, 1); newTodoData.splice(result.destination.index, 0, reorderedItem); setTodoData(newTodoData); }; 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> ); } List.js 코드import React from "react"; const List = ({ id, title, completed, todoData, setTodoData, provided, snapshot }) => { const handleClick = (id) => { let newTodoData = todoData.filter((data) => data.id !== id); setTodoData(newTodoData); }; const handleCompleteChange = (id) => { let newTodoData = todoData.map((data) => { if(data.id === id) { data.completed = !data.completed; } return data; }); 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 border rounded`} > <div className='items-center'> <input type="checkbox" onChange={() => handleCompleteChange(id)} checked={completed} /> <span className={completed ? 'line-through' : undefined}> {title} </span> </div> <div className='items-center'> <button className="px-4 py-2 float-right" onClick={() => handleClick(id)}> X </button> </div> </div> ) } export default List;
- 해결됨따라하며 배우는 리액트 A-Z
이벤트리스너 함수를 지정할 때, 화살표 함수와 그냥 함수의 차이
안녕하세요. 현재 섹션 3 수강 중인 수강생입니다. todo App을 만들고 있는데, X 버튼 구현하는 부분에서 onClick 이벤트 발생 시 작동하는 함수를 삽입해주는 부분인데요.onClick => {handleClick(data.id)}이렇게 입력하니 웹페이지가 제대로 동작하지 않고, 아래처럼 화살표 함수로 바꿔주니 정상적으로 동작합니다.<button onClick={() => handleClick(data.id)}> x </button>찾아보니 함수명으로 넣어주는 경우는 렌더링 시 함수가 바로 실행되고 click 이벤트 발생 시엔 함수의 반환값이 중괄호 안에 들어간다고 하고, 화살표 함수로 넣어줄 경우 의도한대로 click이벤트 발생 시에 함수가 실행된다는 걸 알게됐는데요, 이런 부분은 리액트 동작 원리 상 이렇게 되는거니 그냥 받아들이면 될까요? 아니면 제가 js 문법에 대해 이해가 부족해서 이해가 안가는 걸까요...?추가적으로, 그렇다면 리액트에서 이벤트리스너 함수를 넣을 때는 무조건 화살표 함수로 넣는게 맞는건가요?
- 미해결따라하며 배우는 리액트 A-Z
vscode 쓰실때 자동완성 문의드립니다
안녕하세요~ 터미널에서 auto suggestion 처럼 코드 제안하는 회색 글씨가 보이던데 어떻게 하셨는지 알 수 있을까요?
- 미해결따라하며 배우는 리액트 A-Z
체크박스 클릭 구현 함수에 대해서 질문드립니다.
input checkbox 에서onChange={() => this.handleCompleChange(data.id)}함수를 실행하게끔하는데 () => 는 왜들어가는걸까요? 예를들어 같은 방식의 함수중에 onChange={this.handleChange} 함수의경우엔 () => 가 없더라구요. 구현 부분은 똑같이 함수이름 = (파라미터) => {} 로 구현되어 있습니다.
- 미해결따라하며 배우는 리액트 A-Z
영화 나열을 위한 Row 컴포넌트 생성하기
8분 47초 까지 따라했는데, 오류가 뜹니다.import React, { useEffect } from 'react' import axios from '../api/axios' export default function Row({ isLargeLow, title, id, fetchUrl }) { useEffect (() => { fetchMovieData(); }, []); const fetchMovieData = async () => { const request = await axios.get(fetchUrl); console.log('request', request); }; return ( <div> </div> ) } 터미널에서는 아래와 같은 오류가 뜨고,WARNING in ./src/components/Banner.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/components/Banner.css) Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (75:5) autoprefixer: start value has mixed support, consider using flex-start instead WARNING in [eslint] src/components/Row.js Line 7:8: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps webpack compiled with 2 warnings 아래는 크롬에서 뜨는 오류입니다.Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading 'fetchNetflixOriginals') TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals') at App (http://localhost:3000/static/js/bundle.js:46:61) at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17) at beginWork (http://localhost:3000/static/js/bundle.js:25280:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10290:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10334:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10391:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30265:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9) ERROR Cannot read properties of undefined (reading 'fetchNetflixOriginals') TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals') at App (http://localhost:3000/static/js/bundle.js:46:61) at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17) at beginWork (http://localhost:3000/static/js/bundle.js:25280:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10290:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10334:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10391:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30265:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9) ERROR Cannot read properties of undefined (reading 'fetchNetflixOriginals') TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals') at App (http://localhost:3000/static/js/bundle.js:46:61) at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17) at beginWork (http://localhost:3000/static/js/bundle.js:25280:20) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30243:18) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9) at renderRootSync (http://localhost:3000/static/js/bundle.js:29408:11) at recoverFromConcurrentError (http://localhost:3000/static/js/bundle.js:28900:24) at performConcurrentWorkOnRoot (http://localhost:3000/static/js/bundle.js:28812:26)
- 미해결따라하며 배우는 리액트 A-Z
[react.memo]momo 적용전 rendering 상태 확인 관련문의
todo 앱에 대해 momo를 적용하기 전에, rendering 상태를 확인하는 것에서,강의화면상에서, 신규 문자 타이핑시에 전체(app, lists.list, form) 모두 컴포넌트가 랜더링이 되던데요. 저는 lists 컴포넌트만 랜더링이 됩니다.순차적으로 코드를 계속 따라서 하고 있었는데요.차이가 뭔지 모르겠습니다.[app.js][Lists.js][List.js][Form.js] ㅇ 새로고침시 디버그 콘솔화면ㅇ 텍스트 타이핑시 콘솔화면ㅇ '입력' 버튼 클릭 시 콘솔화면=>> 모두 Lists 컴포넌트만 랜더링이 표시됨.
- 미해결따라하며 배우는 리액트 A-Z
모달 창 외부 클릭 시 모달 닫게 만드는 Custom Hooks 생성 이 강의 오타부분
모달 창 외부 클릭 시 모달 닫게 만드는 Custom Hooks 생성 이 강의에서 useOnClickOutside custom hooks부분에서 event listener해제하는 부분이 addEventListener로 잘못되어 있내요
- 미해결따라하며 배우는 리액트 A-Z
[List 컴포넌트 생성하기] props 관련질문드립니다.
안녕하세요.기본적인 사항을 잘 몰라서 질의드립니다. props 를 내려주면서, data.id => id 형태로 수정을 해주는데요.함수 부분은 수정을 하지 않고 return 이하의 변수만 수정을 하는데 .. 이런 개념을 알려면 js 를 공부를 더 해야 할까요?? ㅡㅡ;
- 미해결따라하며 배우는 리액트 A-Z
[TailWindCss]Install Tailwind CSS with Create React App 관련문의드립니다.
안녕하세요. 초급이라 여러모로 잘 몰라서 질의드립니다. 강의화면상에서는 경고메시지가 없고, tailwindcss 설치시 명령어가 npm install -D tailwindcss postcss autoprefixer 로 tailwindcss 외에 postcss autoprefixer 의 두가지가 더 있는데요 . [강의화면]현재 tailwindcss 사이트에서 install 화면은 tailwindcss 하나만 인스톨하도록 가이드가 되어 있고react 보다는 다른 툴(?)을 사용하라는 경고가 있는데요. 가이드를 무시하고 일단 강의 내용대로 npm install -D tailwindcss postcss autoprefixer로 인스톨하니, postcss, autoprefixer 가 인스톨 된 것 같긴한데 이렇게 인스톨하더라도 혹시 react app 사용상에 뭔가 제약사항이 있는 건가요?? "devDependencies": { "autoprefixer": "^10.4.16", "postcss": "^8.4.31", "tailwindcss": "^3.3.5"
- 미해결따라하며 배우는 리액트 A-Z
create-react-app 관련
npx create-react-app 이렇게 만들면 src폴더 없이 만들어지더라구요 그래서 그냥 npx 없이 만드니까 정상적으로 잘 만들어지는데 npx가 있는거와 없는거의 차이점이 뭔지 궁금합니다
- 미해결따라하며 배우는 리액트 A-Z
css를 불러오지 않아도 클래스 이름을 부여하여 스타일이 가능한가요?
useParams를 이용한 영화 상세 페이지 구현 파트8분 45초에서 css 파일을 불러오지 않고도modal__poster-img 클래스 이름을 부여하자 스타일이 반영되는 것을 확인할 수 있었습니다왜 이렇게 되는 걸까요?
- 미해결따라하며 배우는 리액트 A-Z
todoData.map 화살표 함수 질문
[JSX Key 속성 이해하기] 파트에서는 todoData에 map 메서드를 사용할 때 this.todoData.map((value) => ( <div style={this.getStsyle()} key={value.id}> <input type="checkbox" defaultChecked={false} /> {value.title} <button style={this.btnStyle}>X</button> </div> ))로 return 없이 사용하셨는데 전 기존에는 this.todoData.map((value) => { return ( <div style={this.getStsyle()} key={value.id}> <input type="checkbox" defaultChecked={false} /> {value.title} <button style={this.btnStyle}>X</button> </div> ) })이렇게 사용했습니다 둘다 정상 동작하는데 차이점이 뭔지 궁금합니다
- 미해결따라하며 배우는 리액트 A-Z
PostDetailPage params 이 어디서 온건가요?
async function PostDetailPage({ params }: any) { const post = await getPost(params.id); return ( <div> <h1>Posts/{post.id}</h1> <div> <h3>{post.title}</h3> <p>{post.created}</p> </div> </div> ); }PostDetailPage 에서 params을 콘솔에 출력하면 id값이 나오는거는 주소에서 받아오는건가요?