55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨따라하며 배우는 리액트 A-Z
Lists.js에서 List컴포넌트로 프롭스 보내줄때,
<List key={data.id} id={data.id} title={data.title} completed={data.completed} todoData={todoData} setTodoData={setTodoData} provided={provided} snapshot={snapshot} />List에 프롭스 key를 넘겨주었는데왜 List.js에서는 key를 받지 않은 건가요?
- 미해결따라하며 배우는 리액트 A-Z
오류 질문
검색을 해보니 컴포넌트 명 관련해서 에러 라고 나와져있는데 소스 를 확인해봐도 오타 문제는 아닌거같아 강사님께 여쭤봅니다 ㅠㅜ 무슨문제일까요 ?
- 미해결따라하며 배우는 리액트 A-Z
params: { append_to_response: "videos" },
const { data: movieDetail } = await axios.get(`movie/${movieId}`, { params: { append_to_response: "videos" }, }); setMovie(movieDetail);안녕하세요 <이미지 배너 생성하기>를 듣다가 이 부분 코드가 이해가 안가서 질문 드립니다.다른 답변적으신거에 append_to_response가 theMovieDB API 서버에서 정해놓은 것이라고 작성하신 것을 봤는데, 어디에 가야 그 내용을 확인할 수 있는지 궁금합니다. 제가 movieDetail을 콘솔로그로 확인해보았을땐 해당 내용이 뜨지않아서요...항상 도움이 되는 강의 잘 수강하고 있습니다!!
- 미해결따라하며 배우는 리액트 A-Z
액세스 키가 활성화 되지 않는다 라고 나옵니다.
강의 6분 정도 부터 진행이 안되고 있습니다ㅠㅠ 액세스 키를 찾을 수 없어요..
- 미해결따라하며 배우는 리액트 A-Z
압축파일 말고, git이나 코드 복사할 수 있는 링크는 없나요?
생각보다 파일의 용량이 커서 압축이 안 풀립니다..ㅎㅎ복사해도 되는 부분들은 복사해서 쓰고 싶은데 있으면 공유 부탁드릴게요
- 해결됨따라하며 배우는 리액트 A-Z
Create Post 가 안되네요 ㅜ
강의 따라 하던 중에 앞 부분은 무리없이 잘 되었는데,강사님 코드 그대로 따라쳐도Create Post 가 아무 반응을 안합니다.물론 pocketBase에 아무 것도 안올라갑니다.혹시나 하여 Postman 으로pocketBase에 직접 POST request 해봤는데바로 잘 올라갑니다!
- 미해결따라하며 배우는 리액트 A-Z
getStaticProps 포스트리스트 나열 영상 중Module not found: Can't resolve 'fs' 에러에 대해
이런 이유로 렌더링이 안된는것 같은데 검색을 해보면웹팩이나 버전에 대한 설명이 있는것 같은데 잘 모르겠네요 . 아시는 분 답변 부탁드려용.~~ㅜ.ㅜ
- 미해결따라하며 배우는 리액트 A-Z
페이지에 렌더링이 안됩니다 ..
선생님이랑 똑같이 작성했는데 왜 그럴까요...??
- 미해결따라하며 배우는 리액트 A-Z
ts2322 오류
안녕하세요 따라하며 배우는 리액트 A-Z 섹션2 6번째 강의를 수강하던 중 button 태그에 스타일을 줄 때 float가 undefined 된다는 오류가 잘 해결 되지 않아 방법을 여쭙니다.
- 해결됨따라하며 배우는 리액트 A-Z
map 함수를 쓸때
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 위는 JSX고 아래는 자바스크립트라서 묶어주는 괄호가 다른건가요??똑같이 소괄호 또는 중괄호 하면 오류가나는데 이유가 있나요??
- 해결됨따라하며 배우는 리액트 A-Z
수업자료 질문
안녕하세요수업에서 보여주는 nextjs13 관련 pdf 문서는 따로 공유 안 되는 걸까요...?
- 미해결따라하며 배우는 리액트 A-Z
aws 질문입니다.
안녕하세요!혹시 강의 대로 진행하면 요금은 따로 청구되지 않는걸까요? 예전에 요금 폭탄을 맞은적이 있어 혹시 몰라 질문드립니다!ㅜㅜ
- 미해결따라하며 배우는 리액트 A-Z
nextjs13강의 pdf랑 소스코드 올려주실수 있나요..
에러 잡는부분이랑 제 코드 어딘가 잘못된거 같은데 보면서 확인하고 싶어요..
- 미해결따라하며 배우는 리액트 A-Z
개인 블로그 정리
안녕하세요 선생님혹시 강의를 듣고 정리한 내용을 개인 블로그에 게시해도 될까요??
- 미해결따라하며 배우는 리액트 A-Z
커리큘럼 질문
안녕하세요 ! 이번에 리액트 강의를 구매했는데 커리큘럼 문제로 질문드립니다.리액트 강의를 듣기전에따라하며 배우는 노드 ,리액트 시리즈 기본강의=>유튜브=>영화사이트 =>챗봇 =>쇼핑몰 =>리액트 A-Z=>레딧사이트 만들기 이순서로 들을까 하는데 괜찮을까요?
- 해결됨따라하며 배우는 리액트 A-Z
마이너스 버튼 관련 질문
안녕하세요아래와 같이 코드를 작성할 경우, 0 으로 입력하면 에러 메세지가 보여집니다.반대로 플러스 버튼과 동일하게 1로 하면 에러 없이 제대로 작동이 됩니다.왜 0으로 하면 에러가 발생하는 걸까요?test('when the - button is pressed, the counter change to 0', () => { render(<App />); const buttonElement = screen.getByTestId("minus-button"); // click plus button fireEvent.click(buttonElement); // 카운터가 1에서 -1로 되서 0이 된다. const counterElement = screen.getByTestId("counter"); expect(counterElement).toHaveTextContent(0); })
- 미해결따라하며 배우는 리액트 A-Z
Nextjs gh-pages 배포
안녕하세요~Nextjs 강의 부분까지 수업을 마쳤습니다.선생님께서 nextjs & typescript로 제작하신 블로그 부분을 gh-pages를 사용해서 배포해보려는데 디렉토링 부분이나 렌더되는 부분이 기존의 react 부분과 달라 질문 드립니다. baseurl 설정은 어디서 해야할까요?deploy 방식은 동일한 건가요?혹시 위의 질문 말고도 다른점이 있을까요?
- 해결됨따라하며 배우는 리액트 A-Z
맥용, prettier 단축키
안녕하세요vscode에서 Prettier 설치를 했는데shift + option + f단축키가 먹히질 않네요ㅠ 왜 그런 건지 알 수 있을까요..?
- 미해결따라하며 배우는 리액트 A-Z
react-netflix-clone 오류 문의
안녕하세요!react-netflix-clone의 메인 페이지에서 발생한 오류에 대해 문의 드립니다.문의1) key={movies.id} 에 대해 "list should have a unique "key" prop" 오류가 발생합니다.Row.js ... <div id={id} className='row__posters'> {movies.map((movie) => ( <SwiperSlide> <img key={movie.id} style={{ padding: "25px 0" }} className={`row__poster ${isLargeRow && "row__posterLarge"}`} src={`https://image.tmdb.org/t/p/original/${ isLargeRow ? movie.poster_path : movie.backdrop_path }`} alt={movie.name} onClick={() => { imageClickHandler(movie) }} /> </SwiperSlide> ))} </div>MainPage.js 에서 Row 컴포넌트를 하나만 정의해도 동일한 오류가 발생합니다. 문의2) useEffect eslint warning이 안나게 하려면 어떻게 해야 하나요?useEffect(() => { fetchMovieData(); }, []); ==> warning WARNING in [eslint] src/components/Row.js Line 24:8: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps 문의3) autoprefixer warning이 안나게 하려면 어떻게 해야 하나요?warningWARNING 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 insteadBanner.css (제공 소스 그대로 적용함).banner { color: white; object-fit: contain; height: 448px; } @media (min-width: 1500px) { .banner { position: relative; height: 600px; } .banner--fadeBottom { position: absolute; bottom: 0; width: 100%; height: 40rem; } } @media (max-width: 768px) { .banner__contents { width: min-content !important; padding-left: 2.3rem; margin-left: 0px !important; } .banner__description { font-size: 0.8rem !important; width: auto !important; } .info { text-align: start; padding-right: 1.2rem; } .space { margin-left: 6px; } .banner__button { font-size: 0.8rem !important; border-radius: 4px !important; } } .banner__contents { margin-left: 40px; padding-top: 140px; height: 190px; } .banner__title { font-size: 3rem; font-weight: 800; padding-bottom: 0.5rem; } .banner__description { width: 45rem; line-height: 1.3; padding-top: 1rem; font-weight: 500; font-size: 1rem; max-width: 400px; height: 80px; } .banner--fadeBottom { height: 7.4rem; background-image: linear-gradient( 180deg, transparent, rgba(37, 37, 37, 0.61), #111 ); } .banner__buttons { display: flex; flex-direction: row; } .banner__button { display: flex; flex-direction: row; justify-content: start; align-items: center; cursor: pointer; outline: none; border: none; font-size: 1rem; font-weight: 700; border-radius: 0.2vw; padding: 0.4rem 1.8rem 0.4rem 1rem; margin-right: 1rem; } .banner__button:hover { color: #000; background-color: rgba(170, 170, 170, 0.9); transition: all 0.2s; } .play { background-color: white; color: black; } .info { background-color: rgba(109, 109, 110, 0.7); color: white; } .info:hover { background-color: rgb(74, 74, 74); color: white; } .space { margin-left: 4px; }
- 미해결따라하며 배우는 리액트 A-Z
[React.memo] useState의 setState는 변경되지 않는가요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. React.memo로 렌더링 최적화 강의를 듣다가 질문이 생겼습니다.React.memo는 props가 변하지 않으면 다시 렌더링 하지 않는다고 알고 있는데요. App.js에서 useState의 결과물인 setState(setTodoData 등)가 List.js의 props로 내려가는데, 이는 변화로 보지 않는 것으로 보았습니다.아래의 단순화된 useState의 구현을 보면 useState로 나온 state는 클로저를 통해 값이 변경되지 않으면 useState가 같은 값?참조?를 내려주는 것 같은데, setState는 매번 새로 생성되어 참조가 바뀔 것 같다는 생각을 하였습니다. 그래서 React.memo가 매번 새로 생성되는 setState를 보고 props가 바뀌는 것으로 인식하여 렌더링을 해주어야 하지 않을까 했는데... 실제로는 그렇지 않더라고요물론 단순화된 구현이고 실제 리액트의 구현은 복잡한 과정을 거쳐 같은 참조를 내려줄 것 같다고 생각이 드는데요.이 마법같은 과정이나 원리, 키워드에 대해서 아무리 찾아도 찾을 수가 없어서 도움을 청하고자 질문을 남깁니다...감사합니다. const MyReact = (function() { let _val // hold our state in module scope return { render(Component) { const Comp = Component() Comp.render() return Comp }, useState(initialValue) { _val = _val || initialValue function setState(newVal) { _val = newVal } return [_val, setState] } } })()출처: https://medium.com/hcleedev/web-usestate%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%99%80-%ED%95%A8%EC%A0%95-7b4825c16b9