안녕하세요 제로초님. 리액트 쿼리를 도입해보려고 할 때 마침 제로초님 강좌가 올라와서 참고하고 있습니다! 근데 제 Nextjs 프로젝트의 데이터가 대부분 ssr이나 ssg로 데이터를 가져오게끔 하려고 하고 있거든요 강의에서 ssr로 데이터를 가져오는데 그전에 RQProvider로 리액트 쿼리를 쓸 범위를 지정해주셨잖아요? 근데 useState를 사용하고 있고, "use client";가 선언되어있는데 그 밑으로 담기는 페이지나 컴포넌트들에 ssr, ssg 적용이 잘 되는지에 대해 궁금해져서 질문을 남기게 되었습니다!! (제로초님 강의와 비슷하게 ssr로 데이터 가져오게 작업해봤을때 csr이 아니라 ssr로 잘 가져오는 거 같기는 한데 어떻게 되는거지?! 계속 궁금하네요..!)
안녕하세요 제로초님! 현재 강좌를 따라하면서 진행중인데 깃허브에 들어가보니 @modal 밑에 파일들을 못 찾겠어서요, login.module.css은 https://github.com/ZeroCho/next-app-router-z/blob/master/ch1/src/app/(beforeLogin)/_component/login.module.css 여기있는거 같은데, page.tsx는 어떤 파일에서 보면 될까요?
안녕하세요 선생님 강의 내용중에 revalite 의 방식이 두가지가 있다고 하셨고 그중 하나인 time 방식은 예를들어 10초로 설정하였다면 10초후에 누군가가 요청을하면 첫번째 요청자는 이전 값을 받고 두번째 요청하였을때 새로운 값을 받는거라고 이해하였습니다. 그렇다면 게시판에 적용하였을때 A유저가 새글을 작성하고 다시 게시글 목록페이지로 돌아가면 1번째 요청이 되기때문에 새글이 보이지 않고 새로고침을하면 2번째 요청이 되어서 보이게 되는 걸까요? 그리고 위의 내용이 맞다면 작성후 목록 페이지로 갔을때 본인이 작성했던 새 글이 바로 보이려면 어떻게 해야할까요? 온디맨드도 요청이 있을때 일단 먼저 값을 보여주고 그 다음부터 새 값을 보여주는거니 이건 아닌것같고.. 강의 보다가 좋은 방법이 있는지 궁금하네요 ^^ P.S : 정말 알차고 좋은강의 감사드립니다 선생님! 볼때마다 너무 만족스러운 강의예요!
안녕하세요!‘서버 컴포넌트에서 Server Actions 사용하기’ 섹션을 듣고 질문 2개가 생겼습니다. 강의를 다 듣고 실제로 진행해보니 저의 경우는 redirect('/home') 으로리다이렉션이 진행되지 않습니다 network탭을 보니 애초에 서버로 데이터 전송이 안 된 것 같습니다 (payload에는 제대로 데이터가 전송이 됐고 Headers를 보면 status가 200이 뜨긴 하네요) 그래서 MSW문제인가 싶어서 http://localhost:9090/ 에 접속해보니 에러가 발생하네요 MSW설정 자체가 문제인것 같은데 강의내용을 보고 그대로 따라했는데 어느 부분에서 문제가 발생한지 도저히 모르겠습니다.. 제 코드들을 첨부하겠습니다 // browser.ts import { setupWorker } from 'msw/browser'; import { handlers } from './handlers'; // This configures a Service Worker with the given request handlers. const worker = setupWorker(...handlers); export default worker; // handlers.ts import { http, HttpResponse } from 'msw'; export const handlers = [ http.post(`/api/login`, () => { console.log('로그인'); return HttpResponse.json( { userId: 1, nickname: '제로초', id: 'zerocho', image: '/5Udwvqim.jpg', }, { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/', }, }, ); }), http.post(`/api/logout`, () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0', }, }); }), http.post('/api/users', async ({ request }) => { console.log('회원가입'); // 403에러 전용 // return HttpResponse.text(JSON.stringify('user_exists'), { // status: 403, // }); // 성공 전용 return HttpResponse.text(JSON.stringify('ok'), { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/;Max-Age=0', }, }); }), ]; // http.ts import { createMiddleware } from '@mswjs/http-middleware'; import express from 'express'; import cors from 'cors'; import { handlers } from './handlers'; const app = express(); const port = 9090; // 서버 포트 번호 // 현재 돌아가고 있는 로컬호스트 주소 app.use(cors({ origin: 'http://localhost:3000', optionsSuccessStatus: 200, credentials: true })); app.use(express.json()); app.use(createMiddleware(...handlers)); app.listen(port, () => console.log(`Mock server is running on port: ${port}`)); 정확히 서버액션 이라는 개념이 이해가 가질 않습니다 기존 리액트에서 클릭 이벤트 또는 서브밋 이벤트로 폼을 제출하는 방식이 아니라, 폼의 action을 사용해 서버로 폼의 데이터를 제출하는 것같은데, 이것만 보면 그냥 폼데이터 값으로 백엔드 api를 이용하는거같은데.. .정확한 서버 액션 이라는 그 의미를 잘 모르겠네요… 구글링 해보면 따로 api를 생성할 필요 없이 API를 바로 만들어서사용하는거라고 하는데 여기서는 백엔드 API를 사용하고 있고…혹시 다음 강의에 자세한 설명이 나오는것인가요?너무 헷갈리네요
콘솔로그 결과 안녕하세요 선생님, 강의를보고 간단하게 따라해보았는데요 NextRequest 타입의 req를 매개변수로 받아와서 req를 console.log 에 찍어보면 undefined가 뜹니다. 혹시 NextRequest 사용에 조건이 따로 있을까요? req.nextUrl.pathname 으로 url 도 가져와보고 싶고한데 생각처럼 잘 안되네요..
freeboard_frontend 폴더에서 댓글 부분 만들려고 yarn dev해서 화면을 확인하려고 하는데 /boards 부분 화면은 뜨는데 글 목록은 하나도 뜨지않고 작성하기를 하려하니 alert 창으로 Failed to fetch 라는 안내가 뜹니다 혹시 뭐가 문제인지 알 수 있을까요?
기존의 모달 방식(제 기준) 은 Context나 recoil과 같은 상태관리 모달로 Provider를 만들어서 isOpen setIsOpen과 같이 사용했는데 이번에 배운 방식도 좋은 방법인 것 같지만, 폴더 구조가 엉망이 되서 가독성이 떨어지는 것 같다는 생각이 들어서 강사님 생각에는 어떤 방식이 어느 상황에서 더 좋을 것 같은지 궁금해서 질문 드려 봅니다.
안녕하세요! 제로초님! 항상 강의를 감사히 잘 보고있습니다! 다름이 아니라, 세션에 대한 질문이 있어 글을 올립니다. 첫번째 질문입니다! 현재 클라이언트(브라우저)에서 로그인 요청 시, auth.js를 사용해서 프론트측 세션을 생성하고, 그것을 통해서 클라이언트의 로그인 상태에 대한 분기 기준으로 사용하고 있고, 백엔드에서도 API 허가를 위한 세션을 받아 connect.sid 라는 쿠키를 생성하여 총 2개의 쿠키를 이용하고 있습니다. 제가 궁금한 것은 현재 2개로 나누어진 세션을 백엔드에서 주는 세션으로 생성한 쿠키 1개만 사용해도 되지 않을까? 라는 생각이 들었는데, 각각 따로따로 세션을 생성해서 처리하는 이유가 궁금합니다. 혹시 프론트엔드 입장에서 next-auth (auth.js)가 제공해주는 기능(CSRF, useSession, signin 등의 메서드... )들이 편리해서, 이것을 사용하신것이고 강의에서 언급하신대로 백엔드 세션과 통합하는 과정이 아직 불완전하여 따로 둔 상태로 둔 것이며, 만약 next-auth가 주는 장점이 굳이 없었다면 처음부터 백엔드 세션 1개를 이용해서 로그인 과정을 구현했을 것 이다. 라고 제가 감히 예상을 해도 될까요.. ? 🤔 두번째 질문입니다. [재게시, 답글기능 zustand로 만들어보기] 강의 17분 40초 부근에서 queryClient.getQueryData 보다 getQueryCache를 사용하는게 더 정확하다라고 말씀하셨는데 그 이유가 궁금합니다!
안녕하세요. 현재 섹션 3 수강 중인 수강생입니다. todo App을 만들고 있는데, X 버튼 구현하는 부분에서 onClick 이벤트 발생 시 작동하는 함수를 삽입해주는 부분인데요. onClick => {handleClick(data.id)} 이렇게 입력하니 웹페이지가 제대로 동작하지 않고, 아래처럼 화살표 함수로 바꿔주니 정상적으로 동작합니다. <button onClick={() => handleClick(data.id)}> x </button> 찾아보니 함수명으로 넣어주는 경우는 렌더링 시 함수가 바로 실행되고 click 이벤트 발생 시엔 함수의 반환값이 중괄호 안에 들어간다고 하고, 화살표 함수로 넣어줄 경우 의도한대로 click이벤트 발생 시에 함수가 실행된다는 걸 알게됐는데요, 이런 부분은 리액트 동작 원리 상 이렇게 되는거니 그냥 받아들이면 될까요? 아니면 제가 js 문법에 대해 이해가 부족해서 이해가 안가는 걸까요...? 추가적으로, 그렇다면 리액트에서 이벤트리스너 함수를 넣을 때는 무조건 화살표 함수로 넣는게 맞는건가요?
