약 7분경 css는 그냥 import로 불러오시는 강의 내용이 있는데요, 이전에 import를 하기 위해선 원본 파일에서 꼭 export를 해줘야한다고 말씀해주셨던 것 같아서요.js파일과 다르게 css 파일을 불러올때는 꼭 export를 하지 않아도 되는 걸까요?

/login -> /i/flow/login으로 redirect 할때 next.config.js에서 const nextConfig = { async redirects() { return [ { source: "/login", destination: "/i/flow/login", permanent: true, }, ]; }, }; module.exports = nextConfig;이런식으로 코드를 짜면 redirect가 되는데 login폴더를 굳이 만들지 않고 위와 같이 설정해도 괜찮은가요?

안녕하세요 제로초님!! 해당 강의 영상을 끝까지 수강한 수강생 입니다!항상 강의 영상 잘 보고 있습니다. 복잡한 질문에도 친절히 답해주셔서 감사합니다~! 첫 번째 에러를 번역해보니 'FollowList'에 prop 'data'가 필요한 것으로 표시되어 있지만 값은 'undefined'입니다. 라고 뜹니다.문제가 생긴 profile.js 에서 console.log(data)를 해보니 역시 data가 undefined 가 나옵니다.FollowList.js의 data가 profile.js로 전달이 되지 않은 것인가요? 만약 그렇다면 어디를 봐야 하는지 힌트 부탁 드립니다!(data의 프롭타입은 배열입니다!)https://github.com/ZeroCho/react-nodebird/blob/master/ch6/front/pages/profile.js질문을 올리기 전에 제로초님 깃허브를 꼼꼼히 참고하고 스스로 구글링 해보았지만 해결이 어려워 질문 올립니다!포기하지 않고 끝까지 완강을 목표로 하겠습니다! 아래 사진은 상단 이미지에서 잘린 에러 전체입니다.감사합니다!

http일 때는 문제가 없었는데 https 적용 후에 문제가 발생합니다.강의에서 알려주신 대로 하면 에러가 나와서 제로초 님 블로그 보고 cerbot이랑 nginx 설치했습니다.아래 코드만 강의와 다르게 했습니다.sudo snap install certbot --classic sudo apt-get install nginxsudo certbot --nginxhttps://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 에러 내용은 다음과 같습니다.https 적용 전https://abc.s3.ap-northeast-2.amazonaws.com/original/1705127046450_china.jpg https 적용 후https://abc/https:/abc.s3.ap-northeast-2.amazonaws.com/original/1705127046450_china.jpghttp://abc/ 이 부분을 없애는 방법을 알고 싶습니다. nginx.conf는 아래와 같습니다.server { // 실제로는 구매한 도메인 넣었습니다. server_name abc; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000/; proxy_redirect off; } }server { // 실제로는 구매한 도메인 넣었습니다. server_name api.abc; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000/; proxy_redirect off; } } 

이전 질문글에 답글을 남겼는데, 확인하기 힘드실 것 같아 질문을 새로 작성합니다. 클라이언트 컴포넌트는 기존 Next12처럼 Pre-Rendering으로 제공된다고 알고 있는데, 이는 기본적으로 SSG인가요? 아니면 SSR인가요? 또 둘 중에 선택이 가능한지 궁금합니다!

fetch 함수가 그냥 web API 같은데fetch 함수에 next 라는 속성이 들어간건데 따로 임포트해온것도 아닌데 어떻게 작동되는건가요?next 가 내부적으로 fetch 를 새로 만든건가요?

위 사진 처럼 컴파일이 안됩니다.그리고 이렇게 바꾸고 실행을 시키면 실행은 되는데 코드 상에서 NEXT_PUBLIC_BASE_URL이 undefined로 확인이됩니다. 어떻게 해결할 수 있을까요.

이와같이 나오는데 어떤부분에서 잘못되었을까요? 두번세번봐도 어디가 잘못됬는지 모르겠네요 ㅠㅠ

기존의 Server Side Rendering(SSR)과 다른 점을 간단하게 정리하자면 SSR은 서버에서 페이지 단위로 정적인 리소스를 생성하지만 RSC는 컴포넌트 단위로 정적인 리소스를 생성할 수 있다는 점입니다.여기서 RSC의 가장 큰 장점이 나옵니다. 클라이언트로 내려보내는 JavaScript 번들 크기를 줄일 수 있게 되는 것이죠.라고 하셨는데, RSC가 단순 컴포넌트 단위로 정적인 리소스를 생성한다고 해서 왜 SSR보다 클라이언트로 내려보내는 JS 번들 크기를 줄일 수 있는지가 궁금합니다!

