묻고 답해요
137만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
react-query 서버 사이드
강의 2분에 서버쪽에서 쿼리 가져오는게 좋은 상황이 검색 노출이 될 때 라고 하셨는데, SEO 이외에 다른 장점은 없나요? 서버사이드가 속도가 더 빠르지 않을까 라고 생각을 하고 있었습니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
middleware.ts 파일에 zustand 사용방법
JWT 사용해서 로그인정보는 zustand에 저장하고middleware.ts 파일에서 zustand state에 접근해서 유저정보값이 없으면 로그인 화면으로 리다이렉트 하고 싶습니다만,middleware.ts에서는 zustand state값을 가져오질 못하는것 같은데... 방법이 없을까요?
-
해결됨Next + React Query로 SNS 서비스 만들기
공식문서와 강의 내용 중 어떤 방식으로 QueryClient 인스턴스를 생성하는 것이 좋을까요?
React Query 공식 문서에 보면 queryClient 인스턴스를 생성해서 바로 QueryClientProvider의 client로 넘겨주고 있는데 제로초님께서는 useState의 초기 값으로 QueryClient의 인스턴스를 생성해서 넘겨주는 방법을 사용하셨는데요. 이 두가지 방법 중에 어떤 것을 사용해야 좋을지 궁금합니다. // 공식 문서 const queryClient = new QueryClient() function App() { return ( <QueryClientProvider client={queryClient}> <Todos /> </QueryClientProvider> ) } // 제로초님 강의 function ReactQueryProvider({children} : Props) { const [client] = useState( new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false, } } } ) ) return <QueryClientProvider client={queryClient}></QueryClientProvider> }
-
미해결Next + React Query로 SNS 서비스 만들기
redirect & try/catch 질문
redirect는 try/catch문 안에 있으면 안돼서 그 위해 shouldRedirect의 값으로 조건문을 만들어 if문 안에서만 redirect하게 하셨는데, 이후에 catch문에서 return을 넣어주시더라고요. 그러면 shouldRedirect라는 변수를 쓰지 않아도 어차피 catch문이 실행된 경우에는 return 되니까 redirect를 아래에 그냥 배치해도 상관없지 않나 질문드립니다.
-
미해결Next + React Query로 SNS 서비스 만들기
로그인 모달 리다이렉트를 다른 방식으로 구현했는데 문제 없을까요?
강의에서 알려주신 router.replace() 를 사용하지 않고// @/app/(beforeLogin)/@modal/(.)login/page.tsx import { redirect } from "next/navigation"; export default function Login() { redirect("/i/flow/login"); }기존의 이 코드를 인터셉트 라우팅으로 줘서홈페이지 -> 인터셉트 라우팅된 /login -> 인터셉트 라우팅된 /i/flow/login 으로 이동하도록 폴더를 구성해서 구현해 봤습니다. 이 방식으로 구현해도 문제 없을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
Link 태그 사용 관련 질문(prefetch)
이미지에 Link 태그를 쓰는거에 대한 질문입니다. Link 같은 경우에는 default로 prefetch가 되는데, 이미지를 눌렀을때 나오는 정보들은 굳이 prefetch를 미리 하고 있을 필요는 없겠죠? 그러면 실제 서비스라면 prefetch를 false로 하거나 router.push를 이용하는게 좋지 않을지 궁금합니다. 페이지를 구성할때 존재하는 모든 경로를 Link 태그로 그냥 쓰게 되면 prefetch가 모두 되어버려서, 큰 카테고리를 이동하는 경우만 prefetch를 키면 되지 않을까 하는 고민입니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
선생님께서 사용하시는 IDE에 대해서 궁금합니다.
선생님이 사용하시는 IDE는 , 속성의 종류가 회색글씨로 나오는게, 마치 타입스크립트처럼 복잡하게 생각할 필요 없이 명시적으로 나와서 편해 보입니다. 혹시 vscode에서도 저런 익스텐션이 있을까요? 아니면 웹스톰을 사용하면 저게 자동으로 나오나요?
-
미해결Next + React Query로 SNS 서비스 만들기
MSW npm run mock 버전 에러
강좌 잘 따라가고 마지막 부분에서서버 띄우기 위해 터미널을 하나 더 열고 명령어를 적었습니다. 해당에러node_module파일에 msw에 내부 파일에서 Response를 참지하지 못한다는 에러가 있어서 ..브런치를 다시 지우고 작업도해보고구글링과 공식문서를 보았는데도 문제의 해결점을 찾지 못하던 중에 12시간 전에 올라온 저와 동일한 문제를 가진 사람을 발견했어요 - !https://www.reddit.com/r/nextjs/comments/1997wb3/msw_2x_and_nextjs_14_has_anyone_successfully/하지만, 이 분도 해결하지 못한거 같더라구요ㅠㅠ 현재 저의 msw버전은msw 버전 낮춰서 작업을 하는 법이 해결방법인가요 ? 또 하나의 작은 질문입니다만,현재 nodejs의 임시방편적인 코드를 사용하고 있는데서버 관련 코드를 setupServer를 사용해도 괜찮을까요 ?
-
미해결Next + React Query로 SNS 서비스 만들기
패러렐 라우트를 root layout.tsx에서 사용할수는 없나요?
안녕하세요 제목 처럼, 저는 @modal을 app경로에 생성해서 root 디렉토리의 page.tsx 와 함께 layout.tsx에 그려지길 원합니다. 그래서 저는 로그인 페이지를 따로 작성해서 가지고 있지 않고, 어느 페이지에서든지 모달창이 나오게 하고 싶습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
/ 로 들어갈 때 (beforeLogin) 폴더에 layout.tsx가 렌더링 되는 이유가 뭐에요?
/ 로 들어갈 때 (beforeLogin) 폴더에 layout.tsx가 렌더링 되는 이유가 뭐에요?(afterLogin) 폴더 밑에도 layout.tsx가 있는데 (beforeLogin) 폴더 밑에 layout.tsx가 칠드런으로 선택되는 이유가 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
build시 dynamic route 에러
> duckblog@0.1.0 build> next build && next export ⚠ Invalid next.config.js options detected: ⚠ Unrecognized key(s) in object: 'appDir' at "experimental" ⚠ Unrecognized key(s) in object: 'dynamic' ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config ▲ Next.js 14.0.4 ✓ Creating an optimized production build ✓ Compiled successfully ✓ Linting and checking validity of types > Build error occurredError: Page "/post/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config. at /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:1012:59 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async Promise.all (index 6) at async /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:892:17 at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:829:124 at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async build (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:187:29) at async main (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/bin/next:157:5) next.config.js/** @type {{output: string, assetPrefix: string, experimental: {appDir: boolean}}} */ const nextConfig = { experimental: { appDir: true, }, output: "export", assetPrefix: "/duckblog/", // dynamic: "force-static", }; module.exports = nextConfig; build시에 발생하는 에러입니다. dynamic route에서 에러가 발생하는것 같은데 깃헙이슈나 레디스에 올라와있는 방법으로도 잘 해결이 안되네요... output export 를 없애고 빌드르 하면 아래와 같은 에러가 발생합니다 The "next export" command has been removed in favor of "output: export" in next.config.js. Learn more: https://nextjs.org/docs/advanced-features/static-html-export
-
해결됨Next + React Query로 SNS 서비스 만들기
섹션 4 trends api 관련 질문
강의 로그인과 회원가입 실제로 하기 뒷부분에 트렌드조회, 팔로우, 추천게시물을 불러오기 위해 주소를 변경해주고 403이 나오는 곳은 credentials 을 추가했습니다하지만 /hashtags/trends에서만 여전히 쿠키를 받아오지 못하고 403이 나오고 있는데 어디가 잘못된건지 잘 모르겠습니다
-
미해결손에 익는 Next.js - 공식 문서 훑어보기
선생님 혹시 Next.js 13에서의 React-query는 어떻게 생각하실까요?
안녕하세요 선생님!좋은 강의 정말 감사하게 듣고 있습니다.선생님의 강의를 듣다보니, Next.js 13의 Data Fetching 방법이 React Query과 유사함을 느꼈습니다.(주니어라 부족함이 있어 실제론 유사하지 않을 수도 있지만..!) Next 13의 데이터 패칭 방법이 react 에서 React Query를 사용하여 서버 API의 데이터를 일정 시간동안 fresh 상태로 갖고 있는것 stale한지 chach로 체크하는 것 모두 흡사 하다고 느꼈습니다. React Query의 가장 큰 강점은 클라이언트-서버간의 데이터 동기화가 가장 큰 장점이라고 생각하는데 만약 Next 13의 데이터 패칭 방법을 사용한다면번거로운 React Query의 보일러코드들을 사용하지 않아도 React Query의 장점을 그대로 살려 쉽게 사용할 수 있을 것 같아보입니다! 따라서, Next 13에선 React Query가 무한스크롤 외에 사용할 일이 거의 없을 것만 같아보이는데...! 어떻게 생각하실지 의견이 궁금합니다...!next 13과 react query 조합은 앞으로 거의 사용하지 않게 되는 걸까요? 선생님의 고견을 나눠주시면 감사하겠습니다~!바쁘실텐데 번거롭게 해드려서 죄송합니다!감사합니다!
-
해결됨Next + React Query로 SNS 서비스 만들기
MSW 클라이언트측과 서버측 모킹에 대해 궁금한 점이 있습니다.
제로초님께서 '서버쪽에서 MSW를 자연스럽게 돌리는 방식이 아직 나오지 않았다' 라고 말씀하셨는데, 이 부분에 대해 궁금해서 자료를 찾던 중 해당 내용을 다루는 깃헙 이슈를 찾아서 읽어보았습니다.아직까지도 서버쪽에서 MSW를 사용하는 부분은 업데이트가 되지 않았다는 내용이 있어서 혼자 이것저것 건들던 도중에 http.ts 실행을 종료해도 클라이언트 쪽에서 요청을 보내면 모킹이 되어야 하는게 아닌가 하는 의문이 들었습니다.그래서 http.ts 의 실행을 종료하고 요청을 보냈으나 클라이언트 쪽에서는 404 에러가 발생하였고, 서버 쪽에서는 200 이 뜨면서 이전에 가져왔던 데이터를 가져왔습니다.여기서 제가 궁금한 것은http.ts 는 서버 모킹을 위해 추가적으로 작성된 파일이라고 생각하는데 제가 잘못 생각한 것인지 궁금합니다.http.ts 실행이 종료된 상태로 클라이언트 컴포넌트에서 요청을 보낸다면 http://localhost:3000/api/login 으로 요청을 보냈을 때 정상적으로 모킹이 되어야 한다고 생각하는데 맞게 생각한 것인지 궁금합니다. (저는 클라이언트-browser.ts, 서버-http.ts 로 모킹이 연결된다고 이해했습니다.) 제가 작성한 코드는 강의에서 작성된 코드와 같은 코드를 사용했으며 출력 부분(console.log)만 조금 수정했습니다. 좋은 강의 만들어주셔서 감사합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
서버관련 세팅과 관련한 문의 입니다. ENOENT: no such file or directory,client/index.html
[Nest] 19976 - 2024. 01. 15. 오전 10:37:17 ERROR [ExceptionsHandler] ENOENT: no such file or directory, stat '{경로}\nest-prisma-main\nest-prisma-main\client\index.html'위와같은 에러가 발생하는데, pg세팅하고 memurai.com 에서 설치 후, redis connect 까지는 확인이 되는 것 같은데, localhost:3000/home 페이지를 가면 레이아웃을 제외한 페이지 전체가 오류가 납니다. 이때 Nexjs가 뱉어내는 오류는 입니다 현재 진행중인 노드 버전은 Node.js v20.10.0 입니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
서버 액션 함수의 "use server"
클라이언트 컴포넌트 안에서 서버 액션을 활용할 것이라면 서버 액션 안에다 "use server"; 를 작성하라고 했는데 그럼 서버 컴포넌트일 경우엔 굳이 "use server"를 작성할 필요 없죠?
-
미해결Next + React Query로 SNS 서비스 만들기
prefetch하는 queryFn이 Data Cache가 적용 되는 부분에 대해 이해가 잘 안가는 것이 있습니다
Next.js의 Data Cache가 동작하는 부분에 대해 궁금한 것이 생겨서 또 한번 질문 드립니다ㅠ공식문서도 찾아봤는데 제가 못 찾은건지 관련 내용을 찾을 수가 없네요 아래의 코드는 Home폴더의 page.tsx 에서 prefetch + dehydrate 를 진행하고 있습니다이때는 getPostRecommends에 대해서 Next.js의 Data Cache가 제대로 동작합니다. (fetch에 어떠한 옵션도 걸어두지 않았습니다)/home URL에서 새로고침을 계속 진행해도 loading.tsx가 보이지 않으며faker.js로 랜덤한 이미지를 반환하게 설정했음에도 계속 같은 이미지를 보여주기 때문입니다 그렇지만, 아래와 같이 prefetch + dehydrate 하는 부분을 page.tsx가 아니라 TabDeciderSuspense.tsx 라는 서버 컴포넌트로 빼서 사용 할 경우이때도 getPostRecommends를 서버컴포넌트에서 fetch를 하는 것임에도, Next.js의 Data Cache가 아예 적용되지 않습니다/home URL에서 새로고침을 할 때마다 loading.tsx가 delay(3000) 동안 보여지며faker.js의 랜덤한 이미지가 계속 보여지기 때문입니다처음에는 Suspense를 사용해서 그런건가 싶었는데 사진에 올린 것처럼 Suspense를 제거했음에도 동일한 현상이 나타나는걸로 봐서는다른 부분에 원인이 있는 것 같은데 혹시 왜 이렇게 되는 것인지 알 수 있을까요?혹시 fetch하는 부분이 page.tsx에 있어야만 Data Cache가 진행되는 것인가요..?
-
미해결Next + React Query로 SNS 서비스 만들기
next.config.js에서 redirect 옵션을 사용해도 괜찮은가요?
/login -> /i/flow/login으로 redirect 할때 next.config.js에서 const nextConfig = { async redirects() { return [ { source: "/login", destination: "/i/flow/login", permanent: true, }, ]; }, }; module.exports = nextConfig;이런식으로 코드를 짜면 redirect가 되는데 login폴더를 굳이 만들지 않고 위와 같이 설정해도 괜찮은가요?
-
미해결Next + React Query로 SNS 서비스 만들기
fetch web api 에 next 옵션
fetch 함수가 그냥 web API 같은데fetch 함수에 next 라는 속성이 들어간건데 따로 임포트해온것도 아닌데 어떻게 작동되는건가요?next 가 내부적으로 fetch 를 새로 만든건가요?
-
미해결Next + React Query로 SNS 서비스 만들기
process.env.NEXT_PUBLIC_BASE_URL를 인식하지 못합니다
위 사진 처럼 컴파일이 안됩니다.그리고 이렇게 바꾸고 실행을 시키면 실행은 되는데 코드 상에서 NEXT_PUBLIC_BASE_URL이 undefined로 확인이됩니다. 어떻게 해결할 수 있을까요.