안녕하십니까 이번에 수강을 하게된 직장인 입니다

제가 방금 남긴 질문과 똑같네요. 아마 강의가 좀 오래되서 그러지 않을까 생각되네요. 요즘은 다 훅을 쓰는데요. 저는 그냥 훅으로 진행하려고요.

배포 서버 속도 관련

혹시 몰라 코드도 남깁니다. 전혀 잘못 된걸 못찾겠는데 이상하네요.. const fetcher = (url) => axios.get(url, { withCredentials: true }).then((response) => response.data); function Profile() { const [followersLimit, setFollowersLimit] = useState(3); const [followingsLimit, setFollowingsLimit] = useState(3); const { me } = useSelector((state) => state.user); const { data: followersData, error: followerError } = useSWR( `${backUrl}/user/followers?limit=${followersLimit}`, fetcher ); const { data: followingsData, error: followingError } = useSWR( `${backUrl}/user/followings?limit=${followingsLimit}`, fetcher ); useEffect(() => { if (!me?.id) { Router.push('/'); } }, [me?.id]); const loadMoreFollowings = useCallback(() => { setFollowingsLimit((prev) => prev + 3); }, []); const loadMoreFollowers = useCallback(() => { setFollowersLimit((prev) => prev + 3); }, []); if (!me) { return div>Loading my informationdiv>; } if (followerError || followingError) { console.error(followingError || followingError); return div>Error occurred while loading follow and following datadiv>; } return ( Head> title>My profile | Tweetertitle> Head> AppLayout> NicknameEditForm /> FollowList header="Following List" data={followingsData} onClickMore={loadMoreFollowings} loading={!followingsData && !followingError} /> FollowList header="Follower List" data={followersData} onClickMore={loadMoreFollowers} loading={!followersData && !followerError} /> AppLayout> ); } export const getServerSideProps = wrapper.getServerSideProps( (store) => async ({ req }) => { console.log('Profile: getServerSideProps start'); const cookie = req?.headers.cookie; axios.defaults.headers.Cookie = ''; if (req && cookie) { axios.defaults.headers.Cookie = cookie; } store.dispatch(loadMyInfoRequestAction()); store.dispatch(END); console.log('Profile: getServerSideProps end'); await store.sagaTask.toPromise(); } ); export default Profile;

배포 서버 속도 관련

서버를 걍 켜놨는데 자기 스스로 계속 뭐를 불러들이는거 같은데.. 계속 monit에 로그가 찍히네요 몰랐다가 들어와보니 그러더라고요. 혹시 문제가 있을까요? 패킷이 비정상적으로 높은거 같긴한데요. 프론트서버입니다. (사진)

className과 SSR

(사진) 이 에러입니다. 주말에 답변 감사합니다.. 서버쪽에는 따로 에러가 없는거보니 .. 프론트 문제겠네요.

더보기 버튼 클릭 시 useSWR이 다시 호출되나요???

캐싱 기능이란것이 주기적으로 서버에 요청해서 값을 갖고 있는 그 기능을 말씀하시는건가요? 아니면 그냥 url에 대해 요청한 값을 갖고있는걸 말씀하시는걸까요.

새로고침시 적용이 안되는 문제

다시 다 깔고하니 잘되네요. 무엇인가가 잘못됬었나 봅니다. 로그인 상태에서 signup으로 갈 경우 signup 페이지에서 한 몇초간 있다가 home으로 가지는데 이건 배포하기전에는 속도가 느려보인다고 말씀하셨는데 그 현상이겠죠? 늦은 시간에도 답변주셔서 감사합니다.

새로고침시 적용이 안되는 문제

빌드가 꼬였는지 이상해져서 이번 강의에서 했던 서버사이드 렌더링 파일 .babelrc, _document.js 싹다 지우고 노드모듈, package-lock.json 지우고 다시 깔았는데 SSR 적용 안하고도 CSS가 바로 적용되네요... 이상하지만.. 해결된건지 한 번 강의 코드 다시 넣어봐야겠네요.

TypeError: nextCallback is not a function (next-redux-wrapper 7.0)

문서를 다시 보고 해결하였습니다.. 아에 잘못 설정해놨네요. 혹시 문제 있으신분 참고하세요. export const getServerSideProps = wrapper.getServerSideProps( (store) => async () => { // 새로고침시 로그인 유지를 위한 dispatch store.dispatch(loadMyInfoRequestAction()); store.dispatch(loadPostsRequestAction()); store.dispatch(END); await store.sagaTask.toPromise(); } );

TypeError: nextCallback is not a function (next-redux-wrapper 7.0)

말씀해주신데로 적용했는데 data를 가져오질 못하네요. export const getServerSideProps = wrapper.getServerSideProps((store) => { async () => { // 새로고침시 로그인 유지를 위한 dispatch store.dispatch(loadMyInfoRequestAction()); store.dispatch(loadPostsRequestAction()); store.dispatch(END); await store.sagaTask.toPromise(); }; });

웹사이트 제작

호스팅을 사용하시면 호스팅에서 알아서 package.json에 있는 라이브러리들을 설치해줍니다. 즉, github에 올리시는거 처럼 파일을 배포하시면 알아서 되는거죠. 하지만, 직접 서버를 컴퓨터에서 개인서버로 구동하시는거면 설치가 되어 있어야겠죠?