클라이언트 컴포넌트로 지정했는데도 서버사이드 렌더링으로 동작하는 이유가 뭔가요? 

강의 여러번 돌려보고 커뮤니티 질문에도 찾아보고 구글링도 해봤는데 어디서 뭐가 잘못된 건지도 모르겠어서 질문 올립니다! 대체 어디서 잘못 된 걸까요,,,queryClient.tsimport request, { RequestDocument } from "graphql-request"; import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider, } from "react-query"; // any 타입 미리 만들어줌 type AnyOBJ = { [key: string]: any }; // Create a client export const getClient = (() => { let client: QueryClient | null = null; return () => { if (!client) client = new QueryClient({ defaultOptions: { queries: { // 캐시타임 : 이 시간 안에는 다시 상세페이지 들어가도 요청 안 함 cacheTime: 1000 * 60 * 60 * 24, staleTime: 1000 * 60, refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false, }, }, }); return client; }; })(); // 기본 url const BASE_URL = "/"; // restFetcher async로 요청 export const restFetcher = async ({ method, path, body, params, }: { // 메소드 타입 정의 method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"; // url대신 path를 받음 path: string; // post나 put의 경우엔 body가 필요하므로 body?: AnyOBJ; // 파라미터 params?: AnyOBJ; }) => { try { // 기본 url + path let url = `${BASE_URL}${path}`; // RequestInit은 node에 기본적으로 정의되어 있음 const fetchOptions: RequestInit = { method, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": BASE_URL, }, }; // param이 오면 if (params) { const searchParams = new URLSearchParams(params); url += "?" + searchParams.toString(); } // body가 오면 if (body) fetchOptions.body = JSON.stringify(body); // url와 옵션들 요청 // 메서드와 path를 받아서 완성 const res = await fetch(url, fetchOptions); // 받은 것을 json으로 바꾸기 const json = await res.json(); return json; // 에러 출력 } catch (err) { console.error(err); } }; // graphqlFetcher export const graphqlFetcher = <T>(query: RequestDocument, variables = {}) => request<T>(BASE_URL, query, variables); // 쿼리 키 만들기 export const QueryKeys = { PRODUCTS: "PRODUCTS", CART: "CART", }; product/item.tsx 컴포넌트import { Link } from "react-router-dom"; import { Product } from "../../../graphql/products"; import { useMutation } from "react-query"; import { graphqlFetcher } from "../../../queryClient"; import { ADD_CART, Cart } from "../../../graphql/cart"; const ProductItem = ({ imageUrl, price, title, id }: Product) => { const { mutate: addCart } = useMutation(({ id }: { id: string }) => graphqlFetcher(ADD_CART, { id }) ); return ( <li className="products-item"> <Link to={`/products/${id}`}> <p className="products-item__title">{title}</p> <img className="products-item__image" src={imageUrl} /> <span className="products-item__price">${price}</span> </Link> <button className="product-item__add-cart" onClick={() => { addCart({ id }); }} > 장바구니 담기 </button> </li> ); }; export default ProductItem; 콘솔에 뜨는 오류나는 파일 올려드립니다..

diaryediter.jsonCreate(state.author, state.content, state.emotion);넣는 순간 충돌이 일어납니다. 주석 처리하면 저장 성공은 확인되지만 일기리스트에 추가가 안됩니다.넣으면 이런현상이 발생합니다

안녕하세요. 선생님.코드젠이 업데이트 되면서 보드의 날짜 타입이 에러가 아래의 사진처럼 오류가 나는 것 같습니다그래서 선생님께서 올려주시는 포폴 예시 파일에 있는 버전의 타입으로 해도 동일하게 eslint에서 에러가 잡히는 것 같아요.createAt 값이 들어가는 곳마다 저렇게 에러가 잡히는데 어떻게 해결해야할까요??

강의 로그인과 회원가입 실제로 하기 뒷부분에 트렌드조회, 팔로우, 추천게시물을 불러오기 위해 주소를 변경해주고 403이 나오는 곳은 credentials 을 추가했습니다하지만 /hashtags/trends에서만 여전히 쿠키를 받아오지 못하고 403이 나오고 있는데 어디가 잘못된건지 잘 모르겠습니다 

로그인 기능 까지 구현 하면서, 생긴 의문점이 생겼는데요.mongoose.connect() 함수를 사용해서 몽고 DB와 연결 이후, 몽고 DB와 User 객체와의 연결이 따로 설정하지는 않은 거 같은데, user.save() 함수 사용 시 해당 User 객체가 어떻게 몽고 DB에 연결이 되어서 회원가입이 되는지 또는 로그인이 되는지 궁금합니다.  

