묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
swr상태관리시 다른 컴포넌트 리렌더링 하는방법 문의
안녕하세요. swr관련 문의 드립니다. local state를 관리하는 용도로 swr을 사용해보고 있습니다. 컴포넌트 구조는 Main아래 Overview아래 OverviewDut라는 컴포넌트를 두고있는데요. Main에서 Socket.io를 통해서 받아온 데이터를 OverviewDut에서 사용하려고 합니다. swr에서 관리하고 있는 값은 제대로 변경되고 있는데요. OverviewDut컴포넌트의 리렌더링이 되지 않습니다. 부모컴포넌트에서 swr의 상태가 바뀐경우 자식컴포넌트에서 리렌더링이 필요한 경우에 대해 문의드립니다. [useDuts.js] [Main.jsx] [OverviewDut.jsx]
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
로그인 & 회원가입 관련해서 질문드립니다.
로그아웃을 하는 작업은 cookie의 값을 지우면 로그아웃이 된다고 하셨는데, 백엔드에 logout요청을 보내는 이유가 무엇인가요? 그리고 로그인 했을때 쿠키에 저장되는 방식은 어떤식으로 흘러가는 것인지 잘 이해가 가지 않습니다! 저는 로그인할때 서버에 로그인 요청을 하면 서버에서 토큰을 줘서 그 토큰을 프론트엔드 단에서 쿠키에 저장하는 방식을 사용했었는데 그 방식과는 다른 방식인가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
강의듣고 SWR을 구현하려고 합니다.
강의듣고 SWR로 구현하려고 하는중에 질문드립니다. 조회 버튼을 눌렀을때 특정 상태값을 true로 바꾸로 swr로 호출합니다. 근데 계속해서 서버쪽을 반복해서 호출합니다. 이를테면 아래와 같이 호출합니다. 조회버튼 누를때는 useSWR이 실행되고 실행되지 않게 하는방법이 있습니까? 계속해서 response 304를 호출하고 있습니다. const { data: outboundProgressMasterData, error: outboundProgressMasterError } = useSWR(onData ? `http://localhost:3065/outbound/progressListMaster/${onData?.center_cd}/${onData?.cust_cd}/${onData?.start_date}/${onData?.end_date}/${onData?.query_index}` : null, fetcher);
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
swr관련 질문
안녕하세요 제로초님 ! 궁금한점이 있어서 문의 드립니다. swr이 리덕스를 대체 할 수 있다고 하셨는데.. 예를들어서 ..서버가 구축이 안된 상태에서는 swr를 활용할수 있는 방법이 없을까요 ? 이전 챕터에서 서버가 구축 안된상태에서는 faker를 사용해서 임시로 데이터들을 넣어주었는데 ..swr을 사용할 경우에는 어떻게 해야하나요 ?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
reducer함수에서 로컬 데이터에 find,filter,push등 해주는 이유가 궁금합니다.
안녕하세요 요즘 SWR과 redux를 섞어쓰고 있는 초보 학생입니다. 지식이 미약해서 부족한 질문이라도 들어주시면 감사하겠습니다. 리듀서 함수에서는 예를들면 이런 코드가 있으면 action.data를 mainPosts 맨앞에 둔다는 뜻인데 case ADD_POST_SUCCESS: draft.mainPosts.unshift(action.data); break; 이 코드는 프런트 환경에서 store에 있는 mainPosts에 action.data를 추가한다는 뜻으로 서버에 요청 상관없이 프론트 환경에서 새로고침 없이 view 변동을 보여주려고 쓰는 건가요? 저는 swr을 사용하면서 서버에서 mainPosts를 불러올때 데이터가 추가되면 mutate 로 체크를 해주었는데요. swr을 사용해서 data를 가져올 경우 굳이 전역스토어에 추가 게시글 데이터를 추가해야되는지?? 의문입니다. 그냥 서버에서 처리해주고 가져오면 되는거 아닌가? 이런 생각이 드는데 경험이 적다보니 아직 잘모르겠습니다. 그리고 선생님 최신강의를 보던중 swr로 전역상태를 관리할수있다는 말을 들었습니다. 근데 이기능은 react-query에 정식 릴리즈 되어있는것 같은데 이걸로 api 콜+전역상태관리 둘다 하게되면 굳이 리덕스를 사용하지 않아도 되는 걸까요?? 리덕스 세팅이나 코드량이 너무 긴 단점이 있지만 반면에 에러 헨들링은 쉽다는 장점이 있어? 의견을 여쭈어 보고싶습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
reduxSaga로는 되는데 SWR로 바꾸면 에러가 나요
profil.js import React,{useEffect} from 'react'; import AppLayout from "../components/AppLayout" import NicknameEditForm from "../components/NicknameEditForm" import FollowList from "../components/FollowList" import {useSelector,useDispatch} from "react-redux" import {LOAD_FOLLOWERS_REQUEST,LOAD_FOLLOWINGS_REQUEST} from "../reducers/userReducer" import Head from "next/head" import {useRouter} from "next/router" import {END} from "redux-saga" import axios from "axios"; import wrapper from "../store/configureStore" import {LOAD_MY_INFO_REQUEST} from "../reducers/userReducer" import useSWR from "swr"; import {backAddress} from "../back" const fetcher = (url)=>axios.get(url,{withCredentials:true}).then(result=>result.data); function Profile(){ const dispatch = useDispatch(); const router = useRouter(); const {me} = useSelector(state=>state.userReducer); const {data:followersData,error:followerError} = useSWR(`${backAddress}/user/followers`,fetcher); const {data:followingsData,error:followingError} = useSWR(`${backAddress}/user/followings`,fetcher); useEffect(()=>{ if(!me) { router.push('/'); } },[me]) // useEffect(()=>{ // dispatch({ // type:LOAD_FOLLOWERS_REQUEST // }) // dispatch({ // type:LOAD_FOLLOWINGS_REQUEST // }) // },[]) // return 이 hooks(use...())보다 위에 있을수 없음 if(!me) return null; if(followerError || followingError){ console.error(followerError || followingError); return <div>팔로잉/팔로워 로딩 중 에러가 발생함</div>; } return ( <> <Head> <title>profile</title> </Head> <AppLayout> <NicknameEditForm /> <FollowList header="팔로잉 목록" data={followingsData} /> <FollowList header="팔로워 목록" data={followersData} /> </AppLayout> </> ) } export const getServerSideProps = wrapper.getServerSideProps(async (context)=>{ const cookie = context.req ? context.req.headers.cookie : ""; axios.defaults.headers.Cookie = ""; if(context.req && cookie){ axios.defaults.headers.Cookie = cookie; // 쿠키 넣기 } context.store.dispatch({ type:LOAD_MY_INFO_REQUEST, }) context.store.dispatch(END); // 사용법 request success 기다리기 await context.store.sagaTask.toPromise(); // 사용법 configureStore.js 에서 등록한 sgagTask 를 사용 }); export default Profile; routes/user.js router.get("/followers",isLoggedIn,async (req,res,next)=>{ try{ const me = await User.findOne({where:{id:req.user.id}}); if(!me){ res.status(403).send("me 없음") } const followers = await me.getFollowers( { limit:2, } ); res.status(200).json(followers) } catch(error){ console.error(error); next(error); } }) router.get("/followings",isLoggedIn,async (req,res,next)=>{ try{ const me = await User.findOne({where:{id:15||req.user.id}}) if(!me){ res.status(403).send("me 없음") } const getFollowings = await me.getFollowings( { limit:2, } ); res.status(200).json(getFollowings) } catch(error){ console.error(error); next(error); } }) Error sql: 'SELECT `User`.`id`, `User`.`email`, `User`.`nickname`, `User`.`createdAt`, `User`.`updatedAt`, `Posts`.`id` AS `Posts.id`, `Followings`.`id` AS `Followings.id`, `Followings->Follow`.`createdAt` AS `Followings.Follow.createdAt`, `Followings->Follow`.`updatedAt` AS `Followings.Follow.updatedAt`, `Followings->Follow`.`FollowingId` AS `Followings.Follow.FollowingId`, `Followings->Follow`.`FollowerId` AS `Followings.Follow.FollowerId`, `Followers`.`id` AS `Followers.id`, `Followers->Follow`.`createdAt` AS `Followers.Follow.createdAt`, `Followers->Follow`.`updatedAt` AS `Followers.Follow.updatedAt`, `Followers->Follow`.`FollowingId` AS `Followers.Follow.FollowingId`, `Followers->Follow`.`FollowerId` AS `Followers.Follow.FollowerId` FROM `Users` AS `User` LEFT OUTER JOIN `Posts` AS `Posts` ON `User`.`id` = `Posts`.`UserId` LEFT OUTER JOIN ( `Follow` AS `Followings->Follow` INNER JOIN `Users` AS `Followings` ON `Followings`.`id` = `Followings->Follow`.`FollowingId`) ON `User`.`id` = `Followings->Follow`.`FollowerId` LEFT OUTER JOIN ( `Follow` AS `Followers->Follow` INNER JOIN `Users` AS `Followers` ON `Followers`.`id` = `Followers->Follow`.`FollowerId`) ON `User`.`id` = `Followers->Follow`.`FollowingId` WHERE `User`.`id` = NaN;', parameters: undefined } SequelizeDatabaseError: Unknown column 'NaN' in 'where clause' at Query.formatError (C:\WEB\full\back\node_modules\sequelize\lib\dialects\mysql\query.js:239:16) at Query.run (C:\WEB\full\back\node_modules\sequelize\lib\dialects\mysql\query.js:54:18) at processTicksAndRejections (internal/process/task_queues.js:97:5) GET /user/followers 500 27.011 ms - 511 리덕스사가로 바꿔서 실행하면 잘 작동하는데 swr로 바꾸면 sql문에 nan값이 들어갑니다. 제가 잘못한 부분이 어디인가요?
