코드로 배우는 React with 스프링부트 개정판3영는 React with 스프링부트 개정판3 영풍문고 IT 코너에 메인으로 전시되어 있네요.최근 개정판 맞죠? 너무 반가워서 ^^ 응원 하러 왔어요 ^^ 스프링 mvc의 기초를 다져준 이 강의에 꽤나 인상이 깊었나 봐요 ^^ 이어서 Reactor, webflux 강의도 기대해 봅니다 ^^)*

강사님 안녕하세요! 최적화 강의 1,2 잘 듣고 있습니다 :)3-4) 이미지 사이즈 최적화 강의에서 강의에서 설명하신 방식대로 진행했는데, 제 경우는 다른 결과가 나와서 질문 드립니다.강사님이 작성하신 코드대로 webp 형식을 지원하는 브라우저이면 source 태그를 통해 로드하고 그렇지 않으면 jpg 형식으로 로드하도록 코드를 그대로 작성했습니다. <picture> <source data-srcset={props.webp + "s"} type="image/webp" /> <img data-src={props.image} ref={imgRef} /> </picture>그러나 고의적으로 data-srcset 에서 에러를 발생시켰을 때, img 태그에 해당하는 jpg 형식의 이미지가 로드되지 않고, 이미지 엑박이 나옵니다.저와 동일한 질문을 봤는데 jpg 형식 이미지가 담긴 img 태그는 실제로 화면에 잘 나오는 것을 확인했습니다.webp 형식과 Jpg 형식 이미지 모두 지연 로딩을 적용해서 이러한 에러가 발생하는건가요?  

제가 유저들끼리 커뮤니티 만들고자 하는데 이때부터 강의 보면 될까요? 여러가지 다 보고있는데 어디서부터 딱 봐야할지 모르겠습니다.! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요. v15로 업데이트를 했는데 하이드레이션 오류가 발생하기 시작했습니다./book/1 페이지에서 vscode 저장으로 Next.js가 재실행이 되면은 오류가 발생하는데요.하이드레이션 과정에서 서버와 클라이언트의 HTML이 일치하지 않아 클라이언트에서 재생성이 된다는 오류가 발생하고 있습니다. 그래서 속도 저하가 굉장히 심해진 상태입니다. https://nextjs.org/docs/messages/react-hydration-error이 곳에서 오류가 발생하는 원인과 해결법을 말해주고는 있는데, 지금 저한테만 발생하는 현상인건지 좀 궁금합니다.