안녕하세요. 선생님 무한스크롤이 계속 만들어져서 질문드려요위 사진에는 댓글이 2개 달린 상태입니다. 그런데스크롤을 내리면서 2개였던게 계속 복사되어 만들어지는 상태입니다. 이런식으로 초기 댓글 갯수가 반복해서 늘어나는 것 같아요. 코드를 보고도 오류를 찾기 힘들어 질문 드려요!참고로, 이전에 비슷한 질문에 확인 해야 할 사항이 있어서 체크해보았습니다. nextconfig.json에서 reactStrictmode를 false로 바꿔보시고 서버를 껐다 다시 켜주세요!>> 바꾸고 해도 되지 않는 것 같습니다. 무한스크롤을 제거한 후 댓글을 작성해 보고 정상적으로 작성이 되는지 알려주세요.>> 무한스크롤 컴포넌트 삭제 시 다른 부분들은 원활하게 작동합니다.또 다른 자료가 필요하시면 말씀해주세요! 긴 질문 읽어주셔서 감사합니다!!  

안녕하세요. 강의를 보며 코드를 작성하고 있는데, auth.ts 페이지에서'{ authorize(credentials: Record<string, string> | undefined): Promise<any>; }' 형식의 인수는 'UserCredentialsConfig<Record<string, CredentialInput>>' 형식의 매개 변수에 할당될 수 없습니다.'credentials' 속성이 '{ authorize(credentials: Record<string, string> | undefined): Promise<any>; }' 형식에 없지만 'Pick<CredentialsConfig<Record<string, CredentialInput>>, "credentials" | "authorize">' 형식에서 필수입니다.ts(2345)credentials.d.ts(12, 5): 여기서는 'credentials'이(가) 선언됩니다.(parameter) credentials: Record<string, string> | undefined이런 에러가 발생했습니다. credentials 속성을 타입과 함께 추가해주고, body에서 사용되고 있는 credentials에 ?. 연산자를 이용해 에러를 해결했는데도이러한 에러가 발생합니다.이때 500 에러가 같이 발생하는데 해당 에러도 하단에 첨부합니다.   GET http://localhost:3000/api/auth/signin 500 (Internal Server Error)processMessage @ webpack-internal:///…t-dev-client.js:233eval @ webpack-internal:///…ot-dev-client.js:55handleMessage @ webpack-internal:///…lay/websocket.js:52index.js:591 Uncaught TypeError: Cannot read properties of undefined (reading 'GET')at eval (webpack-internal:///(rsc)/./src/auth.ts:14:21)at (rsc)/./src/auth.ts (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:182:1)at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43)at eval (webpack-internal:///(rsc)/./src/app/api/auth/[...nextauth]/route.ts:6:63)at (rsc)/./src/app/api/auth/[...nextauth]/route.ts (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:172:1)at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43)at eval (webpack-internal:///(rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&page=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute.ts&appDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!:17:126)at (rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&page=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute.ts&appDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D! (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:162:1)at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43)at __webpack_exec__ (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:192:39)at <unknown> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:193:424)at __webpack_require__.X (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:163:21)at <unknown> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:193:47)at Object.<anonymous> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:196:3)at Module._compile (node:internal/modules/cjs/loader:1256:14)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)at Module.load (node:internal/modules/cjs/loader:1119:32)at Module._load (node:internal/modules/cjs/loader:960:12)at Module.require (node:internal/modules/cjs/loader:1143:19)at mod.require (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/require-hook.js:65:28)at require (node:internal/modules/cjs/helpers:121:18)at requirePage (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/require.js:109:84)at <unknown> (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/load-components.js:59:84)at async loadComponentsImpl (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/load-components.js:59:26)at async DevServer.findPageComponentsImpl (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/next-server.js:671:36)getServerError @ client.js:417eval @ index.js:591setTimeout (async)hydrate @ index.js:579await in hydrate (async)pageBootrap @ page-bootstrap.js:24eval @ next-dev.js:25Promise.then (async)eval @ next-dev.js:23./node_modules/next/dist/client/next-dev.js @ main.js?ts=1704985593164:192options.factory @ webpack.js?ts=1704985593164:716__webpack_require__ @ webpack.js?ts=1704985593164:37__webpack_exec__ @ main.js?ts=1704985593164:1259(anonymous) @ main.js?ts=1704985593164:1260webpackJsonpCallback @ webpack.js?ts=1704985593164:1388(anonymous) @ main.js?ts=1704985593164:9Show 6 more framesShow lesswebsocket.js:46 [HMR] connected확인하시기 쉽게 같은 내용의 사진과 함께 올려드립니다.그리고 강의 내용 이외의 credentials 관련 코드를 추가하기 전인 auth.ts 파일의 코드도 첨부드립니다.import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }); if (!authResponse.ok) { return null; } const user = await authResponse.json(); return user; }, }), ], }); chap3-1의 auth.ts 코드를 복붙해도 에러가 해결되지 않아 무엇이 원인인지 모르겠습니다. 도움을 주신다면 정말 감사하겠습니다...

