강의영상 5분대에서 fetch 속에 들어가는 cache등과 같은 옵션등은 https://developer.mozilla.org/ko/docs/Web/API/fetch mdn web doc에서의 fetch 문서를 찾아 문법을 확인하다 이해가 잘 안되는 점이 두개가 있어 문의 드립니다. credentials, headers, cache는 찾았는데 next는 못찾았는데 이 부분은 어느 자료를 보고 사용법을 확인할 수 있는지 모르겠네요. 혹시 next에서 인식하기 위해 태그를 추가하는 것이라면... next: {tags: ['rooms']},에서 rooms 빼고는 고정해서 사용하는 것인가요? headers 부분에서 {Cookie: cookies().toString()} 처럼 key-value 형식을 갖춘 객체로 넣는 것은 필수인가요? 그리고 이것과 별개로 제가 쿠키에 어떤 정보들이 저장되는지 잘 몰라서 cookies().toString()에는 어떤 정보들이 담기는 것인지 궁금합니다.
app-index.js:35 Warning: Extra attributes from the server: class at html at RedirectErrorBoundary ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9 ) at RedirectBoundary ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11 ) at NotFoundErrorBoundary ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9 ) at NotFoundBoundary ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11 ) at DevRootNotFoundBoundary ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11 ) at ReactDevOverlay ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9 ) at HotReload ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11 ) at Router ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:182:11 ) at ErrorBoundaryHandler ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9 ) at ErrorBoundary ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11 ) at AppRouter ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:538:13 ) at ServerRoot ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11 ) at RSCComponent at Root ( webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11 ) 프레임 1개 더 표시 패키지 생성만 했는데 콘솔에 찍히는 오류가 있던데 그냥 로컬에서 실행해서 뜨는 오류인건가요?
안녕하세요! 강의 잘 듣고 있습니다. module이 붙어있으면 각 페이지에서 쓰는 left, right를 구별해준다고 하셨는데 page.module.css 가 app 폴더 안에 있어서 전부 다 적용이 되고 있는데 만약 login파일에서 left를 쓰고 signup파일에서도 다른 css를 적용하는 left를 쓰고 싶다면 이 둘은 어떻게 구분을 하나요? page.module.css에 left를 두번 작성하나요..?
useEffect(() => { if (inView) { !isFetching && hasNextPage && fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); 여기서 !isFetching && hasNextPage && fetchNextPage(); 이 부분은 셋 모두가 truthy일때(앞의 두개의 boolean은 true이고 마지막의 함수는 return값이 존재할 때) 마지막 함수의 return값이 호출되는 구조인 것으로 이해되는데, 그렇다면 함수를 두개를 묶고서, 예를 들면 boolean&&함수1()&&함수2() boolean을 &&으로 묶어도 해당 boolean이 true이면 두개의 함수가 차례대로 실행되는건가요? 예시에서, 함수1과 함수2의 return값이 존재한다고 하면 함수1, 함수2 순서로 차례대로 실행되게 할 수 있겠네요? 그리고 한쪽의 함수라도 return값이 null이나 undefined되는 경우라면 두개의 함수결과가 모두 안나오게 만들고요. 제가 생각한 응용방식이 맞을까요?
일전에 동일한 문제로 질문 올렸는데, 혹시나 제 코드에 발견되지 않은 오타나 문제가 있을까하여 제로초님 깃에서 다운받은 ch4폴더로 실행해도 동일한 문제 발생합니다. MacOs: Ventura 13.6.4 크롬브라우저로 보고있습니다. DB연결문제는 Postgresql은 버전을 낮춰서 Homebrew로 설치하고, Username을 맥os 유저네임으로 변경하니까 다행히 연결이되었습니다. 그런데 여전히, 회원가입후 리다이렉트 안되는 현상과 심지어 회원가입 된 Postgresql 테이블에 User정보도 잘 들어가있고, 회원가입된 유저의 id,비번으로 로그인해도 로그인도 안됩니다. package.json 버전정보: 클라이언트에서 리턴받은 값: 서버에서 나오는 console: 무엇이 문제일까요?
useQuery사용할 때 <> 속에 넣는 generic type이 <쿼리함수로 나오는 값, 오류시 나오는 값, 최종 결과, 키로 넣는 값>의 타입이라는 것을 강의 및 검색을 통해서 인지하였습니다. 그런데 공식문서 검색을 해보니 이런 설명을 안해주는거 같더라고요. https://tanstack.com/query/latest/docs/framework/react/reference/useQuery https://tanstack.com/query/latest/docs/framework/react/typescript 혹시 타입스크립트에서 generic type에 어떤것을 넣어야 하는지 모르는 경우에는 어떻게 찾는게 일반적인 방법인가요?
로그인 모달에서 발생하는 문제 해결하기(router.replace) 위 강의 시청 중 질문드립니다. 실제로 위와 같이 login 페이지에서 어떠한 주요 로직 실행없이다른 페이지(i/flow/login)로 replace 또는 redirect만 시키는 경우가 있을까요? 실제로 이런 동작이 필요한 경우가 있다면 어떤 경우에 필요하게 될 지 궁금합니다.
제가 아직 타입스크립트 문법에 익숙하지 않아서 강의 5분 36초 쯤에 나오는 부분이 제대로 이해하고 있는게 맞는지 문의 드립니다. 지금 const {data : IPost[] | undefined}의 data와 const { data : Session | null}의 data가 겹쳐서 후자를 const { data: session Session | null} 으로 수정하였는데, 이 경우엔 앞의 const {data : IPost[] | undefined} 의 데이터는 IPost[] | undefined 둘 중 하나의 타입을 가지는 value가 되고 const { data: session : Session | null} 에서 data는 key가 되고 session이 Session | null둘 중 하나의 타입을 가지는 value가 입력되는 것이지요? 그러면 data. 라고 적으면, key로 사용된 data는 인식이 안되고 value로 사용된 data가 인식이 되어서 IPost[] 배열의 데이터를 가져오는 것이 되나요?
강의 시간 1분대에서 /api/users/:userId/posts 에서 userId앞에 :를 넣는 것이 일반적인 약속이나 특정한 이유때문에 넣는 것인지 알고 싶습니다. 그리고 search기능을 제공하는 웹사이트에서 검색결과 주소에 물을표를 넣는 이유도 그냥 일반적인 약속 같은 것인지 같이 궁금합니다.
react-query ssr 설정하기인데 어느 부분이 ssr 설정인지 잘모르겠습니다 어느부분인가요?? export async function getPostRecommends({ pageParam }: Props) { const res = await fetch( `http://localhost:9090/api/postRecommends?cursor=${pageParam}`, { next: { tags: ["posts", "recommends"], }, } ); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } return res.json(); }
조금 있다가 잘 짜는법에 대해 설명한다 하였는데, 제가 놓친것인지 다음강의에 나오는 내용인지 못들은 기분입니다. 일단 다음 강의 보다가 까먹고 놓치지 않기 위해 문의합니다. 우선 앞에 ""으로 표기한것은 함수 이름 설정하듯이 자기가 의도한대로 넣을 수 있고 몇개를 입력하든 상관 없는 것인가요? params 같은 경우는 마지막에 한번만 객체나 특정 타입 형식으로 넣을 수 있는 것인가요? 추가적으로 export default function SearchResult({searchParams}:Props){ ... 에서 searchParams가 객체로 한번 더 묶여서 정의되어 들어가는 이유는 그냥 편의상 그런 것일까요? type SearchParams= { q: .....} 로 정의하고 export default function SearchResult(searchParams:SearchParams){ ... 같은 식으로 넣어도 문제 없이 진행할 수 있는지, 아니면 {}객체로 한번 더 묶는 이유가 있는 것인지 궁금합니다.
강의이기 때문에 react-queary, zustand, context.API 세가지를 보여주지만 실제로는 하나만 쓰면 된다하여서 처음 강의에 나오던 context.API로만으로 코드를 짜려고 다른 것들은 대충 넘겨 들었는데요. 어느정도 코드 짜보다가 react-query 부분을 다시 듣고나서보니 react-query는 또 느낌이 다른것 같네요. 그런데 혹시 서버액션 쪽에서 첫번째 동작 이후에 쓰로틀이 들어가게 코드를 짜두면 context내의 서버 데이터 갱신할 때도 react-queary의 stale 같은 기능을 만들 수 있는 거겠죠? 해당 기능은 그렇게 구현한다고 하여도, 지금 앞뒤로 강의 다시 들어보니 캐싱 관리같은건 또 다른 차원이거 같아서 결국에 react-queary를 병행해야만 하는건가 싶네요. 다른 질문 답변을 보니 강사님도 react-queary는 데이터 패칭용으로 다른 상태관리 라이브러리와 병행해서 쓰시는것 같고요.