<Row title="Netflix ORIGINALS" id="NO" fetchUrl={requests.fetchNetflixOriginals} isLargeRow > </Row> <Row title="Trending Now" id="NO" fetchUrl={requests.fetchTrending} > </Row>  return ( <section className="row"> <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}`} alt={movie.name} > </img> ))} </div> <div className="slider__arrow-right"> <span className="arrow" onClick={() => { document.getElementById(id).scrollLeft += window.innerWidth - 80 }}>{">"}</span> </div> </div> </section> ) 넷플릭스 오리지널에서는 슬라이드가 제대로 동작합니다. 그런데 아래 row들의 화살표를 클릭했을때 넷플릭스 오리지널 포스터의 슬라이드가 동작하는데 이유를 모르겠습니다.

컨텍스르를 설계하실 때 const Consumer = ({childeren } => <>{children(emiiter.get())}</>) 설명하시면서 렌더프롭이라고 설명하셨습니다.그 이후 Count 설계하실 때 {(value) => <div>{value.count}</div>} 라고 적으셨는데 렌드 프롭에 대한 설명이 없으셔서 정확히 어떻게 렌더링되는지 궁금합니다!! 정확한 원리를 자세히 모르겠습니다

안녕하세요!지금까지 강의 너무 잘 들었습니다.React와 TypeScript 강의를 듣고 복습겸으로 제공해주신 핸드북 사이트까지 참고하면서 공부하고 있습니다!혹시나 Next.js의 핸드북 사이트를 제가 못 찾은건지 아니면 없다면 만드실 계획은 없으신지 궁금해서 질문 올려봅니다.좋은 강의 만들어주셔서 감사합니다.

 수업 영상대로 따라갔을때 props가 undefined로 나오는데 별도의 설정이 필요할까요? SearchForm에서 다음 코드를 추가했을때도 동일하게 안되네요 constructor(props) { super(props); ... }

landingpage에서 useEffect로 fetchProducts를 하고 있는데, VSCode development server를 켜놓고 하지 않습니까?근데 vscode에서 save를 할 때 landingpage의 useEffect가 실행되는데, 이게 원래 이런건가요? useEffect는 컴포넌트가 처음 마운트 될 때만 실행되는 것으로 알고 있는데, 개발모드에서 save할 때는 save할 때마다 실행되나요? 궁금하네요.

안녕하세요 제로초님 modal을 구현하고있는데 궁금증이 생겨 질문드립니다.modal을 구현할 때 intercepting routes를 사용하는 이유가 궁금합니다. 단순히 parallel로만 띄우면 안되는건가요? 아래는 제가 구현한 코드예시입니다.https://github.dev/datoybi/next-playgroundsimple-modal1은 parallel routes만 사용하였고, simple-modal2는 parallel routes + intercepting routes를 사용하였습니다.두개 다 구현을 해보았는데 새로고침을 해도 둘의 결과값이 같습니다.무엇때문에 intercepting routes를 사용하는 건가요? 미리 감사합니다!

all books 를 가져오는 fetch 에서 한부분은 no-store 로 적용되고 한 부분은 force-cache 로 적용된다고 했을 때 한 부분이 no-store 이기 때문에 force-cache 한 부분도 계속 갱신되어질까요?

기존처럼 사용하면 빌드시 타입 오류가 나와서 따로 type을 Promise 로 만들어 사용해줘야 하는 듯합니다. nextjs 링크도 첨부해두었습니다. https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams참고로 search/page.tsx 에서 searchParams 를 다음과 같이 타입 적용해주었더니 정상 빌드되었습니다. type SearchParams = Promise<{ q?: string }>;

쌤~문득 궁금해져서 질문드립니다.보통 파일작성하실 때 jsx확장자로 하시는데 왜 유독 util폴더에 있는 파일은 js확장자 인가요?jsx나 js든 자유롭게 써도 되는건지 어떤 규칙이나 의도가 있으신지 궁금합니다.!

api 서버에서 Todo 엔티티 에는 content 로 했는데 왜 이번 섹션4 강의부터 갑자기 writer 가 나오는 건가요?원래 writer 인데 content로 잘못 만드신건데 그냥 사용하신건가요? 그냥 계속 진행 해도 별 문제 없는 건지 궁금합니다

import "./App.css"; import Viewer from "./components/Viewer"; import Controller from "./components/Controller"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( <div className="App"> <h1>Simple Counter</h1> <section> <Viewer count={count} /> </section> <section> <Controller onClickButton={onClickButton} /> </section> </div> ); } export default App;const Controller = ({ onClickButton }) => { return ( <div> <button onClick={() => { onClickButton(-1); }} > -1 </button> <button onClick={() => { onClickButton(-10); }} > -10 </button> <button onClick={() => { onClickButton(-100); }} > -100 </button> <button onClick={() => { onClickButton(100); }} > +100 </button> <button onClick={() => { onClickButton(10); }} > +10 </button> <button onClick={() => { onClickButton(1); }} > +1 </button> </div> ); }; export default Controller; App.jsx에서 onClickButton이 count, setCount 함수를 모두 사용하고 있을텐데요, 이것이 Controller.jsx로 넘어갈 때에는 아래와 같이 넘어가나요(value) => { setCount(13 + value);//count:13일때 };아니면 App.jsx에서 onClickButton 함수를 호출하여 App.jsx의 count, setCount를 사용하는 것인가요? 너무 기초적인 질문을 드려 죄송합니다ㅠㅠ

https://nextjs.org/docs/messages/sync-dynamic-apis에 내용이 변경되었다고 하네요. 혹 어떻게 수정하면 좋을지에 대한 공지가 따로 있을까요?

refresh token filter를 validation하고재발급해주는 걸 컨트롤러로 구현하셨는데 필터로 구현한다면UsernamePasswordAuthenticationFilter 앞으로 지정한JWTCheckFilter 에다가 구현하면될까요>? 

안녕하세요~ 포트폴리오 과제하다가 질문 생겨 남겨요 첫번째는 댓글 내용 수정할 때 댓글 내용을 지우다가 다 지워지면 수정 전 원래 댓글 내용으로 도로 바뀌는 문젠데요댓글부분 리팩토링 끝마치고나서 발견해서 처음엔 뭘 잘못했나? 했는데 계속 보니 그냥 value에서 defaultValue를 대체하여 작성해주던 아래 부분 때문인 것 같더라고요value={ props.inputs.contents !== "" ? props.inputs.contents : props.el?.contents ?? "" }수정을 시작할 땐 props.inputs.contents === ""이니까 댓글 내용인 props.el?.contents를 불러와서 띄워주고, 지우는 중엔 state가 빈 문자열이 아니니까 props.inputs.contents대로 표시되다가 댓글 내용을 전부 지우면 props.inputs.contents가 다시 빈 문자열이 되어서 바로 기존 댓글 내용을 띄워버려요아예 댓글 내용을 지우고 싶어도 지울수가 없게 되어버리는데 어떻게 바꾸면 될까요? 좀 생각해봤는데 감이 안와서요 혹시 나중에 고치는 내용이 나오나요  두번째는 이번 포트폴리오 과제의 댓글부분 리팩토링 진행하다가 궁금했던 건데요// BoardCommentWrite.container.tsx // ... const onClickWrite = async (): Promise<void> => { // ... // setWriter(""); // setPassword(""); // setContents(""); setInputs( (prev) => Object.fromEntries( Object.keys(prev).map((key) => [key, ""]), ) as typeof prev, ); // ... }댓글 작성 끝날때 writer, password, contents를 비워줄 수 있도록 빈 문자열로 초기화시켜주던 걸 이런식으로 바꾸었는데 리팩토링 마치고 나서 잘 돌아가긴 했는데요위 부분을 너무 어거지로 바꾼 것 같아서 좀 그래요...사실setInputs({ writer: "", password: "", contents: "" })그냥 이렇게 하는게 여기선 가장 좋은 방법인 것 같긴 한데, 더 많은 state들을 묶는 경우도 있다고 생각하면 것도 좀... 그래서요이번 댓글 부분 코드에서는 setInputs({ writer: "", password: "", contents: "" }) 이렇게 하는게 가장 적당할까요? 그리고 더 많은 걸 초기화해야한다고 치면 어떻게 하는게 좋을까요?

50개의 데이터를 넣는 과정에서 발생한 오류입니다. 임시 데이터라 발생한 오류라 나중에 데이터를 넣으면 해결된다는 답변을 보았는데 그 뒤에 수업을 따라가면서 맞게 코드작성을 하고 있는지 체크가 불가능한 상태여서 임시적으로라도 해결하는 방법이 있을까요?

api 가 요청받을때 시큐리티 필터 넘버링되서 13개쭉나오는 설정은 어디서 하는건지 알수있을까요>?