25%
66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
useEffect 에러 문의드립니다.
안녕하세요 제로초님. 강의 마지막 부분에서 문제가 생겼습니다. useEffect(() => { if (signUpError) { alert(signUpError); } }, [signUpError]); 이 부분을 적용하고, 중복 가입 시도시 경고창 출력까진 성공하였습니다. 이후 인덱스 페이지 클릭 후 다시 회원가입 페이지로 이동하면 해당 경고창이 계속해서 다시 발생합니다. 첫번째 중복 가입 시도 이후 signUpError 변수가 활성화되어서 그런 것 같습니다. 제로초님 깃헙 코드를 보아도 경고창 출력 이후 signUpError 변수를 다시 비활성화 시켜주는 부분이 없는 것 같은데 어떻게 해결하면 좋을까요?? ps) 저는 뎁스에 signUpError 변수를 넣었기 때문에 첫 출력 이후 다시 회원가입 페이지에 들어갔을때는 경고창이 발생하지 않을것이라 예상했는데 아니더라구요. 페이지 단위로 접속하면 useEffect가 한번은 무조건 실행되는 건가요?? 항상 강의 잘 듣고 있습니다. 귀한 시간 내주셔서 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
선생님 타입 에러가 납니다.. ㅠㅡㅠ
삭제된 글입니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
서버사이드렌더링 적용후 다이나믹 라우팅 할때 질문있습니다
안녕하세요 제로초님 !page 폴더에 /post/[id].js 만들어서 다이나믹라우팅 적용시켰는데요.[id].js 에 서버사이드렌더링 배운거 적용하고post reducer에 singlePost state추가해서 dispatch 하면 데이터 받아오도록 하였습니다근데 리스트컴포넌트에서 에서 <Link> 클릭하고 들어가면 singlePost 값이 null이 나오더라고요..새로고침하면 데이터값이 들어와있습니다.그래서 콘솔에 찍어보니 컴포넌트가 먼저 실행되고다시렌더링 된후에 singlePost 값이 찍혀있었습니다제로초님 노드버드사이트 확인해보니 다이나믹라우팅 적용하면favicon부분이 로딩아이콘으로 변하면서 콘솔창이 새로고침되던데.. 제가 뭐 적용해야하는걸 놓친건지 계속 찾다가 질문글 올립니다 /post/[id],js import React, { useState, useCallback } from "react" import { useDispatch, useSelector } from "react-redux" import { useRouter } from "next/router" import Head from "next/head" import axios from "axios" import { END } from "redux-saga" import { makeStyles } from "@material-ui/core/styles" import { Grid, Avatar } from "@material-ui/core" import Rating from "@material-ui/lab/Rating" import { FavoriteBorder, Favorite } from "@material-ui/icons" import red from "@material-ui/core/colors/red" import Layout from "../../components/Layout" import CommentForm from "../../components/CommentForm" import CommentList from "../../components/CommentList" import { LIKE_POST_REQUEST, LOAD_POST_REQUEST, UNLIKE_POST_REQUEST, } from "../../reducers/post" import PopularList from "../../components/PopularList" import wrapper from "../../store/configureStore" import { LOAD_USER_REQUEST } from "../../reducers/user" const useStyles = makeStyles({ root: { maxWidth: 1500, paddingLeft: "20rem", margin: "auto", }, }) const Post = () => { const dispatch = useDispatch() const router = useRouter() const classes = useStyles() const { me } = useSelector((state) => state.user) const { singlePost } = useSelector((state) => state.post) const { id } = router.query //const img = singlePost.Images[0].src //const Liked = singlePost.Likers.find((v) => v.id === me.id) const onUnLike = useCallback(() => { console.log("좋아요 취소") dispatch({ type: UNLIKE_POST_REQUEST, data: { postId: parseInt(id), count: singlePost.Likers.length - 1 }, }) }, []) const onLike = useCallback(() => { console.log("좋아요") dispatch({ type: LIKE_POST_REQUEST, data: { postId: parseInt(id), count: singlePost.Likers.length + 1 }, }) }, []) return ( <Layout> {console.log("포스트", singlePost)} <Head> <title>님의 글</title> </Head> {/* <Grid container className={classes.root} spacing={3}> <Grid item xs={8}> <h2>{singlePost.title}</h2> <div> <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" /> <span>id</span> <span>날짜</span> <Rating value={singlePost.rating} precision={0.1} readOnly /> </div> <div> <img src={ img.includes("https://") ? img : `http://localhost:3063/${img}` } alt={singlePost.title} /> <p>{singlePost.content}</p> </div> <div> <button type="button"> {Liked ? ( <Favorite style={{ color: red[600] }} onClick={onUnLike} /> ) : ( <FavoriteBorder onClick={onLike} /> )} </button> {singlePost.Likers.length}명이 좋아합니다 </div> <CommentList currentPostId={id} comments={singlePost.Comments} /> <CommentForm currentPostId={id} comments={singlePost.Comments} /> </Grid> <Grid item xs={4}> <PopularList /> </Grid> </Grid> */} </Layout> ) } 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_USER_REQUEST, }) context.store.dispatch({ type: LOAD_POST_REQUEST, data: context.params.id, }) context.store.dispatch(END) await context.store.sagaTask.toPromise() return { props: {} } }, ) export default Post 렌더링후 postlist 컴포넌트 /post/[id],js 콘솔창
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run dev 할 때의 오류
서버를 켜기 위해 npm run dev를 입력했는데 다음과 같은 오류가 떴습니다 ㅜ missing script: dev A complete log of this run can be found in: 이 다음으로 어떤 경로가 나옵니다 그 전에는 잘 되다가 "unable to attach to brower" 라는 에러 메세지가 뜨고 나서는 npm run dev를 입력하면 위와 같은 에러 메세지가 뜨는데 어떻게 해야 하나요...?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
db 삭제
안녕하세요. model/profile.js db.Profile.belongsTo(db.User); model/user.js db.User.hasMany(db.Profile); try { const userId = req.user.id; await User.destroy({ where: { id: userId } }); await Profile.destroy({ where: { UserId: userId } }); res.status(200).json('ok');} catch (error) { console.error(error); next(error);} 위와 같은 요청을 만들어서 회원 탈퇴를 하려고 하는데요. user만 지워지고 user 가 작성한 profile은 지워지지가 않는데 왜 그런걸까요? 아래 그림 참조하시면 user는 없어져서 UserId 만 null 이 되었고 profile은 안 없어지네요 ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
toolkit 쓰는경우에는 END 대신 어떤것을 쓰면되나요??
redux-toolkit 쓰는경우에는 END 대신 어떤것을 쓰면되나요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문 드립니다.!
스타일컴포넌트 공식홈페이지보면 크로스 브라우징 해결을 위해서 앞에 벤더프리픽스 이런거 안붙여도 스타일컴포넌트는 잘 적용된다고 나와있는데 크롬이랑 사파리 폰트 사이즈가 너무 차이 납니다. 따로 해결 방법이 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
lambda image resize시 이미지 파일명의 조건에 관한 문제 질문있습니다.
안녕하세요 제로초님 항상 강의 잘 듣고 있습니다. 챕터 7에서 lambda 함수를 통해 이미지를 리사이징 하고 화면에 게시를 하는데, 이미지 파일명에 공백이 들어갈 경우 thumb폴더로 리사이징한 이미지가 들어가지 않습니다. 이런 경우 handler함수에서 공백 처리 로직을 넣고 해결하면 될듯 하지만... 원본 파일명을 유지한 채로 할 수 있는 방법이 없는지 궁금해서 질문드립니다. 이미지를 업로드 하였을 때 모습입니다. 클릭하여 이미지 줌으로 들어갈 시 /original/폴더에서 이미지를 가져오기 때문에 표시가 됩니다. cloudwatch에서 에러 로그를 캡쳐했습니다. 브라우저 콘솔에서는 다음 처럼 /thumb/내부에 리사이즈 된 파일이 없음을 보여주고 있습니다. 업로드할 때 이미지 파일명에 공백을 제거해야만 정상적으로 동작하는것일까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
서버 접근
안녕하세요. 제로초님. 저희가 back 서버를 브라우저에 서버 컴퓨터 ip로 접근하면 '/' 경로로 접근하게 되는데, 브라우저에 서버 컴퓨터 ip를 입력하면 어떻게 바로 돌아가고 있는 서버의 라우터를 호출하게 되는 건가요?? 예를 들어, 제 컴퓨터에 back 서버를 켜놓은 상태에 누군가가 제 컴퓨터 ip에 접근하게 되면 제 로컬 서버는 바로 '/' 경로의 라우터를 호출하게 되나요?? 아니면 프로젝트에 어떤 특정 코드가 그걸 하게 만들어 주는 건가요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
retweetFailure 문제 질문이요
삭제된 글입니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Unknown column 'Users.content' in 'field list'
안녕하세요 제로초님, 항상 감사드립니다. 로그인을 하면, Users.content를 찾으면서 에러가 뜨네요. 아무리 검색해도 Users.content를 생성하는 부분도 없고 select하는 부분도 없습니다. ㅠㅠ 어디를 살펴봐야 할 지 조언 부탁드립니다...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
액션실행
안녕하세요. ADD_PROFILE_SUCCESS 라는 액션 실행 후 ADD_PATH_TO_ME 라는 액션 실행하게 코드를 짜뒀습니다. (아래 코드 참조) 근데 [그림1] 처럼 제대로 동작할 때도 있고 [그림2]처럼 ADD_PATH_TO_ME 가 실행이 안될떄가 있어서 이유를 잘 모르겠습니다. 어제부터 계속 비슷한 현상이 있는데 서버 아예 껐다 켜거나 에디터 껐다 켜면 될때도 있고 그래서 일종의 오류인건지 헷갈립니다 .. [그림1] [그림2] function addProfileAPI(data){ return axios.post("/profile/add", data)}function* addProfile(action) { try { console.log("saga addProfile"); const result = yield call(addProfileAPI, action.data); yield put({ type: ADD_PROFILE_SUCCESS, data: result.data }); yield put({ type: ADD_PATH_TO_ME, data: result.data }); } catch (err) { console.error(err); yield put({ type: ADD_PROFILE_FAILURE, error: err.response.data, }); }}
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
GET 요청시 req.user = undefined 문제
POST 요청 시에는 req.user로 유저 데이터가 잘 받아지는데 GET 요청시에 계속 req.user 정보가 undefined로 뜨네요.. front/sagas/index.js back/app.js 위와같이 credentials도 true로 바꿔 줬는데도 GET에서 user 정보를 받을 수가 없습니다. 다른 설정 문제일까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
게시글 입력
postdata 값을 못 받아오는 건지 어디가 잘못 된건지 모르겠어요 ㅠ post 관련된 코드는 다 확인해 봤는데 어디서 잘 못된걸까요? ㅠ https://github.com/nana7812/react-node 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
프론트 서버 주소
프론트 서버 백엔드 서버 모두 정상적으로 켜지기는 합니다. 근데 프론트 서버에서 백엔드 서버에 요청을 보내면 백엔드 서버에는 반응이 전혀 없고 프론트 서버에서는 response객체가 없다는 에러메세지를 띄웁니다. 아무래도 프론트 서버에서 요청을 잘못 보내는 것 같은데, 로컬에서 프론트 서버를 띄워서 클라우드에 올라간 백엔드 서버에 요청을 보내면 정상작동하긴 합니다. 근데, 클라우드에 올라간 프론트 서버는 백엔드 서버를 찾지 못하는데 왜 그럴까요?? 아 그리고 클라우드 서버에 올라간 프론트 서버의 주소가 localhost:80 이던데 잘못된 건가요??
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
LOAD_POST_REQUEST 게시물 로딩 문제입니다.
강의를 통해 배운 부분들을 응용해서 공부 중에 LOAD_POST_REQUEST 부분이 계속 발생하는 문제가 있습니다. 저는 강의와 달리 index 페이지에 게시물이 보이는 것이 아닌 게시물 페이지가 따로 존재합니다. 그래서 게시물 페이지에 들어왔을 때 위와 같은 코드로 작성해서 로드를 요청했습니다. 그래서 다른 페이지에서 게시물 페이지로 왔을 때 LOAD_POST_REQUEST 액션은 정상적으로 작동이 되는데 현재 DB에는 게시물이 id:14인 게시물만 DB에 존재하는데 같은 게시물이 계속 나타나게 됩니다.. saga 에 LOAD_POST_SUCCESS 에서 조건을 바꾸어야 할까요? saga와 reducer 파일은 강의 코드와 동일합니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
favicon 설정 관련해서 질문드립니다.
favicon 설정 관련해서 문의드립니다. public 폴더 생성해서 favicon.ico 파일 넣은 후 코드 작성해서 실행시켜보는데 파비콘이 설정이 안되고 크롬에서 지구본 모양으로 계속 나오고 있습니다. 아래 파비콘 설정 관련된 문의글에 해주신 답변 참고하여 localhost:3060/favicon.ico에서 파비콘 잘 나오는 것 확인하였고, <link rel="shortcut icon" href="/favicon.ico" /> 이 문장도 추가해서 작성했는데 파비콘 설정이 적용되지 않아 문의드립니다! 항상 빠르게 답변해주셔서 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
초반 설정 단계에서 질문 있습니다 ㅜ
package.json 에서 test 를 dev로 바꾸는 과정에서 main과 scripts 사이에 Debug 라는 글자가 있습니다 그냥 이 상태로 다음 단계를 진행하니 계속 에러가 발생합니다 ㅜ Debug가 없어지게 하려면 어떻게 해야 하나요...??
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
제로초님..!
TypeError: imageInput.current.click is not a function 에러가 나고 있어요.. 콘솔에 찍어봐도 click은 안보이고 검색해보고 비교도 해봤는데 도저히 못찾겠네요 ㅡㅠ 코드 한번만 봐주세욥.. import { Button, Form, Input } from "antd"; import React, { useCallback, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; import useInput from "../hooks/useInput"; import { addPost } from "../reducers/post"; const PostForm = () => { const dispatch = useDispatch(); const imageInput = useRef(); const [text, onChangeText, setText] = useInput(""); const { imagePaths } = useSelector((state) => state.post); const onSubmit = useCallback(() => { dispatch(addPost); setText(""); }, []); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: "10px 0 20px" }} encType="multipart/form-data" onFinish={onSubmit} > <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> <Input type="file" multiple hidden ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: "right" }} htmlType="submit"> 짹짹 </Button> </div> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: "inline-block" }}> <img src={v} style={{ width: "200px" }} alt={v} /> <Button>제거</Button> </div> ))} </div> </Form> ); }; export default PostForm;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! 강의 듣는 도중 오류가 발생하여서 문의드립니다
store/configureStore.js import { createWrapper } from 'next-redux-wrapper'; import { createStore } from 'redux'; import reducer from '../reducers/index' const configureStore = () => { const store = createStore(reducer); store.dispatch({ type: 'CHANGE_NICKNAME', data: 'JUNHYEONG' }) return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper; reducers/index.js import { HYDRATE } from "next-redux-wrapper"; const initialState = { user: { isLoggedIn: false, user: null, signUpData: {}, loginData: {}, }, post: { mainPosts: [] } }; export const loginAction = (data) => { return { type: "LOG_IN", data } } export const logoutAction = () => { return { type: "LOG_OUT", } } // const changeNickname = (data) => { // return { // type: 'CHANGE_NICKNAME', // data, // }; // } // (이전상태, 액션) => 다음상태 const rootReducer = (state = initialState, action) => { // 이니셜스테이트와는 다른객체가 만들어진다 그래야 히스토리가 생성되니깐 switch(action.type) { case HYDRATE: return { ...state, ...action.payload} case 'LOG_IN': return { ...state, user: { ...state.user, // 바꾸지 않고픈건 참조관계로 유지해주기 isLoggedIn: true, user: action.data, }, }; case 'LOG_OUT': return { ...state, user: { ...state.user, // 바꾸지 않고픈건 참조관계로 유지해주기 isLoggedIn: false, user: null, }, }; default: return state; } }; export default rootReducer; 계속 아래와 같은 오류가 발생하ㅔㄴ요 4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined } Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (/Users/bbakjun/workspace/node_modules/react/cjs/react.development.js:1476:13) at useMemo (/Users/bbakjun/workspace/node_modules/react/cjs/react.development.js:1531:20) at Provider (/Users/bbakjun/workspace/node_modules/react-redux/lib/components/Provider.js:24:41) at processChild (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14) at resolve (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5) at ReactDOMServerRenderer.render (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22) at ReactDOMServerRenderer.read (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29) at renderToString (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27) at Object.renderPage (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/next/dist/next-server/server/render.js:50:851) at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:141:19)입니다 ㅠㅠ 오류가 발생하네요 1번이 문제인가해서 확인해봤는데 어떻게 봐야하는지 잘 모르겠습니다.. ➜ front git:(bbakjun) ✗ npm ls react react-nodebird-front@1.0.0 /Users/bbakjun/workspace/reactNodeBird/front ├─┬ @ant-design/icons@4.6.2 │ ├─┬ rc-util@5.13.2 │ │ └── react@16.14.0 deduped │ └── react@16.14.0 deduped ├─┬ antd@4.16.7 │ ├─┬ rc-cascader@1.4.3 │ │ └── react@16.14.0 deduped │ ├─┬ rc-checkbox@2.3.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-collapse@3.1.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-dialog@8.5.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-drawer@4.3.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-dropdown@3.2.0 │ │ └── react@16.14.0 deduped │ ├─┬ rc-field-form@1.20.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-image@5.2.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-input-number@7.1.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-mentions@1.6.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-menu@9.0.12 │ │ ├─┬ rc-overflow@1.2.2 │ │ │ └── react@16.14.0 deduped │ │ └── react@16.14.0 deduped │ ├─┬ rc-motion@2.4.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-notification@4.5.7 │ │ └── react@16.14.0 deduped │ ├─┬ rc-pagination@3.1.7 │ │ └── react@16.14.0 deduped │ ├─┬ rc-picker@2.5.14 │ │ └── react@16.14.0 deduped │ ├─┬ rc-progress@3.1.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-rate@2.9.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-resize-observer@1.0.0 │ │ └── react@16.14.0 deduped │ ├─┬ rc-select@12.1.13 │ │ ├─┬ rc-virtual-list@3.3.0 │ │ │ └── react@16.14.0 deduped │ │ └── react@16.14.0 deduped │ ├─┬ rc-slider@9.7.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-steps@4.1.3 │ │ └── react@16.14.0 deduped │ ├─┬ rc-switch@3.2.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-table@7.15.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tabs@11.9.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-textarea@0.3.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tooltip@5.1.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tree-select@4.3.3 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tree@4.2.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-trigger@5.2.9 │ │ ├─┬ rc-align@4.0.9 │ │ │ └── react@16.14.0 deduped │ │ └── react@16.14.0 deduped │ ├─┬ rc-upload@4.3.1 │ │ └── react@16.14.0 deduped │ ├─┬ react-dom@16.14.0 │ │ └── react@16.14.0 deduped │ └── react@16.14.0 deduped ├─┬ next@9.5.5 │ ├─┬ @next/react-dev-overlay@9.5.5 │ │ └── react@16.14.0 deduped │ ├── react@16.14.0 deduped │ ├─┬ styled-jsx@3.3.0 │ │ └── react@16.14.0 deduped │ └─┬ use-subscription@1.4.1 │ └── react@16.14.0 deduped ├─┬ react-redux@7.2.4 │ └── react@16.14.0 deduped ├── react@16.14.0 └─┬ styled-components@5.3.0 └── react@16.14.0 deduped