172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
react-query를 사용 하고 있는 그중 useQuery를 사용 하고 있습니다 네트워크 탭상에서는 한번만 호출 햇는데 console에서는 회색으로 아래와 같이 두번 호출 한것 처럼 나오는데 이건 어떻게 못막을까요?! 조건을 걸어서 확인을 해봤지만 계속 해서 나오더라구여 ㅠㅠ 두번의 호출인지 소켓을 요청 했을때 두번을 요청 하더라구여 ㅜㅜ
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다. 깃허브에는 7.7 챕터가 따로 있던데... 혹시 그 브랜치에 site안의 page파일을 그대로 사용하면 될까요??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다른 코드는 다 처리되고 화면에 반영되는데, 노란 부분만 그냥 건너뛰어져요. 강의 영상 코드와 여러번 비교하며 그대로 타이핑 했는데요 ㅠ 아에 처리도 안되고 그냥 건너뛰어져요 ㅠ
미해결
Next + React Query로 SNS 서비스 만들기
팔로우 버튼을 누르면 로그인 화면으로 가도록 기능을 넣어봤습니다. FollowRecommend 컴포넌트에서 router.replace('/i/flow/login'); 를 하면 notfound 페이지가 뜹니다. (당연히 router.replace('/home')을 해도 마찬가지 입니다.<- /i/flow/login으로 가기때문) 그러나 이 상태에서 새로고침하면 로그인 화면 잘 뜹니다. 이렇게 root 경로로는 잘 넘어가서 일단은 메인화면으로 해놨는데, 왜 이런 현상이 발생하는 걸까요..? 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
import { http, HttpResponse } from "msw"; const testData = [ { result: "success", userId: 2, nickname: "닉네임", favoriteCount: 223, viewCount: 336, position: "Backend", userFileUrl: "/Users/user/Desktop/pictures/userPicture.jpg", year: "경력없음", techStack: "react, java, ---", softSkill: "소통, 적극성, ---", links: "http://블로그주소", alarmStatus: true, content: "안녕하세요 구인 중입니다", }, ]; export const handlers = [ http.post("/api/post", () => { return HttpResponse.text(JSON.stringify("ok")); }), http.get("/api/get", ({ request }) => { console.log("request", request); return HttpResponse.json(testData); }), ]; export default handlers;"use client"; import { redirect } from "next/navigation"; export default function Home() { const handleClick = () => { fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/get`, { method: "get", }) .then((res) => console.log("res", res.json())) // JSON 형식으로 변환된 데이터를 가져옴 .then((data) => console.log("res?", data)); // JSON 데이터를 로그에 출력 }; return ( <> <div> <button onClick={handleClick}>test btn</button> <p>계정을 생성하세요</p> <form> <div> <> <label htmlFor="id">아이디</label> <input type="text" id="id" name="id" required /> </> <> <label htmlFor="name">이름</label> <input type="text" id="name" name="name" required /> </> <button type="submit">가입하기</button> </div> </form> </div> </> ); } browser.ts, handlers.ts, http.ts, MSWComponent.tsx, server.ts 는 제로초님과 다 동일하게 설정하였고 get부분에서 위와같이 하였는데 Unexpected token '<', "<!DOCTYPE "... is not valid JSON 라는 에러가 계속 발생합니다 ㅠㅠ 어떤부분이 문제일까요.. ! console.log("res", res.json())) 이부분에서 res만 콘솔로 확인하면 이렇게 나옵니다..!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
내장함수 리뷰 강의에서 let isStarted = false 이 부분을 작성해주는 이유와 let timer 를 해서 setInterval 앞에 timer를 붙여 재할당부분 그리고, clearInterval(timer) 이 부분에 대해 강의를 여러번 봐도 설명이 조금 어렵더라구요. 조금 쉽게 설명부탁드리겠습니다 ^^
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
"devDependencies": { "@types/node": "^17.0.2", "@types/react": "^17.0.2", "typescript": "^4.9.4" } 이렇게 강사님과 버젼을 맞췄음에도 불구하고 yarn dev 가 실행되지 않습니다. 터미널에서 권장한 방법으로 yarn add --dev @types/react 를 입력하면 "devDependencies": { "@types/node": "^17.0.2", "@types/react": "^18.3.1", "typescript": "^4.9.4" } 이렇게 돌아가버립니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 full reload 될때는 서버 데이터를 호출하는데 그 이후로 새로고침할대는 호출하지 않아서 답답합니다. 구글링하고 제로초님 로직을 따라 만들어보다가 posts게시물이 내려오도록 수정을 했는데, 이상하게 처음엔 서버에 요청하고 데이터를 내려받아서 게시물이 보이는데, 그이후 새로고침하면 서버 호출까지도 안하는것 같습니다. 이젠 좀 나오나 싶었는데, full reload될때만 되서 여유되실 때 로직한번 봐주시면 감사하겠습니다 ㅠ / pages/index.js import { useDispatch, useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostForm from "../components/PostForm"; import PostCard from "../components/PostCard"; import { useEffect } from "react"; import { loadPostsRequestAction } from "../reducers/post"; import { loadMyInfoRequestAction } from "../reducers/user"; import wrapper from "../store/configurStore"; import axios from "axios"; import { END } from "redux-saga"; // 프론트, 브라우저 같이 실행 const Home = () => { const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostsLoading, retweetError } = useSelector((state) => state.post); const dispatch = useDispatch(); useEffect(() => { if (retweetError) { alert(retweetError); } }, [retweetError]); useEffect(() => { const onScroll = () => { if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) { if (hasMorePosts && !loadPostsLoading) { const lastId = mainPosts[mainPosts.length - 1]?.id; dispatch(loadPostsRequestAction({ lastId, limit: 10 })); } } }; window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }, [hasMorePosts, loadPostsLoading, mainPosts]); return ( <AppLayout> {me && <PostForm />} {/* 순서가 바뀌거나 삭제될 수 있는 리스트들에 key값으로 index를 쓰면 안됀다. */} {/* 반복문이 있고 바뀌지 않는 리스트일 경우에만 사용해도 된다. */} {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </AppLayout> ); }; export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { store.dispatch(loadPostsRequestAction()); store.dispatch(loadMyInfoRequestAction()); store.dispatch(END); await store.sagaTask.toPromise(); // 사가 작업 완료 대기 console.log("state", store.getState()); }); export function reportWebVitals(metric) { console.log(metric); } export default Home; /pages/_app.js import PropTypes from "prop-types"; import Head from "next/head"; import { Provider } from "react-redux"; import wrapper from "../store/configurStore"; const NodeBird = ({ Component, ...rest }) => { const { store, props } = wrapper.useWrappedStore(rest); const { pageProps } = props; return ( <Provider store={store}> <Head> <meta charSet='utf-8' /> <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' /> <title>NodeBird</title> </Head> <Component {...pageProps} /> </Provider> ); }; NodeBird.propTypes = { Component: PropTypes.elementType.isRequired, pageProps: PropTypes.any.isRequired, }; export function reportWebVitals(metric) { // console.log("-----------------------------------"); // console.log(metric); } export default NodeBird; store/configureStore.js import { createWrapper } from "next-redux-wrapper"; import { configureStore } from "@reduxjs/toolkit"; import reducer from "../reducers"; import user from "../reducers/user"; import post from "../reducers/post"; import createSagaMiddleware from "redux-saga"; import rootSaga from "../sagas"; // redux-thunk를 참조해서 만든 미들웨어 const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { return next(action); }; const sagaMiddleware = createSagaMiddleware(); function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props.pageProps.initialState : undefined; } const serverState = getServerState(); const makeStore = () => { // configureStore: store 를 생성 const store = configureStore({ reducer: { user, post, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat([sagaMiddleware, loggerMiddleware]), preloadedState: serverState, // SSR }); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(makeStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper; /reducers.js/post.js import { HYDRATE } from "next-redux-wrapper"; import { createSlice } from "@reduxjs/toolkit"; import shortId from "shortid"; import produce from "immer"; export const initialState = { mainPosts: [], imagePaths: [], hasMorePosts: true, loadPostsLoading: false, // 게시글들 불러오는 중 loadPostsDone: false, loadPostsError: null, addPostLoading: false, // 게시글 추가 시도중 addPostDone: false, addPostError: null, removePostLoading: false, // 게시글 제거 시도중 removePostDone: false, removePostError: null, addCommentLoading: false, // 댓글 추가 시도중 addCommentDone: false, addCommentError: null, likePostLoading: false, // 좋아요 시도중 likePostDone: false, likePostError: null, unLikePostLoading: false, // 좋아요 취소중 unLikePostDone: false, unLikePostError: null, uploadImagesLoading: false, // 이미지 업로드 시도중 uploadImagesDone: false, uploadImagesError: null, retweetLoading: false, // 리트윗 시도중 retweetDone: false, retweetError: null, }; const postSlice = createSlice({ name: "post", initialState, reducers: {loadPostsRequestAction: (state, action) => { console.log("-------------------요청-------------------"); state.loadPostsLoading = true; state.loadPostsDone = false; state.loadPostsError = null; }, loadPostsSuccessAction: (state, action) => { console.log("-------------------성공-------------------"); state.loadPostsLoading = false; state.loadPostsDone = true; state.mainPosts = [... state.hasMorePosts = action.payload.length === 10; }, loadPostsFailureAction: (state, action) => { console.log("-------------------실패-------------------"); state.loadPostsLoading = false; state.loadPostsError = action.payload; }, }, extraReducers: (builder) => builder .addCase(HYDRATE, (state, action) => { console.log("HYDRATE", action); return { ...state, ...action.payload.post, }; }) .addDefaultCase((state) => state), }); export const { loadPostsRequestAction, loadPostsSuccessAction, loadPostsFailureAction, } = postSlice.actions; export default postSlice.reducer;
미해결
Next + React Query로 SNS 서비스 만들기
getUserServer headers 내부 Cookie에 cookies().toString()을 통해 넣어주셨는데 쿠키 안에 있는 모든 값들을 통으로 toString 변환하여 넣어준 이유가 어떤 이유일까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 https://github.com/ZeroCho/react-nodebird/blob/master/toolkit/front/pages/index.js 위 내용을 참고해서 코드를 작성해보았습니다. import { useDispatch, useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostForm from "../components/PostForm"; import PostCard from "../components/PostCard"; import { useEffect } from "react"; import { loadPostsRequestAction } from "../reducers/post"; import { loadMyInfoRequestAction } from "../reducers/user"; import wrapper from "../store/configurStore"; import axios from "axios"; // 프론트, 브라우저 같이 실행 const Home = () => { const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostsLoading, retweetError } = useSelector((state) => state.post); const dispatch = useDispatch(); useEffect(() => { if (retweetError) { alert(retweetError); } }, [retweetError]); useEffect(() => { const onScroll = () => { if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) { if (hasMorePosts && !loadPostsLoading) { const lastId = mainPosts[mainPosts.length - 1]?.id; dispatch(loadPostsRequestAction({ lastId, limit: 10 })); } } }; window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }, [hasMorePosts, loadPostsLoading, mainPosts]); return ( <AppLayout> {me && <PostForm />} {/* 순서가 바뀌거나 삭제될 수 있는 리스트들에 key값으로 index를 쓰면 안됀다. */} {/* 반복문이 있고 바뀌지 않는 리스트일 경우에만 사용해도 된다. */} {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </AppLayout> ); }; export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { const cookie = req ? req.headers.cookie : ""; axios.defaults.headers.Cookie = ""; if (req && cookie) { axios.defaults.headers.Cookie = cookie; } await store.dispatch(loadPostsRequestAction()); await store.dispatch(loadMyInfoRequestAction()); console.log("state", store.getState()); }); export default Home; 그런데 await에서 await' has no effect on the type of this expression.ts(80007 이런 경고문 때문인지 이전 영상에서 말씀해주셨던것처럼 데이터를 success까지 기다리지 않는건지, 빈값들만 오고 있습니다. 혹시 어디를 살펴보면 좋을지 알 수 있을까요? { "name": "react-nodebird", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "author": "", "license": "MIT", "dependencies": { "@ant-design/icons": "^5.3.6", "@reduxjs/toolkit": "^2.2.3", "antd": "^5.8.3", "axios": "^1.6.8", "next": "^14.2.3", "next-redux-wrapper": "^8.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.51.3", "react-redux": "^9.1.1", "react-slick": "^0.30.2", "redux": "^5.0.1", "shortid": "^2.2.16", "styled-components": "^6.1.8" }, "devDependencies": { "@faker-js/faker": "^8.4.1", "babel-eslint": "^10.1.0", "eslint": "^8.57.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.2" } } 환경은 위와같습니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
[username]/status/[id] 페이지에 접근했을 때 해당 게시글의 답글을 리액트 쿼리의 인피니트 스크롤을 통해 가져오는데 제로초님이 직접 배포하신 z.nordbird.com 도 그렇고 제가 강의를 통해 만들고 있는 페이지에 인피니트 스크롤을 적용해봐도 리액트 쿼리를 통해 가져오는 데이터가 계속 중복이 되는데 (cursor 값이 증가하면서 다음 답글을 가지고 오지 못하고 어떤 cursor를 기준으로 이보다 작은 값을 가지는 답글만 fetching 됨) 코드상의 오류는 아니고 백엔드 설계가 그렇게 되어 있는 거죠? 답글 무한 스크롤 결과(pageParam이 96을 넘어가지 못함) 답글 인피니트 스크롤 부분 코드는 배포된 페이지 깃에 올라온 내용과 동일합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자꾸 저 부분이 빠져나가서 도대체 이유를 모르겠습니다. 강사 님 코드를 똑같이 붙여넣기 해도 똑같은 결과가 나옵니다 참 이상 한 거는 InputWrapper안에 Address를 하나를 지우면 올바르게 가운데 출력이 됩니다. 코드는 강사님꺼랑 완전 똑같은데 결과가 왜 이렇게 나오는지 궁금합니다. 아무리 생각해도 똑같이 InputWrapper안에 있으면 잘 나와야 하는데 이유를 모르겠습니다. 아래는 <Address />를 하나 지웠을 경우 입니다. 또한 위에 정렬이 안된 부분도 WriterWrapper 안에 width = 100%를 지우면 정렬이 됩니다. 도대체 왜 이 두 요소만 다르게 출력 되는지 도저히 모르겠습니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 provider 따라해보는중 다른데는 잘되는데 안되는곳이 있어 문의드립니다. "use client" import {createContext, ReactNode, useState} from "react"; const currentYear = new Date().getFullYear(); const currentMonth = new Date().getMonth() + 1; export const FilterContext = createContext({ year: currentYear, setYear: (value: number) => {}, month: currentMonth.toString().padStart(2, "0"), setMonth: (value: string) => {}, }); type Props = { children: ReactNode }; export default function FilterProvider({ children }: Props) { const [ year, setYear ] = useState(currentYear); const [ month, setMonth ] = useState(currentMonth.toString().padStart(2, "0")); return ( <FilterContext.Provider value={{ year, setYear, month, setMonth }}> {children} </FilterContext.Provider> ); } const { year, setYear, month, setMonth } = useContext(FilterContext); const [selectBox2, setSelectBox2] = useState(false); const [selectBox3, setSelectBox3] = useState(false); {Array.from({ length: year - 2019 }, (_, index) => year - index).map((item) => ( <li key={item} onClick={() => { setSelectBox2(false); setYear(item); console.log(item); }}>{item}</li> ))} {Array.from({ length: 12 }, (_, index) => (index + 1).toString().padStart(2, "0")).map((item) => ( <li key={item} onClick={() => { setSelectBox3(false); console.log("month",item); setMonth(item); }}>{item}</li> ))} yser, month 가 업데이트가 될질 않아서요. 콘솔에는 찍히는데 값이 변경이 안되는 이유를 모르겠습니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 제로초님 항상 좋은 강의 감사드립니다. 해당 강의에서 팔로우 api에 의도적으로 에러를 일으켜 보았는데, onError에서 캐치하지 못하는 것을 확인했습니다. const follow = useMutation({ mutationFn: (userId: string) => { // console.log('follow', userId); return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { credentials: 'include', method: 'post', } ); }, ... onError(error, userId: string) { ... } 그래서 밑에와 같이 바꾸어보니 onError에서 캐치하여 롤백이 정상적으로 되었습니다. mutationFn: async (userId: string) => { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { credentials: 'include', method: 'post', } ); if (!response.ok) { throw new Error('팔로우 실패'); } return response; }, 혹시 본 강의 코드대로 하면 onError에서 원래 캐치해야하는데 안 되는 것인지 아니면 수강생들에게 숙제로 낸 것인지 궁금합니다.
해결됨
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> </> ); }
미해결
실전! 스프링 데이터 JPA
예전에 영한님이 답변하신 내용 중에 스프링이 제공하는 트랜잭션은 처음 시작한 트랜잭션을 기반으로 전파됩니다. 그러니까 서비스에서 트랜잭션을 시작하면 리포지토리의 트랜잭션이 해당 트랜잭션을 그대로 이어 받습니다. 라는 내용이 있었습니다. 그렇다면, 컨트롤러, 서비스, 리포지토리 순으로 코드가 진행된다고 할 때, 만약 서비스 계층에 @Trasnactional(readonly=false) 가 걸려있고 리포지토리 계층에 @Trasnactional(readonly=true) 가 걸려있으면 서비스 계층이 먼저 호출되므로 readonly=false 옵션이 적용된 채로 리포지토리 계층까지(기존 리포지토리 계층의 옵션은 무시된채로) 코드가 흘러가는걸까요?
해결됨
Next + React Query로 SNS 서비스 만들기
로그인을 클라이언트 컴포넌트에서 서버액션을 통해 구현해봤는데, 궁금한게 생겨서 질문 드립니다. 로그인 모달의 코드입니다. "use client"; import style from "@/app/(beforelogin)/_component/login.module.css"; import { ChangeEventHandler, FormEventHandler, useState } from "react"; import { redirect, useRouter } from "next/navigation"; import { signIn } from "next-auth/react"; import { useFormState, useFormStatus } from "react-dom"; import onSubmit from "../_lib/signin"; import BackButton from "./BackButton"; function showMessage(messasge: string | null | undefined) { if (messasge === "no_id") { return "아이디를 입력하세요."; } if (messasge === "no_password") { return "비밀번호를 입력하세요."; } return ""; } export default function LoginModal() { const [state, formAction] = useFormState(onSubmit, { message: null }); const { pending } = useFormStatus(); return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <BackButton /> <div>로그인하세요.</div> </div> <form action={formAction}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" name="id" className={style.input} type="text" placeholder="" /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" name="password" className={style.input} type="password" placeholder="" /> </div> </div> <div className={style.message}>{showMessage(state?.message)}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={pending}> 로그인하기 </button> </div> </form> </div> </div> ); } 아래는 signin.ts 의 코드입니다. "use server"; import { redirect } from "next/navigation"; import { signIn } from "@/auth"; const onSubmit = async (prevState: any, formData: FormData) => { if (!formData.get("id") || !(formData.get("id") as string)?.trim()) { return { message: "no_id" }; } if ( !formData.get("password") || !(formData.get("password") as string)?.trim() ) { return { message: "no_password" }; } let shouldRedirect = false; try { const response = await signIn("credentials", { username: formData.get("id"), password: formData.get("password"), redirect: false, }); console.log(response.status, "1"); console.log(response, "2"); shouldRedirect = true; } catch (err) { console.error(err); return { message: null }; } if (shouldRedirect) { redirect("/home"); // try/catch문 안에서 X } }; export default onSubmit; 이렇게 했을 때에, 콘솔이 이렇게 찍힙니다. 1. response가 http://localhost:3000/i/flow/login 이렇게 날라오고, status는 그에 따라 undefined 입니다. 응답이 이렇게 오면 response에 따른 status를 모르는데 에러처리를 어떻게 해야하나요 ?? 아래는 회원가입을 똑같이 서버액션으로 구현했을때에, signup.ts의 코드입니다. "use server"; import { redirect } from "next/navigation"; import { signIn } from "@/auth"; const onSubmit = async (prevState: any, formData: FormData) => { if (!formData.get("id") || !(formData.get("id") as string)?.trim()) { return { message: "no_id" }; } if (!formData.get("name") || !(formData.get("name") as string)?.trim()) { return { message: "no_name" }; } if ( !formData.get("password") || !(formData.get("password") as string)?.trim() ) { return { message: "no_password" }; } if (!formData.get("image")) { return { message: "no_image" }; } let shouldRedirect = false; try { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", body: formData, credentials: "include", } ); console.log(response.status, "1"); if (response.status === 403) { return { message: "user_exists" }; } console.log(await response.json(), "2"); console.log(response, "3"); shouldRedirect = true; /*await signIn("credentials", { username: formData.get("id"), password: formData.get("password"), redirect: false, });*/ } catch (err) { console.error(err); return { message: null }; } if (shouldRedirect) { redirect("/home"); // try/catch문 안에서 X } }; export default onSubmit; 이 때에, console.log 의 결과입니다. response 응답 객체에서 await response.json()을 취했는데, OK로 나오는 이유가 궁금합니다. 로그인 구현에서 redirect를 false로 하면 client측에서 라우팅하는 것이고, true로 하면 서버쪽에서 리다이렉트 하는 것이라고 알고 있습니다. 그런데 서버 액션으로 api 호출을 하는 것인데, redirect를 false로 하고 아래 redirect를 해주어도 redirect가 되는 것인지 궁금합니다. 그리고 redirect를 true로 하면 이렇게 에러가 떠버립니다. 서버액션으로 리다이렉트 시켜주는 것이라 생각해서 true옵션을 주었는데 에러가 왜 뜨는지 궁금합니다. 바쁘실텐데 많은 질문 죄송합니다 ㅜㅜ
해결됨
Next + React Query로 SNS 서비스 만들기
서버 컴포넌트에서 server actions 사용 중 네트워크 탭에서 응답이 안담기는 문제가 있어서 질문 드립니다. 강의에 나와있는대로 코드를 따라했는데 뭐가 문제인지 잘 모르겠습니다. 아래는 signupModal의 코드입니다. import style from "./signup.module.css"; import onSubmit from "../_lib/signup"; import BackButton from "@/app/(beforelogin)/_component/BackButton"; import { useFormState, useFormStatus } from "react-dom"; import { redirect } from "next/navigation"; function showMessage(messasge: string | null | undefined) { if (messasge === "no_id") { return "아이디를 입력하세요."; } if (messasge === "no_name") { return "닉네임을 입력하세요."; } if (messasge === "no_password") { return "비밀번호를 입력하세요."; } if (messasge === "no_image") { return "이미지를 업로드하세요."; } if (messasge === "user_exists") { return "이미 사용 중인 아이디입니다."; } return ""; } export default function SignupModal() { //const [state, formAction] = useFormState(onSubmit, { message: null }); //const { pending } = useFormStatus(); const formAction = async (formData: any) => { "use server"; let shouldRedirect = false; try { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", body: formData, credentials: "include", } ); console.log(response.status); console.log(await response.json(), "abc"); if (response.status === 403) { console.log("???"); return { message: "user_exists" }; } shouldRedirect = true; } catch (err) { console.log(err); } if (shouldRedirect) { redirect("/home"); // try/catch문 안에서 X } }; return ( <> <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <BackButton /> <div>계정을 생성하세요.</div> </div> <form action={formAction}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" name="id" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="name"> 닉네임 </label> <input id="name" name="name" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" name="password" className={style.input} type="password" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="image"> 프로필 </label> <input id="image" name="image" required className={style.input} type="file" accept="image/*" /> </div> </div> <div className={style.modalFooter}> <button type="submit" className={style.actionButton}> 가입하기 </button> </div> </form> </div> </div> </> ); } 아래는 핸들러 세팅입니다. http.post("/api/users", async ({ request }) => { console.log("회원가입"); return HttpResponse.text(JSON.stringify("user_exists"), { status: 403, }); // return HttpResponse.text(JSON.stringify("ok"), { // headers: { // "Set-Cookie": "connect.sid=msw-cookie;HttpOnly;Path=/;Max-Age=0", // }, // }); }), 여기서 회원가입을 누를시에 console.log() 처리한 부분은 잘 찍히고 서버쪽에서 찍은 회원가입 콘솔도 잘 찍히는 모습입니다. 네트워크탭에서 페이로드는 잘 담겼는데, 응답이 없습니다. 회원가입 누를 때 콘솔이 찍히는 것으로 보아서 포트도 9090으로 제대로 열려있고, 403응답이 오는 것으로 보아 핸들러 쪽은 제대로 작동하는 것 같습니다. 그리고 서버액션 쪽 콘솔 "???"가 찍히는 것으로 보아서 status도 403으로 잘 오는 것 같은데 리턴 메시지가 제대로 안되는 것인지 응답이 왜 없는 것인지 궁금합니다.
미해결
실습으로 배우는 선착순 이벤트 시스템
docker exec -it kafka kafka-console-consumer.sh --topic coupon_create --bootstrap-server localhost:9092 --key-deserializer "org.apache.kafka.common.serialization.StringDeserializer" --value-deserializer "org.apache.kafka.common.serialization.LongDeserializer" 라고 터미너에 입력한 후에 테스트 코드 package com.example.coupon_server.service; import com.example.coupon_server.repository.CouponRepository; import org.junit.jupiter.api.DisplayName; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import static org.assertj.core.api.AssertionsForClassTypes.assertThat; @SpringBootTest public class ApplyServiceTest { @Autowired private ApplyService applyService; @Autowired private CouponRepository couponRepository; @Test @DisplayName("쿠폰 한개 적용 테스트") public void applyOneCoupon() { applyService.applyCoupon(1L); long count = couponRepository.count(); assertThat(count).isEqualTo(1); } @Test @DisplayName("쿠폰 여러개 적용 테스트") public void applyMultiCoupon() throws InterruptedException { int threadCount = 1000; ExecutorService executorService = Executors.newFixedThreadPool(32); CountDownLatch latch = new CountDownLatch(threadCount); for (int i = 0; i < threadCount; i++) { long userId = i; executorService.submit(() -> { try { applyService.applyCoupon(userId); } finally { latch.countDown(); } }); } latch.await(); Thread.sleep(10000); long count = couponRepository.count(); assertThat(count).isEqualTo(100); } @Test @DisplayName("한명당 한개의 쿠폰만 발급") public void applyOneCouponPerUser() throws InterruptedException { int threadCount = 1000; ExecutorService executorService = Executors.newFixedThreadPool(32); CountDownLatch latch = new CountDownLatch(threadCount); for (int i = 0; i < threadCount; i++) { long userId = i; executorService.submit(() -> { try { applyService.applyCoupon(1L); } finally { latch.countDown(); } }); } latch.await(); Thread.sleep(10000); long count = couponRepository.count(); assertThat(count).isEqualTo(1); } } 로 작성했지만 터미널에서 강사님과 같이 숫자들이 찍히자 않습니다. 그리고 터미널 안의 글씨 너무 작은것 같아요
미해결
[리뉴얼] React로 NodeBird SNS 만들기
게시글을 끝까지 스크롤하고, 다른 페이지에 다녀오면 다른 페이지갔다가 오면 게시글 불러와지는 이슈를 발견했습니다. index.js에서 게시글 불러오는 부분에 mainposts의 조건을 붙여서 실행하면될거같은데 차후 강의에서 해결해주시는 이슈인지 궁금합니다. 아니면 저만 그런건지 여쭤봅니다! 감사합니다.
