172만명의 커뮤니티!! 함께 토론해봐요.
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오를 만드는중에 refreshToken을 이용해서 로그인 데이터를 저장한 후에 생긴 문제입니다. 게시글 조회 페이지에서 새로고침을 하면 fetchBoards와 fetchBoardCount 요청이 2번씩 나가고 뒤에오는 요청은 canceled 되는데 이런 경우는 어떤거 때문에 생기는건지 궁금합니다. localStorage로 되돌리면 다시 오류없이 잘 동작합니다 refreshToken을 사용하고 저 오류가 생기면 게시글 등록후에 간헐적으로 새로고침을 해야 refetch되는거 같습니다.
미해결
Next + React Query로 SNS 서비스 만들기
지금 제로초님은 벡엔드와 프론트서버를 구분해두셨고 백엔드서버는 ec2에 올리지않아서 백엔드와 관련된 것들은 작동하지 않는 상태인데, 만약에 fetch할때 백엔드서버주소가 아닌 프론트쪽 경로로 해서 하면 본 강좌에서 한것과 같이 ec2로 배포를 해도 작동을 할까요? 아니면 이경우 배포방법이 달라지나요?
미해결
Next + React Query로 SNS 서비스 만들기
게시물 추천 탭에서는 게시하기 버튼 클릭하면 게시물 업로드가 잘 작동됩니다. 그러나 팔로우 중 탭에서 게시하기 버튼을 클릭하면 에러가 발생합니다. 게시물 게시하기 코드는 아래와 같습니다. const mutation = useMutation({ mutationFn: async (e: React.FormEvent) =>{ e.preventDefault(); const formData = new FormData(); formData.append("content", content); imgPreview.forEach((img) => { img && formData.append("images", img.file); }); return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, { method: "post", credentials: "include", body: formData, }); }, onSuccess: async (response) => { const newPost = await response.json(); setContent(""); setImgPreview([]); if (queryClient.getQueryData(["posts", "recommends"])) { queryClient.setQueryData( ["posts", "recommends"], (prev: { pages: Post[][] }) => { const shallow = { ...prev, pages: [...prev.pages] }; shallow.pages[0] = [...shallow.pages[0]]; shallow.pages[0].unshift(newPost); return shallow; } ); } if(queryClient.getQueryData(["posts", "followings"])) { console.log("get", queryClient.getQueryData(["posts", "followings"])); queryClient.setQueryData( ["posts", "followings"], (prev: { pages: Post[][] }) => { const shallow = { ...prev, pages: [...prev.pages] }; shallow.pages[0] = [...shallow.pages[0]]; shallow.pages[0].unshift(newPost); return shallow; } ); } }, onError: (error) => { console.error(error); alert("업로드 중 에러가 발생했습니다"); }, }); 최근 새소식을 보고 useSuspenseQuery 가 문제가 있다는 것을 보고 Suspense 없애고 기존에 사용한 TabDecider 컴포넌트로 변경했습니다. // src\app\(afterLogin)\home\page.tsx export default async function Home() { const session = await auth(); return ( <main className={styles.main}> <TabContextProvider> <Tab /> <PostForm me={session} /> <TabDecider /> </TabContextProvider> </main> ); } 네트워크 탭에서 posts 요청은 성공했다고 나와있습니다. 새로고침하면 업로드가 제대로 되지만 게시하기 버튼 클릭하면 onError 에서 발생하는 '업로드 중 에러 발생' 알림창이 나옵니다. react-query devtools에서 mutation 에러를 확인하니 인피니트 스크롤링하는 pages에 관한 오류가 나왔습니다. FollowingPosts 컴포넌트와 PostForm에서 queryClient.getQueryData(["posts","followings"] 에서 받는 데이터를 출력해보니 아래와 같은 데이터 구조를 가지고 있습니다. FollowingPosts 컴포넌트 코드는 다음과 같습니다. export default function FollowingPosts() { const { isPending, data } = useQuery<PostType[]>({ queryKey: ["posts", "followings"], queryFn: getFollowingPosts, staleTime: 60 * 1000, gcTime: 300 * 1000, }); if (isPending) return <Loading />; console.log("data2", data); return data?.map((post) => <Post key={post.postId} post={post} />); } FollowingPosts 컴포넌트에서는 useInifiniteQuery 가 아닌 useQuery 를 통해 데이터를 받아와서 데이터 안에 있는 pages가 없어서 이런 오류가 나오는걸까요?? 우선 useInfiniteQuery 로 변경해 게시물을 등록하면 잘 작동되는 것은 확인했습니다.
미해결
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요! 강의와 직접적으로 관련된 질문은 아니지만 도저히 해결책을 도저히 찾기가 어려워서 질문 글 올립니다.. 하나의 Next.js 프로젝트에서 백엔드 api를 구성할 때, node.js와 파이썬 서버리스 함수를 함께 사용할 수 있나요? 백엔드로 파이썬 서버리스 함수를 단독으로 사용하는 것은 가능한 것 같은데, 동일한 프로젝트에서 node.js 서버리스 함수와 함께 사용할 수 있는지가 궁금합니다..
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요! 강의와 직접적으로 관련된 질문은 아니지만 도저히 해결책을 도저히 찾기가 어려워서 질문 글 올립니다.. 하나의 Next.js 프로젝트에서 백엔드 api를 구성할 때, node.js와 파이썬 서버리스 함수를 함께 사용할 수 있나요? 백엔드로 파이썬 서버리스 함수를 단독으로 사용하는 것은 가능한 것 같은데, 동일한 프로젝트에서 node.js 서버리스 함수와 함께 사용할 수 있는지가 궁금합니다..
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
안녕하세요 강사님. 우선 강의 잘 듣고 있습니다! 강의 듣다보니 궁금한 점이 있는데 message를 post하는 경우나 reply를 post 하는 경우에,postData에 들어가는 uid를 userInfo에 있는 정보를 사용하시던데이 정보는 로그인한 유저(authUser)의 uid를 사용하는 것이 아니라 해당 홈페이지(e.g. https://blahx2.totu.dev/totuworld ) (totuwolrd의 uid)정보를 사용하는 것이 맞나요?댓글 등록시에도 마찬가지로 userInfo.uid를 uid로 사용하시더라고요.이렇게 되면 글,댓글 등록시 데이터베이스의 uid에는 로그인한 사용자의 uid가 아닌 사용자 홈페이지의 uid가 들어갈텐데 이게 맞는건지 궁금해서 여쭤봅니다! 혹시 이렇게 uid를 설정하신 이유가 로그인하지 않은 유저를 위한 것인가요?반대로 로그인을 한 유저만 익명 또는 실명으로 댓글을 남길 수 있도록 하려면 uid를 로그인한 유저의 uid로 설정해도 될까요? 아래는 강사님이 데이터를 post 하는 경우의 코드입니다.! <Button disabled={message.length === 0} //입력값이 없으면 비활성화 bgColor="#FFB86C" color="white" colorScheme="yellow" variant="solid" size="sm" onClick={async () => { const postData: { uid: string; message: string; author?: { displayName: string; photoURL?: string; }; } = { uid: userInfo.uid, message }; if (isAnonymous === false) { postData.author = { displayName: authUser?.displayName ?? 'anonymous', photoURL: authUser?.photoURL ?? '/user.png', }; } const messageResp = await postMessage(postData); if (messageResp.result === false) { toast({ title: messageResp.message, position: 'top-right' }); } setMessage(''); // 리프레쉬 글 작성하면 page를 1로 돌려 messageList를 다시 받아온다. setPage(1); setTimeout(() => { setMessageListFetchTrigger((prev) => !prev); }); }} >등록</Button>
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
5장까지 너무나도 좋은 강의 감사하며 잘듣고 있습니다. 질문이 있는데요 왜 useTodoController를 TodoList 컴포넌트에서 가져와서 직접쓰지 않고 TodoContainer에서 불러와서 props로 주는건가요?? TodoList로 바로 받으면 TodoContainer도 만들 필요 없지 않나요??
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
1번 질문 next9 버전을 다운받아서 실행 했더니 오류가 나서 찾아봤는데 node버전이 높아서 호환 관련 문제로 실행이 안되는 오류가 있었습니다. next14 버전으로 진행했는데 앞으로도 괜찮나요? 2번 질문 pages 폴더안에 index.js파일은 /이고 그 외에 이름은 /profile, /signup 구조인것 같은데 어떤 경우에 폴더구조를 사용하고 어떤 경우에 js파일의 이름을 변경해서 사용해야 하는지 궁금합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
PostRecommends에서 전달한 post를 Post 컴포넌트에서 받아 표시하면 User에서만 오류가 발생합니다. User에 대한 정보를 다 받아오는데 Post 컴포넌트에서는 아무것도 표시되지 않습니다. 프로필 탭을 눌러 User.id 페이지로 이동하면 오류가 발생합니다. Cannot read properties of undefined (reading 'User') User에 옵셔널 체이닝을 붙여도 동일한 오류가 발생합니다. Post 코드 첨부합니다. import { Post as IPost } from "@/model/Post"; dayjs.locale("ko"); dayjs.extend(relativeTime); type Props = { noImage?: boolean; post: IPost; }; export default function Post({ noImage, post }: Props) { const target: IPost = post; if (Math.random() > 0.5 && !noImage) { target?.Images.push( { imageId: 1, link: faker.image.urlLoremFlickr() }, { imageId: 2, link: faker.image.urlLoremFlickr() }, { imageId: 3, link: faker.image.urlLoremFlickr() }, { imageId: 4, link: faker.image.urlLoremFlickr() } ); } return ( <PostArticle post={target}> <div className={style.postWrapper}> <div className={style.postUserSection}> <Link href={`/${target.User?.id}`} className={style.postUserImage}> <img src={target.User.image} alt={target.User.nickname} /> <div className={style.postShade} /> </Link> </div> <div className={style.postBody}> <div className={style.postMeta}> <Link href={`/${target.User.id}`}> <span className={style.postUserName}>{target.User.nickname}</span> <span className={style.postUserId}>@{target.User.id}</span> · </Link> <span className={style.postDate}> {dayjs(target.createdAt).fromNow(true)} </span> </div> <div>{target.content}</div> <div> <PostImages post={target} /> </div> <ActionButtons /> </div> </div> </PostArticle> ); }
미해결
[리뉴얼] React로 NodeBird SNS 만들기
프론트 axios에서 baseurl을 https://api.count101.shop으로 설정했는데 요청을 보내보니깐 request url이 https://count101.shop/https/api.count101.shop/user/autoLogin 이런식으로 앞에 https://count101.shop이 붙어버리는데 어디를 수정해야 될 지 모르겠습니다,,
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
상품 등록시에 판매자 데이터를 넣는거같은데 gpl query문에서 seller, buyer를 어떤 형식으로 작성해야 되는지 모르겠습니다 데이터는 fetchUserLoggedin으로 넣는게 맞는지도 궁금합니다
해결됨
포트폴리오 초간단 배포하기
(문제가 해결되어서 내용을 수정하였습니다.) 동영상에서는 SSLforFREE 사이트에서 인증서를 발급받는 식으로 설명을 하였습니다. 그런데 SSLforFREE 사이트에서 인증서 발급을 하면 ZeroSSL 사이트로 리다이렉트가 되어서, 실제로는 ZeroSSL에서 인증서 발급이 됩니다. 무료 인증서를 발급받는데는 동영상에서처럼 하면 되지만, 유료 인증서를 발급받을 때는 "반드시" ZeroSSL 사이트에서 결제하셔야 합니다!! 제가 SSLforFREE 사이트에서 결제를 하고 인증서를 발급받으니, 발급은 되는데 DNS 인증이 안되는 버그가 발생하였습니다. 그래서 ZeroSSL 사이트에서 결제를 하니 DNS 인증이 되더라고요.. 다행히도 ZeroSSL 사이트의 고객센터가 잘 되어있어서 문제는 해결하였지만, 불상사를 막기위해서는 반드시 유료 인증서는 ZeroSSL에서 결제하셔야 합니다!
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요. 첫번째 질문은 onMutate vs onSuccess 인데 사실 낙관적 업데이트를 해주냐 안해주냐에 따라서 기호에 따라 다른 경우는 알겠습니다. 제가 궁금한거는 onSuccess invalidatequeries 를 무지성으로 사용해도 query-key외 따로 전달 되는 params값이 중요하진 않은 것 같아서 쉽게 적용 했었던 기억이 있는 것 같습니다/ 예를 들면 onSuccess를 해주는 mutation에 invalidatequeries로 invalidatequeries(['key', {...}]) 를 굳이 안하고 invalidatequeries(['key']) 요거만 해줘도 새로 캐싱된 API를 새로 조회 하는 것 같더라구요. 근데 onMutate를 쓰려는 경우에 getQueryData 에 query-key 정보와 그에 매칭하는 파라메터를 정확하게 넘겨주지 않으면 undefined 같은데 애초 설계 할때 getQueryData뒤에 보내는 파라메터를 잘 가져 올 수 있게 해야 할지 혹시 다른 방법이 있는지 궁금합니다. query에서 find해서 찾기는 보장이 안되는 것 같구요? 이건 사용자가 셀렉트 박스로 막 선택해서 조회 다시 이전것 조회 요런식으로 하다보니 마지막으로 선택된 파람 정보가 명확하진 않더라구요. 현재는 혹시 모르니 전부 searchParams로 개편은했지만.... 실제 프로젝트에서는 어드민성(?) 서비스를 제공 해서 ux는 딱히...?????? 엄청 중요한 않기도 했고 지식도 부족해서 onMutate 대신에 onSuccess를 썼지만 보통은 좀 어떻게 잘 써야하는지 궁금합니다. 2번째 질문은 이건 진짜 뭘 더 써야하는지 모르겠습니다. 쓰임에 따라 다르게 써야한다면 어떤 경우인지 취향에 차이라면 취향것 쓰면 되는건지 궁금합니다
미해결
Next + React Query로 SNS 서비스 만들기
수업을 다 듣고 저 스스로 코드를 짜던중 갑자기 놓친부분이 있는 것 같아 여쭤봅니다. 혹시 <search/page.tsx> export default function Search({ searchParams }: Props) { 여기서 이 search/page.tsx의 매개변수는 누가 넘겨주는 걸까요?
미해결
Next + React Query로 SNS 서비스 만들기
저는 미리보기하면 PostRecommend.tsx부분이 아예 안뜨는데 뭐가 잘못된지 모르겠어서 질문드립니다. (단, 화면에 정상적으로 post들은 문제없이 뜹니다.) <PostRecommend.tsx>의 코드는 아래입니다. "use client" import Post from "../../_component/Post"; import { useQuery } from "@tanstack/react-query" import { getPostRecommends } from "../_lib/getPostRecommends" import { Post as IPost } from "@/app/model/post"; export default function PostRecommend(){ const {data} = useQuery<IPost[]>({queryKey:['posts','recommends'],queryFn:getPostRecommends}); return data?.map((post)=> <Post key={post.postId} post={post}/> ) } 또한 Post.tsx에서 넘겨받은 post를 console.log해봤는데 undefined가 나와 이것과 연관되어있지않나 싶어서 Post.tsx의 코드도 올리겠습니다. import style from './post.module.css'; import Link from "next/link"; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import 'dayjs/locale/ko'; import ActionButtons from "@/app/(afterLogin)/_component/ActionButtons"; import PostArticle from "@/app/(afterLogin)/_component/PostArticle"; import {faker} from '@faker-js/faker'; import PostImages from "@/app/(afterLogin)/_component/PostImages"; import { Post as IPost } from '@/app/model/post'; dayjs.locale('ko'); dayjs.extend(relativeTime) type Props = { noImage?: boolean, post:IPost, } export default function Post({ noImage,post }: Props) { const target = post; console.log("+++++++@@@@@@"+target); return ( <PostArticle post={target}> <div className={style.postWrapper}> <div className={style.postUserSection}> <Link href={`/${target.User.id}`} className={style.postUserImage}> <img src={target.User.image} alt={target.User.nickname}/> <div className={style.postShade}/> </Link> </div> <div className={style.postBody}> <div className={style.postMeta}> <Link href={`/${target.User.id}`}> <span className={style.postUserName}>{target.User.nickname}</span> <span className={style.postUserId}>@{target.User.id}</span> · </Link> <span className={style.postDate}>{dayjs(target.createdAt).fromNow(true)}</span> </div> <div>{target.content}</div> {!noImage && <div> <PostImages post={target} /> </div>} <ActionButtons/> </div> </div> </PostArticle> ) }
해결됨
Next + React Query로 SNS 서비스 만들기
게시물 업로드할 때 status: 500 Internal Server Error 가 나옵니다. 게시물 업로드 함수는 아래와 같습니다. const onSubmit = async (e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(); formData.append("content", content); imgPreview.forEach((img) => { img && formData.append("images", img.file); }); await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, { method: "post", credentials: "include", body: formData, }); }; 작성한 폼데이터를 전송한 응답을 출력해보니 status:500, Internal Server Error가 나옵니다. 네트워크 탭에서 확인해보니 formData는 제대로 전송되는 듯해요. 서버 로그로 확인한 결과입니다. 서버에서 문제가 발생한걸까요 ?
미해결
Next + React Query로 SNS 서비스 만들기
Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx) 해당 강의 예제 코드를 보려고 github에서 이리저리 굴러봐도 강의 예제코드와 동일한 코드가 보이지 않아서 질문 올리게 되었습니다. 혹시 suspense hook / reactQuery로 suspense 사용해보기에 관한 맛만 보여주시고 깃에서는 확인 불가능한걸까요?
미해결
Next + React Query로 SNS 서비스 만들기
http.post('/api/logout', () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }) }), 위 코드가 제로초님이 로그아웃을 위한 handler를 짜놓으신 건데 정작 로그아웃을할때는 const onLogout = () => { signOut({ redirect: false }) .then(() => { router.replace('/'); }); }; 위와 같이 그저 signOut 함수만 사용하고있으며 로그인때와 같이 따로 providers에서 fetch 경로를 설정해준것도아닌데 next-auth에서는 어떻게 signOut의 경로가 /api/logout인지 아는건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 graphql 부분에서 조금 헷갈려서 질문을 드립니다. 1. 이 부분에서 왼쪽부분에서 판매자 이름이 철수이고 createProductInput은 마우스, 정말 좋은 마우스 그리고 가격을 사용자가 저렇게 마우스 가격등을 input에 작성하면 name, detail, price가 생성된다라는 뜻으로 이해하면 좋을까요? 그리고 그 밑에 _id는 윗부분에 마우스라고 생성해서 나온 마우스라는 제품의 id를 보낸다는 뜻인지도 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
isPending은 데이터를 불러오고 있을 때, true가 되고 isLoading 은 쿼리가 처음으로 실행될 때 true 가 되는 것으로 알고 있습니다. 제가 이해하기로는 두 속성의 개념이 상당히 많이 겹칠 수 있을 것 같은데, 왜 이렇게 개별로 있는 것인지 궁금합니다.
