172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님, api/users/{id} 에서 Followers 데이터는 제가 상대방을 팔로잉 했고 로그인 정보 쿠키가 잘 전달되면 상대방의 팔로워 수와 관계없이 제가 팔로우 했다면 저의 userId만 배열에 담겨서 돌아오기 때문에 api/posts/followings 혹은 api/posts/recommends의 Comments 데이터도 이와 동일할 것이라고 생각했습니다. 추천 포스트는 prefetch를 진행하고( Suspense를 적용하지 않음) 팔로잉 포스트는 SSR을 할 때 서버에서 로그인 여부를 판단하는 쿠키를 함께 보내야 하기 때문에 prefetch에서는 next의 cookies를 사용해서 쿠키를 전달했습니다 . 하지만 Comments 배열에 로그인 유저가 아닌 다른 유저의 id도 함께 날라옵니다. 추천 포스트가 아닌 팔로잉 포스트는 useSuspenseInfiniteQuery를 사용했는데 로그인 유저의 id만 잘 전달받았습니다. 이게 Suspense 내부에 있어서 그런가 싶어서 Suspense를 걷어내고 prefetch만 사용했을 때도 동일하게 로그인 유저가 아닌 다른 유저의 id도 확인할 수 있었습니다. 왜 로그인 쿠키를 보내는데도 다른 유저의 정보도 날라오는지 궁금합니다. 어디가 잘못된 것일까요? useSuspenseInfiniteQuery를 사용한 팔로잉 포스트는 추천 포스트와 어떤점이 달라서 정상 작동한 것일까요? 추가) 이 글 작성하고 추천 포스트에도 useSuspenseInfiniteQuery를 적용했는데 팔로잉 포스트처럼 안 나오고 이전과 동일하게 다른 유저의 id도 함께 날라오는데 왜 그럴까요? 추천 포스트 결과 현재 로그인 한 유저의 id는 'jihwan3' Comments에 'jihwan2'도 함께 날라오는중 팔로잉 포스트 결과 현재 로그인 한 유저의 id는 'jihwan3' Comments에 'jihwan3'만 날라오는 중 Hearts도 jihwan3가 좋아요를 안 눌러서 비어있는 모습 page.tsx import { Suspense } from "react"; import { auth } from "@/auth"; import { Container } from "./_component/styled"; import HomeTab from "./_component/HomeTab"; import HomeTabProvider from "./_component/HomeTabProvider"; import PostForm from "./_component/PostForm"; import SuspenseDecider from "./_component/SuspenseDecider"; import Loading from "../_component/LoadingUI"; export default async function Home() { const session = await auth(); return ( <Container> <HomeTabProvider> <HomeTab></HomeTab> <PostForm me={session} /> <Suspense fallback={<Loading />}> {/* @ts-expect-error Server Component */} <SuspenseDecider /> </Suspense> </HomeTabProvider> </Container> ); } SuspenseDecider.tsx import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getRecommendPosts from "../_lib/getRecommendPosts"; import getRecommendPostsServer from "../_lib/getRecommendPostsServer"; import PostDisplay from "./PostDisplay"; export default async function SuspenseDecider() { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ["posts", "recommends"], queryFn: getRecommendPostsServer, initialPageParam: 0, getNextPageParam: (lastPage, pages) => lastPage.at(-1)?.postId, pages: 1, }); return ( <HydrationBoundary state={dehydrate(queryClient)}> <PostDisplay /> </HydrationBoundary> ); } getRecommendPostsServer.ts import { QueryFunction } from "@tanstack/query-core"; import { Post as IPost } from "@/model/Post"; import { cookies } from "next/headers"; type Prop = { pageParam: number; }; const getRecommendPostsServer: QueryFunction<IPost[], [_1: string, _2: string], number> = async ({ pageParam }: Prop) => { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { method: "get", headers: { Cookie: cookies().toString(), }, }); if (response.ok) return response.json(); else throw new Error(); }; export default getRecommendPostsServer; postDisplay.tsx "use client"; import { use } from "react"; import { TabContext } from "./HomeTabProvider"; import RecommendPosts from "./RecommendPosts"; import FollowingPosts from "@/app/(afterLogin)/home/_component/FollowingPosts"; export default function PostDisplay() { const { selectedMenu } = use(TabContext); if (selectedMenu === "recommend") { return <RecommendPosts />; } return <FollowingPosts />; } RecommendPosts.tsx "use client"; import { useEffect, Fragment } from "react"; import { InfiniteData, useInfiniteQuery } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import getRecommendPosts from "../_lib/getRecommendPosts"; import Post from "../../_component/Post"; import { Post as IPost } from "@/model/Post"; export default function RecommendPosts() { const { isFetching, fetchNextPage, hasNextPage, data } = useInfiniteQuery<IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number>({ queryKey: ["posts", "recommends"], queryFn: getRecommendPosts, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, }); const { ref, inView } = useInView({ /* Optional options */ threshold: 0, delay: 100, }); useEffect(() => { if (inView) !isFetching && hasNextPage && fetchNextPage(); }, [inView, isFetching, hasNextPage, fetchNextPage]); if (!data) return null; // 이거 에러는...? type error인데.. -> InfiniteData로 해결 return ( <> {data.pages.map((ele: IPost[], idx: number) => ( <Fragment key={idx}> {ele.map((post: IPost) => ( <Post key={post.postId} post={post}></Post> ))} </Fragment> ))} <div ref={ref} style={{ height: "50px" }}></div> </> ); } getRecommendPost.ts import { QueryFunction } from "@tanstack/query-core"; import { Post as IPost } from "@/model/Post"; type Prop = { pageParam: number; }; const getRecommendPosts: QueryFunction<IPost[], [_1: string, _2: string], number> = async ({ pageParam }: Prop) => { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { method: "get", credentials: "include", }); if (response.ok) return response.json(); else throw new Error(); }; export default getRecommendPosts; FollowingPosts.tsx "use client"; import { Fragment, useEffect } from "react"; import { useSuspenseInfiniteQuery, InfiniteData } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import getFollowingPosts from "../_lib/getFollowingPosts"; import Post from "../../_component/Post"; import { Post as IPost } from "@/model/Post"; export default function FollowingPosts() { const { isFetching, fetchNextPage, hasNextPage, data } = useSuspenseInfiniteQuery<IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number>({ queryKey: ["posts", "followings"], queryFn: getFollowingPosts, initialPageParam: 0, getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => lastPage.at(-1)?.postId, }); const { ref, inView } = useInView({ threshold: 0, delay: 100, }); useEffect(() => { if (inView) !isFetching && hasNextPage && fetchNextPage(); }, [inView, fetchNextPage, hasNextPage, isFetching]); if (!data) return null; return ( <> {data.pages.map((ele: IPost[], idx: number) => ( <Fragment key={idx}> {ele.map((ele) => ( <Post key={ele.postId} post={ele}></Post> ))} </Fragment> ))} <div ref={ref} style={{ height: "100px" }}></div> </> ); }
2024-05-04T13:39:39.289Z
댓글 1
좋아요 0
조회수 287
미해결
웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
선생님. 궁금한 점이 있어 글을 남기게 되었습니다. f유형 강의 업로드 시기가 어떻게 되는지 궁금합니다. 각 유형별 디자인 영상이 있던데 시험 합격과는 무관한 것이 맞나요~? 그리고 이건 요청 사항인데요. 실습 자료로 실습을 하면 되긴 하겠지만, 유형별 문제 답안이 없어 공부하기 조금 불편한 부분이 있습니다. 답안도 같이 업로드 해주시면 감사 하겠습니다. 니
sy4562
2024-05-04T01:03:37.330Z
댓글 4
좋아요 0
조회수 334
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
실무에 적용하려고 하니 msw 에서 많이 막히네요 ㅠ 그래서 올려주신 깃헙 프로젝트를 샅샅히 훑어보고 있는데 mockServiceWorker.js 이 파일과 package.json에 "msw": { "workerDirectory": "public" } 요런 부분이 있더라고요. 요것들의 역할이 뭔지 알수 있을까요? msw 사이트에 가서 Getting started 를 가봐도 안나와 있는것 같아서 궁금합니다!
javascript react 소프트웨어-테스트 vitest
bn.kim
2024-05-03T08:38:07.452Z
댓글 2
좋아요 1
조회수 297
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
선생님 모의문제 1을 풀려고 하는데 데이터 members를 불러오는게 이해가 안돼서요ㅜㅜ 어떻게 저장한다는 걸까요..? data: members.csv 자체에는 저장하는게 없지 않나요?
python 머신러닝 빅데이터 pandas 빅데이터분석기사
olive h
2024-05-03T08:16:24.020Z
댓글 1
좋아요 1
조회수 401
미해결
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
선생님! iloc같은경우 인덱스값은 그 앞에 까지 뽑기때문에 +1 해주는 범위까지 설정 해 주는것인데, 컬럼 번호 쓸때는 해당 없는거 같네요?! quiz 2번 푸는데 iloc로 메뉴~할인율 까지 할때 범위를 :3으로 하시길래요! 위에 설명할때는 iloc때 범위를 :로 나타낼 때 마지막을 포함하지 않는다고 하셨는데, 인덱스만 포함하지 않는게 맞는거죠?
python 머신러닝 빅데이터 pandas 빅데이터분석기사
moonwrd
2024-05-03T07:32:54.653Z
댓글 1
좋아요 0
조회수 185
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요!! 과제 완료해서 피드백 부탁드리고자 올렸습니다! 앞으로 잘 부탁 드립니당~ <html> <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html> <css> * { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }
react node.js seo graphql next.js
개발하는 알파카
2024-05-03T06:52:35.874Z
댓글 2
좋아요 0
조회수 301
미해결
[리뉴얼] 파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)
안녕하세요 수업 듣는중 문제 푸는 21번 강의에서 'str' object is not callable 나와서 알려주신대로 코드를 작성했다가, 안되서 강의자료 복사에서 실행해도 error 납니다. 이런 경우에는 왜 이런 버그가 나오나요? 문제를 풀다가 1번도 아니고 여러 문제들이 계속 같은 문구가 나와서 이렇게 문의드립니다. 답변 주시면 감사하겠습니다 수업 21번 - 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다) - 이외의 문의등은 평생강의이므로 양해를 부탁드립니다 - 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다 - 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요.
syp837
2024-05-02T08:00:01.763Z
댓글 3
좋아요 0
조회수 2374
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
HeaderBgChanger라는 컴포넌트는 단순히 서버 컴포넌트에서 react hook을 사용할 수 없기 때문에 만드는 컴포넌트인지 궁금합니다. 또 이렇게 컴포넌트를 만들 경우에 렌더링 될 때 영향을 주는 부분은 없는지 궁금합니다.
react 인터랙티브-웹 클론코딩 next.js tailwind-css zustand
김택수
2024-05-01T17:52:11.576Z
댓글 2
좋아요 1
조회수 293
미해결
파이썬 알고리즘 트레이딩 파트1: 알고리즘 트레이딩을 위한 파이썬 데이터 분석
spot이라고 검색을 하면 머라고 나와야하는데 아무것도 안나옵니다.. 제가 빠트린 작업이 있을까요?
python 머신러닝 pandas 객체지향 퀀트 병렬-처리
이승빈
2024-05-01T15:05:38.110Z
댓글 4
좋아요 2
조회수 423
미해결
Next + React Query로 SNS 서비스 만들기
Nextjs fetch도 캐시가 지원되고, react-query도 캐시가 지원되는걸로 이해를 했는데요 문득 궁금한 점이 생겨서 질문 드립니다. Nextjs fetch와 react-query에서의 캐시는 같은 개념인가요? 아니면 서로 다른 개념인가요? 왜 Nextjs fetch를 안 쓰고 react-query를 쓰는 걸까요? Nextjs fetch는 어떨 때 쓰고 react-query는 어떨 때 쓰는 건가요? 감사합니다.
react next.js react-query next-auth msw
주니어에요
2024-05-01T13:37:05.205Z
댓글 1
좋아요 0
조회수 454
미해결
원고 생성기 프로그램 개발 강의 (Chatgpt api)
import openai api_key = " " openai.api_key = api_key def ask_gpt(system, prompt, model="gpt-3.5-turbo"): completion = openai.ChatCompletion.create( model=model, messages=[ {"role": "system", "content": system}, {"role": "user", "content": prompt} ], stream=True ) result = "" for chunk in completion: delta_data = chunk.choices[0].delta if 'role' in delta_data: continue elif 'content' in delta_data: r_text = delta_data['content'] result += r_text print(r_text, end="",flust=True) ask_gpt(system="you are a helpful assistant." , prompt="사과에 관한 글을 써줘") 해당 부분이 작동이 되지 않아서 확인 요청드립니다. api_key 값은 일단 빼두었습니다.
python rest-api chatgpt aiprm
강현명
2024-05-01T06:07:19.754Z
댓글 2
좋아요 0
조회수 339
미해결
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
프로젝트3의 툴팁부분 main.js을 bsComponent.js파일로 나눌때 <script type="module" src="assets/js/main.js"></srcipt> 에 type="module"을 넣게되면 나중에 wordpress로 만드는 작업을 하면서 function.php파일에 이 모듈부분을 어떻게 넣을수 있는지 잘 모르겠네요. 모듈부분때문인지 정상적으로 tooltip부분이 정상적으로 나오질 않습니다.ㅠㅠ 즉, wordpress에서는 모듈화를 어떻게 처리해야할까요?
HTML/CSS javascript bootstrap 웹-디자인
MJ JI
2024-04-30T16:21:09.480Z
댓글 2
좋아요 1
조회수 351
미해결
처음 만난 리액트(React)
npm start를 하면, chapter 5의 내용이 아니라 이전 실습에서 했던 시계가 창으로 나옵니다. chapter5와 관련된 질문을 찾아도 해결방안을 모르겠습니다ㅠㅠ
jiwanpgm
2024-04-29T12:27:50.511Z
댓글 1
좋아요 1
조회수 571
미해결
공공데이터로 파이썬 데이터 분석 시작하기
1.5 groupby 까지 안막히고 잘 오다가 여기서 막힙니다. df_last.groupby(["지역명"]).mean() 작성했을때 TypeError: agg function failed [how->mean,dtype->object] 에러가 뜹니다. 그런데 이어서 ["평당분양가격"]을 타이핑 하면 정상 결과가 나옵니다. 무슨 문제일까요.,?
robert
2024-04-29T07:50:37.503Z
댓글 2
좋아요 0
조회수 719
해결됨
[2025 신규] 어서와, Fast API는 처음이지?
(base) PS C:\Users\JaeJun> curl http://127.0.0.1:8000 StatusCode : 200 StatusDescription : OK Content : {"Hello":"World"} RawContent : HTTP/1.1 200 OK Content-Length: 17 Content-Type: application/json Date: Sun, 28 Apr 2024 07:59:31 GMT Server: uvicorn {"Hello":"World"} Forms : {} Headers : {[Content-Length, 17], [Content-Type, application/json], [Date, Sun, 28 Apr 2024 07:59:31 GMT], [Server, uvicorn]} Images : {} InputFields : {} Links : {} ParsedHtml : mshtml.HTMLDocumentClass RawContentLength : 17 powershell을 통해 호출할 경우 위와 같이 GET이 정상적으로 되지만 웹브라우저를 통해서 접근할 경우에는 Chrome이나 Edge 모두 연결할 수 없다고 합니다.. 인바운드,아웃바운드 모두 8000을 혹시 몰라 열어둔 상태이며, 8000이 아닌 8000-8010까지 포트를 변경해봤는데 안되고 있습니다. 어떻게 해야할까요
python postgresql FastAPI database python-dash
도나스
2024-04-28T08:05:49.114Z
댓글 4
좋아요 1
조회수 1019
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
수치형은 robustscaler를 사용하려고 하는데여 from sklearn.preprocessing import RobustScaler scaler = RobustScaler() cols = x_train.select_dtypes(exclude='object') for col in cols: x_train[col] = scaler.fit_transform(x_train[col]) x_test[col] = scaler.transform(x_test[col]) 이렇게 하면 ,ValueError: Expected 2D array, got 1D array instead: array=[ 888. 1308. 151. ... 173. 1244. 893.]. Reshape your data either using array.reshape(-1, 1) if your data has a single feature or array.reshape(1, -1) if it contains a single sample. 이런 오류가 납니다... 어떻게 수정해야 하나여
python 머신러닝 빅데이터 pandas 빅데이터분석기사
DataAnonymous
2024-04-28T06:06:28.638Z
댓글 2
좋아요 0
조회수 316
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
settings.json 을 검색하면 3가지가 뜹니다. user workspace default 이렇게 3가지 뜨는데, 제가 다 눌러보니 어떤건 영어문장이이 막 나오고, 어떤건 비어있는걸로 나오는데 user 로 하면 될까요?
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
와니_여희
2024-04-28T04:37:23.928Z
댓글 2
좋아요 0
조회수 433
해결됨
인터랙티브 웹 개발 제대로 시작하기
해당 강의를 진행하기 위해서 스프라이트 이미지를 다운받으려고 하는데 제공되는 이미지가 없는 것 같아서요! 따로 다운 받을 수 있는 링크가 있나요??
HTML/CSS javascript 인터랙티브-웹
서재완
2024-04-28T03:17:33.948Z
댓글 1
좋아요 1
조회수 416
해결됨
[코드캠프] 시작은 프리캠프
윈도우 누른치로 마침표 눌렀는데 이모지가 안되는데용.?./.
히응
2024-04-26T16:21:58.368Z
댓글 2
좋아요 0
조회수 701
미해결
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요! 하나의 엔티티에 @ElementCollection 붙은 필드가 두 개 있는 경우를 시험해 보고 있습니다. @EntityGraph(attributePaths = {"a", "b"}) 이런 식으로 해서 테스트를 돌리면 org.hibernate.loader.MultipleBagFetchException: cannot simultaneously fetch multiple bags 과 같은 오류가 나는데 ElementCollection 두 개가 있는 경우는 하나의 쿼리로 모두 가져오는 방법은 없나요?
react spring-boot jpa jwt redux-toolkit
김동영
2024-04-26T02:01:30.241Z
댓글 1
좋아요 0
조회수 274
