"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에서는 가능해도 안되는 경우도 있다고 강의에서 말씀해주셨는데, 대부분의 경우에는 가능하기 때문에 대부분은 이렇게 충분하고 그런 경우에만 별도로 바꿔주면 될 거라고 생각했습니다.)
이전 질문에서 SEO가 필요없는 경우 보통 클라이언트에서 데이터를 가져오는게 더 좋다. 라는 답변을 받았습니다. 그런데 어떤게 서버에서 데이터를 가져오는거고, 어떤게 클라이언트에서 데이터를 가져오는건지가 매우 헷갈리고 있는 상황입니다. react-query를 사용할 때 query가 있는 컴포넌트에 "use client"가 있다면 클라이언트 데이터 fetch라고 보면 될까요? 그렇다면 수업 내용 중 client 컴포넌트에서 데이터를 가져온건 PostRecommends 부분이 유일한가요? 다른 react-query 부분은 모두 "use client"가 상단에 없습니다. (거기에 signup 정도...?) 기존의 서버 컴포넌트에서 데이터를 가져오려고 하는데, SEO가 필요 없어 클라이언트 컴포넌트를 선택하고 싶다면, 위에 "use client"를 일부로 적어서 클라이언트 컴포넌트로 만들면 되는게 맞을까요? (데이터 페치 이전에는 함수 같은 것들이 있어서 반드시 바꿔야 되는 경우에만 "use client"를 썼기에, 필수적인게 아닌 제가 선택적으로 바꾸면 되는것인지 헷갈리네요) 컴포넌트 함수에 async를 쓰는 경우도 안쓰는 경우도 있는데, 이건 서버/클라이언트는 무관하게 단순히 async/await를 쓰기 위해 사용하는걸까요? 요즘 질문이 많이 생기네요... 항상 감사합니다.
제로초님의 코드대로 한다라고 하면 게시물 데이터를 받을때 프론트쪽에 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", 대체 뭐가 문제인건지도 감이 안잡히네요 ㅠㅠ
https://nextjs.org/docs/app/building-your-application/routing/route-handlers 궁금한 점이 있어 의견 여쭈어 보려고 글 남깁니다! 공식 문서를 읽어보니 route handlers로도 백엔드를 구현할 수 있는데 MSW 사용 이유는 배포 모드일때는 라우트 핸들러를 적용한 폴더를 삭제를 해줘야하니까 번거롭기 때문에 사용하는 이유도 있다? 라고 봐도 될까요?
글에 두서가 없어도 양해 바랍니다 이 수업 수강 이전에 코딩 문제를 풀 때 파이썬으로 재귀함수를 사용했던 적이 있습니다. 그때 알게 된것이 파이썬의 재귀함수에는 기본적으로 깊이의 제한이 있다는 것입니다. sys.recursionlimit()으로 확인해보니 재귀호출을 1000이상 못하도록 값이 제한되어 있고 이 값을 늘려서 사용하는것은 별로 추천되는 방법이 아닌걸로 알고 있습니다. C언어 사용할때에는 속도면에서 제한도 없고 파이썬보다 속도도 월등하다보니 재귀를 자주 사용했었는데 파이썬에서 재귀함수로 풀어야 하는 경우가 있을까요?
안녕하세요 제로초님. 인터넷창에 직접 주소를 입력하거나 새로고침 시 뒤에 배경화면이 사라지는 것에 대하여 질문있습니다. 먼저 <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가 배경화면으로 보여지기 때문인가요?
CSR에서의 data fetch와 suspense 안에 있는 서버컴포넌트의 data fetch는 어떤 차이가 있을까요? SSR이 아닌 CSR을 써야 하는 상황은 위처럼 데이터가 큰 상황들인데, 어차피 suspense를 이용하면 서버에서 fetch가 끝나야 렌더링이 되는게 아니라 로딩으로 되다보니 CSR 대신 suspense를 이용하면 되는거 아닌가 싶습니다. 어떤 차이가 있는지 잘 모르겠어요. CSR을 써서 더 좋은 상황이 어떤게 있을지 모르겠습니다.
상위 컴포넌트에서도 useSearchParam을 사용해야 하고, 하위 컴포넌트에서도 useSearchParam을 사용해야 하는 이러한 상황에서, 해당 값을 prop으로 전달할지, 독립적으로 호출할지 고민이 됩니다. 이 정도의 요소는 굳이 prop으로 전달하지 않고 다시 호출해도 유의미한 리소스 차이는 없겠죠?
age_bin_list = np.arange(10, 80, 10) df['age_bin'] = pd.cut(df['age'], bins = age_bin_list) pivot_df = df.pivot_table( index = 'age_bin', columns = 'region', values = 'charges', aggfunc = 'median' # 각 구간에 해당하는 값을 중간값을 사용하겠다. ) pivot_df # 각각의 값들에 대해 크기를 가늠할 수 있게끔 시각화(주로 색상)하는 방법 # 2D 형식으로 준비된 데이터를 Seaborn heatmap으로 시각화 # annot 인자를 통해 각 셀의 값 표현 가능 fig, ax = plt.subplots() sns.heatmap(pivot_df, ax = ax, annot = True) 코드 똑같이 따라했는데 왜 저는 표에 수치가 다 표현이 안되는 건가요?
현재 실전 데이터 JPA수강 중인데요.. 독학 중이라 토이프로젝트로 연습하는데 오늘까지 배운 JpaRepository 상속과 관련하여 회원가입 기능 구현하려 하려는데 어디 물어볼곳이 없고 뒤죽박죽이라 정리가 필요해서 장문의 질문을 남깁니다.. 일단 제가 머릿속에 정리가 안되는 것은 영한선생님께서 최대한 컨트롤러에 엔터티를 노출하지 말고 비지니스 로직을 서비스에서 최대한 구현하라고 해서 따라하는 중인데 Member를 기준으로 파라미터를 받을 MemberForm을 생성했습니다. 여기서 질문이.. MemberForm을 생성했으면 MemberDto는 따로 생성 안해도 될까요? 컨트롤러를 그림과 같이 작성하였고 서비스는 아래와같이 하였는데... 뭔가 서비스에서 엔터티를 직접 만지니까 찝찝한데 실무에서도 이렇게 하는지 궁금합니다..
클라이언트에서는 useSession인데, 서버에서는 어떻게 불러오나요? getSession이나 getServerSession을 쓰면 되는거 같은데, 그냥 서버 컴포넌트 페이지에서 const A=await getSession()으로 해버리면, 그 다음 console.log(A)에서 pending이 나오더라구요... 서버에서 세션을 호출해서 특정 동작을 하기 위해서는 어떻게 조작해야 할까요? api에 따로 만들어서 route handler을 써야 할까요...? 이 방법도 어려움을 겪고 있긴해서 가장 좋은 방법이 뭔지 궁금합니다.
React뿐만 아니라 NextJS에서도 <ErrorBoundary fallback={<Error/>}> <Suspense fallback={<Loading/>}> <Page /> </Suspense> </ErrorBoundary> 이렇게 컴포넌트 계층 구조를 작성해야 한다는 것인가요? 아니면 그냥 error.tsx, loading.tsx파일만 만들면 알아서 적용이 된다는 것인가요?
안녕하세요 강사님 ㅎㅎ 현재 챕터도 이전과 같은 증상인데 어떻게 확인하면 좋을까요? Github snapshot: https://github.com/dimz119/learn-python-django/tree/form_view 에서 다운받아서 실행시켜도 제가 작성한 코드랑 똑같은 문제가 발생하는데 확인할수있는 방법이있을까요??