Recoil이 아직 실험적 api 단계로 아는데 현업에서 써도 될정도로 안정적인가요?

import React, { useState, useEffect } from "react"; const CountdownTimer = () => { const [countdown, setCountdown] = useState(10); // 초기 카운트다운 값 useEffect(() => { let intervalId; console.log("다시 실행"); // 카운트다운이 실행 중일 때만 setInterval을 설정 intervalId = setInterval(() => { setCountdown((prevCountdown) => prevCountdown - 1); }, 1000); // 컴포넌트가 언마운트될 때 clearInterval 호출 return () => { console.log("종료"); clearInterval(intervalId); }; }, []); // isRunning 상태가 변경될 때마다 useEffect가 호출됨 return ( <div> <p>Countdown: {countdown}</p> </div> ); }; export default CountdownTimer;이런 예제를 돌리고 있는데 useEffect에 인자를 설정하지 않아도 제대로 돌아가고 있습니다 제가 next.js를 이용해서 실습중인데 이게 nextjs여서 돌아가는건가요 아니면 react가 업데이트를 한 것인가요?

720p 인줄 모르고 듣게 되었는데, 눈이 좀 피로합니다.개선은 어려울까요?

// Home.js import { useState, useContext, useEffect } from "react"; import { DiaryStateContext } from "../App"; import MyButton from "./../components/MyButton"; import MyHeader from "./../components/MyHeader"; import DiaryList from "./../components/DiaryList"; const Home = () => { const diaryList = useContext(DiaryStateContext); const [data, setData] = useState([]); const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; useEffect(() => { if (diaryList.length >= 1) { const firstDay = new Date( curDate.getFullYear(), curDate.getMonth(), 1 ).getTime(); const lastDay = new Date( curDate.getFullYear(), curDate.getMonth() + 1, 0 ).getTime(); setData( diaryList.filter((it) => firstDay <= it.date && it.date <= lastDay) ); } }, [diaryList, curDate]); useEffect(() => { console.log(data); }, [data]); const increaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate()) ); }; const decreaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate()) ); }; return ( <div> <MyHeader headText={headText} leftChild={<MyButton text={"<"} onClick={decreaseMonth} />} rightChild={<MyButton text={">"} onClick={increaseMonth} />} /> <DiaryList diaryList={data} /> </div> ); }; export default Home;  // DiaryList.js import { useState } from "react"; const sortOptionList = [ { value: "latest", name: "최신순" }, { value: "oldest", name: "오래된 순" }, ]; const ControlMenu = ({ value, onChange, optionList }) => { return ( <select value={value} onChange={(e) => onChange(e.target.value)}> {optionList.map((it, idx) => ( <option key={idx} value={it.value}> {it.name} </option> ))} </select> ); }; const DiaryList = ({ diaryList }) => { const [sortType, setSortType] = useState("lastest"); return ( <div> <ControlMenu value={sortType} onChange={setSortType} optionList={sortOptionList} /> {diaryList.map((it) => ( <div key={it.id}>{it.content}</div> ))} </div> ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList;  // App.js import React, { useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; const reducer = (state, action) => { let newState = []; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { const newItem = { ...action.data, }; newState = [newItem, ...state]; break; } case "REMOVE": { newState = state.filter((it) => it.id !== action.targetId); break; } case "EDIT": { newState = state.map((it) => it.id === action.data.id ? { ...action.data } : it ); break; } default: return state; } return newState; }; export const DiaryStateContext = React.createContext(); export const DiaryDispatchContext = React.createContext(); const dummyData = [ { id: 1, emotion: 1, content: "오늘의일기 1번", date: 1704809815768, }, { id: 2, emotion: 2, content: "오늘의일기 2번", date: 1704809815769, }, { id: 3, emotion: 3, content: "오늘의일기 3번", date: 1704809815770, }, { id: 4, emotion: 4, content: "오늘의일기 4번", date: 1704809815771, }, { id: 5, emotion: 5, content: "오늘의일기 5번", date: 1704809815772, }, ]; function App() { const [data, dispatch] = useReducer(reducer, dummyData); console.log(new Date().getTime()); const dataId = useRef(0); // CREATE const onCreate = (date, content, emotion) => { dispatch({ type: "CREATE", data: { id: dataId.current, date: new Date(Date).getTime(), content, emotion, }, }); dataId.current += 1; }; // REMOVE const onRemove = (targetId) => { dispatch({ type: "REMOVE", targetId }); }; // EDIT const onEdit = (targetId, date, content, emotion) => { dispatch({ type: "EDIT", data: { id: targetId, date: new Date(Date).getTime(), content, emotion, }, }); }; return ( <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}> <BrowserRouter> <div className="App"> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/edit" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> </Routes> </div> </BrowserRouter> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> ); } export default App;  해당 강의 23분경부터 계속 막힙니다. 아무리 정렬을 바꿔도 정렬이 변경되지 않아요. 따라친다고 따라쳤는데 어디가 틀린지 잘 모르겠습니다.

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.=====================================1강 부터 듣고 있는데 CodeSandBox에서 1강이 끝나고 나와 있는 링크를 따라 CodeSandbox를 연결하였는데 console.log를 찍어도 아무런 반응도 없네요.어디가 문제인가요?

안녕하세요, Counter 컴포넌트 호출 회수를 디버깅 하기 위해 console.log("counter 호출!"); 구문을 아래와 같이 추가해주었는데, 강사님과는 다르게 저는 처음 렌더링 될 때와 count의 상태 값이 변화할 때 마다 counter 호출이 두 번씩 일어납니다. 이유가 무엇일까요..? 아무리 생각해봐도 이유를 모르겠습니다. 위 브라우저 콘솔 사진은 최초 렌더링 되고나서 개발자도구를 켰을 때 모습입니다. 처음부터 두 번이 호출되어 있고, 그 이후에도 count의 상태를 변화시킬 때 마다 두 번씩 로그에 찍힙니다. 

http://storage.goolgeapis.com/codecamp-file-storage/2024/1/10/IMG_9473.jpeg위에 주소 맞지 않나요? ㅠㅠ

안녕하세요 제로초님! 노드버드 섹션5 swr 사용해보기 강의까지 진행한 수강생 입니다!항상 질문에 답해주셔서 감사합니다. 올려주신 강의도 잘 보고 있습니다!구글링과 제로초님의 노드버드 깃허브를 꼼꼼히 살펴보았으나 제 지식 부족으로 인하여 질문 올립니다..!swr 라이브러리를 사용 후, 로그인한 다음 프로필 페이지에 가면콘솔 에러가 발생하며, 팔로잉, 팔로워 목록이 없는 문제가 발생합니다.때문에 더 보기 버튼을 클릭해도 더 불러오지 못 했습니다!에러 메시지를 번역하니 다음과 같았습니다.리덕스 탭과 네트워크 탭에서는 에러를 발견하지 못하였습니다!리덕스 탭에서는 해당 사용자의 팔로잉, 팔로워 정보가 들어가 있었고,네트워크 탭에서는 팔로잉, 팔로워 limit이 잘 불러와 집니다.의심이 들어 백엔드 터미널을 확인해보니 팔로잉, 팔로워 목록 limit이 안되고 있었습니다!GET /user/followers?limit=3 401GET /user/followings?limit=3 401에러가 난 코드를 포함해 가장 의심되는 코드를 올립니다!프로필 페이지 profile.js팔로워, 팔로잉 불러오기 구조분해 할당 부분의 ${}코드가 자꾸 깨져서 이 부분만 사진으로 올리겠습니다..!// 실제로 주소 가져오기 : 데이터를 가져오는 API를 호출하는 fetcher 함수 const fetcher = (url) => axios.get(url, { withCredentials: true }).then((result) => result.data ); // 프로필 컴포넌트(사용자 정의 태그) const Profile = () => { // 프로필 페이지에서 로그아웃한 상태일(me가 없을 때)때 메인 페이지로 이동 useEffect(() => { if (!(me && me.id)) { Router.push('/'); } }, [me && me.id]); // 팔로워 목록 더 불러오기 콜백 함수 const loadMoreFollowers = useCallback(() => { setFollowersLimit((prev) => prev + 3); // 기존 limit보다 3 올려주기 }, []); // 팔로잉 목록 더 불러오기 콜백 함수 const loadMoreFollowings = useCallback(() => { setFollowingsLimit((prev) => prev + 3); // 기존 limit보다 3 올려주기 }, []); // 로그인 하지 않은 상태일(me가 없을)때 프로필 페이지로 이동 막기 if (!me) { return '내 정보 로딩중...'; }; /* 팔로워 에러 or 팔로잉 에러 둘 중 하나가 에러났을 때 에러 콘솔하기 */ // Hook은 항상 모두 다 실행되어야 하기에 return은 Hook보다 위에 위치할 수 없다. if (followerError || followingError) { console.error(followerError || followingError); return <div>팔로워/팔로잉 로딩 중 에러가 발생합니다.</div>; } return ( <> <Head> <title>내 프로필 | NodeBird</title> </Head> <AppLayout> {/* ---------- 닉네임 수정 폼 ---------- */} <NicknameEditForm /> {/* ---------- 팔로잉 목록 ---------- */} console.log(followingsData); <FollowList header="팔로잉" data={followingsData} onClickMore={loadMoreFollowings} // SWR에서의 로딩 : 팔로잉 데이터와 팔로잉 에러가 없을 때 loading={!followingsData && !followingError} /> {/* ---------- 팔로워 목록 ---------- */} <FollowList header="팔로워" data={followersData} onClickMore={loadMoreFollowers} // SWR에서의 로딩 : 팔로워 데이터와 팔로워 에러가 없을 때 loading={!followersData && !followerError} /> </AppLayout> </> ); };user.js(백엔드 팔로워, 팔로잉 라우터)// 팔로워 라우터 router.get('/followers', isLoggedIn, async (req, res, next) => { // GET /user/followers try { /* 나를 찾는 함수 */ const user = await User.findOne({ where: { id: req.user.id }}); /* ---------- 만약 내가 없다면 400번대 에러 출력 ---------- */ if (!user) { res.status(403).send('없는 사람을 찾으려고 하시네요?'); } /* 사용자 팔로워 목록 가져오기 */ // limit을 올려주면 그 limit만큼 더 가져오도록 하기 const followers = await user.getFollowers({ limit: parseInt(req.query.limit, 10), }); /* 팔로워 목록을 프론트로 넘기기 */ res.status(200).json(followers); /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); next(error); } }); // 팔로잉 라우터 router.get('/followings', isLoggedIn, async (req, res, next) => { // GET /user/followings try { /* 나를 찾는 함수 */ const user = await User.findOne({ where: { id: req.user.id }}); /* ---------- 만약 내가 없다면 400번대 에러 출력 ---------- */ if (!user) { res.status(403).send('없는 사람을 찾으려고 하시네요?'); } /* 사용자 팔로잉 목록 가져오기 */ // limit을 올려주면 그 limit만큼 더 가져오도록 하기 const followings = await user.getFollowings({ limit: parseInt(req.query.limit, 10), }); /* 팔로잉 목록을 프론트로 넘기기 */ res.status(200).json(followings); /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); next(error); } });FollowList.js// 팔로우 리스트 컴포넌트(사용자 정의 태그) const FollowList = ({ header, data, onClickMore, loading }) => { . . . return ( <List /* 더보기 버튼 */ loadMore={( <div style={{ textAlign: 'center', margin: '10px 0px' }}> <Button onClick={onClickMore} loading={loading}>더 보기</Button> </div> )} . . . /> ); };

백엔드 서버에서는 소켓에서 메시지를 받으면 DB에 따로 저장하는 식으로 관리가 되는걸까요?? 아니면 프론트의 저장 공간에 저장하는 방식으로도 해결하는 방법이 있을까요??