묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next + React Query로 SNS 서비스 만들기
유저 페이지 게시글 fetch 오류 질문
SSR 확인 중에 발견했는데, 게시글이 보이지 않는 오류가 발생해서 질문 드립니다. nest-prisma 쪽 터미널에도 오류가 따로 찍히는게 없어서혹시나해서 선생님 코드 복붙도 해봤는데 해결이 안되네요..
-
해결됨Next.js 풀스택 Github Issue 서비스 만들기
강의 05 디비...질문드려요
강의 05 에서 npx prisma formatnpx migrate 를 하는데, 디비명 에러가나는데요...cmd로 mysql 에서 디비를 생성하려니 하이픈 오류로 나옵니다....env 설정 DATABASE_URL="mysql://root:12341234@@localhost:3306/issue-management"윈도우 mysql에 디비를 만들지않은 상태에서도 마이그레이션이 되는건가요?
-
해결됨Next.js 풀스택 Notion 서비스 만들기
강의철회안내메일을 받았습니다
강의철회 안내메일을 받았습니다.ㅜㅜ그러면 기존 수강생인 경우에는 어떻게 하나요??? 이번 진행중인 프로젝트를 완료 하고나서 열공하려고 했거든요 ㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
AWS 강의 내용대로 했는데 요금 청구가됩니다.
프리티어로 가입해서 강의대로 EC2 로드밸런스 S3 이런거만 했는데 소액씩 요금이 계속 청구되네요 원래 배포하는데 계속 청구 되는건가요?
-
미해결Next + React Query로 SNS 서비스 만들기
MacOs, PostgreSQL16 설치, pgAdmin 4에서 connection 오류
비번 확실히 틀리지 않았는데 계속 오류 뜨길래, 완전 삭제후 다시 설치해서 비번 쉬운걸로 다시 설정하고 입력해도 계속 비번오류 뜹니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
react-query 없이 동일한 동작이 가능할까요?
next의 확장된 fetch 기능만으로 동일하게 프로젝트를 만들 수 있을까요?react-query가 꼭 필요한가의 궁금증으로 시작해서 이런 글도 찾았는데,읽고 제가 내린 결론은 서버사이드 뿐만아니라 클라이언트 사이드에서의 캐싱처리를 위해 react-query를 사용한다 입니다.제가 이해한 내용이 맞을까요?
-
해결됨Next.js 풀스택 Notion 서비스 만들기
테일윈드 자동정렬
강의를 보니 테일윈드 클래스 자동정렬 기능이 되어있으신거 같은데 prettier-plugin-tailwindcss 쓰시는건가요 아님 다른 방법이 있으신가요?
-
미해결Next + React Query로 SNS 서비스 만들기
react-query를 사용하면서 token을 header에 전달해야 할 때
이런 상황에서는 어떻게 해야할까요?강사님은 queryFn 함수를 별도로 분리하는 방식인데, 해당 함수내에서는 token을 호출할 수 없을것입니다.그렇다면 제가 생각하기에 가능한 방법은 querykey에 포함시켜서 함수에서 호출하는 방법인데...그렇게되면 token이 필요한 모든 함수의 key 배열에 토큰을 추가시켜야 하는 작업을 해야합니다.하지만 이것보다 더 좋은 방법이 있을지 잘 모르겠습니다.axios 같은 경우에는 전역적으로 header에 default로 넣는다거나 하는 방법이 있는데, fetch로 하는 경우에는 위의 방법이 최선일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section 17 useEffect 부분
const [dog, setDog] = useState(""); const res = axios.get("https://dog.ceo/api/breeds/image/random"); console.log(res.data.message); // 사진 주소 setDog(res.data.message);위 코드에서 강사님이 설명 해주실 때, res 값이 변경되고 state 값이 바뀌니까 계속 무한루프로 리렌더링이 된다고 하셨는데, 계속 state 값이 바뀌는 이유가 이 api 자체가 fetch 할 때마다 랜덤으로 사진이 바뀌는 api라서 그런 걸까요 ? ??
-
해결됨Next + React Query로 SNS 서비스 만들기
섹션1. 라우트그룹 강의중에 Hydration 에러 질문이 있습니다
안녕하세요 제로초님 강의 구매해서 따라가고 있는 수강생입니다 해당 강의에 2분44초 경을 보면 루트 레이아웃에 body안에 "루트레이아웃" 문구 넣고 localhost 3000을 보시면 정상적으로 동일하게 바뀌어 있는데 하지만 그 상태에서 브라우저 창을 새로고침을 할 경우 아래와 같은 에러가 뜨더라구요===============Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching text node for "루트 레이아웃" in <body>. See more info here: https://nextjs.org/docs/messages/react-hydration-error=============== 서버와 클라이언트간의 매치가 되지 않아 하이드레이션이 실패했다고 하는데 next dev를 통해 재 실행을 해도 동일합니다브라우저에서 정상적으로 텍스트 변경이 되었지만 왜 이러한 충돌이 나는걸까요 ~?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
sec7 포트폴리오 질문
포트폴리오 sec7에서 게시글을 저장할 때 콘솔 창에 id를 출력해서 확인하는데, 저장한 게시글 정보를 playground에서 확인하는 방법은 무엇인가요? fetchBoard를 이용해서 찾아보려 했는데 잘 되지 않아요ㅜ 그리고 _id 말고 number이나 message 정보는 콘솔창에 출력할 수 없나요?
-
해결됨Next + React Query로 SNS 서비스 만들기
tanstack query 타입 지정
"use client"; import {useQuery, useQueryClient} from "@tanstack/react-query"; import {getUserPosts} from "../_lib/getUserPosts"; import Post from "@/app/(afterLogin)/_component/Post"; import {Post as IPost} from "@/model/Post"; type Props = { username: string; } export default function UserPosts({ username }: Props) { const { data } = useQuery<IPost[], Object, IPost[], [_1: string, _2: string, _3: string]>({ queryKey: ['posts', 'users', username], queryFn: getUserPosts, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const queryClient = useQueryClient(); const user = queryClient.getQueryData(['users', username]); console.log('user', user); if (user) { return data?.map((post) => ( <Post key={post.postId} post={post} /> )) } return null; }import {QueryFunction} from "@tanstack/query-core"; import {Post} from "@/model/Post"; export const getUserPosts: QueryFunction<Post[], [_1: string, _2: string, string]> = async ({ queryKey }) => { const [_1, _2, username] = queryKey; const res = await fetch(`http://localhost:9090/api/users/${username}/posts`, { next: { tags: ['posts', 'users', username], }, cache: 'no-store', }); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error('Failed to fetch data') } return res.json() } 기존 강의에서의 코드입니다. 제 생각에는 둘 다 타입을 지정해 줘야 할 필요가 있나? 라는 생각이 들어서 getUserPosts의 타입만 설정해봤는데, useQuery부분에서도 data 타입, key에 대한 타입, fn에 타입 모두 정상적으로 적용이 되는 거 같습니다. "use client"; import Post from "@/app/(afterLogin)/_component/Post"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { getUserPosts } from "../_lib/getUserPosts"; type Props = { username: string; }; export default function UserPosts({ username }: Props) { const { data } = useQuery({ queryKey: ["posts", "users", username], queryFn: getUserPosts, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const queryClient = useQueryClient(); const user = queryClient.getQueryData(["users", username]); console.log("user", user); if (user) { return data?.map((post) => <Post key={post.postId} post={post} />); } return null; } import { Post } from "@/model/Post"; import { QueryFunction } from "@tanstack/query-core"; export const getUserPosts: QueryFunction< Post[], [_1: string, _2: string, username:string] > = async ({ queryKey }) => { const [_1, _2, username] = queryKey; const res = await fetch(`http://localhost:9090/api/users/${username}/posts`, { next: { tags: queryKey, }, cache: "no-store", }); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } return res.json(); }; 이런식으로 약간 변형을 줘봤는데 기존의 코드 타입 지정과 차이가 있을까요?바꾼 부분은 UserPost에서 타입 지정은 모두 없애줬고, getUserPosts에서 next tags에 queryKey를 그대로 할당했습니다. (간혹 tags의 규칙상 queryKey에서는 가능해도 안되는 경우도 있다고 강의에서 말씀해주셨는데, 대부분의 경우에는 가능하기 때문에 대부분은 이렇게 충분하고 그런 경우에만 별도로 바꿔주면 될 거라고 생각했습니다.)
-
미해결Next + React Query로 SNS 서비스 만들기
서버 컴포넌트 fetch와 클라이언트 컴포넌트 fetch 구분
이전 질문에서 SEO가 필요없는 경우 보통 클라이언트에서 데이터를 가져오는게 더 좋다. 라는 답변을 받았습니다. 그런데 어떤게 서버에서 데이터를 가져오는거고, 어떤게 클라이언트에서 데이터를 가져오는건지가 매우 헷갈리고 있는 상황입니다. react-query를 사용할 때 query가 있는 컴포넌트에 "use client"가 있다면 클라이언트 데이터 fetch라고 보면 될까요? 그렇다면 수업 내용 중 client 컴포넌트에서 데이터를 가져온건 PostRecommends 부분이 유일한가요? 다른 react-query 부분은 모두 "use client"가 상단에 없습니다. (거기에 signup 정도...?)기존의 서버 컴포넌트에서 데이터를 가져오려고 하는데, SEO가 필요 없어 클라이언트 컴포넌트를 선택하고 싶다면, 위에 "use client"를 일부로 적어서 클라이언트 컴포넌트로 만들면 되는게 맞을까요? (데이터 페치 이전에는 함수 같은 것들이 있어서 반드시 바꿔야 되는 경우에만 "use client"를 썼기에, 필수적인게 아닌 제가 선택적으로 바꾸면 되는것인지 헷갈리네요) 컴포넌트 함수에 async를 쓰는 경우도 안쓰는 경우도 있는데, 이건 서버/클라이언트는 무관하게 단순히 async/await를 쓰기 위해 사용하는걸까요?요즘 질문이 많이 생기네요... 항상 감사합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
좋아요 기능 구현
제로초님의 코드대로 한다라고 하면 게시물 데이터를 받을때 프론트쪽에 postId와 userId를 보내고 프론트에서 계산을 해야하던데 백엔드에서 이 게시물을 로그인한 유저가 좋아요를 눌럿는지 안눌엇는지에 대한 데이터를 바로 내주고 싶어서 이렇게 짜봣는데 자꾸 에러가 납니다.게시물에 대한 코드는 이거구요 const express = require("express") const { Post, Sequelize, User, Like } = require("../models") const router = express.Router() router.get("/",async(req,res,next)=>{ try { const posts = await Post.findAll({ // where:{ // id:lastId // }, limit: 10, // DESC 최신순 ASC 오래된순 order:[["createdAt","DESC"]], // 다른사람도 좋아요를 햇는지를 보여주는데 의미 없어보임 // include: [{ // model: User, // 좋아요 누른 사람 // as: 'Liked', // required: false, // attributes: ['id'], // through: { // attributes: [] // }, // }], attributes:[ "id", "content", "title", "createdAt", // 만든사람 [Sequelize.literal("(SELECT `nickName` FROM `Users` WHERE `Users`.`id` = `Post`.`userId`)"), "nickName"], // 이미지 소스 [Sequelize.literal("(SELECT `src` FROM `Images` WHERE `Images`.`postId` = `Post`.`id`)"), "src"], [ Sequelize.literal(` (SELECT CASE WHEN COUNT(*) FROM Liked WHERE Liked.PostId = Post.id AND Liked.UserId =: userId END) AS isLiked `), "isLiked" ], ], raw: true, }) res.status(201).send(posts) } catch (error) { console.error(error) next(error) } }) module.exports = router 에러는 이렇게 나고 있습니다.sqlState: '42000', sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'FROM Liked\n" + ' WHERE Liked.PostId = Post.id\n' + " ' at line 3",대체 뭐가 문제인건지도 감이 안잡히네요 ㅠㅠ
-
미해결Next + React Query로 SNS 서비스 만들기
MSW 사용 대신에 Next에서 제공하는 라우트 핸들러 사용?
https://nextjs.org/docs/app/building-your-application/routing/route-handlers궁금한 점이 있어 의견 여쭈어 보려고 글 남깁니다!공식 문서를 읽어보니 route handlers로도 백엔드를 구현할 수 있는데 MSW 사용 이유는 배포 모드일때는 라우트 핸들러를 적용한 폴더를 삭제를 해줘야하니까 번거롭기 때문에 사용하는 이유도 있다? 라고 봐도 될까요?
-
미해결Next + React Query로 SNS 서비스 만들기
chilrdren, modal의 보여지는 원리가 제가 이해한 것이 맞을까요?
안녕하세요 제로초님.인터넷창에 직접 주소를 입력하거나 새로고침 시 뒤에 배경화면이 사라지는 것에 대하여 질문있습니다. 먼저<Link href='/i/flow/signup' className={styles.signup}>를 클릭 시에는 인터셉터 라우팅이 트리거 되어 src/app/(beforeLogin)/layout.tsx에 있는 children으로 인해 배경화면에 main컴포넌트가 보여지며 인터셉터된 @modal 은 modal부분에 보여집니다. 그런데 직접 주소창에/i/flow/signup' 를 입력하여 접근하거나 새로고침하면 배경화면에 main컴포넌트가 사라지게 되는데 이것의 이유는 직접 접근할 때 인터셉에 걸리지 않게되고, childrend에는 i/flow에 있는 폴더들이 보여지며 defalut.tsx가 배경화면으로 보여지기 때문인가요?
-
미해결Next + React Query로 SNS 서비스 만들기
클라이언드 fetch와 suspense를 이용한 fetch
CSR에서의 data fetch와 suspense 안에 있는 서버컴포넌트의 data fetch는 어떤 차이가 있을까요? SSR이 아닌 CSR을 써야 하는 상황은 위처럼 데이터가 큰 상황들인데, 어차피 suspense를 이용하면 서버에서 fetch가 끝나야 렌더링이 되는게 아니라 로딩으로 되다보니 CSR 대신 suspense를 이용하면 되는거 아닌가 싶습니다. 어떤 차이가 있는지 잘 모르겠어요. CSR을 써서 더 좋은 상황이 어떤게 있을지 모르겠습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
Suspence를 이용한 useSuspence(InfiniteQuery,Query) 부분 질문있습니다.
제로초님 저는 home경로에 Suspence로 감싼 <TabDeciderSuspence/>컴포넌트 안에 <PostRecommends/>, <FollowingPosts/>이 두개의 컴포넌트를 infiniteQuery 적용했습니다. 근데 useSuspenceInfiniteQuery를 적용해보려고 했는데, 적용하지 않아도 강의내용에서 말한 Suspence의 fallback 로딩이 적용되는거 같아요. Suspence가 감싼 하위 컴포넌트는 useSuspence(Query, InfiniteQuery)적용안해도 Suspence적용되나요?const Home = async () => { return ( <main className={style.main}> <TabProvider> <Tab /> <PostForm /> <Suspense fallback={<Loading />}> <TabDeciderSuspense /> </Suspense> </TabProvider> </main> ); };
-
해결됨Next + React Query로 SNS 서비스 만들기
nextjs의 hook을 사용할 때
상위 컴포넌트에서도 useSearchParam을 사용해야 하고, 하위 컴포넌트에서도 useSearchParam을 사용해야 하는 이러한 상황에서, 해당 값을 prop으로 전달할지, 독립적으로 호출할지 고민이 됩니다. 이 정도의 요소는 굳이 prop으로 전달하지 않고 다시 호출해도 유의미한 리소스 차이는 없겠죠?
-
미해결Next + React Query로 SNS 서비스 만들기
다이나믹 라우트 안의 폴더
안녕하세요. /product/[slug]/edit 이런 파일 구조를 가지고 있는데, edit 페이지에서 어떻게 하면, 현재 slug의 dynamic route 값을 가지고 올수 있을까요?edit 에서는 params가 빈 객체로 찍힙니다.미리 감사합니다!