안녕하세요.강의 듣다보면 선생님께서 추상화라는 말씀을 자주 하시는데요프로그래밍에서 추상화라는 말이 잘 와닿지가 않습니다ㅠㅠ선생님 강의 외에도 다른 강의나 서적들도 보면 추상화라는 말이 꽤 나오는걸 볼 수 있는데 그때마다 추상화라는걸 어떻게 생각해야 할 지 잘 모르겠어서 질문 드려봅니다...

안녕하세요 선생님!좋은 강의 정말 감사하게 듣고 있습니다.선생님의 강의를 듣다보니, 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 조합은 앞으로 거의 사용하지 않게 되는 걸까요? 선생님의 고견을 나눠주시면 감사하겠습니다~!바쁘실텐데 번거롭게 해드려서 죄송합니다!감사합니다!

위 코드 첫 줄에서 todoInput 값을 const로서 정의해줬는데, 함수 내에서 마지막에 이것을 다시 ' '로 초기화해주는 단계가 있습니다. 근데 const는 정의된 후 값이 변하지 않는 상수와 같은 걸로 알고 있는데 이런 식으로 값이 변해도(?) 되나요?

안녕하세요, 설명 우선 launch를 할때 port를 8080으로 설정하고 setting을 해도fly.toml 파일과 dockkerfile에 port번호가 3000으로 자동으로 설정되는 문제가있어 해당파일의 port번호를 수동으로 8080으로 다시 설정하고 deploy완료했을 때 해당 주소로 접속시에 접속이 안되는 오류가발생합니다. 이미지fly.tomldockkerfilehttps://h-market-server.fly.dev/접속시 오류구글링, 다른분들의 질문을 찾아봤는데도해결하지못해, 질문드립니다. 파일을 지우고 다시런치 후 배포프로젝트를 다 지우고 gitclone해서 런치 후 배포등 다른방법들을 다 진행해봐도 해결되지않아 질문남깁니다. 

안녕하세요! 제로초님! 노드버드 섹션6 EC2 생성하기 강의까지 수강한 수강생 입니다!아래 수강생 분과 동일한 문제가 발생하여 구글링과 다른 분들의 질문 글을 보며해결하려 했으나 그러지 못하여 질문을 올리게 되었습니다!항상 친절한 답변을 해주셔서 감사합니다!(강의 항상 잘 보고 있어요!) 같은 문제가 발생한 수강생 분의 질문https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49012&tab=community&category=questionDetail&q=152537키의 권한을 바꾸는 방법 참고https://wookim789.tistory.com/34SSH은 22번 포드, HTTP는 80번 포트, HTTPS는 443번 포트로 강의와 동일하게 진행하였습니다.폴더를 하나 더 들어가야 하는 불편함 때문에 강의와 똑같이 prepare 폴더는 만들지 않고,노드버드 폴더 아래에 바로 front, back 폴더가 위치하도록 하였습니다.vs 터미널에서 발생한 문제 메시지를 번역하니 다음과 같았습니다.경고: 보호되지 않는 개인 키 파일react-nodebird.pem'에 대한 권한이 너무 열려 있습니다.다른 사람이 개인 키 파일에 액세스할 수 없어야 합니다. 이 개인 키는 무시됩니다.로드 키 "react-nodebird.pem": 잘못된 권한ubuntu@ec2-13-125-253-222.ap-northeast-2.compute.amazonaws.com : 권한이 거부되었습니다 같은 문제가 발생한 수강생 분의 글을 읽고 vs 터미널이 아닌 git bash를 사용했습니다.이 때 문제를 해결하신 수강생 분과는 다른 메시지가 나타났습니다.(문제를 해결하신 수강생 분의 git bash 상태)(저의 git bash 상태)응용프로그램에 대한 확장 보안 유지관리가 활성화되지 않았습니다.Expanded Security Maintenance for Applications is not enabled.빨간 선은 개인 정보라 부득이하게 블러 처리하였습니다. ssh -i "react-nodebird.pem" ubuntu@ec2-13-125-253-222.ap-northeast-2.compute.amazonaws.com의심이 들어 다시 vs code 터미널의 노드버드 폴더 경로에 위 명령어를 붙여 넣었으나WARNING: UNPROTECTED PRIVATE KEY FILE! 문제가 계속 발생합니다.어떻게 해야 이 문제를 해결할 수 있는지 도움을 구하고 싶습니다!저 또한 답변만 기다리지 않고 계속 해결 방안을 모색하겠습니다!긴 질문 글 읽어주셔서 감사합니다.

