월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
getStaticProps 두개의 질문있습니다
1.getStaticProps를 about 페이지에 사용하셨는데빌드를 하고 나서 유저의 게시글 개수 팔로우 개수 팔로워 개수가 바뀔 수 있잖아요?근데 getStaticProps를 사용했고빌드시 html로 만들어 저장하고 그 html을 브라우저로 전달하기 때문에DB의 데이터가 바뀌어도브라우저 화면의 about페이지에는 빌드시의 html이 보여지게 되서 데이터 갱신이 안되는데 맞나요?? 2.그리고 html로 바뀌는 대상이 about페이지라면about컴포넌트의 자식 AppLayout의 자식 UserProfile 컴포넌트에는 동적인 데이터가 쓰이기 때문에 말이 안되는 것 같은데 html로 바뀌는 대상이 정확히 뭔지 알 수 있을까요??
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
mysql의 다른 schema(database) 를 참조하는 경우에는 어떻게 ...
시퀄라이즈로 모델 구성시 하나의 database 를 참조하는 방식인데요 서브쿼리로 다른 database(mysql 의 schema)의 테이블을 참조하는 경우에는 다음과 같이 query() function으로 풀어서 요청하기도 하는가요..? db.sequelize.query('select a.name, b.score from schemaA.Users a Left join schemaB.Score B on a.userid=b.userid')
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
redux 상태값 문의드립니다
진도가 잘 안나가네요아직 redux에서 헤매고 있습니다. 페이지 이동 시 버튼을 통해 이동 시에는 state 값이 유지가 되는데 직접 localhost:3060/profile 를 타이핑해서 들어가게 되면 상태값이 유지가 되지 않습니다.원래 그런걸까요..?<Menu.Item key="home"><Link href="/"><a>노드버드</a></Link></Menu.Item> <Menu.Item key="profile"><Link href="/profile"><a>프로필</a></Link></Menu.Item> 유지가 되게 해주려면 어떤 방식으로 가져가야 할까요..?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
로그아웃이 작동하지 않아서 질문드립니다.
안녕하세요 제로초님 로그인은 되는데 로그아웃이 되지않아서 질문남깁니다.로그인 한 다음 로그아웃을 하면 위와 같이 AxiosError가 나서 네트워크와 리덕스를 확인해보니깐 로그아웃 요청시 302 Found가 뜨고 404 Not Found라는 에러 메세지가 뜹니다.그리고 리덕스에서는 실패 메세지가 뜹니다. // UserProfile import { logoutRequestAction } from '../reducers/user'; const dispatch = useDispatch(); const { me, logOutLoading } = useSelector((state) => state.user); const onLogOut = useCallback(() => { dispatch(logoutRequestAction()); }, []); <Button onClick={onLogOut} loading={logOutLoading}> 로그아웃 </Button> // 리덕스 logOutLoading: false, // 로그아웃 시도중 logOutDone: false, logOutError: null, export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST'; export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS'; export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE'; case LOG_OUT_REQUEST: draft.logOutLoading = true; draft.logOutDone = false; draft.logOutError = null; break; case LOG_OUT_SUCCESS: draft.logOutLoading = false; draft.logOutDone = true; draft.me = null; break; case LOG_OUT_FAILURE: draft.logOutLoading = false; draft.logOutError = action.error; break; 사가 axios.defaults.baseURL = 'http://localhost:3065'; function logOutAPI() { return axios.post('/user/logout'); } function* logOut() { try { yield call(logOutAPI); yield put({ type: LOG_OUT_SUCCESS, }); } catch (err) { console.log(err); yield put({ type: LOG_OUT_FAILURE, error: err.response.data, }); } } function* watchLogOut() { yield takeEvery(LOG_OUT_REQUEST, logOut); } app.js const express = require('express'); const cors = require('cors'); // session, cookieParser, dotenv const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); // passport 로그인 설정 const passport = require('passport'); const passportConfig = require('./passport'); passportConfig(); const postRouter = require('./routes/post'); const userRouter = require('./routes/user'); dotenv.config(); const app = express(); // 시퀄라이즈 - db 연결 const db = require('./models/index.js'); db.sequelize .sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); app.use( cors({ origin: true, credentials: true, }) ); app.use(express.json()); app.use(express.urlencoded({ extended: true })); // session,cookieParser app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, }) ); app.use(passport.initialize()); app.use(passport.session()); app.use('/post', postRouter); app.use('/user', userRouter); app.listen(3065, () => { console.log('3065 포트에서 대기중'); }); user.js const express = require('express'); const router = express.Router(); const passport = require('passport'); const bcrypt = require('bcrypt'); const { User, Post } = require('../models'); // 로그인 POST/user/login router.post('/login', (req, res, next) => { passport.authenticate('local', (err, user, info) => { if (err) { console.error(err); return next(err); } if (info) { return res.status(403).send(info.reason); } return req.login(user, async (loginErr) => { if (loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: { id: user.id }, attributes: { exclude: ['password'], }, include: [ { model: Post, }, { model: User, as: 'Followings', }, { model: User, as: 'Followers', }, ], }); return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); // 로그아웃 POST/user/logout router.post('/logout', (req, res, next) => { req.logout(() => { res.redirect('/'); }); }); //회원가입 POST / user router.post('/', async (req, res, next) => { try { const exUser = await User.findOne({ where: { email: req.body.email, }, }); if (exUser) { return res.status(403).send('이미 사용중인 아이디입니다.'); } const hashedPassword = await bcrypt.hash(req.body.password, 10); await User.create({ email: req.body.email, nickname: req.body.nickname, password: hashedPassword, }); res.status(200).send('ok'); } catch (error) { console.error(error); next(error); } }); module.exports = router; 로그인과 회원가입은 제대로 작동하는데 로그아웃만 되지 않습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
errno -4094 의 unknown error 가 종종 뜹니다
npm run dev로 실행시킨 후에 코드 수정 및 자동반영(핫리로드라고 하나요..?)이 잘 되다가어느 순간 이런 에러가 뜹니다. - error [Error: UNKNOWN: unknown error, open 'F:\dev\project\react\node-bird\.next\static\chunks\pages\login.js'] { digest: undefined[Error: UNKNOWN: unknown error, open 'F:\dev\project\react\node-bird\.next\static\chunks\pages\login.js'] { errno: -4094, code: 'UNKNOWN', syscall: 'open', path: 'F:\\dev\\project\\react\\node-bird\\.next\\static\\chunks\\pages\\login.js'} 터미널에서 실행중인 프로세스 종료하고 다시 npm run dev 로 실행시키면 정상동작하기는 합니다만 혹시 에러가 발생하지 않도록 하는 방법이 있을가 해서 문의 남겨봅니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
posts.js 라우터 파일에 문제가 생겼습니다
const express = require('express'); const { User, Post, Image, Comment } = require('../models'); const router = express.Router(); console.log(Post); // undefined router.get('/', async (req, res, next) => { try { const posts = await Post.findAll({ limit: 10, order: [ ['createdAt', 'DESC'], [Comment, 'createdAt', 'DESC'], ], include: [{ model: User, attributes: ['id', 'nickname'], }, { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'], }], }, { model: User, as: 'Likers', attributes: ['id'], }], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router;posts.jsconst express = require('express'); const cors = require('cors'); const passport = require('passport'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const morgan = require('morgan'); const db = require('./models'); const passportConfig = require('./passport'); const postRouter = require('./routes/post'); const userRouter = require('./routes/user'); const postsRouter = require('./routes/posts'); dotenv.config(); db.sequelize.sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); const app = express(); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cors({ origin: true, credentials: true, })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, })); app.use(passport.initialize()); app.use(passport.session()); app.use(morgan('dev')); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.listen(3065, () => { console.log('3065포트 서버실행중'); });app.js(node:4192) Warning: Accessing non-existent property 'User' of module exports inside circular dependency (node:4192) Warning: Accessing non-existent property 'Post' of module exports inside circular dependency // 생략영상보면서 코딩중에위 문구와 함께 ../models에서 require한 것이존재하지 않는 문제가 발생했습니다.const { Post } = require('../models')console.log(Post) 출력결과 undefined 입니다이 문제가 posts.js 파일에서만 발생했습니다.(user.js, post.js는 정상)그래서 postss.js 라는 이름이 다르고 코드만 옮긴 파일을 만들어서 다시 시도해보았습니다.(rename시 module not found 에러 발생)그랬더니 ../models에서 require 한것이 존재했습니다.근데 요청시라우터(method: get, url: /posts)의 미들웨어가 실행이 안되는 문제가 있었습니다.상태코드는 300 Multiple Choices 였습니다이번에는 url를 바꿔서 요청을 보냈습니다ex) /posts/test그랬더니 성공했습니다.왜 이런 현상이 발생했는지어떻게 해결할 수 있는지 모르겠어서 질문남깁니다!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
강의노트 링크 못찾겠습니다
안녕하세요 선생님강의노트 다운받고 싶은데 링크를 못찾겠습니다.부탁드립니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
onChangePasswordCheck [password] 인자 문의
안녕하세요 zerocho 님아래 코드에서 const onChangePasswordCheck = useCallback( (e) => { console.log("onChangePasswordCheck1 :" + e.target.value); console.log("onChangePasswordCheck2:" + passwordCheck); //전 값을 참조함 setPasswordError(e.target.value !== password); setPasswordCheck(e.target.value); }, [password] //passwordCheck 로 바꾸어도 전 값을 참조함 ); 1.[password] 부분을 [] 바꾸어도 정상 작동 하는 것 같구요 [] 의미는 최초 render 시에만 함수를 생성한다는 의미로 알고 있습니다만...2.[passwordCheck]로 바꾸면... [웹 게임을 만들며 배우는 React/6-5. useMemo와 useCallback] 강의에 의하면 onChangePasswordCheck 안에서 passwordCheck 가 정상 참조 되어야 할 것 같은데.. 이전 값으로 참조 되는 것 같습니다. 2번째 인자 작동 방식이 정확히 이해 되지 않습니다.다시 한번 설명 부탁 드려도 될까요? (참고자료나, zerocho님, 다른 강의 부분 알려 주시면 직접 찾아 보겠습니다.)감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
serverState undefine 출력
import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware(), preloadedState: serverState, // SSR }); const wrapper = createWrapper(makeStore); export default wrapper;ssr 문제를 계속 해결해보고 있는데 지금 보니 console.log()에 serverState가 undefined가 나옵니다 이게 혹시 문제의 원인인가 싶어서 그런데 serverState는 무었이고 왜 undefined가 나오나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit ssr 질문
계속 똑같은 부분을 질문하고있는데 혹시 똑같은 오류가 발생하고 이 부분 코드는 양이 적고 코드 양이 적어서 오류의 원인을 아는데 용이 할꺼 같아 질문드립니다pages/about.js import React from "react"; import { useSelector } from "react-redux"; import Head from "next/head"; import { Avatar, Card } from "antd"; import AppLayout from "../components/AppLayout"; import wrapper from "../store/configureStore"; import { loadUserInfo } from "../reducers/user"; const Profile = () => { const { userInfo } = useSelector((state) => state.user); return ( <AppLayout> <Head> <title>ZeroCho | NodeBird</title> </Head> {userInfo ? ( <Card actions={[ <div key="twit"> 짹짹 <br /> {userInfo.Posts.length} </div>, <div key="following"> 팔로잉 <br /> {userInfo.Followings.length} </div>, <div key="follower"> 팔로워 <br /> {userInfo.Followers.length} </div>, ]} > <Card.Meta avatar={<Avatar>{userInfo.nickname[0]}</Avatar>} title={userInfo.nickname} description="노드버드 매니아" /> </Card> ) : null} </AppLayout> ); }; export const getStaticProps = wrapper.getStaticProps( (store) => async ({ req }) => { console.log("getStaticProps"); await store.dispatch(loadUserInfo(1)); } ); export default Profile; reducers/user.js export const loadUserInfo = createAsyncThunk( "/user/LoadUserInfo", async (data) => { const response = await axios.get(`/user/${data}`, data); return response.data; } ); const userSlice = createSlice({ name: "user", initialState, reducers: { addPostToMe(draft, action) { // 값을 하나만 전달해서 값이 바로 payload에 저장이된다 // 내가 만든 포스트를 me state에 저장하는 reducer draft.me.Posts.unshift({ id: action.payload }); }, removePostOfMe(draft, action) { draft.me.Posts = draft.me.Posts.filter((v) => v.id !== action.payload); }, }, // 외부에서 action을 만든것은 extraReducers로 가져와서 사용한다 주로 createAsyncThunk로 action을 만들 때 사용한다 extraReducers: (builder) => builder .addCase([HYDRATE], (state, action) => ({ ...state, ...action.payload.user, })) // 다른유저정보 가져오는 리듀서 .addCase(loadUserInfo.pending, (state, action) => { state.loadUserInfoLoading = true; state.loadUserInfoError = null; state.loadUserInfoDone = false; }) .addCase(loadUserInfo.fulfilled, (state, action) => { state.loadUserInfoLoading = false; state.me = action.payload; state.loadUserInfoDone = true; }) .addCase(loadUserInfo.rejected, (state, action) => { state.loadUserInfoLoading = false; state.loadUserInfoError = action.error; }) .addDefaultCase((state) => state), });이런 코드인데 // 다른유저정보 가져오는 리듀서 .addCase(loadUserInfo.pending, (state, action) => { state.loadUserInfoLoading = true; state.loadUserInfoError = null; state.loadUserInfoDone = false; }) .addCase(loadUserInfo.fulfilled, (state, action) => { state.loadUserInfoLoading = false; state.me = action.payload; state.loadUserInfoDone = true; }) .addCase(loadUserInfo.rejected, (state, action) => { state.loadUserInfoLoading = false; state.loadUserInfoError = action.error; })제가 이것저것 하다가 알게된거 action에 이부분을 전부 주석처리하게 되면 에러가 안난다는 겁니다 그래서 결정적으로 initalstate에 있는 변수들을 변경하는 과정이 브라우저의 정보와 서버의 정보를 다르게만드는 일을 하는것 같은데 혹시 의심가시는거 있으신가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
toolkit을 사용 ssr설정 질문입니다
https://github.com/ZeroCho/react-nodebird/blob/master/toolkit/front/pages/index.js여기 코드를 가져와서 ssr을 설정했습니다front 코드 에러로 Error: Hydration failed because the initial UI does not match what was rendered on the server.Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.이렇게 두개가 나오는데 이걸 어떻게 해결할지 잘 모르겠습니다 initaial UI 에러라길레initialState: { user: { ...userInitialState, me: myInfo, }, post: { ...postInitialState, mainPosts: posts, hasMorePosts: posts.length === 10, }, },주석 처리 되어있는 이부분을 어떻게 해야되는거 같은데 잘 모르겠습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
cors 설치하고 404, 500 status 에러가 납니다
npm cors를 설치하고회원가입 버튼을 누르니까 에러가 납니다왜 안되는 건지 알려주세요..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다.상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
프로필 페이지 세로고침 에러
프로필페이지 에서 세로고침을 할때 로그인이 풀리면서 로그인 정보가 사라지면서 에러가 발생하는 현상이 있었습니다const Profile = () => { const { me } = useSelector((state) => state.user); const dispatch = useDispatch(); useEffect(() => { if (!(me && me.id)) { Router.push("/"); } }, [me && me.id]); useEffect(() => { dispatch(loadFollowers()); dispatch(loadFollowings()); }, []); return ( <> <Head> <title>프로필 | NodeBird</title> </Head> <AppLayout> <NicknameEditForm /> <FollowList header="팔로잉 목록" data={me?.Followings} /> <FollowList header="팔로워 목록" data={me?.Followers} /> </AppLayout> </> ); };그런데 이해가 안되는점은 Router.push로 me에 대한 정보가 없으면 루트 페이지로 넘어가게 만들어두었는데도 로그인 정보가 없다고 에러가 발생하고 그래서 로그인 정보를 가져오는 loadMyInfo를 사용해도 계속 에러가 발생한다는 점입니다.이부분이 일단 첫번째로 이해가 안되는 점이고아래 질문자님들이 질문하신 내용으로 me?.Foolowings로 일단 해결하고 넘어갔습니다그런데 또 프로필 페이지에서 세로고침을 해보니까 이번에도 me에 대한 정보가 없다고 나옵니다me에 대한 정보가 없어서 발생하는 에러인데 팔로워에 대한 정보를 불러오는 리듀서에서 에러가 발생합니다 하지만 사진에 state 정보를 보시면 me에 정보가 들어있습니다. 아마 me 정보를 갱신하기 이전에 발생한 action에 대한 에러인거 같은데 어떻게 해결하면 좋을까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
스크롤 시 dispatch 중복 요청 에러 질문 있습니다.
홈페이지에서 스크롤 시 콜백함수가 실행되는 과정에서 LOAD_POSTS_REQUEST dispatch 요청을 두 번 보내는 상황이 발생하였는데 해결하지 못해서 올립니다./pages/index.jsconst Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostLoading, retweetError } = useSelector((state) => state.post); useEffect(() => { if (retweetError) { alert(retweetError); } }, [retweetError]); useEffect(() => { dispatch({ type: LOAD_MY_INFO_REQUEST, }); dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect(() => { function onScroll() { if ( window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300 ) { if (hasMorePosts && !loadPostLoading) { console.log('스크롤 패칭'); const lastId = mainPosts[mainPosts.length - 1]?.id; console.log('lastId', lastId); dispatch({ type: LOAD_POSTS_REQUEST, lastId, }); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); }; }, [hasMorePosts, loadPostLoading, mainPosts]); return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </AppLayout> ); };sagas/post.jsfunction loadPostsAPI(lastId) { return axios.get(`/posts?lastId=${lastId || 0}`); } function* loadPosts(action) { try { const result = yield call(loadPostsAPI, action.data); yield put({ type: LOAD_POSTS_SUCCESS, data: result.data, }); } catch (err) { yield put({ type: LOAD_POSTS_FAILURE, error: err.response.data, }); } } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); }reducers/post.jscase LOAD_POSTS_REQUEST: draft.loadPostLoading = true; draft.loadPostDone = false; draft.loadPostError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostLoading = false; draft.loadPostDone = true; draft.mainPosts = draft.mainPosts.concat(action.data); draft.hasMorePosts = action.data.length === 10; break; case LOAD_POSTS_FAILURE: draft.loadPostLoading = false; draft.loadPostError = action.error; break;첫 페이지 로딩 후에 스크롤 시 onScroll 함수의 '스크롤 패칭'이 콘솔에 두 번 찍히고 LOAD_POSTS_REQUEST 요청이 두 번 가는 것을 확인했고 처음 포스트들을 불러온 이후에 lastId가 0으로 요청이 보내져서 mainPosts에 중복된 게시물이 쌓이는 문제가 있습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Object is not iterable
npm run dev를 하면 Object is not iterabled 이런 에러가 뜹니다제 코드는import React, { useState, useCallback } from "react"; import { Button, Form, Input } from "antd"; import Link from "next/link"; import styled from "styled-components"; import useInput from "../hooks/useInput"; const ButtonWrapper = styled.div` margin-top: 10px; `; const FormWrapper = styled(Form)` padding: 10px; `; const LoginForm = ({ setIsLoggedIn }) => { const [id, onChangeId] = useInput(""); const [password, setPassword] = useInput(""); const onSubmitForm = useCallback(() => { console.log(id, password); setIsLoggedIn(true); }, []); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-id">비밀번호</label> <br /> <Input name="user-id" value={password} onChange={onChangePassword} required /> </div> <ButtonWrapper> <Button type="primary" htmlType="submit" loading={false}> 로그인 </Button> <Link href="/signup"> <a> <Button>회원가입</Button> </a> </Link> </ButtonWrapper> </FormWrapper> ); }; export default LoginForm; 이 부분이 문제라곤 하는데 어떻게 하나요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
페이지 이동시에 너무 느림
넥스트 서버사이드렌더링 까지 다한상태인데 getStaticProps는 정말 빨리 넘어갑니다 하지만 getServerSideProps으로 만든 페이지는 정말 3초? 이상 걸립니다. 서버도 다 한국으로 시작했고 GCP 쓰고 있습니다서버속도 문제가 아니라면 속도를 줄일수있는방법이 머가있을까요.. ㅜㅜbuild 시에 페이지 용량도 높지 않습니다. 정적페이지랑 차이도 별루 없구요 ㅜㅠ2.back 에서 데이터를 가져올 때 시간이 많이 걸리는거 같은데 페이지 이동이라도 빠르게 진행하고 그다음 데이터를 불러오는 방법을 어떻게 깔삼하게 구현할 수 있을까요..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
find로 댓글을 가져오는 부분이 이상합니다
console.log로 action과 post를 찍어봤는데 post의 값이 이상합니다redux dev tools도 확인해보면 제가 지금 넣은 데이터의 형식이 content만 들어가 있습니다 어떻게 해야하나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Button is not defined
프로필 탭 들어갈 시 Button is not defined 이라는 오류가 뜹니다 제 코드는 import React from "react"; import PropTypes from "prop-types"; import { List } from "antd"; import Item from "antd/lib/list/Item"; import { StopOutlined } from "@ant-design/icons"; import { isStyledComponent, keyframes } from "styled-components"; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: 20 }} grid={{ gutter: 4, xs: 2, md: 3 }} size="small" header={<div>{header}</div>} loadMore={ <div style={{ textAlign: "center", margin: "10px 0" }}> <Button>더 보기</Button> </div> } bordered dataSource={data} renderItem={(Item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutlined key="stop" />]}> <Card.Meta description={Item.Nickname} /> </Card> </List.Item> )} /> ); }; FollowList.propTypes = { header: PropTypes.string.isRequired, data: PropTypes.array.isRequired, }; export default FollowList; 입니다 무엇이 문제 일까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
try catch문이 있는데 if문으로 에러처리를 따로 하는 이
router.get("/", async (req, res, next) => { try { if (req.user) { // findOne에서 에러가 생기는 거는 try catch문으로 처리가 안된 const user = await User.findOne({ where: { id: req.user.id }, }); res.status(200).json(user); } else { res.status(200).json(null); } } catch (error) { console.error(error); next(error); } });이부분에서 아직 로그인을 하지 않아서 유저 정보가 없을때 User.findOne에서 에러가 나기 때문에 if문으로 감싸서 아직 유저정보가 없을 때를 예외 처리 해주셨는데 어차피 User.findOne에서 에러가 나면 catch문으로 이동해서 에러가 처리가 되는데 굳이 if else로 예외 처리 하신 이유가 있나요?