안녕하세요. 제로초님의 강의에 큰 도움을 받고 있음에 감사의 말씀을 드립니다. 여러 검색결과도, 질문답변도, 해당강의 반복재생으로 찾아보았으나 해결치 못한 부분이 있어 이렇게 직접 질문을 하게 됐네요!   [ 마주한  문제점 & 상황 ] 은 다음과 같습니다. 1. (이전상황) 로그인폼(Id, Pwd)에 텍스트를 입력해 "로그인" 버튼을 누르면 정상적으로 로그인이 됐고, Redux 역시 정상작동해 개발자도구에서 확인이 가능했습니다. 2. (현재상황) 섹션3(Redux) "더미데이터와 포스트폼 만들기" 강의를 들으며 문제에 마주했습니다. 3. (더미데이터와 포스트폼 만들기 강의 후) 잘 넘어가던 로그인 화면에서 데이터는 넘어가 콘솔에 찍히지만, 화면 페이지는 게시판으로 넘어가지 않는 상황에 직면했습니다.    [ 콘솔에 찍히는 Error ] 는 다음과 같습니다.       [정상적으로 넘어가는 로그인 데이터] -> 그러나 로그인이 되지 않고 화면이 넘어가질 않습니다!     [ 소스코드 ] 1. package.json  {   "name": "react-nodebird-front",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "dev": "next -p 3060",     "build": "next build"   },   "author": "jj",   "license": "ISC",   "dependencies": {     "@ant-design/icons": "^4.7.0",     "antd": "^4.19.0",     "next": "^9.5.5",     "next-redux-wrapper": "^6.0.2",     "prop-types": "^15.8.1",     "react": "^16.14.0",     "react-dom": "^16.14.0",     "react-redux": "^7.2.8",     "redux": "^4.1.2",     "redux-devtools-extension": "^2.13.9",     "styled-components": "^5.3.3"   },   "devDependencies": {     "eslint": "^8.10.0",     "eslint-plugin-hooks": "^0.4.2",     "eslint-plugin-import": "^2.25.4",     "eslint-plugin-react": "^7.29.3"   } } 2. LoginForm.js 파일 import React, { useState, useCallback, useMemo } from 'react'; import { Form, Input, Button } from 'antd'; import Link from 'next/link'; import styled from 'styled-components'; import { useDispatch, useSelector } from 'react-redux'; import useInput from "../hooks/useInput"; import { loginAction } from '../reducers/user';   const ButtonWrapper = styled.div `     margin-top: 10px; `;   const FormWrapper = styled(Form) `     padding: 10px; `; const LoginForm = ({ setIsLoggedIn }) => {     const dispatch = useDispatch();     const [id, onChangeId] = useInput('');     const [password, onChangePassword] = useInput('');     const onSubmitForm = useCallback(() => {         console.log(id, password);         dispatch(loginAction({id, password}));     }, [id, password]);       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-password">비밀번호</label>                 <br />                 <Input                     name="user-password"                     type="password"                     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; 3. index.js import React from 'react'; import { useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostForm from '../components/PostForm'; import PostCard from '../components/PostCard'; const Home = () => {     const { isLoggedIn } = useSelector((state) => state.user);     const { mainPosts } = useSelector((state) => state.post);     return (         <AppLayout>             {isLoggedIn && <PostForm /> }             {mainPosts.map((post) => <PostCard key={post.id} post={post} />)}         </AppLayout>     ); } export default Home; 4. configureStore.js import { createWrapper } from 'next-redux-wrapper'; import { applyMiddleware, compose, createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import reducer from '../reducers'; const configureStore = () => {     const middlewares = [];     const enhancer = process.env.NODE_ENV === 'production'         ? compose(applyMiddleware(...middlewares))         : composeWithDevTools(applyMiddleware(...middlewares));     const store = createStore(reducer, enhancer);     return store; }; const wrapper = createWrapper(configureStore, {     debug: process.env.NODE_ENV === 'development', }); export default wrapper; 5. post.js // [ initialState ] export const initialState = {     mainPosts: [{         id: 1,         User: {             id: 1,             nickname: 'jj',         },         content: '첫 번째 게시글 #해시태그 #익스프레스',         Images: [{             src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832',         }, {             src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832',         }, {             src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832',         }],         Comments: [{             User: {                 nickname: 'jj4',             },             content: 'redux를 학습 중입니다.',         }, {             User: {                 nickname: 'jj3',             },             content: '다음은 sage를 학습 예정임.',         }]     }],     imagePaths: [],     postAdded: false, }   const ADD_POST = 'ADD_POST'; export const addPost = {     type: ADD_POST, } const dummyPost = {     id: 2,     content: '더미데이터입니다.',     User: {         id: 1,         nickname: 'jj1',     },     Images: [],     Comments: [], };   const reducer = (state = initialState, action) => {     switch (action.type) {         case ADD_POST:             return {                 ...state,                 mainPosts: [dummyPost, ...state.mainPosts],                 postAdded: true,             };         default:             return state;     } }; export default reducer; 6. PostForm.js import React, { useCallback, useState, useRef } from 'react'; import { Form, Input, Button } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; import { addPost } from '../reducers/post'; const PostForm = () => {     const { imagePaths } = useSelector((state) => state.post);     const dispatch = useDispatch();     const imageInput = useRef();     const [text, setText] = useState('');     const onChangeText = useCallback((e) => {         setText(e.target.value);     }, []);     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' }} htmlFor="submit">짹짹</Button>             </div>             <div>                 {imagePaths.map((v) => (                     <div key={v} style={{ display: 'inline-block'}}>                         <img src={v} style={{ width: '200px' }} alt={v} />                         <div>                             <Button>제거</Button>                         </div>                     </div>                 ))}             </div>         </Form>     ) }; export default PostForm; 7. PostCard.js import React from 'react'; const PostCard = () => {     return (         <div>             PostCard         </div>     ); }; export default PostCard; 8. user.js import { HYDRATE } from 'next-redux-wrapper'; // initialState 부분 const initialState = {     user: {         isLoggedIn: false,         user: null,         signUpData: {},         loginData: {},     },     post: {         mainPosts: [],     } }; // [로그인] action creator export const loginAction = (data) => {     return {         type: 'LOG_IN',         data,     } }; // [로그아웃] action creator export const logoutAction = (data) => {     return {         type: 'LOG_OUT',     } }; // reducer const rootReducer = (state = initialState, action) => {     switch (action.type) {         case HYDRATE:             console.log('HYDRATE', action);             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;   다소 많은 양의 글 내용이지만, 시간이 허락되실 때 답변 주시면, 참 감사할 것 같습니다! 오늘 하루도 고생많으셨고, 이번 한 주도 파이팅입니다! 늘 양질의 강의 감사합니다 ^^  

  <질문1> Products.js에서 sequelize.define로 테이블 정의시 복수형태로 Products된다고 들었는데 models.Product.create도 Product 단수 형태로 테이블 이름에서 s를 빼주는건가요??? <질문2> result를 log찍어 봤을떄는 또 Product라고 나오고 위에는Products 테이블로 insert into 됐다고 나오는데테이블을 만들어주는건 models/products.js 에서하는건데 model.Product.create 이말은 사실 테이블 생성이아니라 데이터 삽입이라고 보면 될까요?   models.Product.create({     name,     description,     price,     seller,   })

안녕하세요?  Spring에서 NestJS로 전향하기 위해서 강의를 열심히 듣고 있습니다. nodejs나 nestjs를 공부하면서 express가 WAS인가 하는 궁금증이 들었습니다. Node.js는 Javascript의 런타임 이고, express라는 웹 프로엠워크 이용하여 Web Application 구동해준다 라고 생각을 합니다만 express를 was라고 생각해도 맞는 걸까요 ?

안녕하세요?  Spring에서 NestJS로 전향하기 위해서 강의를 열심히 듣고 있습니다. nodejs나 nestjs를 공부하면서 express가 WAS인가 하는 궁금증이 들었습니다. Node.js는 Javascript의 런타임 이고, express라는 웹 프로엠워크 이용하여 Web Application 구동해준다 라고 생각을 합니다만 express를 was라고 생각해도 맞는 걸까요 ?

10:00분에서 useEffect(() => {    if (!(me && me.id) {            Router.push('/');    } }, [me &&.id]); if (!me) {   return null; }; 이 코드를 if (!me) {   Router.push('/');   return null; }; 이렇게 코드 바꿔도 오류는 없던데 밑에 껄로해도 별 차이 없는건가요?

nuxtServerInit 호출에 대한 문제로 질문드립니다.개발 모드로 실행시엔 문제가 없는데 배포 모드로 실행시에 nuxtServerInit이 계속해서 페이지를 불러오는 현상이 발생합니다.찾아본 정보들을 적용해봐도 해결이 되지 않아 질문드리게 되었습니다.이 코드로 실행한 결과 이러한 로그를 남기게 되고, 메모리 점유율이 끝없이 상승합니다.제가 찾아본 바로는 남은 캐시에 의한 현상이거나 loadUser에서 return이 되지 않아 axios를 기다리지 않고 계속해서 화면을 그리게 된다고 하는데 return을 주게 되면 오히려 페이지가 로드 되지 않고, return을 주지 않은 현재의 코드로 실행시 페이지를 그려주는 것으로 확인되었습니다.또한 log로 찍은 것은 res.data로 받아온 것인데 정상 동작이라면 req.isAuthenticated에 걸려 401을 리턴해야 맞고,실제로 개발 모드에서도 401을 리턴합니다만 배포 모드에서만 저렇게 페이지 정보가 res.data에 저장됩니다.nuxtServerInit의 라이프 사이클 등등 자세한 정보를 둘러보는데도 제 지식으로는 해결이 되지 않아 질문드립니다. (배포 환경은 AWS 인스턴스에서 Nginx 로 실행하였습니다.)

안녕하세요 조현영 선생님 제가지금 해당 강의를 통해서 개인 프로젝트를 진행중인데 문제가 발생이 됬습니다. 클라이언트와 백엔드 다 우분트 환경에서 잘 작동해서 실제 배포한 ip주소로 들어가면 정상적으로 화면이 보여집니다.   클라이언트 서버:   다 작동이 잘 되고 회원가입 기능도 잘 작동해서 실제 해당http://13.125.96.64 쪽으로 요청을 하여 데이터베이스도 잘 생성이되고 됩니다. 근데 문제가 local로 성공적으로 로그인을하면 passport.js 쪽에서 serializeUser 한번 실행을하고   쿠키가 생겨야하는데 생기질 않습니다. 그리고 다시 메인 화면으로 돌아오면 LOAD_MY_INFO_REQUEST action으로 통해서 cookie 와 같이 서버로 전송을해서 deserializeUser도 실행이 되야하는데. deserializeUser도 실행이 안됩니다. 제 로컬에서는 모든게 다 잘 작동합니다.   로컬에서 프론트:   로그인 하면 잘 작동합니다.   로컬에서 백엔드 pm2 환경 보시면 쿠키도 잘 생성되고 passport.js 에서 deserializeUser 도 잘 작동되는게 보입니다.   하지만 배포한 ip에서는 쿠키도 생성이 되질않고 deserializeUser 도 작동하지 않습니다위 사진은 제가 로그인이 성공하고 다시 메인 페이지로 돌아온 화면입니다 성공적으로 로그인이 되도 쿠키는 여전히 생성되지 않았습니다. 위 사진은 제가 로그인이 성공하고 다시 메인 페이지로 돌아온 화면입니다 성공적으로 로그인이 되도 쿠키는 여전히 생성되지 않았습니다. 백엔드쪽 봐도serializeUser 으로 로그인이 성공하고 deserializeUser는 호출이 되질 않습니다.     back/app.js 소스코드입니다.   const express = require('express'); const PORT = 80; const app = express(); const cors = require('cors'); const effectRouter = require('./routers/effect'); const userRouter = require('./routers/user'); const effectsRouter = require('./routers/effects'); const db = require('./models'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const passport = require('passport'); const passportConfig = require('./passport'); const morgan = require('morgan'); const hpp = require('hpp'); const helmet = require('helmet'); db.sequelize .sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); dotenv.config(); app.use(cookieParser(process.env.EFFECTSHOP_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret:process.env.EFFECTSHOP_SECRET, }) ) if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); //보안에 도움되는 라이브러리 app.use(helmet()); }else{ app.use(morgan('dev')); } app.use(passport.initialize()); // 패스포트 설정 미들웨어에 추가. app.use(passport.session()); app.use(express.json()); app.use(express.urlencoded({extended: true})); app.use(cors({ origin:["http://localhost:3000","http://54.180.81.148"], credentials:true, })); app.get('/',(req,res)=>{ res.send('hello express'); }) app.use('/effects' ,effectsRouter); app.use('/effect',effectRouter); app.use('/user', userRouter); app.listen(PORT, ()=>{ console.log(`server on! at http://localhost:${PORT}`); });     더 자세한 코드를 보시길 원하신다면 여기에 제 소스코드를 올려 놓았습니다 ㅠㅠ 엄청난 고민끝에 여쭤봅니다 ㅜ 감사합니다. https://github.com/sungmin-choi/effectShopByHTML-CSS

안녕하세요 강사님 궁금하게 생겨 문의 드립니다.     다음 사진처럼 항상 파일을 클릭하면 상단 import줄이 저렇게 변하는데요 파일을 다시 닫으면 빨간줄이 사라집니다.   깃허브에 있는 tsconfig.json과 .eslintrc.js는 그대로 복붙했습니다. 제가놓친게있을까요?

안녕하세요 강사님 cats.module.ts 파일에서  import: [MongooseModule.forFeature([{ name: Cat.name, schema: CatSchema }]),이부분에서 빨갛게 해논부분에 왜 Cat.name , name이 붙어있는 이유가 뭔지 알고싶습니다. 저기서 name에 할당한 값으로 Service에서 생성자 주입 받을때? Cat.name 으로 @InjectModel(Cat.name) 하는걸로 보이는데 왜 ".name" 이 붙은건가요?..  

그랩마켓이라는 이미지 불러오기가 안되네요... 어떻게 해야될까요???

안녕하세요, 제로초님. 좋은강의 정말 감사드립니다. 강의를 듣다가 문득 궁금한 점이 생겼는데요. 저는 express에서 함수를 실행할 때 혹시 에러가 나서 서버가 다운되지 않게 왠만하면 거의 try catch로 묶는 편인데요. nest에서는 혹시모를 에러가 나서 서버가 다운되지 않게하는 방법이 어떤게 있을까요???

안녕하세요 zerocho 님 eslint 설정관련해서 질문이 있습니다.   eslint에서 env쪽에 node: true를 주시면서 node에서 사용하니까 주셨다고 하셨는데   next.js는 Browser환경에서 실행되지 않나요? server 코드가 따로 있는게 아닌 것 같아서요   혹시 이유를 알 수 있을까요?

강의 뒷부분에서 나온다고 댓글 확인했는데 아직 안나와서요.. height:100%는 어디다 적용되었는지 모르겠네요

  안녕하세요 강의 잘보고 있습니다! DB 관련해서 제가 몇가지 궁금한게 있는데 1.  예를 들어 하나의 테이블에서 다 대 다일때 즉 user 와 user에 다대다 일때  중간테이블 follow를 만들어주지 않고 한 User 테이블에 컬럼을 늘리는건 별로 안좋은 방식인가요? 예를 들어서 follow 테이블을 만들지 않고 User 테이블안에 팔로우, 팔로잉 수 컬럼을 넣는 방식   2. 다 대 다 관계일시 중간테이블 관련 다 대 다 관계일시 데이터베이스 이론적으로는 중간테이블을 만드는걸로 저도 배우긴 했는데 근데 이게 프로그래밍 관점에서 테이블을 너무 많이 늘리고 join이 많아질시 성능이 안좋다고 배웠던 기억이 있어서요 그래서 이게 실무에서도 다대다일시 중간테이블로 쪼개고 join을 자주 발생시키는지 궁금해요  로그인 같은경우에도 팔로우,잉,쓴글갯수를 유지하기 위해 로그인을 할때마다 post 테이블 follow 테이블 과의 3개의 테이블을 조인시켜서 select 하는 경우인데 과연 이런식의 3중조인을 로그인할때마다 해줘야 하는건가에 대한 생각 꼭 조인을 이렇게 많이해야 저 데이터를 가지고 올 수있나에 대한 DB설계에 대한 생각이 공존합니다. 아니면 제가 너무 오버하는 것일지 문제가 되지 않는 것인지... 그래서 실제로도 실무에서도 이런식으로 중간테이블과 db설계관련 또한 그걸로 인한 많은 join 관련해서 궁금하네요  ++ 제가 이런 생각이 든 이유가 게시판을 만들때 게시물 상세 페이지에 파일갯수랑, 댓글 갯수를 게시물 리스트에 명시해주는 로직을 짜다가  join 몇번해서 select 해서 가져와보자 했는데..  다른분께서 이유는 말안하셨지만 join 그렇게 하지말라고 하셨거든요 그래서 그래서 게시물 DB에 갯수에 대한 컬럼을 늘려서  게시물 상세페이지 작성시 댓글, 파일 insert 할때 게시물 db에 갯수counting 해서 insert 하고 조인 없이 list 뿌려지는 형태로 바꿨거든요 그게 생각이나서요(insert 시 다른 db에는 count+1 insert 한 동작에 각 테이블의 2번의 insert 작업) 3. db 생성시 post.js user.js -> 실 테이블 posts, users 뒤에 s가 붙는데 이건 왜 붙는건 가요?   제가 실무 경험이 없어서 꼭 알고 싶은 포인트입니다.. ** 질문이 많은데 읽어주셔서 감사합니다.

제가 하는 방식은 잘못된 건가요? 2번의 답을 구하려해도 안나오더라구요..   let 농구공={ 이름:'~~~' 가격:'~~~~' 설명:'~~~'} 이런식으로 세개의 객체를 정한 뒤   let 상품들=["농구공","배드민턴채","탁구채"]로 배열을 묶는건 잘못된 방식인가요?!   아니라면 2번정답을 알 방법좀 알려주세요!!  

https://github.com/dlwogns312/boilerplate-movie fetch를 추가하고 그 다음으로 나아가지지 않습니다 . 계속 오류가 뜹니다.× Unhandled Rejection (TypeError): Failed to fetch 이런식으로 오류가 뜨는데 어떡해야하나요

multer를 사용해서 하나의 파일만 받는 메소드인 upload를 사용하고 그 안에서 req, res, err 를 받아서 console.log(res.req.file)을 코딩하실 때, 설명으로는 upload의 응답인 res에 ImageUpload.js의 요청인 req라고 설명주시면서 res.req.file를 코딩하셨는데 req.file로 ImageUpload.js의 요청을 받아오는 것까지는 이해가 되었으나, res.req.file을 코딩하시는 것은 이해가 잘되지 않았습니다. 조금 더 추가적인 설명 부탁드립니다.

안녕하세요. 먼저 이런 좋은 강의를 듣게 해주셔서 감사합니다.     질문) pages/index.js 와 components/UserProfile.js 에서 state값이 다른 이유가 궁금해서 질문드립니다.       아래 사진 순서) pages/index.js components/UserProfile.js 콘솔창

전 강좌에서 캐루셀 설정후에 npm run dev를 통하여 확인해보려 하는데  ready - started server on 0.0.0.0:3060, url: http://localhost:3060 Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.5, but autoprefixer uses 6.0.23. Perhaps this is the source of the error below. error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/antd/dist/antd.css BrowserslistError: Unknown browser query `dead`     at Array.reduce (<anonymous>) 이러한 에러가 뜹니다 ㅜ 구글링해서 계속 찾아보고있는 중인데 도대체 무슨이유인지 모르겠습니다 ㅜㅜㅜ 부탁으려요

안녕하세요~ 글 작성시 UserID가 DB에 저장안되는 이슈가 있어서 질문드립니다.   게시글을 작성 후에 TypeError: Cannot read properties of null (reading 'nickname') 에러가 납니다.   지금까지 해본 것 1. 다른 답글에 적어주신 내용처럼 router/post.js 쪽에서 req.user.id를 확인해보았습니다.     위에 사진처럼 작성자의 아이디가 나왔습니다.   2. MySQL의 DB에 보니까 UserId가 올라오고 있지 않습니다. 3. res.send로 받은 result를 console.log를 찍어보니까 UserId가 없었습니다. 4. MySQL 에 UserId를 직접 입력 (1) 해보니까 에러 없이 잘 나왔습니다.   제 생각에는 Model에서 에러가 발생한 것 같습니다.   깃허브에 올려주신 것을 보니까 5버전에 클래스로 하신 코드이신데 강의에서는 위와 같이 사용중이라서 참고를 해보았으나 DB 등록시 UserId가 입력이 안되는 것 같습니다.알려주신대로 기능 추가시 흐름을 정리해서 보면서 생각해보니까 여기까지는 에러가 왜 낫는지 알겠는데 몇시간을 고민해도 버그가 수정이 안되서 송구스러운 마음을 가지고 질문드립니다.       깃허브 주소 : https://github.com/hyunjoogo/react-nodebird