안녕하세요 강사님 강의 수강중인 학생입니다. 일단 코드는 강의 내용이나 올려주신 부분하고 다른 점은 없는 것 같은데 원래 이렇게 되는 것인가요? page=1&size=1을 주면 글 하나씩 페이지가 생기는데 그 상태에서 페이지 번호 버튼을 눌러서 다른 페이지로 이동하면  size 파라미터 값이 기본값 10으로 돌아가네요 localhost:3000/todo/list?page=1&size=1인 상태에서 페이지 번호 2번 버튼을 눌러서 이동하면localhost:3000/todo/list?page=2&size=1이렇게 되어야 하는 것 아닌가요?localhost:3000/todo/list?page=2&size=10이렇게 되어버립니다. 코드를 계속 살펴보고 동작 방식을 생각해보니 클라이언트 쪽 코드상에서 page와 size값이 변하는 것을 받아변수에 저장하는 부분은 페이지 번호 버튼을 눌렀을때 useCustomMove의 size 변수와 sizeNum 변수인데 버튼을 통한 변화없이 임의로 URL에서 size를 바꾸고 페이지 번호 버튼을 누르면 저장된 size값은 10 그대로이기 때문에 그렇게 되는 것이 아닐까라는 추측을 해봅니다. size는 변동을 딱히 고려하지 않는 파라미터일 수도 있는데 여러가지로 궁금해져서 이런저런 시도를 해보다보니 의문이 생겼었네요. 실제로 웹개발을 할때 페이지를 나누는 경우 한 페이지의 size값은 변동이 없는 파라미터인가요? 기준을 정하기 위함인가요?

제로초님께서 '서버쪽에서 MSW를 자연스럽게 돌리는 방식이 아직 나오지 않았다' 라고 말씀하셨는데, 이 부분에 대해 궁금해서 자료를 찾던 중 해당 내용을 다루는 깃헙 이슈를 찾아서 읽어보았습니다.아직까지도 서버쪽에서 MSW를 사용하는 부분은 업데이트가 되지 않았다는 내용이 있어서 혼자 이것저것 건들던 도중에 http.ts 실행을 종료해도 클라이언트 쪽에서 요청을 보내면 모킹이 되어야 하는게 아닌가 하는 의문이 들었습니다.그래서 http.ts 의 실행을 종료하고 요청을 보냈으나 클라이언트 쪽에서는 404 에러가 발생하였고, 서버 쪽에서는 200 이 뜨면서 이전에 가져왔던 데이터를 가져왔습니다.여기서 제가 궁금한 것은http.ts 는 서버 모킹을 위해 추가적으로 작성된 파일이라고 생각하는데 제가 잘못 생각한 것인지 궁금합니다.http.ts 실행이 종료된 상태로 클라이언트 컴포넌트에서 요청을 보낸다면 http://localhost:3000/api/login 으로 요청을 보냈을 때 정상적으로 모킹이 되어야 한다고 생각하는데 맞게 생각한 것인지 궁금합니다. (저는 클라이언트-browser.ts, 서버-http.ts 로 모킹이 연결된다고 이해했습니다.) 제가 작성한 코드는 강의에서 작성된 코드와 같은 코드를 사용했으며 출력 부분(console.log)만 조금 수정했습니다. 좋은 강의 만들어주셔서 감사합니다.

[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 입니다.

build해서 yarn start 했을때 제컴퓨터론 잘되는데 AWS해서 페이지를 열경우 게시판 리스트가 안뜹니다 불러오기가 안되는거같은데 이유가 이유가 뭘까요

https://github.com/diderot7/REACT-PRACTICE/blob/master/src/Logout.js 강의를 들으면서 1. 로컬스토리지로 로그인 기능 구현로그인 시 로컬스토리지에 동일한 아이디 패스워드가 있다면 컨텐츠 보여주는 기능 구현이렇게 만들어봤습니다. 그런데 useEffect로 로그인 유지기능이 어떻게해도 안되서.. 혹시 힌트를 좀 얻을 수 있을까요?

클라이언트 컴포넌트 안에서 서버 액션을 활용할 것이라면 서버 액션 안에다 "use server"; 를 작성하라고 했는데 그럼 서버 컴포넌트일 경우엔 굳이 "use server"를 작성할 필요 없죠?

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가 진행되는 것인가요..? 

제목: react-simplemde-editor이 외에 사용하시는 Text Editor 있으신가요?설명: 이번에 한번 따로 만들어보려고합니다. 마크다운을 쓰지않는 기본적인 text기능이 들어간 editor로 추천해주실 수 있을까요?

제목: react-simplemde-editor 사용시 ReferenceError 가 발생합니다 import SimpleMDE from "react-simplemde-editor"; <Controller name="description" control={control} render={({ field }) => ( <SimpleMDE placeholder="Description" {...field} /> )} /> // 아래는 에러내용 node_modules\codemirror\lib\codemirror.js (18:18) @ navigator ⨯ ReferenceError: navigator is not defined 내용:11.이슈생성폼제출기능구현에서 에러가 나네요콘솔에 값은 잘나타납니다.강사님이랑 똑같이 작성했는데 인터넷 찾아보니https://velog.io/@app235naver/NextJs-react-simplemde-editor-%EC%9D%B4%EC%8A%88%ED%95%B4%EA%B2%B0라는 글이 있는데 이해를 못하겠네요.